Na tej stronie znajdziesz bardziej zaawansowane przypadki użycia narzędzia Watch Face Designer, w tym informacje o tym, jak dodać obsługę tarcz dodatkowych, komplikacji i motywów kolorystycznych. Więcej informacji o pierwszych krokach znajdziesz w przewodniku podstawowym.
Subtarcze
Możesz tworzyć wskazówki zegara analogowego, które obracają się w podsekcji tarczy, podobnie jak subtarcza na prawdziwym zegarku.
Aby to zrobić, wykonaj te czynności:
Utwórz pustą ramkę, która obejmuje obszar, w którym w projekcie umieszczono tarczę dodatkową:
Ilustracja 1. Pusta ramka zakrywająca gniazdo subtarczy Zaprojektuj drugą wskazówkę w tej ramce:
Ilustracja 2. Projekt zegarka z drugą wskazówką w ramce Wybierz ramkę subtarczy, która zawiera sekundnik. Następnie w projektancie tarczy zegarka ustaw Obróć wokół na „Środek warstwy”:
Ilustracja 3. Po wybraniu ramki zawierającej (po lewej) wybierz zachowanie obrotu wskazówki sekundowej (po prawej).
Widżety
Aby dodać miejsce na widżet, dodaj ramkę do tarczy zegarka. W tej ramce zaprojektuj wygląd gniazda widżetu, gdy jest ono puste. Stanowi to podstawowy projekt dla innych typów komplikacji, takich jak ikony i tekst.
Istnieje wiele różnych rodzajów komplikacji. Tarcza zegarka udostępnia szablony każdego typu, a aplikacje na zegarku użytkownika decydują, którego szablonu użyć i jakie dane mają być wyświetlane. Użytkownik wybiera, która aplikacja ma się pojawić w którym widżecie.
Wybierz ramkę zawierającą projekt gniazda komplikacji. Następnie w projektancie tarczy zegarka zmień Zachowanie na „Miejsce na widżet”. Ten proces tworzy komponent z 1 wariantem (pustym projektem).
Stosowanie typów miejsc na widżety
Dodawanie gniazda komplikacji, które obsługuje tylko typ „empty”, nie jest zbyt przydatne, więc dodaj inny typ. W oknie Watch Face Designer kliknij + Obsługa nowego typu i wybierz „Krótki tekst”. Krótki tekst to rodzaj komplikacji obsługiwany przez większość aplikacji, który wyświetla 2 małe etykiety obok ikony.
W tym kroku utworzymy kolejny wariant, który będzie reprezentować nasz projekt dla tego typu elementu. Aby przejść do wiersza „Krótki tekst”, wybierz go.
Podczas edytowania warstw w szablonie komplikacji pojawia się opcja „Zachowanie”. Ta opcja jest podobna do tej na tarczach zegarka, ale tutaj możesz wybrać zachowania, które są specyficzne dla typu edytowanego widżetu.
W tym przykładzie warstwy w komplikacji z krótkim tekstem mogą zawierać tytuł aplikacji, jej tekst lub jednokolorową ikonę. Jednokolorowa ikona dziedziczy kolor ustawiony w Figma.
Po narysowaniu prostokąta w miejscu, w którym ma się pojawić ikona aplikacji na tarczy zegarka, otwórz okno Projektanta tarczy zegarka i ustaw Zachowanie na „Ikona jednokolorowa”:
Następnie utwórz 2 warstwy tekstu. Te warstwy reprezentują 2 dodatkowe miejsca na „krótki tekst”: jedno na tytuł, a drugie na tekst:
Podgląd pokazuje, jak wygląda komplikacja. Ten przykład pokazuje, jak może wyglądać widżet, jeśli do tego miejsca przypisana jest aplikacja Kalendarz.
Aby wyświetlić tekst w formie wielkich liter, jak na poniższym obrazie, użyj funkcji wielkości liter w menu Typografia w Figma.
Pamiętaj, że w przypadku tekstu komplikacji nie ma eksportu czcionki, w przeciwieństwie do czasu cyfrowego. Komplikacje są zawsze rysowane przy użyciu czcionki systemowej urządzenia z Wear OS, która może się różnić, ale zwykle jest to Roboto.
Aby dodać obsługę dodatkowych typów widżetów lub dostosować powiązane ustawienia, takie jak Domyślna aplikacja czy to, czy gniazdo ma się pojawiać, gdy zegarek jest w trybie otoczenia, wybierz gniazdo widżetu na tarczy zegarka:
Kompozycje kolorów
Na tarczy zegarka możesz uwzględnić kilka opcji motywów kolorystycznych. Użytkownik może wtedy wybrać motyw za pomocą selektora tarczy zegara na zegarku.
Narzędzie Watch Face Designer obsługuje motywy kolorystyczne wykorzystujące style Figmy.
Załóżmy, że masz tarczę zegarka, na której chcesz umożliwić użytkownikowi dostosowywanie kolorów wskazówek i tarczy:
Tworzenie pierwszego stylu
Aby utworzyć styl koloru, który można dostosować na zegarku, utwórz nowy styl:
- Odznacz wszystko na obszarze roboczym.
- Na pasku bocznym po prawej stronie obok opcji Style kliknij przycisk +.
Musisz nadać mu nazwę w określony sposób:
Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name
W tym przypadku nazwa przykładowej tarczy zegarka to Bauhaus, więc kolor zaczyna się od tego, a następnie jest Hands, czyli element, który użytkownicy mogą dostosowywać.
Następnie podaj opisową nazwę koloru, np. Charcoal, i określ, który element – wskazówka godzinowa – ma zmienić kolor.
Podsumowując, ostateczna nazwa to: Bauhaus/Hands/Charcoal/Hours:
Aby utworzyć niestandardowy motyw kolorystyczny dla wskazówki minutowej, wykonaj podobne czynności:
Na koniec przypisz te kolory do rzeczywistych wskazówek, które pojawiają się na tarczy zegarka:
Bauhaus/Hands/Charcoal/Minutes do wskazówki minutowej tarczy zegarkaDodawanie kolejnego stylu
Utwórz nowy styl, zmieniając część Theme Name stylu. W tym przykładzie dodajemy nowy styl o nazwie Rust (Bauhaus/Hands/Rust/Hours):
Użytkownik może następnie przełączać się między motywami kolorystycznymi „Węgiel” i „Rdza” na urządzeniu, a wskazówki godzinowa i minutowa tarczy zegarka zostaną odpowiednio pokolorowane:
Stosowanie do innych elementów
Wykonaj podobne czynności, aby umożliwić zmianę motywu innych elementów tarczy zegarka. Te motywy można łączyć ze sobą, a do tworzenia złożonych motywów z możliwością zamiany możesz używać dowolnej liczby stylów kolorów:
W przypadku powyższego zestawu stylów podano 2 opcje wskazówek – Rust i Charcoal – oraz 3 opcje tarczy – Light, Dark i Duotone:
