Stojíš pred výzvou vytvoriť atraktívne Prototyping pre Mobility-App. Nejde iba o dizajn; ide o to, ako efektívne vytvoriť užívateľský zážitok od samého začiatku, aby pomohol užívateľovi intuitívne sa navigovať cez aplikáciu. V tomto tutoriále ťa krok za krokom prevedieme procesom vytvorenia prototypu v Sketch. Poďme začať túto vzrušujúcu cestu do sveta dizajnu!
Najdôležitejšie poznatky
- Prototyping je rozhodujúci krok vo vývoji aplikácií.
- V Sketch môžeš začať s jednoduchými tvarmi a dizajnmi.
- Jasná štruktúra a užívateľské navádzanie sú nevyhnutné pre úspech tvojej aplikácie.
Krok za krokom návod
Začni tým, že vytvoríš základnú štruktúru tvojej aplikácie v Sketch. Môžeš použiť nástroj na maľovanie, aby si nakreslil svoje prvé dizajnové prvky. Jednoducho prejdite na nástroj na maľovanie alebo stlačte kláves „P“, aby ste ho vybrali.
Vytvor obdĺžnik, ktorý má zobraziť obrazovku tvojej aplikácie. Drž stlačenú klávesu „Alt“, zatiaľ čo ťaháš s myšou obdĺžnik. To zabezpečí, že obdĺžnik zostane proporčný. Vyzerá to už dosť dobre.
Teraz sa zameraj na navrhovanie prvej stránky aplikácie. Začni dolnou panelovou lištou. Znova použij nástroj na maľovanie a ťahaj priamku so stlačenou klávesou Shift, aby si mal naozaj priamu čiaru.
Ako náhle navrhneš panelovú lištu, pridaj tri ikony, ktoré reprezentujú hlavné funkcie aplikácie. S klávesou ALT môžeš jednoduché duplicovať objekty, zatiaľ čo ich ťaháš na správne miesto.
Teraz sa zameriame na hornú navigačnú lištu. Opäť drž klávesu ALT stlačenú pri ťahaní ďalšieho obdĺžnikového priestoru pre navigačnú lištu.
Chatové bubliny sú ďalšou časťou tvojej aplikácie, ktorú chceme navrhnúť. Použi nástroj na maľovanie, aby si nakreslil chatovú bublinu. Táto bublina sa užívateľovi okamžite zobrazí ako privítanie. Pridaj krátky text, ktorý osloví užívateľa, napr. „Ahoj a vitaj v Mobility App!“
Aby si zabezpečil, že celok bude vyzerať atraktívne, môžeš bubliny kopírovať a prispôsobiť. Vyber bubliny a ťahaj ich s klávesou ALT nadol, aby si pridal ďalší privítací text, ako „Začni so svojou prvou Mobility Session“.
Nasledujúci krok je vloženie tlačidla pre video, ktoré umožňuje užívateľom prehrávať svoje lekcie. Nakresli okrúhle tlačidlo s nástrojom na maľovanie a skombinuj ho s trojuholníkom, aby si jasne ukázal jeho zobrazenie a funkciu.
Teraz skopíruj všetky dôležité UI prvky – ako horné a dolné navigačné lišty – na ďalšiu stránku, aby si zaistil konzistentnosť dizajnu. Môžeš jednoducho urobiť screenshot s držanou ALT klávesou, aby si duplicoval prvky na ďalšiu stránku.
Na tejto novej obrazovke, ktorú si vytvoril, navrhni možnosti pre kurzy. Tu by si mal vytvoriť jednoduchý prehľad dostupných kurzov, ktoré užívateľ môže zvoliť.
V profilovom pohľade môžeš vytvoriť miesto pre profilový obrázok, užívateľské meno a počet ukončených hodín kurzu. Je dôležité tieto informácie jasne a zreteľne zobraziť.
Ak chceš dokončiť dizajn výberu kurzov a lekcií, vytvor prehľad pre lekcie a pridaj tlačidlo na uzavretie, aby mohol užívateľ kedykoľvek zatvoriť výber.
Týmto sa základný prototyp pre tvoju Mobility aplikáciu dokončil. Teraz máš atraktívny dizajn, ktorý jasne štruktúruje užívateľské navádzanie a zároveň ti ako dizajnérovi pomáha jasne vizualizovať víziu aplikácie.
Zhrnutie – Prototyping Mobility App v Sketch
V priebehu tohto tutoriálu si sa krok za krokom naučil, ako prototypovať Mobility App v Sketch. Od prvej myšlienky až po posledné dizajnové prvky si mohol rozšíriť svoje vedomosti a vytvoriť užitočný nástroj pre ďalší vývoj svojej aplikácie.
Často kladené otázky
Ako začať s dizajnom v Sketch?Vyber nástroj na maľovanie (P) a začni vytvárať prvé prvky.
Ako môžem efektívne duplikovať prvky?Drž stlačenú klávesu ALT, zatiaľ čo ťaháš prvok myšou.
Čo ak nie som so dizajnom spokojný?Môžeš kedykoľvek upraviť existujúce prvky alebo vytvoriť nové, aby si dosiahol požadovaný výsledok.
Ako zabezpečím, že užívateľské navádzanie je jasné?Dbaj na to, aby boli všetky funkcie logicky usporiadané a aby sa užívateľ mohol intuitívne navigovať.
Môžem v Sketch navrhovať aj pre mobilné zariadenia?Áno, môžeš prispôsobiť typ a veľkosť prvkov podľa veľkosti obrazovky mobilných zariadení.
