iPhone X и его нестандартный экран — самая захватывающая задача дизайна пользовательского интерфейса для iOS за многие годы. Однако у разработчиков не так много времени, чтобы подстроить свои приложения под эту новую форму.
Это исследования того, как определенные шаблоны проектирования могут быть адаптированы к новому экрану. В качестве примера я буду использовать результаты в наших собственных приложениях.
Кнопки от края до края
Этот вид кнопок был введен в iOS 7, когда Apple хотела максимально использовать небольшие экраны.
Решение может состоять в том, чтобы сделать отступы и позволить кнопке «плавать». Градиенты не являются обязательным элементом, но они смотрятся хорошо.
Отступ 32−36 pt от нижнего края аналогичен расстоянию, используемому в панелях вкладок Apple. 44 pt — радиус угла экрана. Приведение в соответствие радиуса угла элемента с радиусом угла экрана делает его более приятным. Отступ от нижней части экрана помогает избежать случайного нажатия индикатора кнопки «Домой».
Баннеры
Снова, я предлагаю сделать отступы и позволить кнопке «плавать».
Нижний индикатор состояния
Запуская таймер, мы отталкиваем остальную часть пользовательского интерфейса, чтобы отобразить индикатор состояния, который видим во всем интерфейсе. Теперь такое дизайнерское решение вступает в противоречие с индикатором кнопки «Домой» и углами экрана.
Добавляем отступы и делаем кнопку плавающей.
Для представлений с панелью вкладок индикатор состояния может плавать над ней
Дополнительные материалы и ресурсы
Дизайн для iPhone X: как использовать вырез под датчики и камеру
Скачайте мои шаблоны иконок приложений iOS 11 для Sketch, это бесплатно.
