Bygg prototyper med Adobe XD

I modern webb- och appdesign finns det ofta tider när interaktionen inte öppnar en helt ny sida eller skärm. Det moderna tillvägagångssättet för att skapa interaktivt innehåll kräver övergångar mellan designgränssnittselement så att användaren är förvånad och wowed av erfarenheten av att ändra innehåll. Allt händer på samma skärm eller sida, utan en uppdatering. Att utforma dessa typer av interaktioner och förfina dem att fungera korrekt kan ta tid, men det är värt att göra innan du skriver din kod.

Det här är vad Adobe XD har spenderat de senaste månaderna av utvecklingen att få rätt. Skapa innehåll i ett tillstånd på en skärm, flytta det innehållet till det nya tillståndet på den nya skärmen och helt enkelt välja alternativet "Auto-animate" för att övergå. Allt innehåll som är detsamma på båda skärmarna animerar automatiskt från en position till en annan. Om du inte vill ha allt innehåll som är synligt på båda skärmarna, gör innehållet osynligt på den första och det kommer att övergå till plats.

Ta reda på om andra Adobe-program som Adobe dimension .

• 8 Viktiga prototyper och byggverktyg

Här visar vi dig hur du skapar en app-prototyp som bara gör det här (för mer Hur man skapar en app Tutorials, kolla in vår översikt av de bästa). Och går utöver det, gör en ny funktion av XD att användaren kontrollerar interaktioner med sin röst. Vi utforskar detta som en designfunktion och hur appen kan tala tillbaka till användaren, vilket kan ge några intressanta designmöjligheter.

Ladda ner projektfilerna för denna handledning.

01. Starta projektet

Om du inte har Adobe XD kan du ladda ner och installera den här . När installationen har slutförts öppnar du programvaran och välkomstskärmen kan du välja en skärmstorlek som ska laddas ner. Välj i det här fallet iPhone 6/7/8, som det är rätt storlek för det här projektet, men du kommer att se att det finns en mängd olika storlekar.

02. Importera den första bilden

Det finns olika sätt att importera bilder, men i den här första instansen gå till File & GT; Importera. Välj "Tillgångar" -mappen från projektfilerna och den första bilden som ska importeras kommer att vara "sky.png". Placera den på toppen av skärmen och flytta den ett bara par pixlar ner.

03. Placera kabinen

Nästa bild för designen kommer att vara "cabin.png". Bara importera detta på samma sätt som du gjorde i föregående steg och placera den för att fylla skärmen. Slutligen importera bilden "Trees.png" och placera den längst ner på skärmen med träden över sjön.

04. Ta med logotypen

Anledningen till att dessa bilder är separata lager är så att när en övergång skapas mellan skärmar kan de flytta separat. Gå till Arkiv-menyn och välj Importera. Den här tiden väljer "logo.ai", som är en vektorbild. Placera den här bilden i mitten av skärmen.

05. Lägg till en cirkel

Välj cirkelverktyget och dra en cirkel bara något större än logotypen. I egenskapspanelen till höger, ta bort stroke och gör bakgrunden svart. Välj bakgrundsblur och minska ljusstyrkan till -30 så att cirkeln fortfarande är svart.

06. Omordna grafiken

