Hur prototype en mobil app med Adobe XD

Denna handledning, som visar dig hur du gör en mobilapp-prototyp i Adobe XD, sattes tillsammans med Adobe XD CC (2017 beta) år 2016. Nyligen lanserad Adobe XD CC Har haft några tweaks, vilket gör det ännu lättare att använda.

• Få en 15% rabatt på Adobe Creative Cloud här

Om du är en designer som skapar användarupplevelser för mobila appar eller webbplatser, kan du användas för att använda flera verktyg för olika uppgifter när prototypning .

Du börjar med forskning. Sedan skissar du idéer på penna och papper, och senare överför dina tankar till ett designverktyg. För att komma fram till det bästa flödet exporterar du alla dina tillgångar och tar dem till ett annat verktyg för att bygga en prototyp. Därifrån delar du eller testar din prototyp, samlar feedback och återgår till mitten av cykeln för att iterera, byte från verktyg till verktyg när du förfinar din design.

Flera designverktyg tackar en annan del av problemet. Men istället för att göra ditt liv som en designer lättare, sänker du mellan alla dessa verktyg bara din takt.

Vad händer om det fanns ett enda verktyg som innebar att du kunde njuta av ett helt anslutet arbetsflöde? Där du kan designa och prototypa dina erfarenheter i minuter, dela dem på webben för att fånga feedback och gör rediter enkelt utan att bryta din steg? Målet med Adobe Experience Design CC - eller, som vi kallar det, skulle Adobe XD - göra just det.

I den här handledningen visar vi dig de viktigaste områdena i Adobe XD genom att designa, prototypa och dela en enkel "Meet team" mobilapp.

Vi skapar ett innehållssida som listar produktgruppsmedlemmarna, då kan användarna klicka på de enskilda posterna som ska tas till en mer djupgående Biog-sida. Du kommer att lära dig hur du skapar högfärdiga mönster, prototyp och dela dem för att samla feedback.

Titta på videon ovan och följ de skriftliga stegen nedan för att lära dig hur du prototyp med Adobe XD. Vi ska inte bara visa hur du gör det, vi ska också visa hur du testar det, spela in en förhandsgranskningsvideo av det i aktion och hur man delar och exporterar den.

Observera att vissa processer kan ha ändrats något i den nyare versionen av Adobe XD.

01. Installera Adobe XD och starta en ny design

Först, se till att Adobe XD är Installerad på din dator . Starta det, ta en titt på välkomstskärmen och starta en ny design med en iPhone-mall.

02. Skapa en andra knep

Använd Artboard-verktyget ( A ) För att skapa ett andra kneptområde, ändra sedan sina titlar (genom att dubbelklicka på dem) till "iPhone - Team Page" och "iPhone - detalj sidan". Ändra båda artboards bakgrundsfärger till svart med hjälp av egendomsinspektören till höger. Med valverktyget ( V ) Vald, du kan när som helst trycka på mellanslagstangenten för att panorera över din design.

03. Hämta handledningstillgångar

Jag har sammanställt en mapp av tillgångar som jag ska använda i hela denna handledning. Du kan ladda ner dem här . Från Finder, dra "iPhone-status-bar.svg" till toppen av Artboard 1 ( X: 8, Y: 5 ). Kopiera och klistra in den i Artboard 2, så båda tavlorna har statusfältet på toppen. Träffa cmd + l För att låsa dessa statusfält i båda tavlorna så kan inte deras egenskaper ändras. För att låsa upp dem kan du använda genvägen igen eller klicka på ikonen "Lås".

04. Rita en rektangel och ställa in dimensioner

