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