Bygg prototyper med Adobe XD

I moderne web- og appdesign er det ofte ganger når samspillet ikke åpner en helt ny side eller skjerm. Den moderne tilnærmingen til å skape interaktivt innhold krever overganger mellom designgrensesnittelementer slik at brukeren er overrasket og wowed av opplevelsen av å endre innhold. Alt dette skjer på samme skjerm eller side, uten forfriskning. Designer disse typer interaksjoner og raffinering av dem til å fungere ordentlig kan ta tid, men det er verdt å gjøre før du skriver koden din.

Dette er hva Adobe XD har brukt de siste månedene av utviklingen å få rett. Lag innhold i en tilstand på en skjerm, flytt det innholdet til den nye tilstanden på den nye skjermen, og velg bare alternativet "Auto-animate" til overgang. Alt innholdet som er det samme på begge skjermene, animerer automatisk fra en posisjon til en annen. Hvis du ikke vil at alt innholdet synlig på begge skjermene, gjør innholdet usynlig på den første, og det vil overgå til plass.

Finn ut om andre Adobe-programvare som Adobe Dimension. .

• 8 Essential prototyping og bygge verktøy

Her viser vi deg hvordan du lager en App Prototype som bare gjør dette (for mer Slik lager du en app Tutorials, sjekk ut våre rundown av de beste). Og går utover det, gjør det mulig for en ny funksjon i XD brukeren å kontrollere interaksjoner med stemmen deres. Vi vil utforske dette som en designfunksjon, og hvordan appen kan snakke tilbake til brukeren, som også kan gi noen interessante designmuligheter.

Last ned prosjektfilene for denne opplæringen.

01. Starte prosjektet

Hvis du ikke har Adobe XD, kan du laste ned og installere den her . Når installasjonen er fullført, åpner du programvaren og velkomstskjermen, gjør at du kan velge en skjermstørrelse for å laste ned for. I dette tilfellet velg iPhone 6/7/8, som det er riktig størrelse for dette prosjektet, men du vil se at det finnes en rekke størrelser som er tilgjengelige.

02. Importer det første bildet

Det er forskjellige måter å importere bilder på, men i denne første instansen går du til File & GT; Import. Velg mappen "Eiendeler" fra prosjektfilene, og det første bildet som skal importeres, vil være "sky.png". Plasser den på toppen av skjermen og flytt det til et bare par piksler ned.

03. Legg hytta

Det neste bildet for designet vil være "cabin.png". Bare importer dette på samme måte som du gjorde i forrige trinn og deretter plassere den for å fylle skjermen. Til slutt importer bildet 'Trees.png' og plasser den på bunnen av skjermen med trærne over innsjøen.

04. Ta med logoen

Grunnen til at bildene er separate lag, er at når en overgang er opprettet mellom skjermer, kan de bevege seg separat. Gå til Fil-menyen og velg Importer. Denne gangen velger du 'logo.ai', som er et vektorbilde. Plasser dette bildet i toppsenteret på skjermen.

05. Legg til en sirkel

Velg sirkelverktøyet og tegne en sirkel bare litt større enn logoen. I egenskapspanelet til høyre, fjern slaget og gjør bakgrunnen svart. Velg Bakgrunnsskarp og redusere lysstyrken til -30 slik at sirkelen fortsatt er svart.

06. Omorganiser grafikken

