Sestavte prototypy s Adobe XD

V současném webu a aplikaci design jsou často časy, kdy interakce neotevře zcela novou stránku nebo obrazovku. Moderní přístup k vytváření interaktivního obsahu vyžaduje přechody mezi prvky návrhu rozhraní tak, aby uživatel byl překvapen a wowed zkušenostmi o změně obsahu. To vše děje na stejné obrazovce nebo stránce, bez aktualizace. Projektování těchto druhů interakcí a rafinace, aby fungovaly správně, může mít čas, ale stojí za to udělat před psaním vašeho kódu.

To je to, co Adobe XD strávil posledních několik měsíců vývoje, který se dostane správně. Vytvořte obsah v jednom stavu na jedné obrazovce, přesuňte tento obsah do nového stavu na nové obrazovce a jednoduše zvolte možnost "Auto-animát" pro přechod. Veškerý obsah, který je stejný na obou obrazovkách, automaticky animuje z jedné pozice do druhého. Pokud nechcete, aby všechny obsah viditelné na obou obrazovkách, udělejte obsah neviditelný na první a přechází na místo.

Zjistěte si o další software Adobe, jako je Adobe Dimension. .

• 8 Essential Prototyping a stavební nástroje

Zde vám ukážeme, jak vytvořit aplikaci Prototyp, který dělá to právě (více Jak vytvořit aplikaci Návody, podívejte se na naše rundown těch nejlepších). A jít dál, nový prvek XD umožňuje uživateli ovládat interakce s hlasem. Prozkoumáme to jako designový prvek a jak může aplikace mluvit také k uživateli, což může poskytnout některé zajímavé designové příležitosti.

Stáhněte soubory projektu pro tento tutoriál.

01. Spuštění projektu

Pokud nemáte Adobe XD, můžete si ji stáhnout a nainstalovat tady . Po dokončení instalace otevřete software a uvítací obrazovka umožní vybrat velikost obrazovky ke stažení. V tomto případě vyberte iPhone 6/7/8, protože to je správná velikost pro tento projekt, ale uvidíte, že je k dispozici různé velikosti.

02. Importujte první obrázek

Existují různé způsoby, jak importovat snímky, ale v této první instanci přejděte do souboru & gt; Import. Vyberte složku "Assets 'ze souborů projektu a první obrázek importu bude" Sky.png ". Umístěte ji na horní část obrazovky a přesuňte to jen pár pixelů dolů.

03. Umístěte kabinu

Další obraz pro návrh bude "Chable.png". Stačí importovat to stejným způsobem, jakým jste udělali v předchozím kroku a pak jej umístěte, abyste vyplnili obrazovku. Nakonec importujte obraz "stromy.png" a umístěte jej na dno obrazovky se stromy přes jezero.

04. Přineste logo

Důvodem, proč tyto obrázky jsou samostatné vrstvy, je tak, že při přechodu mezi obrazovkami se mohou pohybovat samostatně. Přejděte do nabídky Soubor a zvolte Import. Tentokrát vyberte 'logo.ai', což je vektorový obrázek. Tento obrázek umístěte do horního středu obrazovky.

05. Přidat kruh

Vyberte nástroj kruh a nakreslete kruh jen o něco větší než logo. V panelu Vlastnosti vpravo odstraňte zdvih a vytvořte pozadí černou. Vyberte rozostření pozadí a snížení jasu do -30 tak, aby byl kruh stále černý.

06. Změnit grafiku

