В этой статье
Scott
Material Design — дизайн-система Google: рекомендации, компоненты и правила оформления интерфейсов. Она помогает согласовать цвет, типографику, формы и поведение элементов. Для нового проекта важно выбрать одно поколение системы: названия и роли из Material Design 2 нельзя без изменений переносить в Material Design 3.
Ниже разберём основные принципы и применим их к экрану настроек уведомлений. Чтобы закрепить выбранные правила в макетах, используйте общие стили и библиотеки компонентов в Pixso: так кнопки, поля и карточки будут опираться на одну систему, а не на случайные значения в каждом экране.
Как называется дизайн-система Google?
Google представила Material Design в 2014 году. Система объединяет рекомендации по визуальному оформлению и взаимодействию, а также реализации компонентов. Её можно адаптировать под бренд: использовать Material не означает копировать внешний вид приложения Google.
Material You, представленный в 2021 году, развивает идею персонализации. В Material 3 динамические цвета могут формироваться на основе обоев пользователя; приложение также может использовать собственную цветовую схему. В документации Google по Material 3 Material 3 Expressive описан как развитие M3, а не отдельная замена всех правил. Доступность конкретных компонентов зависит от выбранной реализации и её версии.
Перед началом работы договоритесь с разработчиком, какое семейство компонентов используется в продукте. Если существующее приложение построено на M2, изменение одного макета на M3 не обновит автоматически остальные экраны. Сначала составьте список затронутых компонентов и состояний, затем планируйте переход.
Material Design: основные принципы
1. Цветовая система
Цветовая тема должна отражать бренд и оставаться согласованной во всём интерфейсе. Но название цвета само по себе не объясняет, где его использовать: «фиолетовый» — значение, а «основное действие» — роль. Для команды полезнее второй уровень, потому что он связывает оформление с задачей элемента.
В M3 роли primary, secondary и tertiary дополняются ролями контейнеров, поверхностей и ошибок. Парные on-роли задают цвет содержимого на соответствующем фоне: например, onPrimary для текста на primary. Не выбирайте текст и фон независимо, даже если оба цвета входят в фирменную палитру.
- Основное действие: выделите кнопку, завершающую текущую задачу. Две одинаково яркие кнопки «Сохранить» и «Отмена» мешают понять приоритет.
- Поверхность: отделяйте карточку или панель от окружения без лишних рамок и конкурирующих акцентов.
- Ошибка: сопровождайте цвет понятным текстом. Красное поле без объяснения не говорит, как исправить ввод.
- Текст и значки: проверяйте контраст на реальном фоне в каждом состоянии, включая выбранное и отключённое.
Светлая и тёмная темы — две согласованные схемы, а не простая инверсия цветов. Во второй теме заново проверьте различимость поверхностей, смысл акцентов и читаемость текста.
2. Типографика
Типографическая шкала — визуальная иерархия текстовых стилей для разных задач. В базовой шкале M3 есть пять групп: display, headline, title, body и label, каждая в трёх размерах. Это отличается от прежней шкалы с названиями Headline 1–6 и Subtitle.
Текст на кнопке, заголовок раздела и пояснение к полю выполняют разные функции. Сначала задайте их роли, затем подберите размер, насыщенность и межстрочный интервал. Изменение общего текстового стиля должно помогать всей группе элементов; локальное увеличение одной кнопки не исправит несогласованную типографику.
Для русскоязычного интерфейса проверяйте не только короткие подписи. «Получать уведомления о новых комментариях» занимает больше места, чем «Комментарии». Строка должна переноситься без наложения на переключатель, а увеличенный пользователем текст — оставаться читаемым.
3. Формы и значки
Формы и значки помогают выразить бренд и направить внимание. Согласованность скруглений полезнее случайного набора радиусов: сходные элементы должны выглядеть родственными, а важные различия — быть заметными.
У значков разные задачи. Значок приложения обозначает продукт, системный символ помогает узнать действие, а анимация может показать смену состояния. Это не означает, что все значки должны имитировать реальные материалы или объекты. Например, конверт передаёт идею сообщения за счёт знакомой формы; реалистичная фактура ему не нужна.
Не рассчитывайте, что любой символ понятен без подписи. Для редкого или рискованного действия добавьте текст, а для интерактивного элемента предусмотрите понятное доступное имя.
4. Звук
Звук может сообщать о событии, музыка — задавать настроение, голос — передавать информацию словами. Эти способы обратной связи дополняют интерфейс, но не обязательны для каждого продукта или компонента.
Например, подтверждение загрузки файла должно быть заметно и без звука. Пользователь может отключить громкость или находиться в шумном месте. Если уведомление важно, показывайте его состояние на экране и предоставляйте управление звуковыми сигналами.
5. Движение
Движение помогает понять связь между состояниями: откуда появился экран, что изменилось после действия и где искать результат. Декоративная анимация, которая задерживает ввод, мешает этой цели.
В Material встречаются разные шаблоны переходов. Четыре полезных примера помогают описать намерение анимации:
- Преобразование контейнера: карточка раскрывается в подробный экран, сохраняя ощущение связи с исходным объектом.
- Общая ось: последовательные шаги движутся в согласованном направлении, например при переходе «Далее».
- Переход через затухание: одно содержимое сменяет другое, когда прямую пространственную связь показывать не требуется.
- Появление и исчезновение: меню или диалог становится видимым и затем закрывается.
Это примеры, а не полный перечень актуальных настроек любой библиотеки. Согласуйте движение с компонентами, которые реально используются в приложении, и учитывайте пользовательскую настройку уменьшения анимации.
Пример: экран настроек уведомлений
Представим приложение, в котором человек выбирает уведомления о комментариях и еженедельную сводку. Экран содержит заголовок, два переключателя, поле адреса электронной почты и кнопку сохранения. Оформлять каждую строку по отдельности не нужно: сначала определите общие правила.
- Разделите содержание. Название настройки и пояснение разместите в одной строке-компоненте с переключателем. Между группами оставьте больше пространства, чем между названием и его пояснением.
- Назначьте роли. Основной акцент относится к действию «Сохранить», а не ко всем надписям. Поверхность объединяет связанные настройки; вторичный текст объясняет последствия.
- Покажите ошибку. Для неверного адреса добавьте сообщение «Введите адрес в формате name@example.com». Сохраните введённый текст, обозначьте поле и не полагайтесь только на красный цвет.
- Определите результат. После успешного сохранения покажите подтверждение. Если запрос не завершился, не изображайте успех только потому, что пользователь нажал кнопку.
- Проверьте варианты. Откройте светлую и тёмную темы, длинные подписи и увеличенный текст. Убедитесь, что элементы не перекрываются, а выбранное состояние остаётся различимым.
В библиотеке макетов сохраните строку настройки, поле и кнопку как повторно используемые компоненты. Отдельно опишите состояния и поведение: наличие компонента в дизайн-файле само по себе не создаёт обработку ошибки в приложении.
С чего начать работу с Material Design
Возьмите один реальный экран и приведите его к согласованным правилам цвета, текста, форм и состояний. Затем повторите решение на втором экране. Если приходится постоянно делать исключения, уточните роли и компоненты до расширения библиотеки. Material даёт основу для последовательного интерфейса, но удобство конкретного продукта определяется тем, насколько хорошо он помогает человеку выполнить свою задачу.