Låt oss fokusera på Artboard 1 (lagsidan). Använda rektangelverktyget ( R ), Rita en rosa rektangel (# FF2BC2 utan gräns) i Artboard 1 och sätt dess dimensioner till 375 x 230 med hjälp av egenskapsinspektörpanelen till höger.

05. Omordnade objekt

För att slå på gränsen eller fylla på och av, klicka på ikonen "Eye" till höger. Träffa Skift + CMD + [ att skicka det hela vägen till baksidan, eller gå till Objekt & GT; Arrangera & gt; Skicka tillbaka . Om du vill ändra färger med hjälp av hexadecimala värden, klicka på färgikonen och när den ursprungliga färgplockaren dyker upp, välj den andra fliken längst upp och ändra nedrullning till "RGB-reglagen".

06. Skapa en rubrik

Använda textverktyget ( T ), klicka för att skapa en rubrik för din lagsida. Gruvan är helvetica djärv, 20, #ffffff, x: 18, y: 123. Låt oss börja sätta ihop vår lista över lagmedlemmar. Rita en grå kvadrat där lagmedlemens foto kommer att sitta (100 x 100, x: 8, y: 238, # d0d0d0 utan gräns).

07. Lägg till en annan rektangel

Till höger om detta behöver vi en vit rektangel (260 x 100, x: 108, y: 238, #ffffff utan gräns) där vi kommer att inkludera lagmedlems namn som en rubrik och jobbtitel som ett undernummer. För nu, använd platshållare text, och stil upp det som du önskar.

08. Lägg till en pilikon

För att visa den här rutan kommer att vara ett tappbart område, vi ska inkludera en pilikon. Dra "väg.svg" från Finder till XD-duken till en punkt från tavlan. Sedan omplacera det till x: 330, y: 279.

09. Placera din headshot

Från Finder drar du en headshot på plats på den grå torget.

10. Skapa listan

Nu kan vi skapa vår lista. Vid denna tidpunkt skulle du normalt kopiera och klistra in det övre objektet, flytta den kopierade versionen nere och justera marginalen. Du skulle göra detsamma för nya saker, och om du ville ändra marginalerna, skulle du behöva göra det manuellt, en efter en.

Tja, inte med Adobe XD - Du kan använda funktionen Repeat Grid. Välj de objekt du vill upprepa, klicka på "Repeat Grid" -knappen på egenskapsinspektören till höger ( cmd + r ) och använd de gröna handtagen för att upprepa objekten vertikalt. Du kan också upprepa dem horisontellt för en tablettversion.

11. Justera marginalen

Justera marginalen för ditt upprepade nät genom att sväva på kanten av dina föremål, klicka och dra. Låt oss ställa in marginalen till 7. Dra Repeat Grid till botten av ditt ämne. Vi har nu fyra rader att leka med.

12. Redigera textfälten

Medan egenskaper (färger, x och y-positioner, och så vidare) är globala, kan varje objekts innehåll vara unikt. Redigera textfälten till varje persons namn och jobbtitel. Du kan dubbelklicka för att komma in i rutnätet och gruppen, eller cmd + klicka att direkt välja vilket element som helst inom en grupp eller upprepat rutnät. Nu behöver vi bara ta tag i alla headshots på en gång och dra dem på rutnätet och vi är färdiga med den här skärmen.

13. Skapa en mörk effekt

Låt oss hoppa till Artboard 2 (detaljsidan). Återigen börjar vi med en platshållare rektangel (375 x 444, x: 0, y: 0, #ffffff utan gräns) och dra en headshot för att fylla den. Vi skapar en mörk effekt genom att ändra bildens opacitet till 60 procent och skicka den till baksidan ( Skift + CMD + [ ).

14. Lägg till en annan pil

Lås sedan headshot-objektet ( cmd + l ) och lägg till en annan pil ('back-arrow.svg') för att ange användaren kan återgå till laglistan. Detta måste sitta vid X: 20, Y: 40. Det är viktigt att låsa bilden först, för annars kommer SVG att ersätta headshot.

15. Lägg till kontaktinformationsfält

Vi vill inkludera en rosa bar på varje sida, som kommer att lista lagmedlemmens kontaktuppgifter (375 x 45, x: 0, y: 400). Använd textverktyget ( T ) för att skapa ett textelement som läser "platshållare länk", centrera det, stil upp och placera den vid x: 169, y: 416.

16. Skapa fler instanser av textelementet

Låt oss använda Repeat Grid-verktyget för att skapa ytterligare två instanser av det här textelementet. Konvertera först texten till ett repetitionsnät ( cmd + r ), håll sedan alternativknappen medan du expanderar ditt rutnät horisontellt. Vacker, eller hur? Direct-Välj texten ( cmd + klicka ) och ändra innehållet för att läsa 'email', 'Twitter' och 'LinkedIn'.

17. Skapa namn och biobox

För att avsluta designen, skapa en vit låda (360 x 214, x: 8, y: 445) som kommer att innehålla lagmedlems namn och biog. Lägg först ett textelement med platsinnehavaren "personnamn". För textelementet som rymmer biog, vill vi använda områdestext. För att göra detta, välj textverktyget ( T ) och klicka och dra för att definiera området för din kopia. Skriv igen någon platshållare för nu och justera sina stylingegenskaper.

18. Skapa tavlor för andra lagmedlemmar

Låt oss nu göra några nya tavlor för andra lagmedlemmar. Först låsa upp huvudbilden ( cmd + l ), klicka sedan på Artboard 2s titel för att välja den och slå cmd + c att kopiera den. Zooma ut ( cmd + - eller använd styrplattan till nypa-till-zoom) och slå sedan cmd + v att klistra in tre nya tavlor. Lägg till lite BIOG-info till varje sida. Uppdatera namn och headshot-bilder och ordna tavlorna på duken. Häftigt! Vår design är klar för nu.

19. Ställ upp flödet

Det är dags att börja definiera appens flöde. En prototyp kan vara värt tusen möten, så vi kommer att skapa en för att kommunicera vår designintent. Hoppa helt enkelt till prototypläge (övre vänster), välj objektet som kommer att tappas av användaren (håll cmd att direkt-välj) och dra en tråd till rätt artskort. När musen släpps kan vi ställa in segue, lätta och varaktighet. Enkel.

20. Anslut upp

Låt oss gå men var och en av objekten på vår lista på ämne 1 och leder dem till deras respektive detalj. För var och en av dessa vill vi ställa in segueen för att glida vänster och lättnad för att lätta ut. Därefter kan vi behöva de bakre pilarna på var och en av detaljiderna tillbaka till Artboard 1 - kom ihåg att ställa in segUE för att glida rätt den här gången. Boom - vår prototyp är klar.

21. Testa prototypen

För att testa prototypen, klicka på Play-knappen längst upp till höger (förhandsgranskning). Du behöver inte stänga förhandsgranskningsfönstret för att uppdatera din design eller dina ledningar. Börja bara att göra ändringar, och de kommer automatiskt att återspeglas i förhandsgranskningsfönstret.

22. Gör en video

Det är enkelt att spela in en video av dina interaktioner när du testar prototypen. Med förhandsgranskningsfönstret öppet klickar du på knappen Spela in för att starta och stoppa inspelningen. Spara ".mov" -filen och dela med dina intressenter.

23. Dela ditt arbete

Om du vill dela prototyperna på webben klickar du på den sista knappen längst upp till höger (dela online). Klicka på knappen Skapa länk. Alla tillgångar kommer att laddas upp till kreativt moln och en länk kommer att skapas. Om ändringar är nödvändiga kan du gå tillbaka till designläge, göra ändringarna och dela igen. Hela flödet fungerar bara.

24. Exportera filer

Från XD kan du exportera PNGS för webb, iOS och Android i olika storlekar, samt mycket optimerade SVG-filer.

25. Njut av resultaten

Grattis! Du har behärskat grunderna i Adobe Experience Design CC (förhandsgranskning). Känn dig fri att dela dina prototyper på webben och sociala medier - lägg till #adobexd Så vi kan se ditt arbete.

Denna artikel uppträdde ursprungligen i nätmagasin Utgåva 280. Prenumerera på nätet här .

Relaterade artiklar

• Hur man undviker prototypa fallgropar
• Hur man använder animering i mobila appar
• 10 tips för bättre mobil UX-design