Nyní se kruh musí pohybovat za logem. Vyberte objekt & gt; Uspořádat a poslat dozadu. Stejně jako v jiných produktech Adobe, to je také CMD / CTRL + [ přesunout jakoukoliv grafiku zpět v pořadí vrstvy. Použití pravého čtverečního držáku, mezitím přinese objekt vpřed v objednávce.

07. Pokles mikrofonu

Nyní importujte obraz "Mic.ai" a změňte velikost obrázku, který má být relativně malý. Umístit toto v dolní části obrazovky. Nakreslete kruh kolem tohoto a zrušte zaškrtnutí výplně tak, aby byl odstraněn. Pak, aby tahová bílá a dvě pixely široké. Umístění, která kolem obrazu "MIC".

08. Textová zpráva

Pomocí textového nástroje přidáte slova "Mluvit s vyhledáváním" pod mikrofonem. Udělejte text Bílý a změňte jej na Helvetica Neue kondenzovanou černou. V levé dolní části obrazovky klepněte na ikonu panelu aktiv otevřete. S textem vybraným na obrazovce klepněte na ikonu "+" vedle "Styly znaků" pro uložení tohoto formátu pro text.

09. Připojte se ke skupině

Vyberte ikonu panelu vrstvy v levé dolní části obrazovky. Na obrazovce vyberte text 'Search' a Shift-Click. Přidání kruhu a ikonu MIC. Přejít na objekt a vyberte skupinu. V panelu vrstvy přejmenujte tuto skupinu 'Search'. Je to užitečné pro jmenování skupin, zejména při animaci.

10. Skupina loga

Stejně jako v posledním kroku vyberte logo a rozmazaný kruh kolem něj, pak je skupinu dohromady. V panelu vrstvy přejmenujte celou skupinu 'logo' tak, že je snadno identifikovatelná, pokud potřebujete znovu upravit později. V tuto chvíli je design pro první obrazovku dokončen.

11. Extra prvky

Přestože je první obrazovka dokončena, jsou ještě další konstrukční prvky, které je třeba přidat. To je, jak je animace vytvořena změnou polohování prvků mezi obrazovkami. Přejděte do nástroje Obdélník a držte Posun Přidání náměstí na obrazovce, takže hranice bílá.

12. jiný import

Nyní otevřete složku pro aktiva prostřednictvím operačního systému. Vyberte obrázek 'Cabin1.png' a přetáhněte jej přímo na čtverec, který jste vytvořili v předchozím kroku. Bude to automaticky maskováno uvnitř. Dvakrát klikněte pro úpravu polohy obrázku a ujistěte se, že kabina je viditelná na náměstí.

13. Přidejte štítek

Pomocí textového nástroje přidejte štítek 'Forest Cabin' pod textem a použijte panel aktiv pro styl textu v uloženém stylu z kroku 8. Vyberte snímek a štítek a skupinu je dohromady. Pojmenujte skupinu "levou kabinu" v panelu Vrstvy.

14. Duplikovat skupinu

Obvykle opakování prvku rozhraní je perfektní úloha pro nástroj 'Opakování mřížky'. To však bude potřebovat specifickou animaci, která nefunguje s opakovanou mřížkou. Vyberte obrazovou a textovou skupinu, poté zkopírujte a vložte jej tak, že sedí vedle originálu a místo toho přidejte obrázek 'Cabin2.png'.

15. Přejmenování pak kopírovat znovu

Změňte text na "Sněhovou kabinu" a v panelu vrstev je tato "pravá kabina". Vyberte levou i pravou kabinu a duplikujte je, umístěte níže uvedené duplikáty a aktualizujte jejich text a obrázky s 'Cabin3.png' a 'Cabin4.png'. Skupina oba společně a pojmenovat skupinu "Dolní kabina".

16. Textový název

Přidat text na stránku s textovým výsledkům vyhledávání pro kabiny '. Dejte tomuto písmu Rockwell a uložte to na znakové styly v panelu Aktiva. Nyní umístěte skupinu "Dolní kabiny" v dolní části obrazovky a vyjměte vzhled na nulu tak, aby je na této obrazovce neviditelná.

17. Změna opacity.

Nyní vyberte levé a pravé kabiny, přesuňte je do spodní části obrazovky a pošlete posuvník vzhledu na nulu. Opakujte znovu pro vyhledávací text. Když se přesuneme na jinou obrazovku, všichni budou animovat své nové pozice. V panelu vrstvy přesuňte 'levou kabinu' nad všemi ostatními skupinami kabiny.

18. Duplikovat obrazovku

Vyberte kreslicí kliknutím na jeho název a poté poklepejte na kreslicí a změňte název na 'Domů'. Zkopírujte a vložte kreslicí a přejmenujte ji 'Hledat'. Nyní vyberte logo a přesuňte jej až téměř z obrazovky a poté zmenšete jeho vzhled na nulu.

19. Přesuňte pozadí

Vyberte obraz Sky a lehce ho nudte na obrazovce. Vyberte obraz kabiny a přesuňte ji, dokud kabina není v horní části obrazovky. Poté klikněte na obrázek stromů a přesuňte ji přes kabinu. Nakonec vyberte skupinu "Hledat" a zmenšete vzhled dolů na nulu.

20. Objeví se nové prvky

Vyberte výsledky vyhledávání ve vrstvě Panel a přiveďte jeho vzhled až 100. Přesuňte ji na obrazovku. Opakujte to pro levou kabinu, pravou kabinu a dolní kabinu. Pomocí nástroje pera nakreslete jednoduché tlačítko zpět a přidejte kolem něj kruh. Udělejte rozostření pozadí a vezměte jas, že do -30.

21. Vyplňte zadní tlačítko

Vyberte zadní šipku a kruh, seskupte je dohromady a pojmenujte je na panelu vrstvy. Přepnutí do režimu "Prototyp" stisknutím tlačítka "Prototype" v levém horním rohu rozhraní XD. Vyberte HomeScreen, přetáhněte modrou šipku na obrazovku pro vyhledávání a zobrazí se vyskakovací panel.

22. Hlasový příkaz

Změňte spoušť pro hlas a zadejte slovo 'Search' jako příkaz hlasu, abyste to ovládali. Změňte akci na Auto-Animate a uvolněte. Udělejte trvání 1.5s. Na obrazovce vyhledávání klikněte na tlačítko Zpět a přetáhněte modrou šipku zpět na obrazovku "Domovská stránka". Změňte spoušť k klepnutí.

23. Otestujte prototyp

V pravém horním rohu rozhraní XD je tlačítko přehrávání. Klikněte na toto a na obrazovce se zobrazí pracovní prototyp. Na domovské stránce budete muset držet mezerníku, když mluvíte hlasový příkaz 'Hledat'. Když pustíte do mezerného panelu, pak vás zavede na další obrazovku a animovat grafické rozhraní do pozice.

24. jde zpět

Po provedení přechodu můžete stisknutím tlačítka Zpět, abyste se vrátili do domovů. Zavřete prototyp a klikněte na obrazovku Search a potom klepněte na modrou šipku vpravo (ne tažením). Změňte spouštěcí čas, proveďte zpoždění 0S a nastavte akci na přehrávání řeči. Proveďte výsledky pro vyhledávání řeči pro dostupné kabiny '.

25. Potvrzení řeči

Test to nyní pomocí tlačítka PLAY uslyšíte hlasový potvrzení vyhledávání. Zavřete prototyp, když jste to zkusili. Další obrazovka bude vytvořena, takže klikněte na tlačítko "Design" v levém horním rohu rozhraní XD. Kliknutím na obrazovku vyhledávání kliknutím na název a potom zkopírujte a vložte jej.

26. Scaling obrazu

Přejmenujte novou obrazovku 'Cabin'. Poklepejte na obrázek "Levá kabina" vrstva. Změna velikosti rohových rukojeti tak, aby vyplní obrazovku, a pak přemístěte obrázek uvnitř tak, aby pokrývá tuto obrazovku. Kliknutím na text výsledků vyhledávání a zobrazit vzhled dolů na nulu, abyste jej vyjměte z pohledu.

27. Nové prvky obrazovky

Poklepejte na text 'Forest Cabin' Text, protože je součástí skupiny. Zvětšit velikost textu na 26 pixelů a přesuňte ji mírně na obrazovce. Přidat text na obrazovku v helvetica Neue Medium na velikosti 14 pixelů a nastavte jej na bílou, abyste vynikli na pozadí. Přidejte bílý řádek s nástrojovým nástrojem pod nadpisem.

28. Vytvořte tlačítko

Pomocí nástroje Obdélník nakreslete obdélník na obrazovce v dolní části provedení. Přetáhněte v rohových rukojeti, abyste tento tvar kulaté rohy. Přidejte slovo 'Reserve' k tomu, pomocí uloženého stylu znaků v panelu aktiv pro Helvetica Neue v kondenzovaném tučně.

29. Přechod na režim prototypu

Všechny prvky návrhu jsou nyní na místě pro celý návrh aplikace. Přechod na režim "Prototyp" klepnutím na slovo "prototyp" v levém horním rohu. Na obrazovce vyhledávání klikněte na skupinu "Forest Cabin" obrazu a textu. Přetáhněte modrou rukojeť od této obrazovky "kabiny".

30. Nastavení animace

Ve vyskakovacím panelu pro přechod mezi obrazovkami zvolte Klepněte jako spoušť, a pak proveďte akci Auto-Animate. Uchovávejte uvolnění jako snap, ale snížit délku trvání na 0,6s. To zajišťuje, že animace neahá - pohyb první obrazovky na druhou obrazovku měl spoustu pohybu, který vyžadoval delší přechod.

31. Spojte tlačítko Zpět

Nyní vyberte zadní tlačítko z konečné obrazovky a přetáhněte modrou šipku z tohoto zpětně na obrazovku "Hledat". Všechna nastavení z předchozího přechodu by měla být zapamatována. Nyní jste připraveni jít dál a testovat klepnutím na tlačítko Přehrát.

32. Auto-animovat

To, co uvidíte s Auto-animátem, je to, že obraz se rozbalí k vyplnění obrazovky a prvky, které již nejsou potřebné, zmizí, zatímco nový text bude vyblednout. Opak se stane při návratu. To poskytuje dobrý způsob, jak vidět auto-animovat práci přes tři obrazovky.

33. Uložte projekt

Ve výchozím nastavení by měl projekt automaticky uložit do kreativního cloudu, ale je to dobrý nápad uložit kopii na svůj vlastní pevný disk v případě, že existují nějaké problémy. Klikněte na soubor a gt; Uložit, změnit umístění do vlastního počítače a pojmenujte projekt s vhodným názvem.

34. Sdílení projektu

Celý bod prototypování je testovat projekt na jiných lidech. Naštěstí je k dispozici tlačítko sdílené vpravo od rozhraní XD, které dělá tento vánek. Klepněte na tlačítko Sdílení a v nabídce Drop, která se zobrazí vyberte možnost Sdílení pro recenzi.

35. Publikovat prototyp

Na další obrazovce vám řeknete, že auto-animátová podpora ještě není k dispozici pro web, ale brzy je to brzy. Klepněte na tlačítko Vytvořit veřejný odkaz a potom klepněte na odkaz v pravém horním rohu a navštivte veřejný odkaz ve webovém prohlížeči. Budete muset držet mezerníku, který použijete hlasový příkaz s prototypem.

36. Video verze

Další prototyp lze sdílet nahráváním rozhraní v akci. Klepněte na tlačítko Sdílet a vyberte možnost Záznam videa. Otevře se okno a při zavření budete vyzváni k uložení nahrávání obrazovky jako soubor MP4, což je také užitečný způsob, jak sdílet svůj prototyp.

Tento článek byl původně publikován v čísle 285 kreativního časopisu Creative Web Design Web Designer. . Prodám vydání 285 zde nebo Přihlásit se zde web designer zde .

Související články:

• Mobilní aplikace Design: Průvodce začátečníkem
• Jak vytvořit aplikaci s Vue.js
• Dostaňte se do mobilních aplikací na palubě