Дизайн для iPhone X: Нижние элементы управления

Дизайн для iPhone X: Нижние элементы управления

iPhone X и его нестандартный экран – самая захватывающая задача дизайна пользовательского интерфейса для iOS за многие годы. Однако у разработчиков не так много времени, чтобы подстроить свои приложения под эту новую форму.

Это исследования того, как определенные шаблоны проектирования могут быть адаптированы к новому экрану. В качестве примера я буду использовать результаты в наших собственных приложениях.

Кнопки от края до края

Этот вид кнопок был введен в iOS 7, когда Apple хотела максимально использовать небольшие экраны.

Кнопки от края до края ios . 7

Решение может состоять в том, чтобы сделать отступы и позволить кнопке «плавать». Градиенты не являются обязательным элементом, но они смотрятся хорошо.

Кнопки от края до края в iPhone X

Отступ 32-36 pt от нижнего края аналогичен расстоянию, используемому в панелях вкладок Apple. 44 pt – радиус угла экрана. Приведение в соответствие радиуса угла элемента с радиусом угла экрана делает его более приятным. Отступ от нижней части экрана помогает избежать случайного нажатия индикатора кнопки «Домой».

Отступ 32-36 pt от нижнего края аналогичен расстоянию, используемому в панелях вкладок Apple.

Баннеры

Баннеры IOS 10

Снова, я предлагаю сделать отступы и позволить кнопке «плавать».

Баннеры IOS 11 в iPhone XОтступы от баннера iPhone X

Нижний индикатор состояния

Запуская таймер, мы отталкиваем остальную часть пользовательского интерфейса, чтобы отобразить индикатор состояния, который видим во всем интерфейсе. Теперь такое дизайнерское решение вступает в противоречие с индикатором кнопки «Домой» и углами экрана.

Нижний индикатор состояния ios 10

Добавляем отступы и делаем кнопку плавающей.

Нижний индикатор состояния iPhone X

Для представлений с панелью вкладок индикатор состояния может плавать над ней

Нижний индикатор состояния iPhone X с вкладкамиОтступы нижнего индикатора состояния iPhone X

Дополнительные материалы и ресурсы

Скачайте мои шаблоны иконок приложений iOS 11 для Sketch, это бесплатно.

guest
0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Прототип Sketch 3 Dark UI
Подробнее
1

Прототип Sketch 3 Dark UI от Ruben Oliveira

Поскольку я использую Sketch 3 и предпочитаю темные интерфейсы, я решил сделать творческий эксперимент и разработать темный Sketch Dark UI. Получился довольно интересный интерфейс, думаю, многие дизайнеры с удовольствием использовали бы его в повседневной работе.
Бесплатный UI Kit от компании Laps для Sketch 3
Подробнее

Бесплатный UI Kit от компании Laps для Sketch 3

Современный, модный и бесплатный UI Kit в плоском стиле от автора Kristaps. UI Kit насчитывает 30 структурированных элементов интерфейса. Он подойдет для создания своего блога или современного сервиса любой направленности.
Держать все на виду: Почему дизайнеры рисуют на стенах (и почему вам тоже следовало бы)
Подробнее

Держать все на виду: Почему дизайнеры рисуют на стенах (и почему вам тоже следовало бы)

Приклеив свою работу к стене, вы вызываете окружающих на содержательный диалог по совершенствованию своего проекта. Работа становится осязаемой, визуальной, открытой к обсуждению, что способствует получению конструктивной критики и предложений.
Total
0
Share