UXPUB 🇺🇦 Дизайн-спільнота

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

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

http://ux.pub/dizajn-dlya-iphone-x-kak-ispolzovat-vyrez-pod-datchiki-i-kameru/ Скачайте мои шаблоны иконок приложений iOS 11 для Sketch, это бесплатно.


Перевод статьи maxrudberg

Найстарші коментарі (0)