Poznaj podstawowe elementy kafelków. Używaj szablonów, układów i komponentów do projektowania i tworzenia unikalnych kafelków do swoich aplikacji.
Elementy podstawowe
![](https://developer.android.google.cn/static/wear/images/tile-design-system/2-TDS-Percentage.png?authuser=8&hl=pl)
Dopełnienie procentowe
Marginesy górne, dolne i boczne używają wartości procentowych zamiast stałych wartości marży, co pozwala uzyskać proporcjonalne skalowanie.
![](https://developer.android.google.cn/static/wear/images/tile-design-system/3-TDS-Design.png?authuser=8&hl=pl)
Obszary projektu
Każdy typ szablonu kafelka ma własne reguły w głównym obszarze treści. Więcej informacji znajdziesz we wskazówkach dotyczących układu.
![](https://developer.android.google.cn/static/wear/images/tile-design-system/4-TDS-Bottom.png?authuser=8&hl=pl)
Kompaktowy element na dole
Ważne, jeśli chcesz włączyć dodatkowe działania na kafelku. Stale znajduje się 6,3% nad dolną krawędzią.
Kompaktowy element na dole
Umieść na przycisku słowo, które jest krótkie, ale charakterystyczne dla określonego działania lub miejsca docelowego. Tłumaczenie tego wezwania do działania musi uwzględniać limit znaków. Jako wartości domyślnej lub zastępczej możesz użyć opcji „Więcej”. jako tekst wezwania do działania.
![](https://developer.android.google.cn/static/wear/images/tile-design-system/8-TDS-Placement.png?authuser=8&hl=pl)
Umiejscowienie
- Marża: 2,1% od dołu
- Dopełnienie wewnętrzne: 8 dp powyżej i poniżej
![](https://developer.android.google.cn/static/wear/images/tile-design-system/9-TDS-Spec.png?authuser=8&hl=pl)
Specyfikacja przycisku
- Dopełnienie wewnętrzne: 12 dp po obu stronach
![](https://developer.android.google.cn/static/wear/images/tile-design-system/10-TDS-Side.png?authuser=8&hl=pl)
Wewnętrzne dopełnienie/marginesy boczne
- 16,64%
Zalecany limit znaków < 225 dp
- Maksymalna liczba wierszy: 1
- Maks. limit znaków: 8
- Zalecany limit znaków: 6
- Obcinanie: nie
Zalecane limity wykorzystania > 225 dp
- Maksymalna liczba wierszy: 1
- Maks. limit znaków: 9
- Zalecany limit znaków: 7
- Obcinanie: nie
Kolor
Stosowanie motywu marki
Dostępnych jest kilka kolorów marki. Można je też dostosowywać i zmieniać tak, aby pasowały do wyglądu i stylu aplikacji.
Skorzystaj z narzędzi i wskazówek dotyczących motywu Material Design, aby generować kolory z odpowiednimi poziomami kontrastu kolorów, używając koloru podstawowego jako koloru źródłowego. Użyj wygenerowanej palety, aby zastąpić w palecie kolory podstawowy, główny-wariant, kolor główny, powierzchnię i na powierzchnię na powierzchni kafelka w aplikacji Figma. Żadnych innych kolorów nie można dostosować w celu zapewnienia spójności między kafelkami.
Inne narzędzia do tworzenia motywów Material Design:
Aplikacja dotycząca kolorów
![](https://developer.android.google.cn/static/wear/images/tile-design-system/21-TDS-Do.png?authuser=8&hl=pl)
Zawsze ustawiaj czarny kolor tła.
Tak
![](https://developer.android.google.cn/static/wear/images/tile-design-system/21-TDS-Dont.png?authuser=8&hl=pl)
Nie ustawiaj tła jako obrazu z pełnym spadem ani koloru bloku.
Nie
Typografia
Roboto to główna czcionka używana w Wear OS. Jako domyślny i najmniejszy rozmiar czcionki zalecany jest Tekst 2, a Display 2 to największy styl typowy dostępny w przypadku kafelków.
Etykieta podstawowa
Tekst etykiety głównej znajduje się zawsze w odległości 16,64% od górnej krawędzi i ma wewnętrzne dopełnienie wynoszące 6,3%. Kolory i czcionka są też spójne przez cały czas trwania filmu.
![](https://developer.android.google.cn/static/wear/images/tile-design-system/23-TDS-Internal.png?authuser=8&hl=pl)
Dopełnienie wewnętrzne
Górne marginesy: 16,64%
Margines boczny: 6,3%
![](https://developer.android.google.cn/static/wear/images/tile-design-system/24-TDS-Colour.png?authuser=8&hl=pl)
Kolor
Wariant w tle (szary 300)
![](https://developer.android.google.cn/static/wear/images/tile-design-system/25-TDS-Type.png?authuser=8&hl=pl)
Typ
Tiles3P (Roboto) / przycisk – 15S pogrubiony
Więcej informacji na temat czcionki, jej grubości i rozmiaru znajdziesz w sekcji Typografia.
Komponenty
Istnieje kilka komponentów służących do tworzenia kafelków aplikacji. Komponenty te są zgodne ze stylem Material Design.
Przycisk ikony
![](https://developer.android.google.cn/static/wear/images/tile-design-system/IconButtons.png?authuser=8&hl=pl)
Opcje: przycisk lub przycisk przełączania
Rozmiary: standardowy, XS, S, L
Typy: wypełnione, z wypełnionymi tonami i graficzne
Wymień maksymalnie 7 opcji.
Przycisk tekstowy
![](https://developer.android.google.cn/static/wear/images/tile-design-system/TextButtons.png?authuser=8&hl=pl)
Opcje: przycisk lub przycisk przełączania
Rozmiary: standardowy, XS, S, L
Typy: wypełnione i wypełnione tonami
Wymień maksymalnie 7 opcji.
Element standardowy
![](https://developer.android.google.cn/static/wear/images/tile-design-system/Buttons.png?authuser=8&hl=pl)
Opcje: ikona, etykieta dodatkowa i wyrównanie tekstu
Podaj maksymalnie 2 opcje.
Element tytułowy (tylko podstawowe uzupełnienie)
![](https://developer.android.google.cn/static/wear/images/tile-design-system/TitleChip.png?authuser=8&hl=pl)
Tekst wyrównany do środka
Utwórz pojedyncze, dobrze widoczne wezwanie do działania.
Element kompaktowy
![](https://developer.android.google.cn/static/wear/images/tile-design-system/CompactChip.png?authuser=8&hl=pl)
Typy: wypełnione i wypełnione tonami
Opcje: ikona lub brak ikony
Użyj w boksie dolnego przycisku.
Wskaźnik postępu
![](https://developer.android.google.cn/static/wear/images/tile-design-system/ProgressIndicator.png?authuser=8&hl=pl)
Typy: konfigurowalna szerokość kreski
(Rozmiary domyślne: 8 dp i 5 dp)
Opcje: Luka u dołu lub na całej długości
Wskazuje postęp i ukończenie zadania.
Zestaw do projektowania Figma
Pobierz pakiet do projektowania kafelków na Wear OS, aby zacząć korzystać z układów kafelków z wbudowanymi komponentami, opcjami i rekomendacjami do tworzenia różnych układów dostosowanych do Twoich potrzeb, przestrzegając przy tym wytycznych w szablonach ProtoLayout.