Відрисовка екранів мобільного додатка під 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 дня. Вартість розраховується індивідуально після аналізу вимог та кількості унікальних екранів.