Изучите шаблоны макетов материалов ProtoLayout и примеры макетов дизайна, чтобы проектировать и создавать уникальные плитки для своих приложений.
Шаблоны макетов материалов ProtoLayout
Чтобы создать рекомендуемый вариант адаптивного макета, используйте предоставленные шаблоны макетов. Эти шаблоны охватывают распространенные варианты использования дизайна.
Шаблон PrimaryLayout
![Нижний чип появится в центре нижней части макета.](https://developer.android.com/static/wear/images/surfaces/primary-layout-template.png?authuser=6&hl=ru)
Верхний раздел:
Слот для основной этикетки (дополнительно)
Средняя часть:
Основной слот контента
Слот для вторичной этикетки (опционально)
Нижняя часть:
Слот основного чипа (опционально)
Шаблон EdgeContentLayout
![По периметру макета появится индикатор прогресса.](https://developer.android.com/static/wear/images/surfaces/edge-content-layout-template.png?authuser=6&hl=ru)
Верхний раздел:
Слот для основной этикетки (дополнительно)
Средняя часть:
Основной слот контента
Слот для вторичной этикетки (опционально)
Нижняя часть:
Слот краевого контента как индикатор прогресса
Каждый шаблон имеет дополнительные слоты для достижения определенной плотности и макета:
![](https://developer.android.com/static/wear/images/surfaces/proto-layout-template-matrix.png?authuser=6&hl=ru)
Эти шаблоны макетов ProtoLayout Material с фиксированной высотой обеспечивают основу и леса, на которых строятся все плитки. Единственные различия между ними — это встроенные поля и внутренние отступы. Чтобы обеспечить единообразие дизайна плиток других приложений, используйте рекомендуемые слоты, показанные на предыдущем изображении.
Чтобы настроить эти макеты и использовать различные комбинации компонентов в основном слоте контента, используйте следующие дополнительные компоненты макета:
- Слот для нескольких кнопок: создает сетку круглых кнопок.
- Многослотовый: создает до трех столбцов контента, обычно точек данных.
- Пользовательские слоты: все слоты настраиваются и могут содержать любой компонент. В некоторых случаях слот содержит изображение или график вместо системного компонента.
Примеры макетов канонического дизайна
Чтобы создать плитки вашего приложения, используйте шаблоны макетов, описанные здесь и представленные в шаблоне дизайна Figma .
Чтобы обеспечить единообразие дизайна плиток, используйте эти канонические макеты дизайна. Они основаны на распространенных сценариях использования UX, а проекты и образцы Figma предоставляют готовый макет, с которого вы можете начать, помогая вам быстрее создать плитку. Макеты, показанные в этих шаблонах, являются гибкими и позволяют заполнить слоты любым необходимым содержимым.
![](https://developer.android.com/static/wear/images/surfaces/design-layout-decision-tree.png?authuser=6&hl=ru)
Набор для проектирования позволяет вам изучить всю гибкость этих макетов. Вы можете настроить свой макет, сохраняя при этом согласованность со всеми шаблонами макетов материалов ProtoLayout.
К элементам, которые мы не рекомендуем настраивать, относятся следующие:
- Основной стиль и положение этикетки
- Стиль и положение индикатора прогресса
- Нижний компактный чип, стиль и расположение
Существует несколько типов макетов плиток на выбор на основе следующих критериев верхнего уровня. Подумайте, какова основная цель вашей плитки, а также тип контента, который вы хотите отображать.
Текст-ориентированные макеты
В этом макете используется шаблон PrimaryLayout .
Этот макет лучше всего подходит как для плиток, содержащих значительный объем текста и четкий призыв к действию, так и для плиток, представляющих пустые состояния и состояния выхода из системы.
Чтобы максимально увеличить доступную высоту на устройствах с экранами меньшего размера, удалите дополнительный слот для этикетки и основной слот для чипа.
Макеты, ориентированные на кнопки
Макеты, ориентированные на кнопки, включают макеты с чипами и кнопки.
Кнопочно-ориентированные (чипы)
В этом макете используется шаблон PrimaryLayout .
Компонент «Чип» появляется в слоте основного контента. На макете с двумя стандартными чипами не используйте второстепенную метку в макетах для экранов меньшего размера.
Кнопочно-ориентированный (кнопки)
В этом макете используется шаблон PrimaryLayout .
Чтобы отобразить несколько кнопок в виде сетки, используйте MultiButtonLayout в основном слоте контента. Этот компонент вмещает до шести кнопок на устройствах с экраном меньшего размера и больше кнопок на устройствах с экраном большего размера.
В макете, содержащем два ряда кнопок, не используйте дополнительный слот для метки на устройствах с экранами меньшего размера.
Информационно-ориентированные макеты
Информационно-ориентированные макеты включают макеты с индикаторами прогресса и без них.
Инфоориентированность без индикатора прогресса
В этом макете используется шаблон PrimaryLayout .
Чтобы отобразить несколько столбцов данных, используйте MultiSlotLayout в основном слоте контента. Этот компонент вмещает до трех столбцов на устройствах с меньшими размерами экрана и дополнительный контент или столбцы на устройствах с большими размерами экрана. Чтобы получить макет, показанный в последнем примере « Выполнить статистику» , используйте основную и дополнительную метку в каждом столбце и не используйте типичный слот для вторичной метки внизу.
Инфоцентричность с индикатором прогресса
В этом макете используется шаблон EdgeContentLayout .
Используйте этот макет для отображения прогресса и одного ключевого показателя. Индикатор выполнения уменьшает доступное пространство в центре макета.
В этой компоновке сохраняются те же слоты, что и в схеме без индикатора прогресса, за исключением слота для основного чипа.
Чтобы создать макет, показанный в последнем примере «Погода» , используйте компонент MultiSlotLayout в основном слоте контента.
Ориентированные на данные макеты
В этом макете используется шаблон PrimaryLayout .
Используйте этот макет для отображения графики и графиков или когда плитка требует максимальной визуальной гибкости на устройствах с экранами большего размера.
Чтобы максимально увеличить доступную высоту, отключите дополнительный слот для этикетки и основной слот для чипа. Эта конфигурация позволяет отображать увеличенное изображение, а также дополнительную информацию на устройствах с экраном большего размера.
Адаптивный дизайн
Следующие шаблоны показывают, как макеты плиток адаптируются к устройствам Wear OS с экранами большего размера. Эти примеры иллюстрируют встроенное поведение, которое помогает максимизировать дополнительную площадь экрана, обеспечиваемую большим размером дисплея. Как разработчик приложения вы также можете определить несколько возможных макетов вместе с точкой останова, которая сообщает системе, какой макет отображать («экран меньшего размера» или «экран большего размера»).
Узнайте больше о том, как создавать адаптивные макеты .
Текстоориентированный дизайн макета
Этот шаблон помогает отображать текстовый контент, например последние новости, предстоящие события и напоминания. Он также часто используется для состояний входа, ошибки и настройки, предоставляя пространство для информирования пользователей о том, что происходит, и предлагая четкий призыв к действию.
Макеты дизайна, ориентированные на кнопки
Эти шаблоны помогают отображать до 5 связанных основных действий, таких как запуск определенных задач. Он создает четкую, краткую и удобную для пользователей плитку, помогая оптимизировать взаимодействие с вашим приложением.
Кнопочно-ориентированная раскладка с фишками
Ориентированная на кнопки компоновка с круглыми кнопками
Информационно-ориентированные дизайн-макеты
Эти шаблоны, показанные как с индикатором прогресса, так и без него, отображают показатели высокого уровня и прогресс в достижении целей. Они особенно полезны для плиток, связанных со здоровьем и фитнесом. Он также предоставляет гибкие возможности отображения контента и основной призыв к действию.
Чтобы обеспечить удобство просмотра, расставьте приоритеты для важных данных и избегайте переполнения плитки.
Ориентированный на данные дизайн макета
Этот шаблон представляет информацию в виде графика или аналогичного изображения.
Загрузите комплект дизайна Tiles on Wear OS
![](https://developer.android.com/static/wear/images/design/download-kit-tiles.png?authuser=6&hl=ru)
Загрузите комплект дизайна, чтобы начать использовать макеты дизайна плитки. Комплект содержит встроенные компоненты, опции и рекомендации для создания до 80 различных макетов в соответствии с вашими потребностями, сохраняя при этом связь с шаблонами с кодом ProtoLayout.
Скачать комплект дизайна Figma (64 МБ)
Хэш SHA-256: db443d4ba5cc10716719bed84b859f9d66cbd3a0a41694666a3752415434b362