V tomto textovém průvodci se naučíš krok za krokem, jak navrhnout domovskou obrazovku pro aplikaci v Sketch. Zaměříme se na základy a některé osvědčené návrhové principy, abychom vytvořili atraktivní uživatelské rozhraní. Uvidíš, že proces je jednoduchý a srozumitelný, a brzy budeš moci vytvářet vlastní návrhy.
Nejdůležitější poznatky
- Použití Sketch pro vytváření rozložení domovské obrazovky
- Důležité návrhové principy pro atraktivní uživatelská rozhraní
- Použití barevných kódů a symbolů pro zjednodušení návrhového procesu
Návod krok za krokem
Abychom začali s tvým návrhem, otevři Sketch a vytvoř nové dokument pro svou domovskou obrazovku.
Nejdříve zvolíš iPhone 8 jako svůj designový rámec. Je logické začít s menší obrazovkou, protože tento postup usnadňuje přizpůsobení větším displejům.
Teď otevři originální aplikaci nebo design, který chceš použít jako šablonu. Přidáme navigaci, která podpoří strukturu tvé aplikace. Začni tím, že vybereš navigační prvky.
Klikni na kreslící plochu a pojmenuj desku jako "Barva pozadí domova". Abychom zajistili, že tvé pozadí později nebude průhledné, nastav jednoduchou barvu pozadí, nejprve bílou.
V dalším kroku se zaměříš na vytváření prvku kurzu. K tomu klikni na plochu a začni navrhovat kartu kurzu. Kartu vytvoříš v čistém, jednoduchém designu, který dodržuje principy plochého designu.
Pro návrh karty je důležitá barva pozadí. Můžeš použít jednoduchou modrou, abys dosáhl okamžité vizuální separace. Alternativně můžeš experimentovat s barevnými přechody, abys přidal hloubku a rozměr.
Teď vlož text pro kurz. Můžeš přizpůsobit textové pole, aby bylo zajištěno, že text bude uprostřed a dobře čitelný. Mezera kolem textu je klíčová. Dbej na to, abys udržel kolem 16 pixelů místa po stranách, abys dosáhl harmonického designu.
Až uspořádáš mezery a textové pole, vytvoř popis pro kurz. I při popisovém labelu je důležité dbát na velikost. Velikost kolem 14 bodů zajistí dobrou čitelnost.
Jakmile implementuješ základní prvky, můžeš vytvořit další symboly. Ty budou užitečné, pokud chceš opakovaně používat podobné prvky ve svém návrhu. Vytvoř symbol pro kartu kurzu, abys jej mohl znovu použít v jiných částech aplikace.
Když jsi vytvořil svůj symbol, automaticky se změny přizpůsobí ve všech instancích. Teď můžeš přizpůsobit název a popis svého kurzu, aniž bys musel všechno manuálně měnit. Použij jednoduché textové značky k zajištění jasné struktury.
Aby tvoje karty vypadaly vizuálně přitažlivě, přidej stín. Dbej na to, aby byl subtelný, aby design nebyl přeplněný. Lehký stín zajišťuje, že prvky vystupují a lépe zapadají do celkového obrazu.
Použij zaoblené rohy pro své karty, aby se zvýšila vizuální atraktivita. Poloměr rohu 8 zajišťuje moderní, čistý vzhled, který odpovídá návrhovým pokynům Apple.
Teď vytvoř jasný název nad kartou kurzu, abys optimalizoval uživatelské řízení a lépe strukturoval obsah. Dbej na to, aby výška a rozestup k předchozímu prvku zůstaly konzistentní.
V neposlední řadě je důležité myslet na jednotný design. Udržuj rozestupy mezi všemi prvky a okrajovými obrázky jednotné, aby vytvořil harmonický celkový obraz.
Souhrn - Navrhněte atraktivní domovskou obrazovku s Sketch
Dnešní kroky ti ukázaly, jak navrhnout funkční a atraktivní domovskou obrazovku pomocí Sketch. Použitím jednoduchých principů designu a uživatelského řízení můžeš vytvořit aplikaci, která je nejen vizuálně přitažlivá, ale také dobře funguje.
Často kladené otázky
Jak začnu s Sketch?Otevřeš Sketch a vytvoříš nový dokument.
Které zařízení bych měl zvolit jako šablonu?iPhone 8 je dobrou volbou, protože má standardní velikost.
Jak důležité jsou rozestupy v designu?Rozestupy jsou klíčové pro čistý a atraktivní design.
Co jsou symboly v Sketch a jak je používám?Symboly ti umožňují vytvářet opakující se designové prvky a aplikovat změny všude.
Jak mohu přidat stíny do svého designu?Přidej stíny pomocí nastavení pro "Úrovně" v Sketch.
