Дизайн мобильного приложения: как создать

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

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

Одна рука и на ходу. Приложением часто пользуются в транспорте, в очереди, между делами, одной рукой и урывками. Интерфейс должен прощать прерывания и не требовать сложных манипуляций двумя руками.

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

Системное окружение. Вырезы под камеру, «чёлки», скруглённые углы, безопасные зоны (safe area), статус-бар, системные жесты — всё это часть холста, и проектировать надо с их учётом, а не поверх них.

Адаптивная версия сайта это не закрывает: она решает задачу «как тот же контент влезет в узкий экран», а нативное приложение проектируют под другой способ взаимодействия с нуля. Поэтому дизайн приложения начинается не с переноса сайта, а с вопроса, как человек будет пользоваться продуктом в руке.

Различия не косметические, а поведенческие. На iOS пользователь возвращается назад свайпом от левого края и ждёт жестового управления; на Android есть системная навигация «назад», которую нельзя ломать. Кнопку подтверждения, навигацию и привычные жесты на каждой платформе размещают по-своему — и приложение, которое ведёт себя «не как все остальные на этом телефоне», раздражает, даже если выглядит красиво. Отсюда и главная развилка мобильного дизайна.

Полностью нативный дизайн под каждую платформу даёт максимально «родное» ощущение: iOS-версия выглядит и ведёт себя как образцовое iOS-приложение, Android — как образцовое Android. Цена — двойная работа дизайна и больше расхождений в поддержке. Это оправдано там, где платформенная аутентичность критична: системные интеграции, продукты, где пользователь особенно чувствителен к «не родному» поведению.

Единый дизайн с уважением к платформенным конвенциям — это одна дизайн-система на обе платформы, в которой ключевые платформенные паттерны (навигация «назад», тап-зоны, жесты) всё равно соблюдаются, но визуальный язык общий и брендовый. Для большинства бизнес-приложений — каталогов, сервисов, маркетплейсов, личных кабинетов — это выгоднее: один дизайн, одна команда, быстрее на обе платформы, и пользователь не страдает, если родные паттерны соблюдены.

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

Исследование и сценарии. Кроме задач пользователя — контекст использования: где, в каких условиях, одной ли рукой, с какими прерываниями. Это влияет на структуру сильнее, чем на сайте.

Структура и прототип. Навигацию проектируют под платформенные паттерны и зоны пальца; прототип проверяют на реальном устройстве в руке, а не только в окне на десктопе (подробно про прототипы — в отдельной статье).

Визуал и компоненты. Собирают дизайн-систему с учётом платформенных конвенций и состояний; тёмная тема на мобильном — почти обязательна.

Передача в разработку. К обычному пакету (UI Kit, спецификации, токены) добавляются ассеты под плотности экранов и иконка приложения в нужных размерах. Сам процесс передачи (dev handoff) разобран в статье про дизайн сайта.

Тестирование на устройствах. Дизайн проверяют на разных диагоналях и плотностях, особенно на Android с его разнообразием, и на вырезах/safe area.

Главный мобильный акцент: дизайн проверяют в руке и на реальных экранах с самого начала, а не «на большом мониторе, адаптируем потом».

Адаптивность на мобильном — это не только телефоны разных диагоналей, но и планшеты и складные устройства, где экран меняет размер прямо во время работы. На iOS линейка устройств небольшая, поэтому адаптив проще; на Android — огромный зоопарк экранов и плотностей, и дизайн обязан тянуться от компактного бюджетника до большого планшета (про фрагментацию Android — в отдельной статье). Закладывать это нужно в дизайн-систему, а не подгонять под каждое устройство вручную.