iPhone X je temeljito spremenil oblikovanje aplikacij. S svojim edinstvenim formatom in novimi elementi uporabniškega vmesnika morajo oblikovalci pokazati več prilagodljivosti in kreativnosti, da oblikujejo impresivne aplikacije. V tem vodiču je korak za korakom razloženo, kako lahko uporabljaš Sketch, da prilagodiš svoje oblikovanje zahtevam iPhone X.
Najpomembnejše ugotovitve
- Višina zaslona pri iPhone X znaša 812 pikslov, kar ustvarja prostor za nove elemente UI.
- Navigacija in tab bar sta višja in zahtevata prilagoditve v postavitvi.
- Pomembno je upoštevati Safe Area, da se zagotovi, da vsebine ne padejo v zaobljene dele zaslona.
- Home Indicator je nov element vmesnika, ki ga je treba upoštevati pri oblikovanju.
Navodila po korakih
Začni z ustvarjanjem novega iPhone X oblikovanja v Sketch. Pritisni A, da dodaš nov element, nato pa klikni na oblikovanje iPhone X.
Širina ostane pri 375 pikslov, medtem ko je višina nastavljena na 812 pikslov. To ti daje več prostora za oblikovanje uporabniškega vmesnika. Upoštevaj, da so zaobljeni koti zaslona pomembni za postavitev.
Kopiraj Home Controller in prilagodi oblikovanje. Priporočljivo je, da ne uporabljaš privzetih knjižnic, temveč specifično iPhone X knjižnico za natančnejšo prilagoditev. Pojdi na nastavitve v Sketchu in aktiviraj knjižnico iOS 11, če ta še ni prisotna.
Dodaj standardno navigacijsko vrstico, da zagotovíš doslednost vmesnika. Prepričaj se, da je višina navigacijske vrstice 88 pikslov v primerjavi s 44 pikslom pri iPhone 8.
Poišči Status Bar v knjižnici iOS 11 in jo dodaj. Morala bi biti postavljena na zgornjo rob zaslona.
Za Tab Bar velja enako: izberi različico s tremi tab-i iz knjižnice iOS 11 in se prepričaj, da je visoka 83 pikslov, da lepo prilega v postavitev.
Poskrbi, da pri oblikovanju nobeni elementi ne segajo v zaobljeni del. V programiranju se to imenuje Safe Area Layout Guide – to je prostor, ki ga potrebuješ za varno ogled.
Dodaj Home Indicator kot ključni del svojega oblikovanja. Ta bi moral biti postavljen na sredino spodnjega roba.
Ko dodaš osnovne elemente, lahko kopiraš celoten odsek in ga prilepiš na želeno mesto. Ne pozabi prilagoditi razdalje po kopiranju.
Ponovi ta postopek za Chat Controller. Ustvari kopijo oblikovanja in jo ustrezno preimenuj.
Zamenjaj ikone za tab-e in prilagodi prikaz. Pri tem je pomembno natančno izbrati pravo simboliko in besedila.
Pazite na razdalje, zlasti med chat bubble in tab bar. Ohranite razdaljo 16 pikslov, da zagotovite, da se elementi dobro ujemajo.
Ti koraki prikazujejo, kako hitro lahko prilagodiš svoje oblikovanje novemu formatu. V primeru nejasnosti pa ni težava, da oblikovanje enostavno dodatno izpopolniš.
V naslednji lekciji se boš naučil, kako delati z dodatnimi učinki v profilnem območju, vključno z uporabo Blur učinkov.
Povzetek – Učinkovito oblikovanje iPhone X v Sketchu
Prilagajanje tvojih oblikovanj iPhone X odpira nove možnosti. S pravim razumevanjem novih formatov zaslona in elementov UI lahko ustvariš impresivne uporabniške vmesnike.
Pogosto zastavljena vprašanja
Koliko znaša višina zaslona iPhone X?Višina zaslona iPhone X znaša 812 pikslov.
Kako prilagodim Tab Bar?Tab Bar bi moral imeti višino 83 pikslov, da dobro deluje v postavitvi.
Na kaj moram paziti pri oblikovanju?Pazi na Safe Area in da elementi ne segajo v zaobljene dele.
Kako izvedem prilagoditve v Sketchu?Kopiraj obstoječe elemente kontrolerja in jih prilagodi s pomočjo knjižnice iOS 11.
Ali moram prilagoditi navigacijsko vrstico?Da, navigacijska vrstica ima višino 88 pikslov in jo je treba prilagoditi za vizualno doslednost.
