Плитки обеспечивают быстрый доступ к информации и действиям, необходимым пользователям для выполнения задач. Проведя пальцем по циферблату, пользователь может увидеть, как он продвигается к своим фитнес-целям, проверить погоду и многое другое. Запускайте приложения или быстро выполняйте важные задачи с помощью плиток.
Создавайте адаптивные и оптимизированные дизайны.
Чтобы помочь вам адаптировать макеты дизайна к большим размерам экрана, мы обновили поведение наших макетов и компонентов, добавив встроенную адаптивность, включая поля и отступы, зависящие от процента.
Если вы используете наши шаблоны ProtoLayout, вы можете автоматически получить эти обновления из последней бета-версии библиотеки Wear ProtoLayout Jetpack. Кроме того, вам нужно предоставлять макеты только там, где вы добавили дополнительный контент или компоненты после контрольной точки размера экрана. Полные рекомендации по использованию преимуществ больших размеров экрана см. в нашем руководстве по плиткам . Плитки имеют фиксированную высоту экрана, поэтому мы скорректировали отступы, чтобы максимально использовать ограниченное пространство экрана без создания нежелательных обрезков.
Убедитесь, что компоненты заполняют доступную ширину.
Все компоненты должны быть адаптивными. Задав высоту и ширину в режиме «расширение», вы обеспечите заполнение ими доступного пространства. Включите необходимые отступы, чтобы предотвратить обрезку контента закругленным экраном.
Создавайте адаптивные и дифференцированные проекты.
Чтобы максимально эффективно использовать дополнительное пространство на экранах больших размеров, добавьте контрольную точку на отметке 225dp. Эта контрольная точка позволит отобразить дополнительный контент, добавить больше кнопок или данных, а также изменить макет для лучшего соответствия большому экрану.
Для каждого контрольного пункта требуется свой собственный дизайн. Дизайн для больших экранов (225+ dp) может включать следующие дополнительные элементы:
Показать ранее скрытый слот для заголовка
Это рекомендуется для макетов с двумя рядами до точки разрыва, где слот заголовка необходимо удалить, чтобы обеспечить достижение минимального целевого значения количества нажатий в 48 точек.
Увеличить размер или изменить состояние существующих компонентов.
Это можно сделать для того, чтобы показать больше деталей или сделать контент более удобным для быстрого просмотра.
Добавить слоты для компонентов в существующую компоновку.
Добавление компонентов расширяет возможности макета и добавляет дополнительные детали. Однако убедитесь, что контент остается легко читаемым.
Добавьте больше контента внизу.
В некоторых случаях целесообразнее добавлять кнопки действий или контент в нижнюю часть, а не размещать компоненты в основном слоте.
Внимание: больший размер экрана никогда не должен отображать меньше информации, чем меньший. Это особенно важно для пользовательских действий, добавленных в точке останова.
Распространенный пример: когда размер компонентов или текста увеличивается за пределы контрольной точки, на больших экранах отображается меньше информации. Экраны всегда должны отображать больше информации с увеличением размера.
Реактивное и адаптивное поведение
Отзывчивое и адаптивное поведение зависит от трех слотов (секций) макета.
значок приложения и слот для названия
Системная иконка приложения не меняет своего поведения. Заголовок автоматически адаптируется к большему размеру экрана, отображая дополнительные символы. В верхней части экрана имеются пропорциональные (в процентах) внутренние поля, чтобы избежать обрезки при увеличении размера экрана.
Основной слот (компоненты)
Все компоненты в основном слоте должны иметь ширину и высоту, заданные в режиме «расширения», чтобы автоматически адаптироваться к большему размеру экрана. В основном слоте — и в некоторых случаях в каждой строке внутри этого слота — предусмотрены пропорциональные (в процентах) внутренние поля, чтобы избежать обрезки при увеличении размера экрана. Если вы используете комбинацию радиуса скругления углов и компоновки, вашему основному слоту могут потребоваться большие поля.
Нижний слот
Нижняя кнопка и текст не меняются в своем поведении, но ширина кнопки и текстовых полей автоматически адаптируется к большему размеру экрана и увеличивается на количество символов. В нижнем слоте предусмотрены пропорциональные (в процентах) внутренние поля, чтобы избежать обрезки при увеличении размера экрана. Если нижний слот отсутствует, автоматически добавляется поле по умолчанию.
Создавайте уникальные впечатления
Единый, полностью настраиваемый макет с 60 и более вариантами позволяет практически безгранично персонализировать его. Плитки построены на основе слотовой системы, поэтому вы можете заменить слот из канонического макета любым содержимым или компонентом, а также установить для компонента один из множества вариантов и цветовых комбинаций. При этом необходимо сохранять адаптивность и следовать нашим рекомендациям по дизайну.
Эти настройки должны быть ограниченными и не должны отклоняться от шаблона плиток. Это необходимо для обеспечения единообразия при прокрутке пользователями карусели плиток на своих устройствах Wear OS.