Google анонсировала Material You на I/O 2021, и с тех пор она появилась в подавляющем большинстве ее приложений для Android. В Интернете Gmail является основным примером, но вы также можете опробовать Material Design 3 на Material.io.
Google считает Material.io «онлайн-учебником», и в этом месяце он был переработан с еще большим количеством элементов Material Design 3, чтобы продемонстрировать его полный потенциал:
В рамках этого обновления команда Material.io продемонстрировала новые функции и компоненты, а также показала, как принципы Material 3 могут быть расширены для решения специфических для продукта задач, в нашем случае — обширная библиотека информации, которая поможет дизайнерам и разработчикам создавать красивые продукты.
Вместо динамического цвета, основанного на обоях, Material.io использует динамический цвет на основе контента, который использует «набор изображений, различающихся по стилю, цвету и тематике».
Преобразование динамического цвета создает целостный визуальный опыт, отражая контент, который читатель потребляет, и демонстрирует новую цветовую систему Material Design 3, использующую уникальную палитру оттенков и комплементов.
Вы можете увидеть это в действии при просмотре статей с рекомендациями по компонентам Material.
Тем временем Material.io получил темную тему (переключатель в левом нижнем углу) с этой редизайном, и Google сделал так, чтобы ключевые изображения реагировали на разные режимы. Сайт также избегает зеленого цвета из-за дальтонизма красно-зеленого спектра, используя вместо него синий (Можно) или красный (Нельзя).
Что касается навигации по сайту, Google «объединил новую панель навигации с ящиком навигации с помощью простого взаимодействия при наведении курсора, которое создает у читателей ощущение эргономичной скорости и быстро предоставляет обзор контента сайта с относительной легкостью». Таблицы и содержания являются другими основными формами навигации.
Особого внимания заслуживает подход Material.io к маркированным спискам с «печеньеобразным» элементом:
Применение этих форм к маркированным спискам в таком малом масштабе и случайное вращение с помощью простой CSS создает ощущение ненавязчивого иконоборчества, продвигая визуальное выражение ради выражения, а не строгой полезности.
Что касается анимации, доступны полноэкранные переходы, вертикальные и боковые переходы. Аналогично:
Значки реагируют, увеличивая свой вес при наведении курсора и уменьшая его при нажатии; это снова создает ощущение магической энергии и полезности. Для навигационных компонентов значки становятся залитыми, когда элемент выбран.