Prototypování Mobility App jednoduše ve Sketch

Stojíš před výzvou vytvořit atraktivní Prototyping pro Mobility-App. Nejde jen o design; cílem je efektivně vytvořit uživatelskou zkušenost od samého začátku, aby uživatel mohl intuitivně procházet aplikací. V tomto tutoriálu tě krok za krokem provedeme procesem vzniku prototypu v Sketch. Pojďme začít tuto vzrušující cestu do světa designu!

Nejdůležitější poznatky

• Prototyping je rozhodující krok ve vývoji aplikace.
• V Sketch můžeš začít s jednoduchými tvary a designy.
• Jasná struktura a vedení uživatele jsou pro úspěch tvé aplikace nezbytné.

Podrobný návod

Začni tím, že vytvoříš základní strukturu své aplikace v Sketchu. Můžeš použít nástroj pro malování k nakreslení svých prvních designových prvků. Jednoduše přejdi na nástroj pro malování nebo stiskni klávesu „P“, aby sis ho vybral.

Vytvoř obdélník, který by měl představovat obrazovku tvé aplikace. Drž stisknutou klávesu „Alt“, zatímco táhneš myší obdélník. To zajistí, že obdélník zůstane proporcionální. To již vypadá docela dobře.

Teď se pustíme do designu první stránky aplikace. Začni s dolní lištou záložek. Opět využij nástroj pro malování a potáhni přímou čáru se stisknutou klávesou Shift, aby ses ujistil, že dostaneš přímou čáru.

Jakmile navrhuješ lištu záložek, přidej tři ikony, které představují hlavní funkce aplikace. Pomocí klávesy ALT můžeš snadno duplikovat tvary, zatímco je přesuneš na správné místo.

Teď se věnujeme horní liště navigace. Znovu drž stisknutou klávesu ALT, zatímco táhneš další obdélníkovou oblast pro navigační lištu.

Bublinky chatu jsou další částí tvé aplikace, kterou chceme navrhnout. Využij nástroj pro malování, abys nakreslil bublinku chatu. Ta se uživateli okamžitě zobrazí jako pozdrav. Přidej krátký text, který osloví uživatele, jako například „Ahoj a vítej v Mobility App!“

Aby vše vypadalo atraktivně, můžeš bublinky kopírovat a přizpůsobovat. Vyber bublinky a táhni je dolů s stisknutou klávesou ALT, abys přidal další uvítací text, jako "Začni svou první Mobilní seanci".

Dalším krokem je vložení tlačítka pro video, pomocí kterého mohou uživatelé přehrávat své lekce. Nakresli kulaté tlačítko s nástrojem pro malování a kombinuj ho s trojúhelníkem, aby byla jasná jeho prezentace a funkce.

Nyní zkopíruj všechny důležité UI prvky – jako horní a dolní navigační lišty – na další stránku, abys zajistil konzistenci v designu. Můžeš snadno vytvořit snímek obrazovky s podrženou klávesou ALT, abys duplikoval prvky na další stránku.

Na této nové obrazovce, kterou jsi vytvořil, navrhni možnosti pro kurzy. Zde bys měl vytvořit jednoduchý přehled dostupných kurzů, které si uživatel může vybrat.

V profilu můžeš vytvořit místo pro profilový obrázek, uživatelské jméno a počet absolvovaných hodin kurzu. Zde je důležité informace jasně a srozumitelně prezentovat.

Na závěr designu výběru kurzů a lekcí vytvoř přehled lekcí a přidej tlačítko pro zavření, aby uživatel mohl výběr kdykoli zavřít.

Tímto je základní prototyp tvé Mobility App dokončen. Nyní máš atraktivní design, který jasně strukturuje uživatelské vedení a zároveň ti jako designérovi pomáhá jasně vizualizovat vizi aplikace.

Shrnutí – Prototyping Mobility App v Sketch

V průběhu tohoto tutoriálu jsi se krok za krokem naučil, jak prototypovat mobilní aplikaci v Sketch. Od prvního nápadu po poslední designové prvky jsi mohl rozšířit své znalosti a vytvořit užitečný nástroj pro další vývoj tvé aplikace.