Optimálne prispôsobenie tvojho dizajnu pre iPhone X

iPhone X zmenil dizajn aplikácií. S jeho jedinečným formátom a novými prvkami používateľského rozhrania musia dizajnéri ukázať viac flexibility a kreativity, aby vytvorili pôsobivé aplikácie. V tejto príručke je krok za krokom vysvetlené, ako môžeš využiť Sketch na prispôsobenie svojho dizajnu požiadavkám iPhone X.

Najdôležitejšie poznatky

• Výška obrazovky iPhone X je 812 pixelov, čo vytvára priestor pre nové prvky UI.
• Navigácia a Tab Bar sú vyššie a vyžadujú úpravy v rozložení.
• Je dôležité brať do úvahy Safe Area, aby sa zabezpečilo, že žiadne obsahy nepadnú do zaoblených oblastí displeja.
• Home Indicator je nový prvok rozhrania, ktorý musí byť zohľadnený pri návrhu.

Krok za krokom návod

Začni vytvorením nového iPhone X dizajnu v Sketch. Stlač A, aby si pridal nový prvok, a potom klikni na dizajn iPhone X.

Šírka zostáva na 375 pixelov, zatiaľ čo výška je nastavená na 812 pixelov. Tým získavaš viac priestoru pre návrh svojho používateľského rozhrania. Maj na pamäti, že zaoblené rohy obrazovky sú dôležité pre rozloženie.

Kopíruj Home Controller a prispôsob dizajn. Je odporúčané nepoužívať štandardné knižnice, ale špecifickú iPhone X Library pre presnejšie prispôsobenie. Prejdi do nastavení v Sketch a aktivuj iOS 11 Library, ak nie je už prítomná.

Pridaj štandardný navigačný panel, aby si zachoval konzistentnosť rozhrania. Uisti sa, že výška navigačného panela je 88 pixelov v porovnaní so 44 pixelmi iPhone 8.

Hľadaj Status Bar v knižnici iOS 11 a pridaj ju tiež. Mala by byť zarovnaná na hornej hrane obrazovky.

Pre Tab Bar platí to isté: Vyber verziu s tromi tabuľkami z knižnice iOS 11 a uisti sa, že má výšku 83 pixelov, aby dobre zapadla do rozloženia.

Dbaj na to, aby pri návrhu žiadne prvky nepresahovali do zaoblených oblastí. V programovaní sa to nazýva Safe Area Layout Guide - to je priestor, ktorý potrebuješ pre bezpečný pohľad.

Pridaj Home Indicator ako zásadný prvok svojho dizajnu. Ten by mal byť umiestnený v strede dolnej hrany.

Ako náhle pridáš základné prvky, môžeš skopírovať celý úsek a vložiť ho na požadovanú pozíciu. Nezabudni prispôsobiť vzdialenosti po skopírovaní.

Opakuj tento proces pre Chat Controller. Vytvor kópiu dizajnu a premenovaj ho príslušne.

Vymeň ikony pre tabuľky a prispôsob ich zobrazenie. Je dôležité starostlivo vybrať správnu symboliku a texty.

Dbaj na vzdialenosti, najmä medzi chatovacími bublinkami a Tab Bar. Udržuj vzdialenosť 16 pixelov, aby si zabezpečil, že prvky dobre spolu ladia.

Tieto kroky ukazujú, ako rýchlo môžeš prispôsobiť svoj dizajn novému formátu. Pri nejasnostiach nie je problém jednoducho vylepšiť dizajn.

V nasledujúcej lekcii sa naučíš, ako pracovať s dodatočnými efektmi v profile, vrátane použitia Blur efektov.

Sumár – Efektívny dizajn iPhone X v Sketch

Prispôsobenie tvojich dizajnov pre iPhone X otvára nové možnosti. S správnym porozumením novým formátom obrazovky a prvkom UI môžeš vytvoriť pôsobivé používateľské rozhrania.