В этом руководстве рассказывается, как создать циферблат, добавить элементы, связанные со временем, и включить поддержку фотографий, выбранных пользователем, в том числе галерею из нескольких фотографий. Дополнительные функции описаны в расширенном руководстве.
Как создать циферблат
Чтобы создать циферблат, нарисуйте фрейм в Figma, а затем настройте его следующим образом:
Задайте размер 450 на 450 единиц:
Рисунок 1. Панель макета фрейма Figma, на которой показан циферблат размером 450 x 450 пикселей Другие размеры тоже подойдут, но 450 x 450 – рекомендуемый размер для циферблатов Wear OS и обязательный для экспорта в Watch Face Studio.
Чтобы циферблат потреблял меньше энергии, установите черный цвет заливки рамки:
Рисунок 2. Панель заливки фрейма с черным цветом заливки Укажите название фрейма. Оно будет использоваться в качестве названия циферблата. Оно будет показываться на часах пользователей.
Создав и настроив рамку, откройте плагин Watch Face Designer и выберите ее. В окне Watch Face Designer появится предварительный просмотр.
Как добавить элементы на циферблат
Добавьте на циферблат элементы, чтобы пользователи могли узнавать время.
Аналоговые часы
Нарисуйте прямоугольник, который будет секундной стрелкой.
Убедитесь, что в начале новой минуты прямоугольник расположен по центру по горизонтали, а его нижний край находится в центре циферблата, как у настоящей стрелки часов. По умолчанию в Figma включена функция Snap to Geometry (Привязка к геометрии), которая показывает красные направляющие, помогающие выровнять прямоугольники:
Затем сообщите Watch Face Designer, что этот слой предназначен не только для украшения. Выберите прямоугольник, нарисованный на предыдущем шаге, перейдите в окно Watch Face Designer и измените значение параметра Behavior со Static на Second hand.
Обратите внимание, что стрелка начинает двигаться раз в секунду, имитируя тиканье часов. Вы можете настроить вращение стрелки, а также создать минутную и часовую стрелки по аналогии с секундной.
Советы по работе с дополнительными циферблатами можно найти в руководстве по расширенному использованию.
Цифровое время
Мы также можем отображать время в цифровом формате. Для этого создайте текстовый слой в Figma. Пока введите Hh:Mm:Ss в качестве текстового контента слоя.
В окне Watch Face Designer (Конструктор циферблатов) измените значение параметра Behavior (Поведение) со Static (Статическое) на Digital time (Цифровое время). В окне предварительного просмотра показано, как это будет выглядеть на реальном устройстве:
Чтобы узнать, какие символы можно использовать, следуйте инструкциям в руководстве по шаблонам на боковой панели окна Watch Face Designer. Например, a указывает, какое сейчас время суток – до полудня или после. Это можно использовать вместе с форматом часов, чтобы показывать время в 12-часовом формате.
Вы можете выбрать любой шрифт в Figma, включая те, которые недоступны в Wear OS. Он будет автоматически экспортирован и добавлен в циферблат. Помните, что у каждого шрифта есть свои условия лицензирования для распространения.
Просмотр разных временных интервалов
Чтобы посмотреть, как циферблат будет выглядеть в разное время суток, перетащите ползунок в нижней части окна Watch Face Designer.
Чтобы вернуться к текущему времени, нажмите кнопку Сбросить в левом нижнем углу.
Включить фотографии, предоставленные пользователями
На циферблате можно разместить фотографию. Это позволяет пользователям добавлять в качестве фона личные фотографии, при этом время и другие элементы, включенные в дизайн, по-прежнему будут видны.
Чтобы добавить поддержку пользовательских фотографий, добавьте слой на циферблат и установите для него поведение "Фотография, предоставленная пользователем". В качестве изображения по умолчанию для этого слоя мы используем фотографию цветка. Это изображение используется в качестве резервного, пока пользователь не назначит собственную фотографию или если он решит не использовать ни одну из своих фотографий.
Поддержка выбора нескольких фотографий
На циферблате можно выбрать несколько фотографий. В Watch Face Designer это называется галереей.
Если для параметра Выбор фото задано значение "Галерея", пользователь может выбрать несколько фотографий для этого слота, и часы будут циклически переключаться между ними в разные моменты времени в зависимости от того, что вы выберете в разделе "Смена фото":
- Если выбран вариант "При нажатии", фотография меняется, когда пользователь нажимает на слой.
- Если выбран вариант "При поднятии запястья", циферблат меняется каждый третий раз, когда пользователь поднимает запястье. В настоящее время это нельзя настроить с помощью Watch Face Designer. Подробнее о том, как Watch Face Format обеспечивает расширенную поддержку с помощью атрибута
changeAfterEvery.
Подробнее…
Чтобы посмотреть, как циферблат будет выглядеть на физическом устройстве, следуйте инструкциям в руководстве по экспорту.
Дополнительные параметры и функции описаны в руководстве по расширенному использованию.