Design jako nástroj pro doladění aplikace: krok za krokem návod

Navrhování uživatelského rozhraní může znamenat rozdíl mezi dobrou a skvělou aplikací. V tomto tutoriáluse zaměříme na to, jak můžeš designvyužít jako nástrojk tomu, aby byla tvoje aplikace atraktivnější. Pustíme se do nového screenu, který se opticky odlišuje od existujících prvků a zaujme uživatele atraktivním designem. Pojďme na to hned.

Nejdůležitější poznatky

• Různé barvy a kontrasty zvyšují vizuální atraktivitu.
• Jasné struktury rozvržení pomáhají uživatelům lépe se orientovat.
• Jednotné velikosti písma a designy podporují příjemný uživatelský zážitek.

Pokyn krok za krokem

Přidat nový ovladač

Abychom vytvořili nový screen, začneme přidáním nového ovladače. Přejdi do svého rozhraní pro návrh, klikni na „Přidat ovladač“ a umísti jej tak, aby se přizpůsobil pod existujícími screenech.

Nastavení ovladače

Pojmenuj svůj nový ovladač jako „Kurzy Ovladač“, aby bylo snazší budoucí přiřazení. Ujisti se, že zastaralý název „iPhone 8 copy“ je nahrazen názvem „Profile Ovladač“.

Přizpůsobení barvy pozadí

Provizuální atraktivitu aplikace je důležité vybrat dominantní barvu pozadí. Rozhodni se pro výraznou zelenou, která je již použita na jiných místech tvé aplikace. Tato strategie posiluje kontrast s bílými prvky a dodává dynamiku.

Nastavit stavový řádek

Nastav stavový řádek na „Tmavý“, aby byl text na zeleném pozadí dobře čitelný. Zkontroluj pozici a ujisti se, že je perfektně přizpůsoben.

Vytvořit štítek

Vytvoř nový štítek pro zobrazení kurzu. Začni s nadpisem, který pokrývá celou šířku ovladače. Zvol písmo H4 a zbarvi text na bílou.

Přidat další štítky

Přidej další štítek pro název kurzu. Použij velikost písma 40 pixelů a ujisti se, že je správně umístěn – neměl by mít vzdálenost od předchozího štítku.

Poskytnout další informace

Abychom uživatelům poskytli více informací, přidej třetí štítek. Použij menší písmo o velikosti 17 pixelů, aby text příliš nevynikal, dokud není potřeba.

Tvorba tabulky

Na závěr přidej tabulku, aby byly lekce přehledně zobrazeny. Začni s jednoduchým obdélníkem, který pokrývá celou šířku, a pozadí navrhni o něco tmavší, abys mohl pracovat s bílým textem.

Lekce jako buňky

Vytvoř buňku pro první lekci s názvem „Základy Part 1“. Dbej na odpovídající vzdálenost a zarovnání.

Vložit oddělovač

Abychom vytvořili jasné oddělení mezi lekcemi, přidej oddělovač (tenkou čáru). Tato čára by měla být umístěna mezi buňkami, aby došlo k vizuálnímu oddělení.

Vytvořit tlačítko pro zrušení

Abychom uživatelům umožnili opustit tento pohled, přidej tlačítko pro zrušení ve tvaru „X“. Ujisti se, že je dobře viditelné ve středu obrazovky.

Pohled na další kroky

Až bude nový ovladač kurzu úspěšně vytvořen, dalším krokembude integrace přihlášení. To umožní uživatelům ukládat jejich pokroky v aplikaci.

Shrnutí – Design jako nástroj pro vylepšení aplikace

V tomto tutoriálu jsi se naučil, jak pomocí efektivního designu své aplikace vytvořit lepší uživatelskou zkušenost. Od přidání nového ovladače, přes výběr vhodných barev až po zapojení buněk a tlačítek – prošel jsi všemi potřebnými kroky, abys učinil svou aplikaci vizuálně přitažlivou.