Дизайн для 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

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

Дизайн для iPhone X: как использовать вырез под датчики и камеру

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

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Подробнее

11 советов по прототипированию в Sketch и InVision

Sketch и InVision два родственных приложения для разработки, прототипирования и анимации интерфейсов. Разработчики Bohemian Coding создали Sketch специально для дизайнеров, которые рисуют непосредственно мобильные приложения, так что он отлично подходит для прототипирования приложений.
Самая недооцененная горячая клавиша
Подробнее

Самая недооцененная горячая клавиша

Самая недооцененная горячая клавиша для быстрого доступа к меню. Это быстрый прием, который я постоянно использую в Sketch (или в любом другом приложении). С помощью этого приема можно пользоваться меню в любой программе mac os.

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share