Material Design 3: актуальное руководство и перевод принципов Google

Material Design 3 — открытая дизайн‑система Google для создания понятных, адаптивных и доступных интерфейсов. В 2026 году её нужно воспринимать не как каталог кнопок, а как систему токенов, компонентов и правил поведения; M3 Expressive добавляет более заметные формы, движение и эмоциональность, но не отменяет доступность и иерархию.

Что такое Material Design сегодня

В официальной спецификации Google называет Material 3 открытой системой для создания красивых и удобных продуктов. Она объединяет основы, стили, компоненты, инструменты для дизайнеров и реализации для разработчиков. Главная ценность — общий язык: команда принимает решения один раз и применяет их во всём продукте.

Начните с токенов

Токен — именованное решение дизайн‑системы: цвет поверхности, размер скругления, стиль заголовка, длительность анимации. Вместо значения #1A73E8 компонент использует роль вроде primary. Это позволяет менять тему, тёмный режим и контраст без ручной правки каждого экрана.

Три уровня

• Базовые токены хранят исходные значения палитры, шрифта и размеров.
• Семантические токены описывают роль: фон, основной текст, ошибка, контур.
• Компонентные токены настраивают конкретный элемент: кнопку, карточку, поле.

Цвет и поверхности

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

Динамический цвет Material You полезен в пользовательских приложениях, но брендовые и корпоративные продукты часто требуют стабильной палитры. Решение должно учитывать платформу и контекст, а не следовать функции автоматически.

Типографика

Типографическая шкала задаёт роли: крупный заголовок, заголовок раздела, основной текст, подпись, метка кнопки. Ограничьте число размеров и начертаний. Для русского текста проверьте кириллицу, кавычки, дефис, тире, переносы и высоту строки: макет на английском не гарантирует хороший набор на русском.

Практическое правило

Сначала добейтесь читаемости основного текста, затем стройте контраст заголовков. Не уменьшайте подписи ради воздуха: на мобильном экране информация должна оставаться доступной без масштабирования.

Форма

Скругление помогает объединять элементы и отделять интерактивные объекты от поверхностей. В M3 Expressive библиотека форм стала заметнее, но одна страница не должна превращаться в коллекцию всех вариантов. Назначьте формы ролям и используйте их последовательно.

Движение

Анимация объясняет, что произошло: элемент появился, сменил состояние, переместился между уровнями. Новая система движения M3 делает переходы выразительнее и допускает физические параметры, но у пользователя должна быть возможность уменьшить движение. Не задерживайте действие ради эффекта.

• Анимация подтверждает причинно‑следственную связь.
• Скорость соответствует расстоянию и значимости изменения.
• Параллельные элементы двигаются согласованно.
• Режим reduced motion сохраняет смысл без лишнего движения.

Компоненты

Компонент — не картинка из макета, а набор состояний и правил. Для кнопки нужны обычное, наведённое, нажатое, фокусное, загрузочное и недоступное состояния. Для поля — подсказка, ошибка, заполнение, автокомплит и работа с клавиатурой.

Кнопки и группы действий

Главное действие должно быть одно. Дополнительные действия визуально спокойнее. Split button и группы кнопок полезны, когда действия связаны, но не прячьте часто используемую команду в меню без причины.

Карточки

Карточка объединяет содержимое, которое пользователь воспринимает как единый объект. Не вкладывайте карточки друг в друга и не делайте всю поверхность кликабельной, если внутри есть другие интерактивные элементы.

Навигация

Выбор зависит от ширины и числа разделов: нижняя панель подходит компактному мобильному сценарию, navigation rail — широкому экрану, drawer — большому числу пунктов. Адаптивность означает смену паттерна, а не только растягивание отступов.

Что добавил M3 Expressive

M3 Expressive усиливает эмоциональную сторону интерфейса: контрастные формы, более живую типографику, физически убедительное движение и новые или обновлённые компоненты. Google подчёркивает, что выразительность должна улучшать заметность и удобство, а не становиться самоцелью.

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

Доступность

• Проверьте контраст текста, иконок и фокусного контура.
• Обеспечьте управление с клавиатуры и понятный порядок фокуса.
• Добавьте текстовые метки интерактивным иконкам.
• Не полагайтесь только на цвет, форму или движение.
• Проверьте увеличение шрифта и длинные русские подписи.

Как внедрить Material 3

1. Проведите аудит экранов и найдите повторяющиеся решения.
2. Определите семантические токены цвета, типа, формы и расстояний.
3. Соберите небольшой набор базовых компонентов со всеми состояниями.
4. Проверьте один ключевой пользовательский сценарий на мобильном и широком экране.
5. Зафиксируйте правила в коде, Figma и документации.
6. Мигрируйте продукт по компонентам, а не перерисовывайте всё одновременно.

Как развивалась система

Material Design 1

Первая версия 2014 года объясняла цифровой интерфейс через метафору листов материала, света и высоты. Она дала Android‑приложениям общий язык и сделала поведение элементов предсказуемым. Одновременно продукты стали слишком похожи друг на друга, когда команды копировали стандартные цвета и компоненты без адаптации к бренду.

Material Theming и Material 2

Второй этап усилил тему бренда: команды получили больше контроля над цветом, типографикой и формой. Система стала гибче, но настройки часто оставались набором локальных переопределений. Без токенов изменения было трудно синхронизировать между макетом, Android, iOS и вебом.

Material You и Material 3

Material 3 перенёс центр тяжести на токены, персонализацию, адаптивность и доступность. Динамическая палитра Android стала заметным примером, но более важным изменением оказалась архитектура: роли цветов и компонентов можно хранить как систему и менять без ручного поиска значений.

M3 Expressive

