iPhone X zásadně změnil design aplikací. Se svým jedinečným formátem a novými prvky uživatelského rozhraní musí designéři prokázat větší flexibilitu a kreativitu, aby vytvořili působivé aplikace. Tento návod vysvětluje krok za krokem, jak můžeš využít Sketch k přizpůsobení svého designu požadavkům iPhone X.
Nejdůležitější poznatky
- Výška obrazovky iPhone X je 812 pixelů, což poskytuje prostor pro nové prvky uživatelského rozhraní.
- Navigace a panel karet jsou vyšší a vyžadují úpravy v rozložení.
- Je důležité brát v úvahu Safe Area, aby se zajistilo, že žádný obsah nespadne do zaoblené oblasti displeje.
- Home Indicator je nový prvek rozhraní, který je třeba vzít v úvahu při navrhování.
Návod krok za krokem
Začni vytvořením nového designu iPhone X ve Sketch. Stiskni A, aby ses přidal nový prvek, a poté klikni na design iPhone X.
Šířka zůstává na 375 pixelech, zatímco výška je nastavena na 812 pixelů. To ti poskytne více prostoru pro návrh tvého uživatelského rozhraní. Měj na paměti, že zaoblené rohy obrazovky jsou důležité pro rozložení.
Okopíruj Home Controller a přizpůsob design. Doporučuje se nepoužívat standardní knihovny, ale specifickou iPhone X knihovnu pro přesnější přizpůsobení. Přejdi do nastavení ve Sketch a aktivuj iOS 11 knihovnu, pokud již není k dispozici.
Přidej standardní navigační lištu, aby bylo rozhraní konzistentní. Ujisti se, že výška navigační lišty je 88 pixelů ve srovnání se 44 pixely iPhone 8.
Vyhledej status bar v knihovně iOS 11 a také jej přidej. Měl by být umístěn na horním okraji obrazovky.
To samé platí pro panel karet: Vyber si verzi se třemi panely z knihovny iOS 11 a ujisti se, že je 83 pixelů vysoký, aby dobře zapadl do rozložení.
Dbaj na to, aby se při návrhu žádné prvky nevysunuly do zaoblené oblasti. V programování se tomu říká Safe Area Layout Guide – to je prostor, který potřebuješ pro bezpečný pohled.
Přidej Home Indicator jako nezbytnou součást svého designu. Ten by měl být umístěn uprostřed dolního okraje.
Jakmile přidáš základní prvky, můžeš celý úsek okopírovat a vložit na požadované místo. Nezapomeň po zkopírování upravit mezery.
Opakuj tento proces pro Chat Controller. Vytvoř kopii designu a přejmenuj ji podle potřeby.
Vyměň ikony pro panely a přizpůsob zobrazení. Při tom je důležité pečlivě vybrat správnou symboliku a texty.
Věnuj pozornost okrajům, zejména mezi chatovými bublinami a panelem karet. Drž odstup 16 pixelů, aby prvky dobře harmonizovaly.
Těmito kroky ukazuješ, jak rychle můžeš svůj design přizpůsobit novému formátu. Pokud však budeš mít nejasnosti, není problém design dále zdokonalit.
V další lekci se naučíš, jak pracovat s dodatečnými efekty v profilu, včetně použití efektů rozostření.
Souhrn – Efektivní design iPhone X ve Sketch
Přizpůsobení tvých designů pro iPhone X otevírá nové možnosti. S správným pochopením nových obrazových formátů a prvků uživatelského rozhraní můžeš vytvářet působivé uživatelské rozhraní.
Často kladené otázky
Jaká je výška obrazovky iPhone X?Výška obrazovky iPhone X činí 812 pixelů.
Jak přizpůsobím panel karet?Panel karet by měl mít výšku 83 pixelů, aby dobře fungoval v rozložení.
Co musím při návrhu zohlednit?Věnuj pozornost Safe Area a zajisti, aby prvky nevstupovaly do zaoblených oblastí.
Jak provádím úpravy ve Sketch?Okopíruj existující prvky ovládacích prvků a přizpůsob je pomocí knihovny iOS 11.
Musím upravit navigační lištu?Ano, navigační lišta má výšku 88 pixelů a měla by být přizpůsobena pro vizuální konzistenci.
