Az iPhone X alapvetően megváltoztatta az alkalmazás tervezést. Egyedi formátumával és az új felhasználói felületelemekkel a tervezőknek nagyobb rugalmasságot és kreativitást kell mutatniuk ahhoz, hogy lenyűgöző alkalmazásokat készítsenek. Ez az útmutató lépésről lépésre bemutatja, hogyan használhatod a Sketch-t, hogy a tervezésedet az iPhone X követelményeihez igazítsd.
Legfontosabb megállapítások
- Az iPhone X képernyőmagassága 812 pixel, ami helyet biztosít az új UI-elemek számára.
- A navigációs és a Tab Bar magasabb, és átrendezést igényel a felületen.
- Fontos figyelni a Safe Area-ra, hogy biztosítsd, hogy ne kerüljenek a tartalmak a képernyő lekerekített részébe.
- A Home Indicator egy új felhasználói felület elem, amelyet figyelembe kell venni a tervezés során.
Lépésről lépésre útmutató
Kezd az iPhone X új tervezésének létrehozásával a Sketch-ben. Nyomd meg az A-t, hogy új elemet adj hozzá, majd kattints az iPhone X tervezésre.
A szélesség 375 pixel marad, míg a magasság 812 pixelra van állítva. Ez több helyet biztosít a felhasználói felület tervezéséhez. Vedd figyelembe, hogy a ekran lekerekített sarkai fontosak a kirakás szempontjából.
Másold a Home Controller-t, és igazítsd a tervezést. Ajánlott nem a standard könyvtárakat használni, hanem a specifikus iPhone X könyvtárat a precízebb igazításhoz. Menj a beállításokba a Sketch-ben, és aktiváld az iOS 11 könyvtárat, ha még nem áll rendelkezésre.
Adj hozzá egy standard navigációs sávot, hogy a felület következetes legyen. Győződj meg róla, hogy a navigációs sáv magassága 88 pixel, szemben az iPhone 8 44 pixeljével.
Keresd meg a státusz sávot az iOS 11 könyvtárban, és azt is add hozzá. Ennek a képernyő felső szélére kell kerülnie.
A Tab Bar-ra ugyanezt alkalmazd: válassz egy változatot három tab-bal az iOS 11 könyvtárból, és győződj meg arról, hogy 83 pixel magas, hogy jól illeszkedjen a kirakásba.
Ügyelj arra, hogy a tervezés során ne legyenek olyan elemek, amelyek belógjanak a lekerekített területbe. A programozásban ezt Safe Area Layout Guide-nak hívják – ez az a tér, amelyre biztonságos nézethez szükséged van.
Add hozzá a Home Indicator-t, mint a tervezésed létfontosságú részét. Ennek a alsó szélén, középen kell elhelyezkednie.
Miután hozzáadtad az alapvető elemeket, másold ki az egész szakaszt, és illeszd be a kívánt helyre. Ne feledd, hogy a távolságokat a másolás után állítsd be.
Ismételd meg ezt a folyamatot a Chat Controller számára. Készítsd el a tervezés másolatát, és nevezd át ennek megfelelően.
Cseréld le a tab-ok ikonjaidat, és alkalmazd a megjelenítést. Fontos, hogy a megfelelő szimbolikát és a szövegeket gondosan válaszd ki.
Figyelj a távolságokra, különösen a chat-buborékok és a Tab Bar között. Tartj 16 pixel távolságot annak érdekében, hogy az elemek jól harmonizáljanak egymással.
Ezek a lépések bemutatják, milyen gyorsan tudod igazítani a tervezésed az új formátumhoz. Ha bármilyen kérdés merülne fel, nyugodtan finomíthatod tovább a tervezést.
A következő leckében megtanulod, hogyan dolgozhatsz a profil területén lévő kiegészítő hatásokkal, beleértve a Blur-hatások használatát.
Összefoglalás – Hatékony iPhone X tervezés Sketch-ben
A tervek iPhone X-hez való igazítása új lehetőségeket nyit meg. A képernyő új formátumaival és UI-elemeivel kapcsolatos helyes megértéssel lenyűgöző felhasználói felületeket hozhatsz létre.
Gyakran Ismételt Kérdések
Mi az iPhone X képernyő magassága?Az iPhone X képernyő magassága 812 pixel.
Hogyan igazítom a Tab Bar-t?A Tab Bar-nak 83 pixel magasságúnak kell lennie, hogy jól működjön a kirakásban.
Mit kell figyelembe venni a tervezés során?Figyelj a Safe Area-ra, és arra, hogy az elemek ne lóghassanak a lekerekített területekbe.
Hogyan végezhetem el az igazításokat a Sketch-ben?Másold ki a meglévő Controller-elemeket, és igazítsd őket az iOS 11 könyvtár segítségével.
Meg kell igazítanom a navigációs sávot?Igen, a navigációs sávnak 88 pixel magasnak kell lennie, és vizuális következetesség szempontjából igazítani kell.
