iPhone X основно е променил дизайна на приложенията. С уникалния си формат и новите интерфейсни елементи, дизайнерите трябва да демонстрират повече гъвкавост и креативност, за да създадат впечатляващи приложения. В това ръководство стъпка по стъпка ще бъде обяснено как можеш да използваш Sketch, за да адаптираш дизайна си към изискванията на iPhone X.
Най-важни Erkenntnisse
- Височината на екрана на iPhone X е 812 пиксела, което създава място за нови UI елементи.
- Навигацията и таб бара са по-високи и изискват приспособления в дизайна.
- Важно е да се вземе предвид Safe Area, за да се увериш, че не оставяш съдържание в заоблената част на дисплея.
- Home Indicator е нов интерфейсен елемент, който трябва да се вземе предвид при проектирането.
Стъпка по стъпка ръководство
Започни с изграждането на ново iPhone X дизайн в Sketch. Натисни A, за да добавиш нов елемент и след това кликни върху дизайна на iPhone X.
Ширината остава 375 пиксела, докато височината е настроена на 812 пиксела. Това ти осигурява повече пространство за проектиране на интерфейса. Вземи предвид, че заоблените ъгли на екрана са важни за дизайна.
Копирай Home Controller и адаптирай дизайна. Препоръчително е да не използваш стандартните библиотеки, а специфичната iPhone X Library за по-прецизна приспособление. Отидете в настройките в Sketch и активирайте iOS 11 Library, ако още не е налична.
Добави стандартна навигационна лента, за да направиш интерфейса последователен. Увери се, че височината на Navigation Bar е 88 пиксела в сравнение с 44 пиксела на iPhone 8.
Търси статуса бар в iOS 11 библиотеката и го добави също. Той трябва да бъде разположен в горния край на екрана.
За таб бара важи същото: Избери версия с три таба от iOS 11 библиотеката и се увери, че е висока 83 пиксела, за да пасва добре в дизайна.
Увери се, че при проектирането, няма елементи, които да стърчат в заоблената част. В програмирането това се нарича Safe Area Layout Guide – това е пространството, което ти трябва за безопасен изглед.
Добави Home Indicator като съществен елемент на дизайна. Той трябва да бъде разположен в централната част на долния край.
След като добавиш основните елементи, можеш да копираш целия раздел и да го поставиш на желаното място. Помни да настроиш разстоянията след копирането.
Повтори този процес за Chat Controller. Направи копие на дизайна и го преименувай съответно.
Замени иконите за табовете и адаптирай представянето. Важно е да избираш правилната символика и текстове внимателно.
Обърни внимание на разстоянията, особено между чат балоните и таб бара. Спазвай разстояние от 16 пиксела, за да се увериш, че елементите си съответстват добре.
Тези стъпки показват колко бързо можеш да адаптираш дизайна си към новия формат. Но ако имаш неясноти, не се притеснявай да продължиш да усъвършенстваш дизайна.
В следващия урок ще научиш как да работиш с допълнителни ефекти в профилната област, включително използването на ефекти с размазване.
Обобщение – ефективен iPhone X дизайн в Sketch
Адаптирането на твоите дизайни за iPhone X открива нови възможности. С правилното разбиране на новите формати на екрана и интерфейсни елементи можеш да създаваш впечатляващи потребителски интерфейси.
Често задавани въпроси
Каква е височината на екрана на iPhone X?Височината на екрана на iPhone X е 812 пиксела.
Как да адаптирам таб бара?Таб бара трябва да има височина от 83 пиксела, за да функционира добре в дизайна.
Какво трябва да имам предвид при проектирането?Обърни внимание на Safe Area и увери се, че елементите не стърчат в заоблените области.
Как да направя адаптациите в Sketch?Копирай съществуващите контролери и ги адаптирай с помощта на iOS 11 библиотеката.
Трябва ли да адаптирам навигационната лента?Да, навигационната лента има височина от 88 пиксела и трябва да бъде адаптирана за визуална последователност.
