Vyrobte si prototyp vysokej kvality v Atomic

Je ľahké sa chytiť pri pokuse o rozvinutie nápadu v rámci statického modelu alebo nástroja na kreslenie plochých súborov, ale prototyp stojí za tisíc stretnutí. Prečo by ste sa uspokojili s niečím iným, ako s interaktívnym skúmaním svojich nápadov?

Možno máte predstavu, ako by sa prechod mohol správať, ale nie ste si úplne istí, či by sa to používateľovi javilo ako správne. Rýchle prototypovanie prechodu a jeho priama interakcia vám poskytne oveľa realistickejšie skúsenosti s tým, ako by konečný produkt mohol fungovať v skutočnom svete.



Videli sme, že nástroje priniesli prototypy do dizajnového priestoru, ale žiadny sa im celkom nepáči Atómová . Teraz existuje spôsob, ako vytvoriť plne interaktívne prototypy vysokej kvality, ktoré vyzerajú a správajú sa ako skutočné veci.



Prototypovanie v Atomic je neuveriteľne rýchle: nádherné, pokročilé makety môžete vytvoriť za pár minút bez toho, aby ste museli písať kód, inštalovať akýkoľvek softvér alebo piť príliš veľa kávy. Budete môcť zobraziť ukážku prototypu priamo vo svojom mobilnom zariadení alebo ho zdieľať so spoluhráčom a získať tak spätnú väzbu. Tiež sme vopred vyrobili všetky aktíva, ktoré potrebujete, aby ste mohli začať, aby ste nemuseli nič importovať (ale môžete importovať z aplikácie Skica a Photoshop CC tiež).

V tomto tutoriáli preskúmame jednoduchý prechod prejdením prstom v aplikácii pre počasie, ktorú vytvoríme v Atomic. Prejdeme si jednoduché kroky na vytváranie prechodov a ak budete potrebovať výzvu, vysvetlím aj niektoré pokročilejšie funkcie prototypov, ktoré môžete preskúmať.



01. Zaregistrujte sa

Začnime! Ak ešte nemáte účet, otvorte prehliadač Google Chrome a navštívte stránku atomic.io a zaregistrujte sa na bezplatnú skúšobnú verziu. To trvá 30 dní, čo by malo byť veľa času na to, aby ste preskúmali Atomic a vyrobili svoj prvý prototyp.

02. Poobzerajte sa okolo seba

Vzorový projekt obsahuje vzorové súbory, ktoré vám pomôžu lepšie sa oboznámiť s produktom Atomic

Vzorový projekt obsahuje vzorové súbory, ktoré vám pomôžu lepšie sa oboznámiť s produktom Atomic

Teraz ste prihlásení do svojho účtu, je to skvelý čas na preskúmanie. Všimnete si, že bol pre vás nastavený vzorový projekt. Toto má niekoľko úvodných vzorových súborov, s ktorými sa môžete pohrať, keď sa zoznamujete s produktom Atomic. Prípadne môžete navštíviť našu stránku Vitrína , ktorá má zbierku prototypov vytvorených inými. Ak sa zaseknete, najlepším miestom na hľadanie riešenia je naše centrum pomoci .



03. Nový projekt

Kliknutím na „Nový projekt“ vytvorte nový projekt a pomenujte ho „Recept App“. Stlačením klávesu Enter otvoríte priečinok projektu. Tu si môžete pozrieť všetky dizajny v rámci tohto konkrétneho projektu. Keďže ide o nový projekt, je prázdny. Dizajny sa tu však časom zaplnia, keď ich budete vytvárať.

04. Chyťte vzorku

Tam

Pre tento projekt existuje pripravený vzorový súbor

Namiesto vytvorenia nového prázdneho dizajnu smer sem . Týmto sa otvorí vzorový súbor, ktorý sme vytvorili, aby sme vám pomohli začať.

Vidíte tlačidlo „Kopírovať a upraviť“ v pravom dolnom rohu? Kliknite na túto položku a pridajte ju do svojho projektu Recipe App. Kliknite na položku Upraviť. Rovnako tak je teraz vo vašom projekte kópia nášho vzorového súboru pripravená na úpravy.

05. Preskúmajte editora

Vitajte v redakcii! Ak ste v minulosti používali návrhový nástroj, Atomic vám bude pravdepodobne dôverne známy. Pozrime sa okolo seba. Na ľavej strane nájdete prístup k nástrojom na kreslenie, rozloženie a prototypy, ako aj k dvom kartám, ktoré umožňujú prepínať medzi panelmi Stránky a Vrstvy. Vpravo si všimnete panel Vlastnosti, ktorý vám umožní zmeniť veľkosť stránky a tiež vyvolať nastavenia štýlov a prechodov.

