Innhold
- 01. Starter prosjektet
- 02. Importer det første bildet
- 03. Plasser hytta
- 04. Ta med logoen
- 05. Legg til en sirkel
- 06. Omorganiser grafikken
- 07. Slipp mikrofonen
- 08. Tekstmelding
- 09. Bli med i en gruppe
- 10. Gruppere logoen
- 11. Ekstra elementer
- 12. Ulike import
- 13. Legg til en etikett
- 14. Dupliser gruppen
- 15. Gi nytt navn og kopier deretter på nytt
- 16. Teksttittel
- 17. Endring av opasitet
- 18. Dupliser skjermen
- 19. Flytt bakgrunnen
- 20. Nye elementer dukker opp
- 21. Fullfør bak-knappen
- 22. Stemmekommando
- 23. Test prototypen
- 24. Går tilbake
- 25. Talebekreftelse
- 26. Skalering av bildet
- 27. Nye skjermelementer
- 28. Opprett en knapp
- 29. Gå til prototypemodus
- 30. Animasjonsinnstillinger
- 31. Koble opp bak-knappen
- 32. Auto-animer
- 33. Lagre prosjektet
- 34. Deling av prosjektet
- 35. Publiser prototype
- 36. Videoversjon
I moderne web- og app-design er det ofte tider når interaksjonen ikke åpner en helt ny side eller skjerm. Den moderne tilnærmingen til å skape interaktivt innhold krever overganger mellom designgrensesnittelementer slik at brukeren blir overrasket og imponert av opplevelsen av å endre innhold. Alt dette skjer på samme skjerm eller side, uten oppdatering. Det kan ta tid å utforme slike interaksjoner og avgrense dem til å fungere ordentlig, men det er verdt å gjøre før du skriver koden.
Dette er hva Adobe XD har brukt de siste månedene med utvikling på å få rett. Opprett innhold i en tilstand på en skjerm, flytt innholdet til den nye tilstanden på den nye skjermen, og velg alternativet 'Auto-animer' for å overføre. Alt innholdet som er likt på begge skjermene animeres automatisk fra en posisjon til en annen. Hvis du ikke vil at alt innholdet skal være synlig på begge skjermene, må du gjøre innholdet usynlig på den første, så overgår det på plass.
Finn ut om annen Adobe-programvare som Adobe Dimension.
- 8 viktige prototyping og bygge verktøy
Her viser vi deg hvordan du lager en app-prototype som gjør nettopp dette (hvis du vil ha mer informasjon om hvordan du oppretter en app-opplæring, kan du se vår oversikt over de beste). Og utover det, en ny funksjon i XD gjør det mulig for brukeren å kontrollere interaksjoner med stemmen sin. Vi vil utforske dette som en designfunksjon og hvordan appen også kan snakke tilbake til brukeren, noe som kan gi noen interessante designmuligheter.
Last ned prosjektfilene for denne opplæringen.
01. Starter prosjektet
Hvis du ikke har Adobe XD, kan du laste ned og installere det her. Når installasjonen er fullført, åpner du programvaren, og velkomstskjermen lar deg velge skjermstørrelse du vil laste ned for. I dette tilfellet velger du iPhone 6/7/8, da det er riktig størrelse for dette prosjektet, men du vil se at det er en rekke størrelser tilgjengelig.
02. Importer det første bildet
Det er forskjellige måter å importere bilder på, men i første omgang går du til Fil> Importer. Velg 'eiendomsmappen' fra prosjektfilene, og det første bildet som skal importeres, blir 'sky.png'. Plasser den på toppen av skjermen og flytt den bare noen få piksler nedover.
03. Plasser hytta
Det neste bildet for designet blir 'cabin.png'. Bare importer dette på samme måte som du gjorde i forrige trinn, og plasser det for å fylle skjermen. Til slutt importerer du bildet 'trees.png' og plasserer det nederst på skjermen med trærne over innsjøen.
04. Ta med logoen
Årsaken til at bildene er separate lag, er at når det blir opprettet en overgang mellom skjermene, kan de bevege seg hver for seg. Gå til Fil-menyen og velg Importer. Denne gangen velger du 'logo.ai', som er et vektorbilde. Plasser dette bildet øverst i midten av skjermen.
05. Legg til en sirkel
Velg sirkelverktøyet og tegn en sirkel som er litt større enn logoen. Fjern egenskapet i Egenskaper-panelet til høyre og gjør bakgrunnen svart. Velg Uskarphet i bakgrunnen og reduser lysstyrken til -30 slik at sirkelen fortsatt er svart.
06. Omorganiser grafikken
Nå må sirkelen bevege seg bak logoen. Velg Objekt> Ordne og send bakover. Som i andre Adobe-produkter er det også Cmd / Ctrl + [ for å flytte grafikk bakover i lagrekkefølgen. Ved å bruke høyre firkantede brakett vil det i mellomtiden føre 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 fyllet slik at det fjernes. Gjør deretter strekningen hvit og to piksler bred. Plasser det rundt mikrofonbildet.
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 Condensed Black. Nederst til venstre på skjermen klikker du på Assets-panelikonet for å åpne det. Når teksten er valgt på skjermen, klikker du på '+' ikonet ved siden av 'Tegnstiler' for å lagre dette formatet for teksten.
09. Bli med i en gruppe
Velg Lagpanelikonet nederst til venstre på skjermen. På skjermen velger du søketeksten og Skift-klikk for å legge til sirkelen og mikrofonikonet. Gå til Objekt og velg Gruppe. I Lag-panelet kan du endre navn på denne gruppen 'Søk'. Det er nyttig å navngi grupper, spesielt når du animerer disse.
10. Gruppere logoen
Akkurat som i det siste trinnet, velg logoen og den uskarpe sirkelen rundt den, og grupper dem deretter. I Lag-panelet kan du gi nytt navn til hele gruppens logo slik at den lett 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 komplett, er det fortsatt flere designelementer som må legges til. Slik skapes animasjon ved å endre elementenes plassering mellom skjermene. Gå til rektangelverktøyet og hold nede Skifte for å legge til et kvadrat på skjermen, slik at kanten blir hvit.
12. Ulike import
Åpne nå mappen for eiendelene gjennom operativsystemet ditt. Velg 'cabin1.png' -bildet og dra dette direkte til torget du opprettet i forrige trinn. Det blir automatisk maskert inne i dette. Dobbeltklikk for å redigere posisjonen til bildet og sørge for at hytta er synlig på torget.
13. Legg til en etikett
Bruk tekstverktøyet til å legge til etiketten 'Forest Cabin' under teksten og bruke Assets-panelet til å style teksten i den lagrede stilen fra trinn 8. Velg bildet og etiketten og gruppere dem sammen. Navngi gruppens venstre hytte i lagpanelet.
14. Dupliser gruppen
Normalt er å gjenta et grensesnittelement den perfekte jobben for 'Repeat Grid' verktøyet. Dette vil imidlertid trenge spesifikk animasjon, som ikke fungerer med Repeat Grid. Velg bilde- og tekstgruppen, kopier og lim inn den slik at den sitter ved siden av originalen, og legg til bildet 'cabin2.png' i stedet.
15. Gi nytt navn og kopier deretter på nytt
Endre teksten til 'Snow Cabin', og i lagpanelet kaller du denne 'right cabin'. Velg både venstre og høyre hytte og dupliser dem, plasser duplikatene nedenfor og oppdater teksten og bildene med ‘cabin3.png’ og ‘cabin4.png’. Grupper begge disse sammen og navngi gruppens nedre hytte.
16. Teksttittel
Legg til tekst på siden med teksten 'Søkeresultater for hytter'. Gi dette Rockwell-skrifttypen og lagre dette i Character Styles i Assets-panelet. Plasser nå gruppen 'nedre hytte' helt nederst på skjermen og ta utseendet ned til null slik at det er usynlig på denne skjermen.
17. Endring av opasitet
Velg nå venstre og høyre hytte, flytt dem til bunnen av skjermen og ta glidebryteren til null. Gjenta igjen for søketeksten. Når vi flytter til en annen skjerm, vil disse animere til deres nye posisjoner. I Layer-panelet, flytt 'venstre hytte' over alle de andre hyttegruppene.
18. Dupliser skjermen
Velg tegnebrettet ved å klikke på navnet, dobbeltklikk deretter på tegnebrettet og endre navnet til 'hjem'. Kopier og lim inn tavlen, og gi den navnet 'søk'. Velg nå logoen, og flytt den opp til nesten utenfor skjermen, og reduser deretter utseendet til null.
19. Flytt bakgrunnen
Velg himmelbildet og dytt det litt opp på skjermen. Velg hyttebildet og flytt det opp til hytta er øverst på skjermen. Klikk deretter på trærbildet og flytt det over hytta. Til slutt velger du søk-gruppen og reduserer utseendet til null.
20. Nye elementer dukker opp
Velg søkeresultatene i Layer-panelet og få utseendet til 100. Flytt det opp på skjermen. Gjenta dette for venstre hytte, høyre hytte og nedre hytte. Bruk penneverktøyet til å tegne en enkel tilbakeknapp og legg til en sirkel rundt den. Gjør bakgrunnen uskarp og ta lysstyrken på den ned til -30.
21. Fullfør bak-knappen
Velg bakpilen og sirkelen, grupper dem sammen og navngi dem ’tilbake-knapp’ i lagpanelet. Bytt til 'Prototype' -modus ved å trykke 'Prototype' øverst til venstre i XD-grensesnittet. Velg startskjermen, dra den blå pilen til søkeskjermen, og et popup-panel vises.
22. Stemmekommando
Endre utløseren til stemme og skriv inn ordet 'søk' som stemmekommando for å kontrollere dette. Endre handlingen til automatisk animering og lettelse å feste. Gjør varigheten 1,5 sek. I søkeskjermen klikker du på tilbake-knappen og drar den blå pilen tilbake til startsiden. Bare endre utløseren til trykk.
23. Test prototypen
Øverst til høyre i XD-grensesnittet er det en avspillingsknapp. Klikk på dette, og en fungerende prototype vil nå dukke opp på skjermen. På hjemmesiden må du holde mellomromstasten nede mens du snakker talekommandoen 'søk'. Når du slipper mellomromstasten, tar den deg til neste skjermbilde og animerer det grafiske grensesnittet på plass.
24. Går tilbake
Når overgangen har kjørt, kan du trykke på tilbake-knappen for å komme tilbake til startskjermen. Lukk prototypen og klikk på søkeskjermen, og klikk deretter på den blå pilen til høyre (ikke dra). Endre utløseren til tid, gjør forsinkelsen 0s og sett handlingen til taleavspilling. Lag talen søkeresultater for tilgjengelige hytter.
25. Talebekreftelse
Test dette nå med avspillingsknappen for å høre en stemmebekreftelse av søket. Lukk prototypen når du har prøvd dette. En annen skjerm skal opprettes, så la oss klikke tilbake på 'Design' -visningen øverst til venstre i XD-grensesnittet. Klikk på søkeskjermen ved å klikke på navnet, og deretter kopiere og lime det inn.
26. Skalering av bildet
Gi nytt navn til den nye skjermen 'hytte'. Dobbeltklikk bildet for laget til venstre hytte. Endre størrelsen på hjørnehåndtakene slik at den fyller skjermen, og plasser deretter bildet på innsiden slik at det dekker skjermen. Klikk på søkeresultatteksten og ta utseendet ned til null for å fjerne det fra visningen.
27. Nye skjermelementer
Dobbeltklikk på teksten ”Forest Cabin” da den er en del av gruppen. Forstør tekststørrelsen til 26 piksler, og flytt den litt opp på skjermen. Legg til tekst på skjermen i Helvetica Neue Medium med en størrelse på 14 piksler, og sett den til hvit 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 i designet. Dra i hjørnehåndtakene for å gi denne formen runde hjørner. Legg til ordet 'Reserve' til dette ved hjelp av den lagrede tegnstilen i Assets-panelet for Helvetica Neue i kondensert fet skrift.
29. Gå til prototypemodus
Alle designelementene er på plass nå for hele designen av appen. Gå til 'Prototype' -modus ved å klikke på ordet 'Prototype' øverst til venstre. I søkeskjermen klikker du på ”skoghytte” -gruppen i bildet og teksten. Dra det blå håndtaket fra dette til 'hytteskjermen'.
30. Animasjonsinnstillinger
I popup-panelet for overgangen mellom skjermbilder velger du Trykk som utløser og gjør deretter Handling automatisk animering. Fortsett å lette som snap, men reduser varigheten til 0,6 sek. Dette sørger for at animasjonen ikke drar - bevegelsen av den første skjermen til den andre skjermen hadde mye bevegelse som krevde en lengre overgang.
31. Koble opp bak-knappen
Nå velger du tilbake-knappen fra det siste skjermbildet og drar den blå pilen fra denne tilbake til søk-skjermen. Alle innstillingene fra forrige overgang skal huskes. Du er nå klar til å teste dette ved å klikke på avspillingsknappen.
32. Auto-animer
Det du vil se med automatisk animering nå, er at bildet utvides for å fylle skjermen, og elementene som ikke lenger er behov for 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 animasjonen som fungerer på tvers av tre skjermer.
33. Lagre prosjektet
Som standard skal prosjektet automatisk lagres i Creative Cloud, men det er lurt å lagre en kopi på din egen harddisk i tilfelle det er noen problemer. Klikk på Fil> Lagre, endre plasseringen til din egen datamaskin og gi prosjektet et passende navn.
34. Deling av prosjektet
Hele poenget med prototyping er å teste prosjektet på andre mennesker. Heldigvis er det en delingsknapp øverst til høyre i XD-grensesnittet som gjør dette til en lek. Klikk på deleknappen, og velg alternativet Del for gjennomgang i rullegardinmenyen som vises.
35. Publiser prototype
I det neste skjermbildet blir du fortalt at støtte for automatisk animering ennå ikke er tilgjengelig for nettet, men den kommer snart. Klikk på Opprett offentlig lenke, og klikk deretter på lenken øverst til høyre for å besøke den offentlige lenken i en nettleser. Du må holde mellomromstasten nede for å bruke stemmekommandoen med prototypen.
36. Videoversjon
En annen prototype kan deles ved å registrere grensesnittet i aksjon. Klikk på deleknappen 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 kreativt webdesignmagasin Webdesigner. Kjøp utgave 285 her eller abonner på Web Designer her.
