Плитки имеют общие фундаментальные элементы дизайна. Используйте шаблоны и компоненты плиток для создания уникальных плиток для вашего приложения.
Фундаментальные элементы
В следующей таблице описаны основные элементы дизайна плитки.
Значок приложенияЗначки приложений предоставляются разработчиком приложения и временно отображаются на экране. | Область дизайнаКаждый шаблон плитки имеет свои собственные правила, касающиеся основной области содержимого. Обязательно ознакомьтесь с руководством по макетированию. | Нижняя кнопкаКнопки важны для включения дополнительных действий на плитке. Разместите кнопки на 6,3% выше нижней части экрана. |
Значок приложения
Wear автоматически отображает значок приложения, когда пользователь прокручивает карусель плиток. Значок приложения исчезнет, и его не следует размещать на плитке. Дополнительную информацию о создании значков приложений см. в разделе Значки продуктов .
Wear автоматически показывает значок вашего приложения
Кнопка
Выберите короткий текст для кнопок. Используйте текст, соответствующий действию и месту назначения призыва к действию. Убедитесь, что перевод текста кнопки соответствует количеству символов. Если переведенный текст кнопки слишком длинный, вместо этого настройте кнопку на надпись «Еще» .
Размещение | Спецификация кнопки | Тип |
Поместите кнопку на 6,3% снизу циферблата. | Оставьте отступы по 12 dp с обеих сторон. | Размеры шрифта не масштабируются. Установите минимальный размер шрифта — девять. Для нелатинских языков используйте минимальный размер шрифта — семь. |
Шаблоны
Доступно четыре типа шаблонов плиток. Загрузите Tile Design Kit (figma), чтобы просмотреть примеры и оставить отзыв о своем опыте использования этого шаблона.
Текст ориентирован
Текстовый шаблон плитки предназначен для отображения на плитках текста, например последних новостей, предстоящих событий и напоминаний. Он обычно используется для состояний входа, ошибки и настройки, чтобы информировать пользователей о том, что происходит, и предлагать четкий призыв к действию.
Кнопка центрированная
Шаблон плитки, ориентированный на кнопки, предназначен для плиток с пятью основными действиями. Используйте этот шаблон для быстрого запуска определенных задач.
Информация ориентирована
Шаблон плитки, ориентированный на информацию, отображает показатели и прогресс высокого уровня. Это особенно полезно для плиток, связанных со здоровьем и фитнесом. Он предоставляет гибкие возможности отображения контента. Чтобы обеспечить удобство просмотра, расставьте приоритеты для важных данных и избегайте переполнения шаблона.
Ориентирован на данные
Шаблон плитки, ориентированный на данные, — это универсальный шаблон, предназначенный для отображения диаграмм и графических элементов, обобщающих периодическую информацию. Он обеспечивает гибкость визуализации данных и полезен для создания визуальных пустых состояний. Сохранение простых графических элементов необходимо для того, чтобы плитка оставалась привлекательной.
Цвет
Чтобы плитка оставалась привлекательной, ограничьтесь тремя цветами.
Типография
Используйте Roboto в качестве основного шрифта в Wear OS. Используйте «Тело 2» в качестве наименьшего размера шрифта по умолчанию, а «Дисплей 2» — как самый крупный.
Дополнительную информацию о шрифте, весе и размере см. в разделе «Типографика» .
Компоненты
Используйте компоненты для создания плиток. Настройте цвета компонента, чтобы выразить свой бренд, следуя рекомендациям по тематике изнашиваемых материалов .
Загрузите Tile Design Kit (figma), чтобы увидеть примеры компонентов.
Компонент | Вариант | Пример |
Кнопка | Стандартная кнопка | Доступные размеры: стандартный, большой и очень большой. |
Кнопка | Стандартная текстовая кнопка | Доступные размеры: стандартный, большой и очень большой. |
Чип | Первичный стандартный чип | |
Чип | Вторичный стандартный чип | |
Чип | Маленький чип аватара | |
Чип | Большой чип аватара | |
Чип | Компактный (нижний) чип | |
Индикатор прогресса | Стандартный индикатор прогресса | |
Индикатор прогресса | Индикатор прогресса с разрывом |
Ресурсы
Дополнительную информацию см. в Руководстве по дизайну плитки .