На этой странице описаны более сложные варианты использования Watch Face Designer, в том числе добавление поддержки дополнительных циферблатов, расширений и цветовых тем. Чтобы узнать больше о начале работы, ознакомьтесь с руководством по основам .
Дополнительные циферблаты
Вы можете создать стрелки аналоговых часов, которые вращаются внутри части циферблата, как дополнительный циферблат на настоящих наручных часах.
Для этого выполните следующие шаги:
Создайте пустую рамку , закрывающую область, в которой вы разместили дополнительный циферблат в своем дизайне:
Рисунок 1 : Пустая рамка, закрывающая слот дополнительного циферблата Создайте дизайн своей второй руки внутри этой рамки:
Рисунок 2 : Дизайн из вторых рук, помещенный в рамку-контейнер Выберите рамку дополнительного циферблата с секундной стрелкой. Затем в конструкторе циферблатов установите для параметра « Поворот вокруг » значение «По центру слоя».
Рисунок 3 : После выбора содержащего кадра (слева) выберите поведение вращения секундной стрелки (справа)
Осложнения
Чтобы добавить слот для расширения, добавьте рамку на циферблат часов . Внутри этой рамки нарисуйте, как будет выглядеть слот для расширения, когда он пуст. Это послужит основой для других типов расширений, таких как значки и текст.
Существует множество различных видов расширений. На циферблате часов предусмотрены шаблоны для каждого типа, и приложения на часах пользователя самостоятельно определяют, какой шаблон использовать и какие данные предоставлять. Пользователь выбирает, какое приложение разместить в той или иной ячейке расширения.
Выберите рамку с дизайном для слота расширения. Затем в конструкторе циферблатов измените параметр «Поведение » на «Слот расширения». Этот процесс создаст компонент с одним вариантом (пустой дизайн).
Применить типы слотов усложнения
Поскольку добавлять слот расширения, поддерживающий только «пустой» тип, нецелесообразно, добавьте другой тип. В окне «Конструктор циферблатов» нажмите «+ Поддержка нового типа» и выберите «Короткий текст». Короткий текст — это тип расширения, поддерживаемый большинством приложений. Он отображает две небольшие метки рядом со значком.
На этом этапе создаётся ещё один вариант для представления нашего дизайна для этого типа усложнения. Выберите строку «Краткий текст», чтобы перейти к ней.
При редактировании слоёв внутри шаблона расширения появляется параметр «Поведение». Этот параметр аналогичен параметру на циферблатах, но здесь можно выбрать поведение, соответствующее типу редактируемого расширения.
В этом примере слои внутри короткого текстового дополнения могут представлять собой заголовок вашего приложения, его текст или одноцветный значок. Одноцветный значок наследует цвет, заданный вами в Figma.
После того как вы создали прямоугольник на циферблате, где вы хотите видеть значок своего приложения, перейдите в окно «Конструктор циферблатов» и задайте для параметра «Поведение » значение «Одноцветный значок».
Затем создайте два текстовых слоя . Эти слои представляют собой ещё два слота для «короткого текста»: один для заголовка и один для текста:
В предварительном просмотре показано, как формируется дополнение. Этот пример показывает, как могло бы выглядеть дополнение, если бы этому слоту было назначено приложение «Календарь».
Чтобы отобразить текст заглавными буквами, как показано на следующем рисунке, используйте функцию «Регистр текста» в меню «Типографика» Figma.
Обратите внимание, что, в отличие от цифрового времени , для текста дополнений не предусмотрен экспорт произвольного шрифта. Дополнения всегда отображаются системным шрифтом устройства Wear OS, который может варьироваться, но обычно это Roboto.
Чтобы добавить поддержку дополнительных типов расширений или настроить связанные параметры, такие как приложение по умолчанию или отображение слота, когда часы находятся в режиме Ambient Mode , выберите слот расширения на циферблате часов:
Цветовые темы
На циферблате можно выбрать несколько цветовых тем. Пользователь может выбрать нужную тему, используя инструмент выбора циферблата на часах.
Watch Face Designer включает поддержку цветовых тем с использованием стилей Figma .
Рассмотрим случай, когда, имея следующий циферблат часов, вы хотите разрешить пользователю настраивать цвета стрелок и циферблата:
Создайте первый стиль
Чтобы создать цветовой стиль, который можно будет настраивать на часах, создайте новый стиль:
- Отмените выбор всего на холсте.
- На правой боковой панели, рядом со Стили , нажмите кнопку + .
Вы должны назвать его определенным образом:
Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name
В данном случае название циферблата — Bauhaus , поэтому цвет начинается с этого названия, а затем следует Hands — элемент, который пользователи могут настраивать. Затем дайте цвету описательное название, например, Charcoal , и укажите, какой именно элемент — часовую стрелку — нужно изменить.
Собрав все это вместе, получаем следующее название: Bauhaus/Hands/Charcoal/Hours :
Выполните аналогичную процедуру, чтобы создать собственную цветовую тему для минутной стрелки:
Наконец, назначьте эти цвета стрелкам, которые отображаются на циферблате часов:
Bauhaus/Hands/Charcoal/Minutes минутной стрелке циферблатаДобавить другой стиль
Создайте новый стиль, изменив часть Theme Name в стиле. В следующем примере добавляется новый стиль с названием Rust ( Bauhaus/Hands/Rust/Hours ):
Затем пользователь может переключаться между цветовыми темами «Уголь» и «Ржавчина» на своем устройстве, а часовая и минутная стрелки циферблата будут перекрашиваться соответствующим образом:
Применить к другим элементам
Выполните аналогичные шаги, чтобы сделать другие элементы циферблата тематическими. Эти темы можно комбинировать и сочетать, используя любое количество цветовых стилей для создания сложных сменных тем:
В предыдущем наборе стилей вы предоставили два варианта для стрелок Rust и Charcoal — и три варианта для циферблата Light , Dark и Duotone :
