Material Design 3 для Android-приложений: основные принципы

Коротко: что такое Material 3

Material Design 3 (его также называют Material You) — актуальная версия дизайн-системы Google. Она описывает цвета, типографику, компоненты, отступы, движение и поведение интерфейса на Android и не только.

Для команды это три практические вещи:

• готовые компоненты в Jetpack Compose и библиотеке Material Components с уже продуманными состояниями и доступностью;
• система цветовых ролей вместо набора случайных HEX-кодов;
• правила адаптации под телефоны, планшеты и складные устройства.

Динамический цвет

Начиная с Android 12 система умеет строить палитру из обоев пользователя, и приложение может её подхватить. Поэтому в Material 3 цвета задаются не значениями, а ролями:

• primary / onPrimary — главные акценты и текст на них;
• secondary, tertiary — дополнительные акценты;
• surface и уровни surface container — фоны экранов, карточек, панелей;
• error — ошибки;
• варианты container — более мягкие подложки для кнопок и чипов.

Если дизайн опирается на роли, приложение корректно работает и с динамическим цветом, и с фирменной палитрой, и в тёмной теме. Фирменную схему удобно сгенерировать из одного базового цвета в Material Theme Builder.

В Compose выбор схемы выглядит так:

val context = LocalContext.current
val colorScheme = when {
    Build.VERSION.SDK_INT >= Build.VERSION_CODES.S ->
        if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
    darkTheme -> BrandDarkColors
    else -> BrandLightColors
}
MaterialTheme(colorScheme = colorScheme, content = content)

Если бренд требует узнаваемых цветов, динамический цвет можно не использовать вовсе — это нормальная практика.

Компоненты

Основной набор: кнопки нескольких уровней акцента (filled, tonal, outlined, text), FAB для главного действия экрана, top app bar, карточки, чипы, диалоги, bottom sheet, snackbar, текстовые поля.

Берите компоненты из библиотеки, а не рисуйте с нуля: в них уже есть состояния нажатия и фокуса, поддержка экранных чтецов и правильные размеры. Минимальная касаемая зона в Material — 48×48 dp.

Навигация

Тип навигации зависит от ширины экрана и числа разделов:

Отдельно — системная кнопка и жест «Назад». На Android они есть всегда, и приложение должно корректно на них реагировать. В новых версиях появился predictive back — анимация, показывающая, куда приведёт жест; его стоит поддержать.

Высота и глубина

В Material 3 глубина передаётся в первую очередь тональной высотой: чем выше поверхность, тем заметнее отличается её оттенок от фона. Тени используются экономно — для элементов, которые действительно парят над контентом, например FAB или диалогов. Предусмотрено несколько стандартных уровней высоты, и лучше пользоваться ими, а не придумывать свои.

Адаптивные макеты

Material опирается на window size classes — классы ширины окна:

• compact — до 600 dp, обычный телефон;
• medium — от 600 до 840 dp, небольшой планшет или раскрытый складной телефон;
• expanded — от 840 dp, планшет и десктопный режим.

Для больших экранов есть типовые схемы: list-detail (список и подробности рядом), feed (лента карточек в несколько колонок), supporting pane (основной контент и вспомогательная панель). Также стоит рисовать интерфейс edge-to-edge — под системными панелями, с правильными отступами.

Строго по Material или свой стиль

Компромисс, который работает в большинстве случаев: поведение — по Material, внешний вид — фирменный. Навигация, жесты, касаемые зоны и состояния остаются системными, а цвета, шрифты, форма углов и иллюстрации — ваши.

Частые ошибки

• Переносить интерфейс iOS: подписи у кнопки «Назад», игнорирование системного жеста.
• Жёстко прописывать HEX-цвета в компонентах — тёмная тема ломается.
• Делать мелкие касаемые зоны.
• Не проверять приложение на планшете и складном телефоне.