VIDEMIND

Мобильные интерфейсы

7 материалов

Пять дюймов, на которых всё решается

Дизайн мобильных приложений и адаптивных интерфейсов: навигация, жесты, зоны досягаемости, состояния, онбординг и производительность.

Пять дюймов, на которых всё решается

Мобильный интерфейс ограничен не размером экрана, а анатомией: площадь контакта пальца с экраном около 8–10 миллиметров, а комфортно достижима лишь нижняя половина экрана при удержании одной рукой. Отсюда почти все правила жанра.

Второе ограничение — клавиатура, занимающая 40–50% высоты. Всё, что нужно видеть во время ввода, должно помещаться в оставшуюся половину, иначе человек печатает вслепую.

Размеры, ниже которых начинаются промахи

Эти величины следуют из анатомии, а не из соглашений, и потому одинаковы на всех платформах.

ЭлементМинимумКомфорт
Основная кнопка48 × 48высота 56
Иконка в панели44 × 4448 × 48
Пункт спискавысота 4456–64
Зазор между целями8 px12–16 px
Поле вводавысота 4448–56

Видимое используется чаще

Разделы, спрятанные в боковое меню, используются заметно реже видимых. Скрытие навигации экономит место ценой того, что часть функций перестаёт существовать для пользователя, — поэтому нижняя панель с 3–5 видимыми разделами стала стандартом.

Жест — самый быстрый способ взаимодействия и самый плохо обнаруживаемый. Им можно ускорять действие, но нельзя делать его единственным способом: у каждого жеста должна быть видимая альтернатива.

Что читать в этой теме

Материалы разбирают навигацию приложения, тач-интерфейсы и точность касания, онбординг, адаптивные брейкпоинты, мобильные формы, тёмную тему и уведомления.

Возврат назад — половина навигации

Путь вперёд проектируют всегда, путь назад — почти никогда, хотя именно с ним связана большая часть претензий: потерянная позиция в списке, сброшенный фильтр, заново заполняемая форма, экран, с которого системный жест выбрасывает из приложения целиком.

Рабочее требование простое: возврат восстанавливает состояние, а не перезагружает экран. Прокрутка, фильтры и введённый текст сохраняются; переход назад из глубины ведёт на предыдущий экран, а не на корень раздела. Проверять это нужно на устройстве и жестом, а не кнопкой в макете.

Коротко

Сколько разделов помещается в нижнюю панель?
Три–пять. При трёх остаётся место для подписей, при пяти иконки уже тесноваты, шесть не помещаются на узких экранах. Если разделов больше, проблема обычно не в навигации, а в структуре продукта.
Какого размера должны быть кнопки на телефоне?
Не меньше 44 × 44 пикселей с зазором от 8 пикселей между соседними целями. Визуальный размер может быть меньше: область нажатия делают на 8–12 пикселей больше видимого элемента с каждой стороны.
Как выбирать точки перелома в адаптиве?
Не по моделям устройств, а по контенту: растяните раскладку и поставьте точку там, где она начинает выглядеть плохо. Обычно получается три-четыре точки, близкие к общепринятым, но выведенные из вашего макета.
Когда запрашивать разрешение на уведомления?
После действия, для которого уведомление очевидно полезно: оформлен заказ, поставлено напоминание, начата подписка. Запрос на первом запуске даёт в разы более низкое согласие, а отказ практически необратим.

Главный материал темы

Все материалы темы

Следующая темаДизайн-системыБиблиотека решений вместо библиотеки макетов7 материалов