Дизайн и прототипирование

Первый взгляд на Material You

Это захватывающий момент для Material Design и того, чего мы можем достичь в создании персональных и красивых приложений. Material You, новые библиотеки и инструменты обновляются, а Google оказывает поддержку и прислушивается к сообществу, что дает мне ощущение, что мы вместе делаем великие дела.

Опубликовано

3 года назад

07.12.2021

Автор:

AppTractor

Во время конференции I/O 2021 Google анонсировал новый этап Material Design — Material You (или M3). Этот новый дизайн, впервые появившийся в Android 12, ориентирован на кастомизацию, отзывчивость и доступность, делая устройства еще более личными.

С момента первого объявления Google выпускает все больше и больше контента, руководств и библиотек, чтобы помочь разработчикам использовать Material You и создавать красивые и выразительные приложения. В этой статье мы рассмотрим некоторые ключевые концепции и узнаем больше об этом новом подходе к дизайну.

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

Динамический цвет — это цветовая схема, созданная пользователем, которая интегрируется с системой Android и приложениями, реализующими цветовую систему Material You. Этот цвет создается из пользовательских обоев, создавая красивую и уникальную цветовую палитру.

Вот пример цветовой палитры, создаваемой красными цветочными обоями. Схема также генерирует цвета как для светлых, так и для темных тем.

И теперь вы можете сделать так, чтобы ваше собственное приложение использовало эту цветовую палитру, созданную пользователем! С добавлением новых API-интерфейсов dynamicLightColorScheme и dynamicDarkColorScheme добавить поддержку Material You в ваше приложение можно просто несколькими строками кода.

На данный момент поддержка динамического цвета доступна начиная с Android 12 и лишь на некоторых выбранных устройствах.

Конструктор материальных тем

Material Theme Builder — это инструмент, предназначенный для помощи в визуализации и создании пользовательских тем в соответствии с рекомендациями Material You. Создавать темы можно как из обоев, так и из акцентных или фирменных цветов.

Этот инструмент доступен в виде плагина Figma и в Интернете. Помимо улучшения визуализации, Material Theme Builder позволяет нам экспортировать тематический код в несколько форматов: Android Views (XML), Jetpack Compose (Kotlin) и Design System Package (DSP).

Обновление названий

При переходе с Material Design 2 на M3 вы заметите, что некоторые названия цветов и типографики были обновлены. В новых наименованиях больше внимания уделяется созданию адаптивной шкалы шрифтов, выражению стиля и передаче смысла. Таким образом, элементы типа «H1», «Body1» уходят, а появляются «Headline Large», «Body Medium».

Названия цветов также подверглись обновлению и получили более значимые имена, что упростило использование и передачу между разработчиками и дизайнерами. А благодаря Material 3 Design Kit и Material Theme Builder легко предварительно просмотреть и понять изменения.

MDC-Android и Compose-Material3

Google также обновил библиотеку Material Components for Android, чтобы отразить изменения в Material You. Текущая версия, поддерживающая M3, еще нестабильна (минимум 1.5.0-alpha или новее), но библиотека уже поддерживает ключевые компоненты, темы, макеты и многое другое. Чтобы облегчить нашу жизнь, компания даже выпустила руководство по миграции, чтобы сделать переход более плавным.

И если вы думаете, что Material You доступен для Jetpack Compose, то вы правы. Также была выпущена новая библиотека Compose Material 3, которая придает обновленный вид нашим приложениям Compose. Библиотека в настоящее время находится на стадии альфа-тестирования и многое предстоит сделать, чтобы перенести все компоненты в M3.

Дизайн в код

Один из приятных сюрпризов Android Dev Summit 2021 — это Material Design to Code. Идея состоит в том, что дизайнер создает компоненты пользовательского интерфейса в Figma и предоставляет разработчикам ссылку. Эту ссылку можно импортировать в Android Studio, и дизайн будет автоматически создан с помощью Jetpack Compose!

Компоненты пользовательского интерфейса также могут быть обновлены на стороне Figma и отражены в Android Studio одним нажатием кнопки, интегрируясь с системой контроля версий. Больше никаких проблем и недопониманий между дизайнерами и разработчиками!

Эта функция в настоящее время находится в предварительной версии, и если вы хотите присоединиться к программе раннего доступа, вам необходимо зарегистрироваться, используя эту форму.

Что дальше?

Я начал обновлять свой проект с открытым исходным кодом с Material Design 2 до Material You. В настоящее время это продолжающийся пул-реквест, поскольку некоторые из компонентов, которые я использую, еще не перенесены в M3. Если вы хотите увидеть, насколько просто использовать динамический цвет, обновить существующие компоненты и интегрировать тему, созданную в Material Theme Builder, этот PR — хорошее начало.