Мобильный дизайн проверяют на знание платформ: размеры, навигация, жесты, системные ограничения. Перенос десктопного макета в узкий экран не считается мобильным дизайном.
Руководства платформ
- Human Interface Guidelines (Apple): iOS, iPadOS, macOS, watchOS, visionOS. Системный шрифт SF Pro.
- Material Design 3 (Google): Android и не только. Шрифт по умолчанию Roboto, динамический цвет.
Нативные паттерны снижают порог входа: человек уже знает, как работает его телефон.
Размеры и единицы
- iOS работает в точках (pt). На экранах @2x один pt это 2 px, на @3x это 3 px. Иконка 24 pt на @3x это 72 px.
- Android в dp: px = dp × коэффициент плотности (mdpi 1, hdpi 1.5, xhdpi 2, xxhdpi 3, xxxhdpi 4). 48 dp на xxhdpi это 144 px.
- Минимальная зона касания: 44 × 44 pt у Apple, 48 × 48 dp у Material. Иконка может быть 24, остальное невидимая область.
Иконки лучше передавать в векторе.
Навигация
- iOS tab bar внизу, назад через кнопку слева в верхней навигационной панели и свайп от левого края.
- Material 3 navigation bar внизу на 3-5 разделов, на планшетах navigation rail, на широких экранах постоянная боковая панель. Назад через системный жест или кнопку, приложение обязано его корректно обрабатывать.
- Названия путают: navigation bar у Apple это верхняя панель, у Material нижняя навигация.
Эргономика
На больших экранах верх недоступен одной рукой. Частые действия переносят вниз: нижняя навигация, закреплённая кнопка, нижние шторки. Верхние углы для редкого.
Safe area учитывает вырезы, скругления и индикатор «домой». Кнопку нельзя прижимать к нижнему краю: она конфликтует с системным жестом.
Жесты
Жест не должен быть единственным способом действия: удаление свайпом дублируют видимой кнопкой. Нельзя конфликтовать с системными жестами у краёв. Скрытые жесты находят немногие.
Ввод
- Правильная клавиатура: цифровая для телефона и суммы, email для почты.
- Автозаполнение: коды из SMS, адреса, карты.
- Клавиатура не должна перекрывать поле и кнопку.
- Маски не мешают вставке.
Крупный шрифт и адаптив
Dynamic Type на iOS и масштаб шрифта на Android (до 200% в новых версиях) включены у многих. Фиксированные высоты ломаются, поэтому контейнеры гибкие, а на самых крупных размерах раскладка может стать вертикальной.
Для планшетов и складных телефонов используют классы ширины окна (compact, medium, expanded) и раскладку список-деталь.
Один дизайн для двух платформ
Общие бренд, сценарии и большая часть компонентов, а различия там, где важны привычки: навигация назад, системные шторки и пикеры, шрифты. Список различий согласуют с разработкой.
Частые ошибки
- Кнопка «назад» справа и 20 pt.
- Удаление только свайпом.
- Мелкие цели вплотную друг к другу.
- Главное действие наверху.
- Игнорирование safe area и крупного шрифта.
Что спросят на собесе
- Какие минимальные размеры касания на iOS и Android?
- Чем отличается навигация назад на платформах?
- Как вы адаптируете макет под обе платформы?
- Как спроектировать регистрацию в мобильном приложении?
- Что такое safe area и Dynamic Type?