Expressive‑обновление не является отдельной дизайн‑системой. Это развитие Material 3 с более контрастными формами, новыми компонентами, гибкой типографикой и физически выразительным движением. Команда может применять его постепенно и сохранять спокойный характер там, где пользователю важнее скорость и плотность данных.

Макет и адаптивность

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

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

Безопасные области и системные панели

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

Плотность

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

Высота, тени и контейнеры

В раннем Material тень была главным сигналом высоты. В Material 3 иерархию чаще создают цвет поверхности, тональный контейнер и контур. Тень остаётся полезной для плавающего или временно поднятого элемента, но не должна обводить каждую карточку.

Спросите, зачем объект отделён: он интерактивен, временно перекрывает контент или просто сгруппирован? Для обычной группы часто достаточно расстояния и заголовка. Чем меньше декоративных контейнеров, тем яснее структура.

Состояния и обратная связь

Пользователь должен видеть результат каждого действия. Нажатие меняет состояние сразу, длительная операция показывает прогресс, ошибка объясняет способ исправления, а успешное сохранение не требует угадывать.

• Hover применим только там, где есть указатель, и не может быть единственным сигналом.
• Focus должен быть заметен на любой поверхности и не исчезать после сброса стилей браузера.
• Pressed подтверждает контакт до завершения действия.
• Selected показывает устойчивый выбор.
• Disabled используйте осторожно: часто полезнее оставить действие доступным и объяснить условие.
• Loading не должен менять размеры компонента и сдвигать соседний контент.

Поля и формы

Подпись поля должна сохраняться после ввода. Placeholder не заменяет label: он исчезает, имеет слабый контраст и обычно описывает пример, а не назначение. Показывайте формат до ошибки, размещайте сообщение рядом с полем и переводите фокус к первой проблеме после отправки.

Выбор компонента

• Checkbox — несколько независимых вариантов.
• Radio — один вариант из короткого видимого списка.
• Switch — настройка, которая применяется сразу.
• Select — длинный список, где варианты не нужно сравнивать одновременно.
• Autocomplete — поиск по большому набору с известными значениями.

Не используйте switch вместо согласия перед отправкой формы: переключатель обещает немедленный эффект. Для подтверждения условий подходит checkbox и отдельная кнопка действия.

Диалоги, листы и уведомления

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

Snackbar сообщает о результате и может содержать одно связанное действие, например «Отменить». Не помещайте туда длинную ошибку или несколько кнопок. Важное состояние должно оставаться доступным после исчезновения уведомления.

Иконки и иллюстрации

Иконка экономит место только тогда, когда значение знакомо аудитории. Неизвестное действие сопровождайте подписью. Используйте один стиль штриха и оптический размер, а не случайные символы из разных библиотек.

Декоративная иллюстрация может поддерживать бренд, но не должна конкурировать с задачей. Для пустого состояния сначала объясните, почему список пуст и что сделать дальше, затем добавляйте изображение.

Контент как часть дизайн‑системы

Компоненту нужны правила текста: длина заголовка, форма кнопки, сообщение ошибки, дата и формат числа. Кнопка отвечает на вопрос «что произойдёт»: «Сохранить изменения» точнее, чем «Готово». Ошибка объясняет проблему и следующее действие без обвинения пользователя.

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

Тёмная тема

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

Реализация в коде

Android и Jetpack Compose

Для Android актуальные компоненты Material развиваются в первую очередь в Jetpack Compose. Тему соберите из color scheme, typography и shapes, а локальные исключения оформляйте через собственные токены. Не копируйте значения из Figma в каждый экран.

Flutter

Flutter поддерживает Material 3 через тему и библиотеку компонентов. Перед миграцией проверьте визуальные изменения существующих элементов, потому что включение новой версии может изменить размеры, цвета и поведение во всём приложении.

Веб

На вебе не обязательно использовать библиотеку Google целиком. Перенесите принципы, токены и доступность в собственные компоненты. Нативная семантика HTML, клавиатура и поведение браузера важнее внешнего сходства с мобильным приложением.

Связь Figma и кода

Названия токенов в макете и репозитории должны совпадать по смыслу. Компонент в Figma отражает те же варианты и состояния, что компонент в коде. Если дизайнер создаёт визуальный вариант, которого нет в продукте, он помечается как эксперимент, а не попадает незаметно в библиотеку.

Заведите владельцев системы, журнал изменений и процедуру устаревания. Дизайн‑система без поддержки быстро превращается в ещё одну папку с копиями.

Метрики качества

Оценивайте дизайн‑систему не числом компонентов, а результатом: быстрее ли команда выпускает сценарии, меньше ли несогласованных решений, снижается ли число ошибок доступности, понятнее ли пользователю ключевые действия. Компонент, которым никто не пользуется, не создаёт ценность.

Миграция без большого редизайна

1. Стабилизируйте семантические цвета и типографические роли.
2. Замените базовые кнопки, поля и навигацию.
3. Исправьте критичные проблемы доступности.
4. Переведите экраны на новые компоненты по мере продуктовой работы.
5. Удаляйте старый вариант только после проверки всех потребителей.
6. Добавляйте выразительные паттерны после стабилизации основы.

Чек-лист для ревью

• У каждого цвета и размера есть роль.
• Компоненты имеют полный набор состояний.
• Главное действие видно без пояснения.
• Интерфейс работает с клавиатуры и при увеличенном тексте.
• Анимация объясняет изменение и отключается без потери смысла.
• Макет проверен на реальном русском содержимом.

Хорошая реализация Material 3 не выглядит как копия приложения Google. Она выглядит как ваш продукт, в котором решения последовательны, интерфейс доступен, а дизайнеры и разработчики говорят на одном языке.