Nu behöver cirkeln röra sig bakom logotypen. Välj Objekt & GT; Ordna och skicka bakåt. Som i andra Adobe-produkter är det också Cmd / ctrl + [ för att flytta grafiskt bakåt i lagret. Med hjälp av den högra fyrkantiga konsolen kommer under tiden att ge ett objekt framåt i ordern.

07. Släpp MIC

Importera nu "MIC.AI" -bilden och ändra storlek på bilden för att vara relativt liten. Placera detta längst ner på skärmen. Rita en cirkel runt det här och avmarkera fyllningen så att den har tagits bort. Gör sedan stroke vita och två pixlar breda. Position som runt "mikrobilden".

08. Textmeddelande

Använd textverktyget för att lägga till orden "tala med att söka" under mikrofonen. Gör texten vit och ändra den till Helvetica Neue kondenserad svart. I nedre vänster på skärmen klickar du på ikonen Tillgångspanel för att öppna den. Med den text som valts på skärmen klickar du på ikonen "+" bredvid "Teckenstilar" för att spara det här formatet för texten.

09. Gå med i en grupp

Välj ikonen Layer Panel längst ner till vänster på skärmen. På skärmen väljer du texten "Sök" och Skiftklicka För att lägga till cirkeln och MIC-ikonen. Gå till objekt och välj grupp. I lagpanelen byt namn på den här gruppen "Sök". Det är användbart att namnge grupper, speciellt när de animerar dessa.

10. Gruppera logotypen

Precis som i det sista steget, välj logotypen och den suddiga cirkeln runt den, gruppera dem tillsammans. På lagpanelen, byt namn på hela gruppens logotyp "så att den är lätt identifierbar om du behöver redigera det igen senare. För tillfället är designen för den första skärmen klar.

11. Extraelement

Även om den första skärmen är klar finns det fortfarande fler designelement som måste läggas till. Så här är animering skapad genom att ändra elementens positionering mellan skärmarna. Gå till rektangelverktyget och håll Flytta För att lägga till en fyrkant på skärmen, vilket gör gränsen vit.

12. Olika import

Öppna nu mappen för tillgångarna via ditt operativsystem. Välj "Cabin1.png" -bilden och dra detta direkt på torget som du skapade i föregående steg. Det kommer automatiskt att maskeras inuti detta. Dubbelklicka för att redigera bilden och se till att kabinen är synlig på torget.

13. Lägg till en etikett

Med hjälp av textverktyget, lägg till etiketten "Forest Cabin" under texten och använd panelen Tillgångar för att stylta texten i den sparade stilen från steg 8. Välj bilden och etiketten och gruppera dem tillsammans. Namn på gruppens vänstra stuga på panelen Lager.

14. Duplicera gruppen

Normalt upprepar ett gränssnittselement det perfekta jobbet för verktyget "Repeat Grid". Detta kommer dock att behöva specifik animering, som inte fungerar med repetitionsnätet. Välj bild- och textgruppen, sedan kopiera och klistra in den så att den sitter bredvid originalet och lägger till bilden "Cabin2.png" istället.

15. Byt namn på och kopiera igen

Ändra texten till "Snow Cabin", och i lagerpanelen Namn den här "rätta stugan". Välj både vänster och höger stuga och duplicera dem, placera dubbletterna nedan och uppdatera sin text och bilder med "Cabin3.png" och "Cabin4.png". Gruppera båda dessa tillsammans och namnge gruppens nedre stuga.

16. TEXT TITEL

Lägg till text på sidan med texten "Sökresultat för stugor". Ge det här Rockwell-typsnittet och spara det här med teckenstilarna i panelen Tillgångar. Placera nu "Lower Cabin" -gruppen längst ner på skärmen och ta ut till noll så att den är osynlig på den här skärmen.

17. Ändra opacitet

Välj nu de vänstra och högra stugorna, flytta dem till botten av skärmen och ta utskjutaren till noll. Upprepa igen för söktexten. När vi flyttar till en annan skärm kommer dessa alla att animera till sina nya positioner. På lagpanelen flyttar du den "vänstra stugan" framför alla andra kabingrupper.

18. Duplicera skärmen

Välj tavlan genom att klicka på sitt namn, dubbelklicka sedan på yrken och ändra namnet till "hem". Kopiera och klistra in tavlan och byt namn på det "sök". Välj nu logotypen och flytta den upp till nästan av skärmen och minska dess utseende till noll.

19. Flytta bakgrunden

Välj himmelbilden och knyta upp den lite på skärmen. Välj kabinbilden och flytta den tills kabinen är högst upp på skärmen. Klicka sedan på trädbilden och flytta den över stugan. Slutligen väljer du "Sök" -gruppen och minskar utseendet ner till noll.

20. Nya element visas

Välj sökresultaten i lagerpanelen och ta med sitt utseende upp till 100. Flytta upp det på skärmen. Upprepa detta för vänster stuga, höger stuga och nedre stugan. Använd pennverktyget för att rita en enkel knapp och lägg till en cirkel runt den. Gör bakgrunden suddig och ta ljusstyrkan i det till -30.

21. Fyll i knappen Back

Välj bakpil och cirkel, gruppera dem tillsammans och namnge dem "bakåtknapp" i lagerpanelen. Byt över till "Prototype" -läget genom att trycka på "Prototype" längst upp till vänster på XD-gränssnittet. Välj hemskärmen, dra den blå pilen till sökskärmen och en popup-panel visas.

22. Röstkommando

Ändra avtryckaren för att rösta och skriv ordet "Sök" som röstkommando för att styra detta. Ändra åtgärden för att automatiskt animera och lätta för att snäppa. Gör varaktigheten 1,5. På skärmen Sök på baksidan och dra den blå pilen tillbaka till "Hem" -skärmen. Byt bara utlösaren för att trycka på.

23. Testa prototypen

Överst i början av XD-gränssnittet är en uppspelningsknapp. Klicka på den här och en fungerande prototyp kommer nu att dyka upp på skärmen. På hemsidan måste du hålla ner mellanslagstangenten medan du talar röstkommandot "sök". När du släpper i rymdfältet tar det dig till nästa skärm och animerar det grafiska gränssnittet i läge.

24. Kommer tillbaka

När övergången har kört kan du trycka på BACK-knappen för att komma tillbaka till hemskärmen. Stäng prototypen och klicka på sökskärmen och klicka sedan på den blå pilen till höger (dra inte). Ändra utlösaren till tiden, gör förseningen 0s och ställ in åtgärden för att spela uppspelning. Gör talets sökresultat för tillgängliga stugor ".

25. Talbekräftelse

Testa detta nu med uppspelningsknappen för att höra en röstbekräftelse av sökningen. Stäng prototypen när du har försökt det här. En annan skärm kommer att skapas, så låt oss klicka tillbaka på "design" -vyn längst upp till vänster om XD-gränssnittet. Klicka på sökskärmen genom att klicka på namnet och sedan kopiera och klistra in det.

26. Skalning av bilden

Byt namn på den nya skärmen "Cabin". Dubbelklicka på bilden för "vänster kabin" -lager. Ändra storlek på hörnhandtagen så att den fyller skärmen, sedan omplacera bilden inuti så att den täcker den skärmen. Klicka på sökresultattexten och ta ut till noll för att ta bort det från vy.

27. Nya skärmelement

Dubbelklicka på texten "Forest Cabin" som den är en del av gruppen. Förstora textstorleken till 26 pixlar och flytta den lite på skärmen. Lägg till text på skärmen i Helvetica Neue Medium vid 14 pixlarstorlek och sätt den till Vit för att stå ut mot bakgrunden. Lägg till en vit linje med linjeverktyget under rubriken.

28. Skapa en knapp

Använd rektangelverktyget för att rita en rektangel på skärmen längst ner på designen. Dra i hörnhandtagen för att ge denna form runt hörn. Lägg till ordet "reserv" till detta, med hjälp av den sparade teckenstilen i tillgångspanelen för Helvetica Neue i kondenserad fetstil.

29. Flytta till prototypläge

Alla designelement är på plats nu för hela konstruktionen av appen. Flytta till "Prototype" -läget genom att klicka på ordet "prototyp" i det övre vänstra hörnet. På sökskärmen klickar du på "Forest Cabin" -gruppen av bilden och texten. Dra det blå handtaget från det här till skärmen "Cabin".

30. Animeringsinställningar

På popup-panelen för övergången mellan skärmar väljer du TAP som avtryckare, gör sedan Action Auto-Animate. Fortsätt lättas som snap men minska varaktigheten av detta till 0,6s. Detta säkerställer att animationen inte drar - rörelsen av den första skärmen till den andra skärmen hade mycket rörelse som krävde en längre övergång.

31. Länka upp knappen BACK

Välj nu baksidan från den slutliga skärmen och dra den blå pilen från det här baksidan till skärmen "Sök". Alla inställningar från föregående övergång bör komma ihåg. Du är nu redo att gå vidare och testa det här genom att klicka på PLAY-knappen.

32. AUTO-ANIMATE

Det du kommer att se med Auto-Animate nu är att bilden expanderar för att fylla skärmen, och de element som inte längre behövs kommer att blekna bort medan den nya texten kommer att blekna i. Det motsatta händer när de går tillbaka. Detta ger ett bra sätt att se Auto-Animate-arbetet över tre skärmar.

33. Spara projektet

Som standard ska ditt projekt automatiskt spara till det kreativa molnet, men det är en bra idé att spara en kopia till din egen hårddisk om det finns några problem. Klicka på Arkiv & GT; Spara, ändra platsen till din egen dator och namnge projektet med ett lämpligt namn.

34. Dela projektet

Hela prototypens punkt är att testa projektet på andra människor. Lyckligtvis finns det en aktieknapp längst upp till höger om XD-gränssnittet som gör det till en bris. Klicka på knappen Dela och i rullgardinsmenyn som visas Välj alternativet för granskning.

35. Publicera prototyp

På nästa skärm får du veta att auto-animate support ännu inte är tillgängligt för webben, men det kommer snart. Klicka på Skapa allmän länk och klicka sedan på länken längst upp till höger för att besöka den offentliga länken i en webbläsare. Du måste hålla mellanslagstangenten för att använda röstkommandot med prototypen.

36. Videoversion

En annan prototyp kan delas genom att registrera gränssnittet i åtgärd. Klicka på knappen Dela och välj Spela in video. Detta öppnar ett fönster, och när du stänger det kommer du att uppmanas att spara en inspelning av skärmen som en MP4-fil, vilket också är ett användbart sätt att dela din prototyp.

Den här artikeln publicerades ursprungligen i utgåva 285 av kreativ webbdesignmagasin Webbdesigner . Köp utgåva 285 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

• Mobil appdesign: en nybörjarguide
• Hur man skapar en app med vue.js
• Få grepp med mobil app ombord