Sådan prototype En mobilapp med Adobe XD

Denne vejledning, der viser dig, hvordan du laver en mobilapprototype i Adobe XD, blev sat sammen ved hjælp af Adobe XD CC (2017 Beta) i 2016. The. nyligt lanceret Adobe XD CC har haft et par tweaks, hvilket gør det endnu nemmere at bruge.

• Få en 15% rabat på Adobe Creative Cloud her

Hvis du er en designer, der skaber brugeroplevelser til mobile apps eller websteder, kan du bruges til at bruge flere værktøjer til forskellige opgaver, når prototyping .

Du starter med forskning. Så sketter du ideer på pen og papir, og overfører senere dine tanker til et designværktøj. For at komme op med den bedste flow eksporterer du alle dine aktiver og bringer dem ind i et andet værktøj til at opbygge en prototype. Derfra deler du eller tester din prototype, indsamle feedback og vender tilbage til midten af ​​cyklussen for at gentage, skifte fra værktøj til værktøj, når du forfiner dit design.

Flere designværktøjer hver tackler en anden del af problemet. Men i stedet for at gøre dit liv som en designer lettere, reducerer skift mellem alle disse værktøjer kun dit tempo.

Hvad hvis der var et enkelt værktøj, der betød, at du kunne nyde en fuldt tilsluttet workflow? Hvor du kunne designe og prototype dine oplevelser i minutter, del dem på nettet for at fange feedback, så gør redigeringer nemt uden at bryde din skridt? Målet med Adobe Experience Design CC - eller som vi kalder det, Adobe XD - skulle gøre netop det.

I denne vejledning viser vi dig de vigtigste områder i Adobe XD ved at designe, prototyping og deling af en simpel 'Meet the Team' Mobile App.

Vi opretter en indholdsside, der angiver produktgruppemedlemmerne, så brugerne vil kunne klikke på de enkelte poster, der skal tages til en mere dybtgående biogside. Du lærer at oprette højfideledes design, prototype og dele dem for at samle feedback.

Se videoen ovenfor og følg de skriftlige trin nedenfor for at lære at prototype med Adobe XD. Ikke alene vil vi vise dig, hvordan du gør det, vi vil også vise dig, hvordan du tester det, optag en forhåndsvisningsvideo af det i aktion, og hvordan man deler og eksporterer det.

Bemærk, at nogle processer måske har ændret sig lidt i den nyere version af Adobe XD.

01. Installer Adobe XD og start et nyt design

For det første sørg for Adobe XD er installeret på din computer . Start det, tag et kig på velkomstskærmen og start et nyt design med en iPhone Artboard-skabelon.

02. Opret et andet tavle

Brug kunstværktøjet ( EN ) For at oprette et andet Artboard, skal du ændre deres titler (ved at dobbeltklikke på dem) til 'iPhone - Team Page' og 'iPhone - Detailside'. Skift begge tavler 'baggrundsfarver til sort ved hjælp af ejendomsinspektøren til højre. Med SELECT-værktøjet ( V. ) Udvalgt, kan du trykke på mellemrumstasten til enhver tid for at panorere over dit design.

03. Download tutorial Assets

Jeg har sammensat en mappe af aktiver, som jeg bruger i hele denne vejledning. Du kan downloade dem her . Fra Finder, træk 'iPhone-status-bar.svg' til toppen af ​​Artboard 1 ( X: 8, Y: 5 ). Derefter kopieres og indsæt det i Artboard 2, så begge tavler har statuslinjen på toppen. Hit cmd + L. For at låse disse statusstænger i begge tavler, så deres egenskaber kan ikke ændres. For at låse dem op, kan du bruge genvejen igen eller klikke på ikonet 'Lås'.

04. Tegn et rektangel og sæt dimensioner

