Отрисовка экранов мобильного приложения под Android (Material Design)
Дизайн-система Material Design 3 (Material You) — это не просто набор компонентов. Это цветовая система с динамическими тонами, типографическая шкала из 15 стилей, стандартизированные состояния компонентов и правила адаптации под разные размеры экрана. Отрисовать экран «под Android» без понимания этих правил — значит получить макет, который будет выглядеть чужеродно на устройстве и который разработчик не сможет реализовать стандартными средствами Jetpack Compose.
Цветовая система M3 и Dynamic Color
Material Design 3 строится вокруг цветовых ролей — не конкретных цветовых значений, а семантических слотов: primary, onPrimary, primaryContainer, onPrimaryContainer, и так по всей палитре из 29 ролей. Дизайнер задаёт Source Color, алгоритм HCT (Hue, Chroma, Tone) генерирует полную палитру автоматически.
Динамические цвета (Dynamic Color) — с Android 12 система генерирует палитру из обоев рабочего стола. На устройствах Samsung, Google Pixel и других флагманах пользователи ожидают, что приложение адаптируется к их теме. Макеты, игнорирующие это — с жёстко прописанными HEX-значениями вместо цветовых ролей — выглядят чужеродно на Pixel 8.
Для дизайна используем плагин Material Theme Builder в Figma: импортируем Brand Color → получаем полную M3-палитру → экспортируем как Color.kt для разработчика. Это убирает ручной перевод цветов и исключает ошибки.
Типографика и сетка
M3 определяет 15 текстовых стилей в 5 группах: Display, Headline, Title, Body, Label. Размеры — не произвольные: Display Large = 57sp, Body Medium = 14sp. Использование sp вместо dp для текста — не опция, это требование для корректного масштабирования при изменении системного размера шрифта (accessibility).
Базовая сетка — 4dp. Все отступы, размеры компонентов, скруглени — кратны 4. Отступ 12dp вместо 16dp — это ошибка, которую разработчик исправит через padding(12.dp), но на устройстве с высокой плотностью пикселей разница будет заметна визуально.
Компоненты и их состояния
Каждый M3-компонент имеет 5 состояний: enabled, hovered, focused, pressed, disabled. В Jetpack Compose это StateLayer с фиксированной opacity: pressed = 12% overlay, focused = 12%, hovered = 8%, disabled = 38% opacity контента. Макет без отрисованных состояний — незаконченный макет. Разработчик получает только «enabled» и начинает угадывать остальное.
Критичные компоненты для отрисовки:
| Компонент | Варианты в M3 |
|---|---|
| Button | Filled, Filled Tonal, Outlined, Text, Elevated |
| Card | Filled, Outlined, Elevated |
| TextField | Filled, Outlined |
| NavigationBar | Bottom navigation (до 5 пунктов) |
| NavigationRail | Боковая (планшеты, landscape) |
| TopAppBar | CenterAligned, Small, Medium, Large |
Выбор варианта — не эстетика, а семантика. Filled Button — основное действие, максимум одно на экране. Text Button — вторичное. Использовать два Filled Button рядом — нарушение иерархии.
Адаптация под размеры экрана
Android-устройства — это телефоны (compact width), складные экраны (medium), планшеты (expanded). M3 определяет Canonical Layouts для каждого класса: List-Detail для expanded, Supporting Panel для medium. Макет только под compact — половина работы.
Минимальный набор: отрисовать для compact (360–599dp) и expanded (840dp+). Medium (600–839dp) — промежуточный, часто наследует от одного из двух.
Что входит в работу
- Настройка цветовой системы через Material Theme Builder (все 29 ролей, светлая/тёмная тема)
- Типографическая шкала по M3-стандарту
- Отрисовка всех экранов в Figma с состояниями компонентов
- Адаптация под compact и expanded breakpoints
- Аннотации для разработчика: spacing tokens, цветовые роли (не HEX), компонентные specs
- Экспорт цветов и типографики в формате, готовом к импорту в Compose
Сроки
3–5 дней в зависимости от количества экранов. Один экран с полным набором состояний и двумя breakpoints — около 0.5–1 дня. Стоимость рассчитывается индивидуально после анализа требований и количества уникальных экранов.