Стиль

Эффективное оформление виджетов имеет решающее значение для достижения визуально привлекательного и единообразного пользовательского опыта. В этом разделе рассматриваются ключевые концепции и методы определения цвета и типографики для создания наиболее полезных и привлекательных виджетов для Android.

Цвет

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

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

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

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

Для получения дополнительной информации о роли цвета обратитесь к рекомендациям Material Design по цветовому оформлению .

Форма

Форма виджета задает его внешний вид. Для прямоугольных виджетов используйте свойство радиуса скругления углов системы . Это свойство обеспечивает единообразие на разных устройствах и помогает предотвратить обрезку содержимого виджета.

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

Виджеты, использующие различные формы
Виджет выразительной формы и прямоугольный виджет, использующий выразительные формы для визуальной иерархии.

Для получения более подробной информации см. раздел «Реализация закругленных углов» .

Динамические темы

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

Изображение виджета с выделенными цветовыми токенами.

Светлая и темная тема

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

На левом экране виджет находится в светлом режиме, на правом — в темном.

Типография

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

Иерархия

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

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

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

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