Lad os fokusere på Artboard 1 (Holdsiden). Brug af rektangelværktøjet ( R. ), Tegn et lyserødt rektangel (# FF2BC2 uden grænsen) i Startboard 1 og sæt sine dimensioner til 375 x 230 ved hjælp af Ejendomsinspektørpanelet til højre.

05. Bestil objekter

For at tænde og slukke for grænsen eller udfylde og slukke, skal du klikke på 'Eye' -ikonet til højre. Hit Skift + Cmd + [ at sende det hele vejen til ryggen, eller gå til Objekt & gt; Arrangere & gt; Send til Tilbage . Hvis du vil ændre farver ved hjælp af hexadecimale værdier, skal du klikke på farvikonet, og når den native farvevælger dukker op, skal du vælge den anden fane øverst og ændre rullemenuen til 'RGB-skydere'.

06. Opret en header

Brug af tekstværktøjet ( T. ), Klik for at oprette en header til din holdside. Mine er Helvetica Bold, 20, #ffffff, X: 18, Y: 123. Lad os begynde at sammensætte vores liste over holdmedlemmer. Tegn en grå firkant, hvor holdmedlems foto vil sidde (100 x 100, x: 8, y: 238, # d0d0d0 uden grænsen).

07. Tilføj et andet rektangel

Til højre for dette har vi brug for et hvidt rektangel (260 x 100, x: 108, y: 238, #ffffff uden grænsen), som vi vil inkludere holdmedlems navn som et overskrift og jobtitel som underposition. For nu skal du bruge pladsholdertekst og stil den op som du ønsker.

08. Tilføj et pilikon

For at vise denne boks vil være et tappbart område, vi indeholder et pilikon. Træk 'PATH.SVG' fra Finder på XD Canvas til et punkt fra tegnebrættet. Derefter omplaceres det til x: 330, y: 279.

09. Placer dit headshot

Fra Finder, træk et headshot på plads på den grå firkant.

10. Opret listen

Nu kan vi oprette vores liste. På dette tidspunkt vil du normalt kopiere og indsætte det øverste emne, flytte den kopierede version ned og justere margenen. Du ville gøre det samme for nye varer, og hvis du ønskede at ændre margenerne, skal du gøre det manuelt, en efter en.

Nå, ikke med Adobe XD - Du kan bruge REPEAT GRID-funktionen. Vælg de elementer, du vil gentage, klik på knappen 'Gentag grid' på ejendomsinspektøren til højre ( cmd + r. ) og brug de grønne håndtag til at gentage elementerne lodret. Du kan også gentage dem vandret til en tabletversion.

11. Juster margenen

Juster marginen på dit gentagne gitter ved at svinge på kanten af ​​dine varer, klikke og trække. Lad os sætte marginen til 7. Træk gentagelsesgitteret til bunden af ​​dit tavle. Vi har nu fire rækker til at lege med.

12. Rediger tekstfelterne

Mens egenskaber (farver, x og y positioner, og så videre) er globale, kan hvert elements indhold være unikt. Rediger tekstfelterne til hver enkelt persons navn og jobtitel. Du kan dobbeltklikke for at komme ind i gitteret og gruppen, eller cmd + klik at lede ethvert element i en gruppe eller gentaget gitter. Nu skal vi bare tage fat på alle headshots på én gang og trække dem på nettet, og vi er færdige med denne skærm.

13. Opret en mørkere effekt

Lad os hoppe til Artboard 2 (detaljeringssiden). Igen starter vi med et stedholder rektangel (375 x 444, x: 0, y: 0, #ffffff uden grænsen) og træk et headshot for at udfylde det. Vi skaber en mørkere effekt ved at ændre billedets opacitet til 60 procent og sende det til ryggen ( Skift + Cmd + [ ).

14. Tilføj en anden pil

Lås derefter headshot-elementet ( cmd + L. ) og tilføj en anden pil ('back-arrow.svg') for at angive, at brugeren kan vende tilbage til holdlisten. Dette skal sidde ved X: 20, Y: 40. Det er vigtigt at låse billedet først, for ellers vil SVG erstatte headshotet.

15. Tilføj kontaktoplysninger Bar

Vi ønsker at inkludere en lyserød bar på hver side, som vil liste holdmedlems kontaktoplysninger (375 x 45, x: 0, y: 400). Brug tekstværktøjet ( T. ) For at oprette et tekstelement, der læser 'Placeholder link', skal du centrere det, stil den op og placere det ved X: 169, Y: 416.

16. Opret flere forekomster af tekstelementet

Lad os bruge Gentag Gitterværktøjet til at oprette to flere forekomster af dette tekstelement. Først konverter teksten til et gentagelsesgitter ( cmd + r. ), og hold derefter indstillingstasten, mens du udvider dit gitter vandret. Smuk, er det ikke? Direct-Vælg teksten ( cmd + klik ) og ændre indholdet for at læse 'Email', 'Twitter' og 'LinkedIn'.

17. Opret navn og bio boks

For at afslutte designet skal du oprette en hvid boks (360 x 214, x: 8, y: 445), der vil omfatte holdmedlems navn og biog. Tilføj først et tekstelement ved hjælp af pladsholderens personnavn '. For det tekstelement, der holder BIOG, vil vi bruge område tekst. For at gøre dette skal du vælge tekstværktøjet ( T. ) og klik og træk for at definere området for din kopi. Indtast igen nogle pladsholdertekst for nu, og juster dens stylingegenskaber.

18. Lav kunstbræt for andre holdmedlemmer

Lad os nu lave nogle nye tavler til andre holdmedlemmer. Først låse hovedbilledet op ( cmd + L. ), og klik derefter på Artboard 2's titel for at vælge det, og tryk på cmd + C. at kopiere det. Zoome ud ( cmd + - eller brug trackpad til at klemme til zoom), så tryk cmd + V. at indsætte tre nye tavler. Tilføj nogle bioginfo til hver side. Opdater navnene og headshot-billederne, og arrangere håndværvene på lærredet. Fedt nok! Vores design er færdigt for nu.

19. Konfigurer strømmen

Det er på tide at begynde at definere appens flow. En prototype kan være tusind møder værd, så vi vil skabe en til at kommunikere vores designtilsyn. Du skal blot hoppe til prototype-tilstand (øverst til venstre), vælg det element, der vil blive tappet af brugeren (HOLD cmd. at lede - vælg), og træk en ledning til højre tavle. Når musen frigives, kan vi indstille segue, lette og varighed. Enkel.

20. Connect Up.

Lad os gå selvom hver af varerne på vores liste på Artboard 1 og tråd dem til deres respektive detaljer side. For hver af disse ønsker vi at sætte SEGUE til at glide til venstre, og lette at lette ud. Derefter kan vi ledge bagsiden på hver af de detaljerede sider tilbage til Artboard 1 - Husk at indstille Segue til at glide lige denne gang. BOOM - Vores prototype er klar.

21. Test prototypen

For at teste prototypen skal du klikke på afspilningsknappen øverst til højre (preview). Du behøver ikke lukke forhåndsvisningsvinduet for at opdatere dit design eller dine ledninger. Bare start med at foretage ændringer, og de vil automatisk blive afspejlet i forhåndsvisningsvinduet.

22. Lav en video

Det er nemt at optage en video af dine interaktioner, når du tester prototypen. Med vinduet Forhåndsvisning skal du klikke på optageknappen for at starte og stoppe optagelsen. Gem '.mov'-filen og del med dine interessenter.

23. Del dit arbejde

For at dele prototyperne på nettet, skal du klikke på den sidste knap øverst til højre (Del online). Klik på knappen Opret link. Alle aktiverne vil blive uploadet til Creative Cloud, og der oprettes et link. Hvis ændringer er nødvendige, kan du gå tilbage til designtilstand, foretage ændringerne og dele igen. Hele strømmen virker bare.

24. Eksportfiler

Fra XD kan du eksportere PNG'er til web, iOS og Android i forskellige størrelser, samt meget optimerede SVG-filer.

25. Nyd resultaterne

Tillykke! Du har mestret det grundlæggende i Adobe Experience Design CC (preview). Du er velkommen til at dele dine prototyper på internettet og sociale medier - tilføj #adobexd. Så vi kan se dit arbejde.

Denne artikel optrådte oprindeligt i Net Magazine. Udgave 280. Abonner på nettet her .

Relaterede artikler

• Sådan undgår du prototyping faldgruber
• Sådan bruges animation i mobile apps
• 10 tips til bedre mobil UX Design