Мобильный дизайн отличается от веба тремя вещами: экран маленький, нет курсора (палец больше и менее точный), устройство держат одной рукой. Поэтому минимальная область касания — 44×44 pt, главные действия внизу экрана в зоне большого пальца, а навигация упрощается до 3–5 пунктов. Сверяйтесь с HIG для iOS и Material для Android — нарушать их можно, но только понимая, зачем.
Чем мобильный дизайн отличается от веба
Три фундаментальные разницы, из которых растут все правила:
- Размер экрана. На смартфоне 5–6 дюймов против 13–27 на ноутбуке. Каждый экран вмещает в 3–4 раза меньше информации — приходится жестоко приоритизировать.
- Способ взаимодействия. Палец, а не курсор. Палец больше (минимум 44×44 pt), закрывает область касания и не видит hover-состояния.
- Контекст использования. Смартфоном пользуются на ходу, одной рукой, при ярком солнце, с прерываниями. Интерфейс должен прощать ошибки и читаться за 2 секунды.
Из этого вытекают все остальные принципы.
Иерархия и принцип «один экран — одна задача»
Главное правило мобильного дизайна: на экране одна главная задача. Не три, не пять — одна. Всё остальное — вспомогательное.
Как этого добиться:
- определите главное действие экрана — кнопка этого действия должна быть самой заметной;
- всё второстепенное — вниз или в меню — настройки, профиль, справка;
- никаких модальных окон поверх модальных — это ломает ориентацию.
Визуальная иерархия строится через размер, контраст и положение. Главный элемент — крупнее и контрастнее, находится в зоне действия большого пальца (нижняя треть экрана).
Зона большого пальца и правило 44 pt
Исследования показывают, что 49% людей держат смартфон одной рукой, причём большим пальцем той же руки. Зона комфортного касания большим пальцем — нижняя половина экрана, особенно нижний правый угол (для правшей).
Отсюда два правила:
- Главные действия — внизу. Bottom Navigation, Floating Action Button, основная CTA — всё внизу.
- Минимальная область касания — 44×44 pt. Это стандарт Apple HIG. У Google в Material — 48×48 dp. Меньше — пользователь промахивается.
| Элемент | Размер по HIG | Размер по Material |
|---|---|---|
| Минимальная область касания | 44×44 pt | 48×48 dp |
| Высота вкладок нижнего меню | 49 pt | 56 dp |
| Высота кнопки | 50 pt | 48 dp |
| Минимальный размер иконки | 22×22 pt | 24×24 dp |
Навигация: таб-бар или боковое меню
В мобильных приложениях работают две схемы навигации:
- Нижний таб-бар (Bottom Navigation) — 3–5 пунктов, всегда виден. Стандарт для iOS и Android. Используйте, если разделы равнозначны по важности.
- Боковое меню (Drawer) — прячется за иконкой «гамбургер». Используйте только если разделов больше 5 или приложение с редкими второстепенными функциями.
Боковое меню — худший выбор для главной навигации: половина пользователей не открывает его ни разу. Если положить туда важный раздел — он потерян.
Жесты: что использовать и где
Жесты ускоряют работу, но не заменяют кнопки. Главное правило: жест — это дополнение, а не единственный способ. Если действие доступно только жестом, половина пользователей его не найдёт.
| Жест | Где уместен | Где не нужен |
|---|---|---|
| Свайп влево/вправо | Удаление, архивация в списках | Главное действие на экране |
| Долгое нажатие | Контекстное меню, выделение | Основная навигация |
| Потянуть вниз | Обновление списка | На формах и в играх |
| Двойной тап | Лайк в ленте, зум | Альтернатива основной кнопке |
| Щипок (pinch) | Зум карт и фото | На обычных экранах |
Движение жестом должно сопровождаться визуальной обратной связью — анимацией или тактильной отдачей (haptic feedback). Без неё пользователь не понимает, сработал жест или нет.
Платформенные гайдлайны: HIG и Material
У Apple и Google свои руководства по дизайну, и они различаются в деталях:
| Критерий | iOS (HIG) | Android (Material) |
|---|---|---|
| Навигация | Нижний таб-бар | Bottom Navigation + Drawer |
| Типографика | San Francisco (системный) | Roboto |
| Высота кнопки | 50 pt | 48 dp |
| Системная кнопка | «Назад» жестом слева | Кнопка «Назад» внизу |
| Тени и слои | Минимальные, размытие | Ярко выраженные, Material Elevation |
| Возврат действия | Свайп влево | Через кнопку «Назад» |
Если приложение выходит на обе платформы — проектируйте две версии. Это дороже, но окупается: пользователь ожидает, что приложение ведёт себя «как все остальные» на его платформе.
Когда можно нарушать гайдлайны
Гайдлайны — это рекомендации, а не закон. Нарушать можно, когда:
- Есть сильное брендовое решение. Например, нестандартный шрифт или цвет — если он узнаваем и работает на бренд.
- Гайдлайн мешает ключевому сценарию. Если таб-бар отъедает место на экране, где важен контент, — убирайте его в favour контента.
- Платформа уже отступает от гайдлайнов. HIG и Material меняются — сегодня Google продвигает Material You, у которого другие правила.
Нельзя нарушать гайдлайны ради «красоты» или «тренда». Нарушение должно быть осознанным и решать конкретную задачу.
Онбординг: первые 60 секунд решают всё
25% пользователей удаляют приложение после первого запуска. Главные причины — непонятно, что делать, и долгая регистрация. Правила онбординга:
- не больше 3 экранов до момента «а-ха» — когда пользователь увидел ценность;
- регистрация — после демонстрации ценности, а не до;
- запрашивайте разрешения в момент, когда они нужны — геолокацию при попытке найти рядом, пуш-уведомления при действии, которое имеет смысл пушать.
Если онбординг начинается с экрана «Дайте доступ ко всему» — половина пользователей уходит.
Частые ошибки мобильного дизайна
- Перенос веб-дизайна в мобильный без переработки. Не работает: плотность информации, навигация и сценарии другие.
- Слишком мелкие области касания. Кнопки 24×24 — промахиваются все.
- Главное действие — наверху. До него не дотянуться одной рукой.
- Скрытая навигация за «гамбургером». Пользователь её не найдёт.
- Модалки поверх модалок. Человек теряется и закрывает приложение.
- Слишком длинные формы. На мобильном форма из 10 полей = 90% брошенных. Разбивайте на шаги по 2–3 поля.
Дизайн мобильного приложения — это дисциплина ограничений. Меньше экран, менее точный ввод, более шумный контекст. Хороший мобильный интерфейс не пытается уместить всё — он жёстко выбирает главное действие и строит экран вокруг него.
Комментарии · 0