Slik prototypere en mobilapp med Adobe XD

Sep 13, 2025

hvordan

[1. 3]

Denne opplæringen, som viser deg hvordan du lager en mobilapp prototype i Adobe XD, ble satt sammen med Adobe XD CC (2017 beta) i 2016. The. Nylig lansert Adobe XD CC Har hatt noen få tweaks, noe som gjør det enda enklere å bruke.

Få en 15% rabatt på Adobe Creative Cloud her

Hvis du er en designer som lager brukeropplevelser for mobilapper eller nettsteder, kan du brukes til å bruke flere verktøy for ulike oppgaver når prototyping .

Du starter med forskning. Deretter skisserer du ideer på penn og papir, og senere overfører dine tanker til et designverktøy. For å komme opp med den beste strømmen, eksporterer du alle dine eiendeler og bringer dem inn i et annet verktøy for å bygge en prototype. Derfra deler du eller tester prototypen din, samler tilbakemelding, og går tilbake til midten av syklusen til Itere, og bytter fra verktøyet til verktøyet når du forfiner designet ditt.

Flere designverktøy hver håndterer en annen del av problemet. Men i stedet for å gjøre livet ditt som en designer enklere, reduserer bytting mellom alle disse verktøyene bare tempoet ditt.

Hva om det var et enkelt verktøy som betydde at du kunne nyte en fullt tilkoblet arbeidsflyt? Hvor kan du designe og prototype dine erfaringer på få minutter, dele dem på nettet for å fange tilbakemelding, og gjør det enkelt å redigere uten å bryte deg? Målet med Adobe Experience Design CC - eller, som vi kaller det, var Adobe XD - bare det.

I denne opplæringen viser vi deg de viktigste områdene i Adobe XD ved å designe, prototypende og dele en enkel "møte teamet" mobilapp.

Vi lager en innholdsside som viser produktmedlemmene, og brukerne vil kunne klikke på de enkelte oppføringene som skal tas til en mer grundig biogside. Du lærer å lage høyfidere design, prototype og dele dem for å samle tilbakemelding.

Se videoen ovenfor og følg de skriftlige trinnene nedenfor for å lære hvordan du prototype med Adobe XD. Ikke bare vil vi vise deg hvordan du gjør det, vi vil også vise deg hvordan du tester det, ta opp en forhåndsvisningsvideo av den i handling, og hvordan du deler og eksporterer den.

Merk at noen prosesser kanskje har endret seg litt i den nyere versjonen av Adobe XD.

01. Installer Adobe XD og start et nytt design

Start your design by selecting the iPhone artboard from your template options — Start designet ditt ved å velge iPhone-artbordet fra malingsalternativene dine

Først må du sørge for at Adobe XD er installert på datamaskinen din . Start det, ta en titt på velkomstskjermbildet og start et nytt design med en iPhone-artjermmal.

02. Lag et annet art

Bruk ArtBoard Tool ( EN ) For å opprette et andre artjerde, endrer du titlene (ved å dobbeltklikke på dem) til 'iPhone - Team Page' og 'iPhone - Detaljsiden'. Endre både ArtBoards 'bakgrunnsfarger til svart ved hjelp av eiendomsinspektøren til høyre. Med Select Tool ( V ) Utvalgt, du kan presse mellomromstasten når som helst for å panorere på tvers av designet.

03. Last ned opplæringsmidler

Jeg har satt sammen en mappe med eiendeler som jeg skal bruke i denne opplæringen. Du kan laste dem ned her . Fra Finder, dra 'iPhone-Status-Bar.svg' til toppen av Tallerken 1 ( X: 8, Y: 5 ). Deretter kopier og lim den inn i ArtBoard 2, så begge artbordene har statuslinjen på toppen. Truffet CMD + L. For å låse disse statuslinjene i begge tavler, slik at deres egenskaper ikke kan endres. For å låse opp dem, kan du bruke snarveien igjen eller klikke på "Lås" -ikonet.

04. Tegn et rektangel og sett dimensjoner