Nå må sirkelen bevege seg bak logoen. Velg Object & GT; Ordne og send bakover. Som i andre Adobe-produkter, er det også CMD / CTRL + [ å flytte noen grafisk bakover i lagregulatoren. Ved hjelp av den rette firkantede braketten, vil i mellomtiden få et objekt fremover i rekkefølgen.

07. Slipp mikrofonen

Importer nå 'MIC.AI' -bildet og endre størrelsen på bildet for å være relativt lite. Plasser dette nederst på skjermen. Tegn en sirkel rundt dette og fjern merket for fyllingen slik at den er fjernet. Deretter gjør strekkhvite og to piksler bredt. Plasser det rundt "Mic" -bildet.

08. Tekstmelding

Bruk tekstverktøyet til å legge til ordene "Snakk for å søke" under mikrofonen. Gjør teksten hvit og endre den til Helvetica Neue kondensert svart. På bunnen til venstre på skjermen klikker du på ikonet Eiendeler Panel for å åpne den. Med teksten som er valgt på skjermen, klikker du på '+' -ikonet ved siden av 'Character Styles' for å lagre dette formatet for teksten.

09. Bli med i en gruppe

Velg Lagpanelikonet nederst til venstre på skjermen. På skjermen velger du "Søk" -teksten og Skift-klikk å legge til sirkelen og mikrofonikonet. Gå til objekt og velg Gruppe. I lagspanelet omdøpe denne gruppenes søk '. Det er nyttig å nevne grupper, spesielt når de animerer disse.

10. Grupper logoen

Akkurat som i det siste trinnet, velg logoen og den uskarpe sirkelen rundt den, og deretter gruppere dem sammen. I lagspanelet, omdøpe hele gruppen 'Logo' slik at den enkelt kan identifiseres hvis du trenger å redigere dette igjen senere. For øyeblikket er designen for den første skjermen fullført.

11. Ekstra elementer

Selv om den første skjermen er fullført, er det fortsatt flere designelementer som må legges til. Dette er hvordan animasjon er opprettet ved å endre elementene "posisjonering mellom skjermer. Gå til rektangelverktøyet og hold nede Skifte For å legge til en firkant på skjermen, gjør grensen hvit.

12. Ulike import

Åpne nå mappen for eiendelene gjennom operativsystemet. Velg "Cabin1.png" -bildet og dra dette direkte på torget du opprettet i forrige trinn. Det blir automatisk maskert inne i dette. Dobbeltklikk for å redigere bildet på bildet og sørg for at hytta er synlig på torget.

13. Legg til en etikett

Ved hjelp av tekstverktøyet, legg til etiketten 'Forest Cabin' under teksten, og bruk EIENTS-panelet til å style teksten i den lagrede stilen fra trinn 8. Velg bildet og etiketten og gruppere dem sammen. Navngi gruppen 'Left Cabin' i Lag-panelet.

14. Dupliserer gruppen

Normalt gjentas et grensesnittelement er den perfekte jobben for verktøyet "Repeat Grid". Dette kommer imidlertid til å trenge spesifikk animasjon, som ikke virker med gjentatt rutenett. Velg bilde- og tekstgruppen, og kopier deretter og lim den inn, slik at den sitter ved siden av originalen, og legger til bildet 'Cabin2.png' i stedet.

15. Gi nytt navn til og kopier deretter igjen

Endre teksten til 'Snow Cabin', og i lagspanelet heter denne "høyre hytte". Velg både venstre og høyre hytte og duplikat dem, plasser duplikatene nedenfor og oppdater deres tekst og bilder med 'CABIN3.PNG' og 'CABIN4.PNG'. Gruppe begge disse sammen og nevne gruppenes nedre hytte.

16. Teksttittel

Legg til tekst på siden med tekstenes søkeresultater for hytter. Gi dette Rockwell Typeface og lagre dette til tegnstilene i Eiendomspanelet. Plasser nå "Lower Cabin" -gruppen rett nederst på skjermen, og ta utseendet ned til null, slik at det er usynlig på denne skjermen.

17. Endring av opacitet

Velg nå til venstre og høyre hytter, flytt dem til bunnen av skjermen og ta utseendet til glidebryteren til null. Gjenta igjen for søketeksten. Når vi flytter til en annen skjerm, vil disse alle animere til sine nye stillinger. I lagspanelet, flytt "venstre hytta" over alle de andre kabingruppene.

18. Dupliser skjermen

Velg Artavle ved å klikke på navnet, og dobbeltklikk deretter på artbordet og endre navnet til "Hjem". Kopier og lim inn torden og omdøpe det 'Søk'. Velg nå logoen og flytt den opp til nesten av skjermen, og reduser deretter utseendet til null.

19. Flytt bakgrunnen

Velg Sky-bildet og nudge det litt på skjermen. Velg hyttabildet og flytt det til hytta er øverst på skjermen. Deretter klikker du på trærbildet og flytt det over hytta. Til slutt velger du "Søk" -gruppen og reduser utseendet ned til null.

20. Nye elementer vises

Velg søkeresultatene i lagspanelet og ta med utseendet opp til 100. Flytt den opp på skjermen. Gjenta dette for venstre hytte, høyre hytte og nedre hytte. Bruk pennverktøyet til å tegne en enkel tilbakeknapp og legge til en sirkel rundt den. Gjør bakgrunnen uskarphet og ta lysstyrken på den ned til -30.

21. Fullfør tilbakeknappen

Velg bakpilen og sirkel, gruppere dem sammen og nev dem 'Back-knappen' i lagpanelet. Bytt til 'Prototype' -modus ved å trykke på 'Prototype' øverst til venstre på XD-grensesnittet. Velg hjemmeskjermen, dra den blå pilen til søkeskjermen, og et popup-panel vises.

22. Voice Command.

Endre utløseren til å stemme og skriv ordet 'Søk' som talekommandoen for å kontrollere dette. Endre handlingen til Auto-Animate og lett å klappe. Gjør varigheten 1,5s. På søkeskjermen klikker du på Back-knappen og dra den blå pilen tilbake til "Hjem" -skjermbildet. Bare endre utløseren for å trykke på.

23. Test prototypen

Over øverst til høyre på XD-grensesnittet er en avspillingsknapp. Klikk på dette og en fungerende prototype vil nå dukke opp på skjermen. På hjemmesiden må du holde nede mellomromstasten mens du snakker talekommandoen 'Søk'. Når du slipper på mellomromstasten, tar det deg til neste skjerm og animere det grafiske grensesnittet på plass.

24. går tilbake

Når overgangen har kjørt, kan du trykke på tilbakeknappen for å komme tilbake til hjemmeskjermen. Lukk prototypen og klikk på Søk-skjermen, og klikk deretter på den blå pilen til høyre (ikke dra). Endre utløseren til tid, gjør forsinkelsen 0s og sett tiltaket til taleavspilling. Gjør talesultatet for tilgjengelige hytter.

25. Talebekreftelse

Test dette nå med PLAY-knappen for å høre en stemmebekreftelse av søket. Lukk prototypen når du har prøvd dette ut. En annen skjerm skal bli opprettet, så la oss klikke tilbake på "Design" -visningen øverst til venstre på XD-grensesnittet. Klikk på Søk-skjermen ved å klikke på navnet, og deretter kopiere og lime det inn.

26. Skalere bildet

Gi nytt navn til den nye skjermen 'Cabin'. Dobbeltklikk på bildet for "venstre hytte" lag. Endre størrelsen på hjørnehåndtakene slik at det fylles på skjermen, og deretter plasser bildet inni, slik at det dekker den skjermen. Klikk på søkeresultatseksten og ta utstillingen ned til null for å fjerne den fra visningen.

27. Nye skjermelementer

Dobbeltklikk på 'Forest Cabin' -teksten som den er en del av gruppen. Forstørre tekststørrelsen til 26 piksler og flytt det litt på skjermen. Legg til tekst på skjermen i Helvetica Neue Medium på 14 piksler størrelse og sett den til hvitt for å skille seg ut mot bakgrunnen. Legg til en hvit linje med linjeverktøyet under overskriften.

28. Opprett en knapp

Bruk rektangelverktøyet til å tegne et rektangel på skjermen nederst på designet. Dra i hjørnehåndtakene for å gi denne formen rundt hjørner. Legg ordet 'Reserve' til dette, ved hjelp av den lagrede tegnestilen i Eiendomspanelet for Helvetica Neue i kondensert fet skrift.

29. Flytt til prototypemodus

Alle designelementene er på plass nå for hele utformingen av appen. Flytt til "Prototype" -modus ved å klikke på Word 'Prototype' øverst til venstre. På søkeskjermen klikker du på "Forest Cabin" -gruppen på bildet og teksten. Dra det blå håndtaket fra dette til 'Cabin' -skjermbildet.

30. Animasjonsinnstillinger

I popup-panelet for overgangen mellom skjermene, velg Trykk på som avtrekkeren, og gjør deretter AUTO-animate. Fortsett å lette som snap, men reduser varigheten på dette til 0,6s. Dette sikrer at animasjonen ikke drar - bevegelsen av den første skjermen til den andre skjermen hadde mye bevegelse som krevde en lengre overgang.

31. Koble til tilbakeknappen

Velg nå Tilbake-knappen fra den endelige skjermen og dra den blå pilen fra dette tilbake til "Søk" -skjermbildet. Alle innstillingene fra den forrige overgangen skal huskes. Du er nå klar til å gå videre og teste dette ved å klikke på avspillingsknappen.

32. Auto-animate

Det du vil se med auto-animatet, er nå at bildet utvides for å fylle skjermen, og elementene som ikke lenger er nødvendige, vil falme bort mens den nye teksten vil falme inn. Det motsatte skjer når du går tilbake. Dette gir en god måte å se den automatiske animere arbeid på tre skjermer.

33. Lagre prosjektet

Som standard skal prosjektet automatisk lagre i Creative Cloud, men det er en god ide å lagre en kopi til din egen harddisk i tilfelle det er noen problemer. Klikk på File & GT; Lagre, endre plasseringen til din egen datamaskin og navngi prosjektet med et passende navn.

34. Deling av prosjektet

Hele poenget med prototyping er å teste prosjektet på andre mennesker. Heldigvis er det en delknapp øverst til høyre på XD-grensesnittet som gjør dette til en bris. Klikk på Del-knappen, og i rullegardinmenyen som vises, velger du alternativet Del for gjennomgang.

35. Publiser prototype

På neste skjerm blir du fortalt at auto-animelt støtte ikke er tilgjengelig for nettet, men det kommer snart. Klikk på Opprett offentlig lenke, og klikk deretter på linken øverst til høyre for å besøke den offentlige lenken i en nettleser. Du må holde mellomromstasten ned for å bruke talekommandoen med prototypen.

36. Video versjon

En annen prototype kan deles ved å registrere grensesnittet i aksjon. Klikk på Del-knappen og velg Ta opp video. Dette åpner et vindu, og når du lukker dette, blir du bedt om å lagre et opptak av skjermen som en MP4-fil, som også er en nyttig måte å dele prototypen på.

Denne artikkelen ble opprinnelig publisert i utgave 285 av Creative Web Design Magazine Webdesigner . Kjøp problem 285 her eller Abonner på webdesigner her .

Relaterte artikler:

• Mobil App Design: En nybegynner guide
• Hvordan lage en app med vue.js
• Få tak i med mobilapp på bordet