Система дизайна плитки

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

Фундаментальные элементы

В следующей таблице описаны основные элементы дизайна плитки.

Значок приложения Значки приложений предоставляются разработчиком приложения и временно отображаются на экране.	Область дизайна Каждый шаблон плитки имеет свои собственные правила, касающиеся основной области содержимого. Обязательно ознакомьтесь с руководством по макетированию.	Нижняя кнопка Кнопки важны для включения дополнительных действий на плитке. Разместите кнопки на 6,3% выше нижней части экрана.

Значок приложения

Wear автоматически отображает значок приложения, когда пользователь прокручивает карусель плиток. Значок приложения исчезнет, ​​и его не следует размещать на плитке. Дополнительную информацию о создании значков приложений см. в разделе Значки продуктов .

Рисунок 1. Примеры значков приложений

Wear автоматически показывает значок вашего приложения

check_circle

Делать

Предположим, Wear OS автоматически отображает значок вашего приложения.

cancel

Не

Поместите значок приложения на плитку, иначе он отобразится дважды.

Кнопка

Выберите короткий текст для кнопок. Используйте текст, соответствующий действию и месту назначения призыва к действию. Убедитесь, что перевод текста кнопки соответствует количеству символов. Если переведенный текст кнопки слишком длинный, вместо этого настройте кнопку на надпись «Еще» .

Размещение	Спецификация кнопки	Тип
Поместите кнопку на 6,3% снизу циферблата.	Оставьте отступы по 12 dp с обеих сторон.	Размеры шрифта не масштабируются. Установите минимальный размер шрифта — девять. Для нелатинских языков используйте минимальный размер шрифта — семь.

Шаблоны

Доступно четыре типа шаблонов плиток. Загрузите Tile Design Kit (figma), чтобы просмотреть примеры и оставить отзыв о своем опыте использования этого шаблона.

Текст ориентирован

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

Кнопка центрированная

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

Информация ориентирована

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

Ориентирован на данные

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

Цвет

Чтобы плитка оставалась привлекательной, ограничьтесь тремя цветами.

check_circle

Делать

Установите цвет фона на черный.

cancel

Не

Установите цвет фона на изображение или цвет без полей.

Типография

Используйте Roboto в качестве основного шрифта в Wear OS. Используйте «Тело 2» в качестве наименьшего размера шрифта по умолчанию, а «Дисплей 2» — как самый крупный.

Дополнительную информацию о шрифте, весе и размере см. в разделе «Типографика» .

Компоненты

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

Загрузите Tile Design Kit (figma), чтобы увидеть примеры компонентов.

Компонент	Вариант	Пример
Кнопка	Стандартная кнопка	Доступные размеры: стандартный, большой и очень большой.
Кнопка	Стандартная текстовая кнопка	Доступные размеры: стандартный, большой и очень большой.
Чип	Первичный стандартный чип
Чип	Вторичный стандартный чип
Чип	Маленький чип аватара
Чип	Большой чип аватара
Чип	Компактный (нижний) чип
Индикатор прогресса	Стандартный индикатор прогресса
Индикатор прогресса	Индикатор прогресса с разрывом

Ресурсы

Дополнительную информацию см. в Руководстве по дизайну плитки .