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