Расширенные возможности Watch Face Designer

На этой странице описаны более сложные сценарии использования Watch Face Designer, в том числе добавление поддержки дополнительных циферблатов, расширений и цветовых тем. Подробнее о том, как начать работу…

Дополнительные циферблаты

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

Для этого выполните следующие действия:

1. Создайте пустой фрейм, который охватывает область, где вы разместили дополнительный циферблат в своем дизайне:

   

2. Создайте секундную стрелку в этой рамке:

   

3. Выберите кадр дополнительного циферблата, содержащий секундную стрелку. Затем в Watch Face Designer установите для параметра Rotate around (Вращать вокруг) значение "Layer center" (Центр слоя).

   

Дополнения

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

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

Выберите фрейм с дизайном для места для дополнения. Затем в Watch Face Designer измените значение параметра Behavior (Поведение) на Complication slot (Место для дополнения). В результате будет создан компонент с одним вариантом (пустым дизайном).

Как применить типы мест для дополнений

Поскольку место для дополнения, которое поддерживает только тип "Пусто", не очень полезно, добавьте ещё один тип. В окне Watch Face Designer нажмите + Support a new type (+ Поддерживать новый тип) и выберите Short text (Короткий текст). Короткий текст – это тип дополнения, который поддерживается большинством приложений. Он состоит из двух небольших ярлыков и значка.

На этом шаге создается ещё один вариант, представляющий наш дизайн для этого типа дополнения. Выберите строку "Краткий текст", чтобы перейти к ней.

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

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

Создайте прямоугольник в том месте, где должен находиться значок приложения. Затем в окне Watch Face Designer (Дизайнер циферблатов) в разделе Behavior (Поведение) выберите "Single-color icon" (Одноцветный значок).

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

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

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

Обратите внимание, что в отличие от цифрового времени, для текста дополнения нет произвольного экспорта шрифта. Дополнения всегда отображаются с использованием системного шрифта устройства Wear OS. Он может быть разным, но обычно это Roboto.

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

Цветовые темы

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

Watch Face Designer поддерживает цветовые темы, созданные с помощью стилей Figma.

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

Создайте первый стиль

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

1. Отмените выбор всех элементов на макете.
2. На боковой панели справа рядом с пунктом Стили нажмите кнопку +.

Название должно быть составлено по определенным правилам:

Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name

В этом случае название циферблата – Bauhaus, поэтому цвет начинается с него, а затем следует Hands – элемент, который пользователи могут настраивать. Затем укажите название цвета, например Charcoal, и элемент, цвет которого нужно изменить, – часовая стрелка.

В результате получается следующее название: Bauhaus/Hands/Charcoal/Hours.

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

Наконец, назначьте эти цвета стрелкам, которые появляются на циферблате:

Добавить стиль

Создайте новый стиль, изменив часть Theme Name. В примере ниже добавляется новый стиль Rust (Bauhaus/Hands/Rust/Hours):

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

Применить к другим элементам

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

В приведенном выше наборе стилей вы указали два варианта для стрелок (Rust и Charcoal) и три варианта для циферблата (Light, Dark и Duotone).