Лучшие практики для плитки

Дизайн на черном

Разработка на черном фоне имеет решающее значение для Wear OS по двум основным причинам:

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

Сделай это

Всегда устанавливайте черный цвет фона.

Не делай этого.

Не устанавливайте в качестве фона изображение без полей или блочный цвет.

Включайте только необходимые элементы

При включении (например, с помощью ProtoLayout Material3 PrimaryLayout) Wear OS автоматически отобразит постоянную иконку приложения, которая будет автоматически отображаться, когда пользователь прокручивает карусель плиток. Иконка приложения не должна быть разработана и добавлена ​​как часть плитки.

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

Сделай это

Wear OS может автоматически отображать значок приложения, когда пользователь прокручивает карусель Tile. Нет необходимости помещать значок приложения в дизайн Tile.

Не делай этого.

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

Скройте названия приложений, чтобы обеспечить минимальное количество нажатий

Чтобы обеспечить достаточно места для интерактивных элементов на экранах меньшего размера, заголовок приложения может быть скрыт, когда Tile использует две строки (и нижнюю секцию). Это гарантирует, что строки будут достаточно высокими (не менее 48dp). Заголовок может снова появиться на экранах большего размера (225dp+).

Сделай это

На маленьких экранах название приложения скрыто, чтобы обеспечить минимальную высоту двух строк и зону касания 48dp.

Не делай этого.

Если вы не скрываете название приложения на маленьком экране и имеете две строки, высота компонентов не будет соответствовать нашим стандартам доступности и будет меньше минимального размера цели нажатия. В этом примере пространство для кнопок меньше 48dp, поэтому оно обрезается.

Выберите один основной вариант использования, чтобы выделить его.

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

Сделай это

Эта конкретная плитка эффективна, поскольку она предоставляет небольшой набор опций, а затем возможность увидеть больше

Не делай этого.

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

Включите (как минимум) один контейнер

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

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

Сделай это

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

Не делай этого.

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

Сделайте действия мгновенно понятными

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

Сделай это

Успешная плитка в полной мере использует имеющееся пространство для четкого представления результата каждого действия.

Не делай этого.

Действия в этой плитке неясны — куда переносит пользователя контейнер с обложкой альбома и отличается ли это от кнопки «Воспроизвести»?

Визуально расставьте приоритеты действий

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

  • Используйте основные цвета на кнопках основных действий.
  • Используйте вторичные/третичные цвета для вторичных действий

Сделай это

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

Не делай этого.

Эта плитка содержит слишком много использований кнопок заполненного стиля, кроме того, все они используют роль основного цвета.

Упростить до меньшего количества контейнеров

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

Сделай это

Эта плитка использует несколько контейнеров, и каждый контейнер действует как кнопка для выполнения определенного действия, например, запуска таймера или создания нового.

Не делай этого.

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

Используйте контейнеры в функциональных целях

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

Сделай это

Это решение работает, потому что единственным действием Tile является создание потока, а весь остальной контент плавает на черном фоне.

Не делай этого.

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

Показывать наглядные представления графиков и диаграмм

Удобство просмотра — ключ к дизайну Wear OS. При ограниченном времени отображения на экране (около 7 секунд) отдавайте приоритет важной информации в понятном формате, который легко понять с первого взгляда.

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

Сделай это

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

Не делай этого.

Показать подробную числовую или статистическую информацию на плитке