La oss fokusere på ArtBoard 1 (lagsiden). Bruker rektangelverktøyet ( R. ), tegne et rosa rektangel (# FF2BC2 uten grensen) i Tavle 1 og sett dimensjonene til 375 x 230 ved hjelp av eiendomsinspektørpanelet til høyre.

05. Omordne objekter

For å slå av grensen eller fyll på og av, klikk på "Eye" -ikonet til høyre. Truffet skift + cmd + [ å sende det helt til baksiden, eller gå til Objekt og gt; Ordne & gt; Plasser i bakgrunnen . Hvis du vil endre farger med heksadesimale verdier, klikker du på fargeikonet, og når den innfødte fargeplukken dukker opp, velger du den andre fanen øverst og endrer rullegardinmenyen til 'RGB-skyvemaskiner'.

06. Opprett en header

Bruke tekstverktøyet ( T. ), Klikk for å opprette en header for lagsiden din. Mine er Helvetica fet, 20, #ffffff, x: 18, y: 123. La oss begynne å sette sammen vår liste over lagmedlemmer. Tegn et grått torg hvor lagmedlemmets foto vil sitte (100 x 100, X: 8, Y: 238, # D0D0D0 uten grensen).

07. Legg til et annet rektangel

Til høyre for dette trenger vi et hvitt rektangel (260 x 100, X: 108, Y: 238, #FFFFFF uten grensen) som vi skal inkludere lagmedlemmets navn som topptekst og jobbtittel som underhode. For nå, bruk plassholder tekst, og stil den opp som du ønsker.

08. Legg til et pilikon

For å vise denne boksen vil du være et tappabelt område, vi vil inkludere et pilikon. Dra 'PATH.SVG' fra Finder på XD Lerret til et punkt utenfor Tavle. Deretter plasserer det til X: 330, Y: 279.

09. Plasser headshot

Fra Finder, dra et headshot på plass på det grå torget.

10. Opprett listen

Use the powerful Repeat Grid feature to create your list of team members — Bruk den kraftige gjentatte gridfunksjonen til å lage din liste over lagmedlemmer

Nå kan vi opprette vår liste. På dette tidspunktet vil du normalt kopiere og lime inn toppelementet, og flytte den kopierte versjonen ned og justere marginen. Du ville gjøre det samme for nye elementer, og hvis du ønsket å endre marginene, må du gjøre det manuelt, en etter en.

Vel, ikke med Adobe XD - Du kan bruke Gjenta GRID-funksjonen. Velg elementene du vil gjenta, klikk på 'Repeat Grid' -knappen på eiendomsinspektøren på høyre side ( CMD + R. ) og bruk de grønne håndtakene for å gjenta elementene vertikalt. Du kan også gjenta dem horisontalt for en tablettversjon.

11. Juster marginen

Juster marginen på det gjentatte rutenettet ditt ved å svinge på kanten av elementene dine, klikk og dra. La oss sette marginen til 7. Dra gjenta rutenettet til bunnen av artbordet ditt. Vi har nå fire rader å leke med.

12. Rediger tekstfeltene

Drag all the headshots onto the grid — Dra alle hodeskuddene på rutenettet

Mens egenskaper (farger, X og Y-stillinger, og så videre) er globale, kan hvert elements innhold være unikt. Rediger tekstfeltene til hver enkelt persons navn og jobbtittel. Du kan dobbeltklikke for å gå inn i rutenettet og gruppen, eller cmd + klikk å dirigere et hvilket som helst element i en gruppe eller gjentatt rutenett. Nå trenger vi bare å ta tak i alle hodeskuddene på en gang og dra dem på rutenettet, og vi er ferdige med denne skjermen.

13. Lag en mørk effekt

La oss hoppe til Artboard 2 (detaljsiden). Igjen, vi starter med et plassholderrektangel (375 x 444, X: 0, Y: 0, #FFFFFF uten grensen) og dra et hodeskudd for å fylle det. Vi vil skape en mørk effekt ved å endre bildens opasitet til 60 prosent og sende den til baksiden ( skift + cmd + [ ).

14. Legg til en annen pil

Deretter låser du hodeskudd-elementet ( CMD + L. ) og legg til en annen pil ('Back-arrow.svg') for å indikere at brukeren kan gå tilbake til laglisten. Dette må sitte ved X: 20, Y: 40. Det er viktig å låse bildet først, fordi ellers vil SVG erstatte headshot.

15. Legg til kontaktinformasjonslinje

Vi ønsker å inkludere en rosa bar på hver side, som vil liste gruppemedlemmets kontaktdetaljer (375 x 45, X: 0, Y: 400). Bruk tekstverktøyet ( T. ) For å lage et tekstelement som leser 'Placeholder Link', senter det, stil det opp, og legg det på X: 169, Y: 416.

16. Lag flere forekomster av tekstelementet

La oss bruke Repeat GRID-verktøyet til å lage to forekomster av dette tekstelementet. Først konverter teksten til et gjentatt rutenett ( CMD + R. ), hold deretter alternativtasten mens du utvider rutenettet horisontalt. Vakker, er det ikke? Direkte - Velg teksten ( cmd + klikk ) og endre innholdet for å lese 'Email', 'Twitter' og 'LinkedIn'.

17. Opprett navn og bioboks

For å fullføre designet, opprett en hvit boks (360 x 214, X: 8, Y: 445) som inkluderer lagmedlemmets navn og biog. Først legg til et tekstelement ved hjelp av plassholderenes personnavn '. For tekstelementet som holder biogen, vil vi bruke teksttekst. For å gjøre dette, velg tekstverktøyet ( T. ) og klikk og dra for å definere området for din kopi. Igjen, skriv inn litt plassholder tekst for nå, og juster stylingegenskapene.

18. Lag Artboards for andre lagmedlemmer

Duplicate your detail page so there is one for each team member — Dupliserer detaljsiden din så det er en for hvert lagmedlem

La oss nå lage noen nye typerbord for andre lagmedlemmer. Først låse opp hovedbildet ( CMD + L. ), klikk deretter på ArtBoard 2s tittel for å velge den, og slå CMD + C. å kopiere den. Zoome ut ( cmd + - eller bruk styreflaten til å klemme-til-zoom), og slå deretter CMD + V. å lime inn tre nye tavler. Legg til litt bioginfo til hver side. Oppdater navnene og hodeskudd-bildene, og ordne tennplater på lerretet. Kul! Vårt design er ferdig for nå.

19. Sett opp strømmen

Det er på tide å begynne å definere appens strømning. En prototype kan være verdt tusen møter, så vi vil skape en til å kommunisere vår designintensjon. Bare hopp til prototype-modus (øverst til venstre), velg elementet som skal tappes av brukeren (hold cmd. til direkte-SELECT), og dra en ledning til høyre andelbord. Når musen frigjøres, kan vi sette segue, lettelse og varighet. Enkel.

20. Koble til

Wire each item on your list to its respective detail page — Wire hvert element på listen din til sin respektive detaljside

La oss gå om hver av elementene på vår liste på Tavle 1 og Wire dem til deres respektive detaljside. For hver av disse ønsker vi å sette seguen til å skyve til venstre, og lett å lette ut. Deretter kan vi koble ryggen på hver detaljsider tilbake til ArtBoard 1 - Husk å sette seguen til å skyve rett denne gangen. Boom - Vår prototype er klar.

21. Test prototypen

Any changes to your design will be reflected immediately in the preview — Eventuelle endringer i designet ditt vil bli reflektert umiddelbart i forhåndsvisningen

For å teste prototypen, klikk på Play-knappen øverst til høyre (forhåndsvisning). Du trenger ikke å lukke forhåndsvisningsvinduet for å oppdatere design eller ledninger. Bare begynn å gjøre endringer, og de blir automatisk reflektert på forhåndsvisningsvinduet.

22. Lag en video

Det er enkelt å spille inn en video av interaksjonene dine når du tester prototypen. Med forhåndsvisningsvinduet åpnes, klikk på Record-knappen for å starte og stoppe opptaket. Lagre '.mov' -filen og del med dine interessenter.

23. Del arbeidet ditt

Share prototypes on the web — Del prototyper på nettet

Hvis du vil dele prototypene på nettet, klikker du på den siste knappen øverst til høyre (del online). Klikk på Create Link-knappen. Alle eiendelene vil bli lastet opp til Creative Cloud, og en lenke vil bli opprettet. Hvis endringer er nødvendige, kan du gå tilbake til designmodus, gjøre endringene og dele igjen. Hele strømmen virker bare.

24. Eksporter filer

You can export designs as PNGs for Web, iOS and Android at different sizes, or SVGs — Du kan eksportere design som Pngs for Web, IOS og Android i forskjellige størrelser, eller SVGs

Fra XD kan du eksportere Pngs for web, iOS og Android på forskjellige størrelser, samt svært optimaliserte SVG-filer.

25. Nyt resultatene

Gratulerer! Du har mestret Grunnleggende om Adobe Experience Design CC (forhåndsvisning). Du er velkommen til å dele prototyper på nettet og sosiale medier - legg til #adobexd. Så vi kan se arbeidet ditt.

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 280. Abonner på nettet her .

Relaterte artikler

Slik unngår du prototyping fallgruver
Slik bruker du animasjon i mobilapper
10 tips for bedre mobil ux design