06. Skontrolujte prvky

Vo vzorovom súbore

Na stránke Diela vzorového súboru nájdete prvky, ktoré potrebujete

Na stránke Diela ukážkového súboru uvidíte, že sme pre vás vytvorili všetky prvky použité v tomto prototype. Prepnite na panel Vrstvy a potom kliknite na niektoré prvky na plátne. Prvky, ktoré vyberiete, sa automaticky zvýraznia na paneli vrstiev. Zrýchlite svoj pracovný postup stlačením klávesu „?“ zobrazíte celý rad klávesových skratiek, ktoré môžete použiť.

07. Ukážka

Kliknutím na tlačidlo „Ukážka“ v pravom dolnom rohu editora môžete kedykoľvek zobraziť ukážku svojho prototypu a pracovať s ním. Toto použijeme neskôr na vyskúšanie toho, ako sa cítia naše prechody. Ak teraz vyberiete možnosť „Zobraziť ukážku“, diela sa zobrazia v režime celej obrazovky. Ak však pomocou šípok prejdete na stránku 2, uvidíte referenčný príklad prvého stavu nášho prototypu. Vyskúšajte interakciu s referenčným príkladom kliknutím na tlačidlo „Uložené recepty“ v hlavičke, čím zobrazíte ukážku toho, čo vytvoríme.

08. Začíname

Teraz ste oboznámení s prototypom, ktorý staviame, je čas začať! Vyberte možnosť Upraviť, aby ste sa dostali späť do editora, a potom na stránke Diela vyberte všetky prvky a skopírujte ich do schránky. Prejdite na stránku 1 a prilepte na stránku prvky.

09. Usporiadajte svoje aktíva

Bez vybratých prvkov nastavte výplň pozadia plátna na # F6F7F8 (pozrite sa na pravý panel Vlastnosti). Hlavičku umiestnite na plátno, zhora a na stred.

Budete chcieť usporiadať podklady tak, aby váš prvý stav (Všetky recepty) bol umiestnený na plátne a podklady pre váš čoskoro vytvorený druhý štát (Uložené recepty) sú mimo plátna vpravo. Tu je dôvod: keď na stránkach 1 a 2 existuje rovnaký objekt, Atomic automaticky animuje všetky zmeny medzi nimi.

10. Zložte svoje karty

Pri prvotnej ukážke prototypu ste si mohli všimnúť, že informačný kanál receptov na stránke „Referencia - všetky recepty“ je vertikálne posúvateľný. Ak chcete pridať tento efekt, usporiadajte karty receptov do zvislého stohu vrátane dolnej časti textu „Vráťte sa zajtra“, ktorý by sa mal umiestniť ako posledný.

11. Vytvorte posúvací kontajner

Vyberte karty receptov a text „Vráťte sa zajtra“ a vyberte nástroj Kontajner, ktorý sa objaví v strede hore na plátne. Vyberte možnosť „Vytvoriť posúvací kontajner“. Obsah sa potom zoskupí a umiestni do toho, čo nazývame posúvací kontajner, pričom vertikálne posúvanie je predvolene povolené. Nezabudnite definovať hranice kontajnera potiahnutím dolnej hranice nahor, aby ste zakryli prvky a dostali sa na plátno.

12. Umiestnite svoje prvky

Pre tento konkrétny prechod chceme, aby mriežka „Uložené recepty“ prichádzala sprava a text „Pridať ďalšie“ vychádzajúci zdola. Aby ste sa uistili, že k tomu dôjde, umiestnite každý prvok do príslušnej východiskovej polohy. Napríklad „Uložené recepty“ by mali byť umiestnené na strane 1, mimo plátna a vpravo; zatiaľ čo text „Pridať ďalšie“ by mal byť umiestnený na strane 1, mimo plátna a dole.

13. Klepnite na prechod

Keď vytvárame prechod klepnutím, kde chceme, aby sa prvky na našej ďalšej stránke zasunuli, je dôležité, aby existovali aj na stránke 1, mimo plátna, aby sme definovali svoju východiskovú pozíciu. Kedykoľvek môžete navštíviť stránku „Referencia - všetky recepty“ a zistiť, ako by mala byť táto stránka usporiadaná.

14. Duplikácia

Pre náš prechod duplikujte stranu 1

Pre náš prechod duplikujte stranu 1

Teraz sme nastavili prvú stránku, je čas vytvoriť druhý stav prechodu, ktorý urobíme na novej stránke. Uistite sa, že je vybratý panel Stránky, potom umiestnením kurzora myši na stránku 1 zobrazte ponuku hamburgerov v pravom dolnom rohu karty Stránka. Kliknite na ponuku a vyberte možnosť Duplikovať.

15. Uložené recepty

