Začiatok App-dizajnuby mal byť vždy premyslený a atraktívny. V tomto tutoriále sa dozvieš, ako môžeš upraviť Homecontroller svojej aplikácie, aby si pridal viac interaktivity a vizuálnej atraktivity. Poďme hneď na to!
Najdôležitejšie poznatky
- Home controller môže byť atraktivnejšie navrhnutý kreatívnym používaním farieb a rozložení.
- SVG súbory ponúkajú výhody v editovateľnosti a ostrosti.
- Použitie farebných prechodov a rôznych sekcií môže výrazne zlepšiť používateľskú skúsenosť.
Krok za krokom návod
Najprv sa pozrieme na existujúci Home controller. Tu si všimneš, že máme rôzne sekcie: prehľad kurzov, interaktívny chat a profil. Zameriame sa na Home Feed. V tomto tutoriále prispôsobíme navigáciu a optimalizujeme dizajn.
Krok 1: Prepracovanie navigácie
Aby sme vylepšili dizajn tvojho Home controlleru, začneme prepracovaním navigačného panela. Existujúce prvky, ako je navigácia, najprv odstránime.
Teraz pridáme obdĺžnik ako nový nadpis, ktorý by mal mať výšku 250 pixelov. Obdĺžnik by nemal mať orámovanie, aby sa zabezpečil čistý vzhľad.
Krok 2: Pridanie hlavičky a textu
V nasledujúcom kroku si vyberieš farbu dokumentu a pridáš nový text. Nastav text na „Všetky kurzy“ a experimentuj s textovými štýlmi. Odporúčaná veľkosť pre hlavičku by bola 110 pixelov. Dôležité je, aby hlavička bola prispôsobená stavovému panelu.
Krok 3: Úprava pozadí a farieb
K atraktívnemu dizajnu patrí aj používanie farebných prechodov. Vráť sa k svojmu obdĺžniku a vyber farebný prechod, ktorý je dynamický a harmonický v celkovom rozložení. Diagonálny prechod dodáva hĺbku.
Krok 4: Pridanie novej sekcie
Teraz vytvoríme novú sekciu pod hlavičkou. Pridaj ďalší obdĺžnik s výškou 350 pixelov a odstráň orámovanie. Tu môžeš zvoliť kontrastnú farbu, aby si oživil aplikáciu.
Krok 5: Obsah a ikony
V tejto sekcii by sme mohli pridať tlačidlo na ponuku viac obsahu pre používateľa, napríklad videa. Dopln text „Power of Mobility“ vo formáte H3 a umiestni ho 16 pixelov od vrchu.
Teraz pridáme ikonu, ktorá môže byť buď vytvorená sami, alebo importovaná z zdrojov. Odporúča sa používať SVG súbory, pretože sú jednoducho editovateľné.
Krok 6: Vytvorenie sekcie Pro verzie
Vytvor ďalšiu sekciu, ktorá dá používateľom možnosť zakúpiť si Pro verziu aplikácie. Pridaj nový obdĺžnik s výškou 250 pixelov a umiestni tam svoj Call-to-Action „Získať Pro verziu“.
Tu je dôležité, aby bol text výrazne navrhnutý. Môžeš použiť tmavšiu farebnú variantu, aby si zabezpečil, že text bude dobre čitateľný.
Krok 7: Prehľadnosť pomocou skupín
Vytvor skupiny z rôznych sekcií, aby si zvýšil prehľadnosť. To ti pomôže lepšie organizovať rôzne oblasti.
Krok 8: Posledné úpravy a vyrovnanie
Na záver môžeš znova skontrolovať všetky prvky v sekciách a prípadne upraviť vzdialenosti a pozície, aby si zabezpečil čisté rozloženie.
Zhrnutie – Home-Redizajn: Tvoja efektívna cesta k atraktívnemu používateľskému rozhraniu
Naučil si sa, ako môžeš svoje Home controller znova navrhnúť, aby bol interaktívnejší a vizuálne atraktívnejší. Kreatívnym používaním farebných prechodov, implementáciou SVG ikon a štruktúrovaním sekcií si výrazne vylepšil rozloženie svojej aplikácie.
Často kladené otázky
Ako môžem zabezpečiť, že moja hlavička vyzerá dobre?Dbaj na to, aby si použil vhodné veľkosti textu a farebné kombinácie, ktoré sú v celom dizajne súdržné.
Aké výhody mám z používania SVG súborov?SVG súbory sú škálovateľné a zachovávajú si ostrosť bez ohľadu na úroveň priblíženia.
Ako môžem pridať farebné prechody do Sketch?Vyber požadovaný prvok, prejdite na možnosti výplne a vyber „Gradient“ pre vytvorenie atraktívnych prechodov.
