Tvorba používateľského rozhrania môže urobiť rozdiel medzi dobrou a skvelou aplikáciou. V tomto tutoriálesa zameriame na to, ako môžeš využiť designako nástroj, aby si svoju aplikáciu urobil atraktívnejšou. Pustíme sa do nového obrazovky, ktorý sa opticky odlišuje od existujúcich prvkov a zaujme používateľa prostredníctvom príťažlivého dizajnu. Poďme na to.
Kľúčové poznatky
- Rôzne farby a kontrasty zvyšujú vizuálnu atraktivitu.
- Jasné rozloženia pomáhajú používateľom lepšie sa orientovať.
- Jednotné veľkosti písma a dizajny podporujú prijemný zážitok používateľa.
Podrobný návod
Pridať nového ovládača
Aby sme vytvorili novú obrazovku, začneme pridaním nového ovládača. Prejdi do svojho rozhrania na tvorbu, klikni na „Pridať ovládač“ a umiestni ho tak, aby sa prispôsobil pod existujúcimi obrazovkami.
Nastavenie ovládača
Pomenúvaj svoj nový ovládač ako „Ovládač kurzu“, aby si uľahčil budúce priradenie. Ujisti sa, že zastaraný názov „iPhone 8 copy“ bol nahradený „Ovládač profilu“.
Prispôsobenie farby pozadia
Previzuálnu príťažlivosť aplikácie je dôležité vybrať dominantnú farbu pozadia. Rozhodni sa pre výraznú zelenú, ktorá sa už používa na iných miestach tvojej aplikácie. Táto stratégia zosilňuje kontrast s bielymi prvkami a dodáva viac dynamiky.
Konfigurácia stavového riadku
Nastav stavový riadok na „Tmavý“, aby bol text na zelenom pozadí dobre čitateľný. Skontroluj pozíciu a uisti sa, že je perfektne prispôsobená.
Vytvorenie štítka
Vytvor nový štítok pre zobrazenie kurzu. Začni s nadpisom, ktorý bude mať celú šírku ovládača. Vyber písmo H4 a zafarb text na bielo.
Pridať ďalšie štítky
Pridaj ďalší štítok pre názov kurzu. Použi veľkosť písma 40 pixelov a uisti sa, že je správne umiestnený – nemal by mať odstup od predchádzajúceho štítku.
Poskytovanie ďalších informácií
Aby si poskytol používateľom viac informácií, pridaj tretí štítok. Použi menšie písmo s veľkosťou 17 pixelov, aby text nevynikal príliš, pokiaľ to nebude potrebné.
Vytvorenie tabuľky
Na záver pridaj tabuľku, aby si prehľadne zobrazil lekcie. Začni s jednoduchým obdĺžnikom, ktorý zabera celú šírku a nastav trochu tmavšiu farbu pozadia, aby si mohol pracovať s bielym textom.
Lekcie ako bunky
Vytvor bunku pre prvú lekciu s názvom „Základy Časť 1“. Dbaj na správny odstup a zarovnanie.
Pridať oddelovač
Aby si vytvoril jasné rozdelenie medzi lekciami, pridaj oddelovač (tenkú čiaru). Táto čiara by mala byť umiestnená medzi bunkami, aby dosiahla vizuálne oddelenie.
Vytvorenie tlačidla na zrušenie
Aby si používateľom umožnil opustiť tento pohľad, pridaj tlačidlo na zrušenie vo forme „X“. Uisti sa, že je dobre viditeľné v strede obrazovky.
Pohľad na ďalšie kroky
Po úspešnom vytvorení nového ovládača kurzu bude ďalším krokomintegrácia prihlásenia. To umožní používateľom ukladať si svoje pokroky v aplikácii.
Zhrnutie – Design ako nástroj na doladenie aplikácie
V tomto tutoriále si sa naučil, ako prostredníctvom efektívneho dizajnu svojej aplikácie vytvoriť vylepšený používateľský zážitok. Od pridania nového ovládača, cez výber vhodných farieb až po zapojenie buniek a tlačidiel – prešiel si všetkými potrebnými krokmi na to, aby si svoju aplikáciu urobil vizuálne príťažlivou.
Často kladené otázky
Akoé sú hlavné ciele dizajnového procesu?Hlavným cieľom je vytvorené príťažlivé a používateľsky prívetivé rozhranie, ktoré uľahčuje ovládanie aplikácie.
Akú dôležitosť majú farby v dizajne?Farby sú rozhodujúce, pretože ovplyvňujú používateľský zážitok a pomáhajú zvýrazniť dôležité informácie.
Ako môžem zabezpečiť, aby boli veľkosti písma konzistentné?Použi stanovené veľkosti textov a štýly vo svojom dizajnovom systéme, aby si zabezpečil jednotnosť.
Ako často by som mal kontrolovať dizajn svojej aplikácie?Odporúča sa pravidelne kontrolovať dizajn a prispôsobovať ho na základe spätnej väzby od používateľov a aktualizácií aplikácie.
Aké nástroje sú odporúčané na prototypovanie?Populárne nástroje sú Sketch, Figma a Adobe XD, ktoré všetky ponúkajú rozsiahle funkcie na prototypovanie.
