К моменту выхода Android 12 и Pixel 6 многие из крупнейших приложений Google уже были обновлены до Material You. На Android Dev Summit 2021 Google подробно представила Material Design 3 и продемонстрировала обновленные компоненты пользовательского интерфейса, которые разработчики могут использовать для создания своих приложений.
Для начала, «Material Design 3» — это официально более техническое название последней системы дизайна Google, которая используется во всей документации для разработчиков. Число помогает отличать ее от предыдущей системы «Material Design 2» (в которой появилось Material Theming), а в некоторых местах также используется сокращение «M3». По сравнению с этим, «Material You» — это более публичное и дружелюбное название, которое используется в рекламе Pixel 6.
Вчера команда Material Design опубликовала полную документацию об изменениях. Погружаясь в новые компоненты, которые разработчики могут использовать для создания приложений, можно сказать, что самые большие изменения касаются навигации по приложению.
Навигационная панель
«Навигационная панель» ранее называлась «нижняя навигация» в M2, а более разговорно — «нижняя панель». Она стала выше, без тени, и Google рекомендует размещать на ней элементы, «относительно равные по важности».
Текущая вкладка, которую вы просматриваете, обозначается «заполненными значками и контрастным индикатором активного состояния в форме таблетки, в то время как неактивные состояния представлены контурными значками». Все обновленные приложения Material You приняли этот компонент, хотя Gmail уменьшил высоту до эры M2 вскоре после запуска. Возможно, планируется дальнейшее уменьшение высоты за счет удаления текстовых меток.
Навигационная направляющая
Тем временем, для больших экранов появилась «навигационная направляющая». Это, по сути, нижняя панель, но вертикальная, в то время как FAB может располагаться вверху непосредственно перед «навигационным ящиком», который был лишь слегка изменен. Фон может иметь закругленные углы, но на данный момент ни одно приложение не реализует это.
Верхняя панель приложения
Еще один распространенный компонент, с которым вы взаимодействуете, — это «верхняя панель приложения». Существует четыре варианта: с центрированным заголовком (1), маленький (2), средний (3) и большой (4). Более существенное отличие в том, что отсутствует тень, и «наложение цветового заполнения отделяет верхнюю панель приложения от контента под ней».
FAB
Рассматривая плавающую кнопку действия, есть обычная «FAB», которая теперь использует более квадратную форму с меньшим радиусом скругления. Также есть «маленькая FAB» и «большая FAB». Первая в настоящее время используется для редактирования виджетов (например, Google Drive) после их размещения на главном экране, в то время как последняя отражает использование огромных кнопок для запуска Google Recorder или добавления нового будильника в приложении Clock. Google рекомендует, чтобы «FAB оставался на экране при прокрутке контента» и был функционально явным, поскольку текстовые метки отсутствуют.
Расширенная FAB
Тем временем, появилась «расширенная FAB» для создания «наиболее визуально заметной кнопки». Использование значка необязательно. В то же время, расширенные FAB в M3 имеют ту же высоту, что и FAB, но разделяют ту же «более простую модель возвышения», в отличие от M2.
Кнопки
Другие кнопки в форме таблетки включают: приподнятые, залитые, залитые тональные, контурные и текстовые. Google отмечает, что «Текст кнопки написан в предложенном формате, без ВСЕХ ЗАГЛАВНЫХ БУКВ». Первые три заменяют кнопки контейнеров M2, в то время как высота увеличена, а минимальная ширина новая.
Карточки
В других местах предлагаются три типа карточек: приподнятые, залитые и контурные (например, Google Keep). В целом, контент, отображаемый внутри этого компонента, теперь имеет «меньшее возвышение и по умолчанию без тени».
Чипы
Material Design 3 имеет четыре типа чипов в форме закругленного прямоугольника — вспомогательные, фильтрующие, входные и рекомендательные — которые представляют «параметры в определенном контексте, в отличие от кнопок, которые являются постоянными».
Чипы действий были разделены на вспомогательные чипы и рекомендательные чипы. Чипы выбора теперь являются подмножеством чипов фильтра.
Диалоги
Наконец, существует два типа диалогов: базовые и полноэкранные. В первом вы сразу заметите «больший отступ для учета увеличенного радиуса скругления и размера заголовка» — приложение Recorder уже реализовало это (при удалении аудио).