Atomic bude animovať všetky zmeny, ktoré urobíte medzi stránkou 1 a novou stránkou 2

Atomic bude animovať všetky zmeny, ktoré urobíte medzi stránkou 1 a novou stránkou 2

Prejdite na svoju novo duplikovanú stránku a vytvorte druhý stav: vaše uložené recepty. Tu je dôležité neodstraňovať žiadne prvky na stránke, pretože by sa tým narušil prechod. Pretože sme duplikovali stránku, spoločnosť Atomic vie, že prvky na oboch stránkach sú rovnaké spojené prvky. Preto vie animovať všetky zmeny, ktoré urobíme vo vlastnostiach prvkov na stránke 2 (veľkosť, poloha, rotácia, nepriehľadnosť, farba atď.).

ako pridať obrázok k inému obrázku vo photoshope

16. Viac prechodov

Najskôr posuňte posúvaciu skupinu „Všetky recepty“ doľava, mimo plátno, a prvok „Uložené recepty“ a text „Pridať ďalšie“ na svoje nové pozície: v tele (namiesto skupiny „Všetky recepty“) na v dolnej polovici plátna a v strede. Jediným prvkom, ktorým sa v tomto prechode nepohybujeme, je hlavička. Je to preto, že hlavička zostáva na obrazovke a iba sa jemne mení - k tomu sa čoskoro dostaneme.

17. Ďalšia animácia

V prípade hlavičky chceme, aby sa modré pozadie posúvalo v druhom stave. Na stránke 2 s otvoreným panelom Vrstvy rozbaľte skupinu s názvom „Hlavička“ a vyberte modrý obdĺžnik. Potom ju posuňte doprava, aby bola umiestnená za položkou „Uložené recepty“. Pekný!

18. Zábavná časť

Pridajte hotspot pre interakciu do oblasti, s ktorou majú používatelia interagovať

Pridajte hotspot pre interakciu do oblasti, s ktorou majú používatelia interagovať

Teraz prichádza na rad zábavná časť vytvorenia prechodu. Na strane 1 nakreslíme hotspot nad textom „Uložené recepty“ v hlavičke, pretože to je oblasť, s ktorou chceme, aby náš užívateľ interagoval. Vyberte nástroj Interakčný hotspot na paneli Nástroje úplne vľavo od editora (alebo jednoducho stlačte kláves H). Aktívne body môžete kresliť rovnakou metódou, akou ste nakreslili obdĺžnik na plátno: stačí kliknúť a presunúť.

19. Nastavenia prechodu

Prispôsobte si svoj prechod vrátane gesta a typu pohybu

Prispôsobte si svoj prechod vrátane gesta a typu pohybu

Po nakreslení hotspotu, ktorý je stále vybraný, sa na paneli Vlastnosti vpravo zobrazí časť Interakcie. Tu môžete určiť gesto spúšťača, cieľovú stránku, typ pohybu a trvanie prechodu. Pre tento prechod zadajte nasledujúce nastavenia: Gesto: Kliknite alebo klepnite ; Ísť do: Strana 2 ; Pohyb: E. ase in-out ; Trvanie: 250 .

20. Tam a späť

Chceme mať možnosť prepínať medzi dvoma prechodmi tam a späť, takže teraz tiež budeme musieť umiestniť hotspot na stránku 2, aby sme sa dostali späť na stránku 1. Skopírujte hotspot zo stránky 1 pomocou klávesových skratiek a prilepte na strane 2 nad textom „Všetky recepty“ v záhlaví. Nezabudnite aktualizovať nastavenie cieľovej stránky nového hotspotu na stránku 1.

21. Ukážka

Kliknutím na tlačidlo Ukážka zobrazíte svoj prechod v akcii

Kliknutím na tlačidlo Ukážka zobrazíte svoj prechod v akcii

Je čas pozrieť si ukážku svojho prechodu! Na paneli stránok prejdite na stránku 1 a kliknite na položku Ukážka v pravom dolnom rohu editora (odkaz cmd + vstúpiť ). Kliknite alebo klepnite na „Uložené recepty“ na vašom prototype, aby ste sa dostali na stránku 2. Potom vyberte prototyp „Všetky recepty“, aby ste sa dostali späť na stranu 1.

22. Všetko hotové!

Teraz ste profesionál! Kliknutím na položku Upraviť sa vrátite do editora. Ak potom odstránite diela a dve referenčné stránky (výberom ponuky hamburgerov na stránke a následným odstránením stránky), prototyp, ktorý ste práve vytvorili, je pripravený na zdieľanie. Odkaz na zdieľanie môžete ľahko vytvoriť stlačením „Zdieľať“ v pravom dolnom rohu editora.

Tento článok sa pôvodne objavil v sieťový časopis vydanie 283; kúpite to tu !