Auf dieser Seite werden erweiterte Anwendungsfälle für den Watch Face Designer beschrieben, z. B. wie du Unterstützung für Unterzifferblätter, Komplikationen und Farbdesigns hinzufügst. Weitere Informationen zum Einstieg finden Sie im Leitfaden zu den Grundlagen.
Zifferblätter
Sie können analoge Zeiger erstellen, die sich in einem Unterabschnitt des Zifferblatts drehen, genau wie ein Hilfszifferblatt auf einer echten Armbanduhr.
Führen Sie dazu folgende Schritte aus:
Erstellen Sie einen leeren Frame, der den Bereich abdeckt, in dem Sie das Hilfszifferblatt in Ihrem Design platziert haben:
Abbildung 1: Leerer Rahmen, der einen Platzhalter für ein Unterzifferblatt abdeckt Gestalte den Sekundenzeiger innerhalb dieses Rahmens:
Abbildung 2: Gebrauchte Zeiger in einem Rahmen Wählen Sie den Rahmen des Zifferblatts aus, der den Sekundenzeiger enthält. Stelle dann im Watch Face Designer für Drehen um die Option „Ebene zentrieren“ ein:
Abbildung 3: Nach der Auswahl des enthaltenden Rahmens (links) das Rotationsverhalten des Sekundenzeigers auswählen (rechts)
Complications
Wenn Sie einen Platzhalter für eine Zusatzfunktion hinzufügen möchten, fügen Sie Ihrem Zifferblatt einen Rahmen hinzu. Gestalte in diesem Frame, wie der Platzhalter für die Komplikation aussehen soll, wenn er leer ist. Dies bildet die Grundlage für die anderen Arten von Komplikationen, z. B. Symbole und Text.
Es gibt viele verschiedene Arten von Komplikationen. Das Zifferblatt bietet Vorlagen für jeden Typ. Die Apps auf der Smartwatch eines Nutzers entscheiden, welche Vorlage verwendet und welche Daten bereitgestellt werden. Der Nutzer wählt aus, welche App in welchen Zusatzfunktions-Slot eingefügt wird.
Wählen Sie den Frame aus, der das Design für den Komplikations-Slot enthält. Ändern Sie dann im Watch Face Designer die Verhaltensweise in „Zusatzfunktionsfeld“. Bei diesem Prozess wird eine Komponente mit einer Variante (einem leeren Design) erstellt.
Bereiche für Zusatzfunktionen verwenden
Da es nicht sehr sinnvoll ist, einen Platz für Komplikationen einzufügen, der nur den Typ „empty“ unterstützt, fügen Sie einen weiteren Typ hinzu. Drücken Sie im Fenster „Watch Face Designer“ auf + Support a new type (+ Neuen Typ unterstützen) und wählen Sie „Short text“ (Kurzer Text) aus. „Kurzer Text“ ist ein Komplikationstyp, der von den meisten Apps unterstützt wird. Er zeigt zwei kleine Labels neben einem Symbol an.
In diesem Schritt wird eine weitere Variante erstellt, um das Design für diesen Zifferblatttyp darzustellen. Wählen Sie die Zeile „Kurztext“ aus, um dorthin zu springen.
Wenn Sie Ebenen in einer Zifferblatt-Komplikationsvorlage bearbeiten, wird die Option „Verhalten“ angezeigt. Diese Option ähnelt der auf Zifferblättern, aber hier können Sie Verhaltensweisen auswählen, die für den Typ der Komplikation, die Sie bearbeiten, spezifisch sind.
In diesem Beispiel können Ebenen in einer Kurztext-Kombination entweder der Titel Ihrer App, der Text oder ein einfarbiges Symbol sein. Einfarbig bedeutet, dass das Symbol die Farbe übernimmt, die Sie in Figma dafür festgelegt haben.
Nachdem Sie ein Rechteck erstellt haben, in dem das Symbol Ihrer App auf dem Zifferblatt angezeigt werden soll, rufen Sie das Fenster Watch Face Designer auf und legen Sie Behavior auf „Single-color icon:“ fest:
Erstellen Sie als Nächstes zwei Textebenen. Diese Ebenen stellen zwei weitere Slots für „Kurztext“ dar: einen für den Titel und einen für den Text:
In der Vorschau sehen Sie, wie die Komplikation aussieht. In diesem Beispiel sehen Sie, wie eine Komplikation aussehen könnte, wenn die Kalender-App diesem Slot zugewiesen wäre.
Wenn Sie Text in Großbuchstaben darstellen möchten, wie im folgenden Bild zu sehen, verwenden Sie die Funktion für die Textformatierung im Menü Typografie von Figma.
Im Gegensatz zur digitalen Zeit gibt es keinen beliebigen Schriftart-Export für Komplikationstext. Zusatzfunktionen werden immer mit der Standardschriftart des Wear OS-Geräts gezeichnet. Diese kann variieren, ist aber in der Regel Roboto.
Wenn Sie Unterstützung für zusätzliche Arten von Zusatzfunktionen hinzufügen oder zugehörige Einstellungen wie Standard-App anpassen möchten oder festlegen möchten, ob der Slot angezeigt wird, wenn sich die Smartwatch im Inaktivmodus befindet, wählen Sie den Zusatzfunktions-Slot auf Ihrem Zifferblatt aus:
Farbformate
Sie können in Ihr Zifferblatt mehrere Optionen für Farbdesigns einfügen. Der Nutzer kann dann über die Zifferblattauswahl auf seiner Smartwatch das gewünschte Design auswählen.
Der Watch Face Designer unterstützt Farbdesigns mit Figma-Stilen.
Angenommen, du möchtest, dass der Nutzer bei folgendem Zifferblatt die Farben der Zeiger und des Zifferblatts anpassen kann:
Ersten Stil erstellen
So erstellen Sie einen Farbstil, der auf der Smartwatch angepasst werden kann:
- Heben Sie die Auswahl aller Elemente auf der Arbeitsfläche auf.
- Wählen Sie in der rechten Seitenleiste neben Stile die Schaltfläche + aus.
Sie müssen sie auf eine bestimmte Weise benennen:
Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name
In diesem Fall ist der Name des Beispiel-Zifferblatts Bauhaus. Die Farbe beginnt also damit, gefolgt von Hands, dem Element, das Nutzer anpassen können.
Geben Sie dann einen beschreibenden Farbnamen wie Charcoal an und legen Sie fest, für welches Element – in diesem Fall den Stundenzeiger – die Farbe geändert werden soll.
Zusammenfassend ergibt sich der folgende Name: Bauhaus/Hands/Charcoal/Hours:
Gehen Sie ähnlich vor, um ein benutzerdefiniertes Farbdesign für den Minutenzeiger zu erstellen:
Weisen Sie diese Farben schließlich den tatsächlichen Zeigern auf dem Zifferblatt zu:
Bauhaus/Hands/Charcoal/Minutes-Designs zum Minutenzeiger des ZifferblattsWeiteren Stil hinzufügen
Erstellen Sie einen neuen Stil, indem Sie den Theme Name-Teil des Stils ändern. Im folgenden Beispiel wird ein neuer Stil namens Rust (Bauhaus/Hands/Rust/Hours) hinzugefügt:
Der Nutzer kann dann auf seinem Gerät zwischen den Farbdesigns „Charcoal“ (Anthrazit) und „Rust“ (Rost) wechseln. Die Stunden- und Minutenzeiger des Zifferblatts werden entsprechend neu eingefärbt:
Auf andere Elemente anwenden
Gehen Sie ähnlich vor, um andere Elemente des Zifferblatts anpassbar zu machen. Diese Designs lassen sich kombinieren und Sie können beliebig viele Farbstile verwenden, um komplexe austauschbare Designs zu erstellen:
Mit den oben genannten Stilen haben Sie zwei Optionen für die Zeiger (Rust und Charcoal) und drei Optionen für das Zifferblatt (Light, Dark und Duotone) angegeben:
