Kafelki łączą podstawowe elementy wizualne. Za pomocą szablonów i komponentów możesz tworzyć unikalne kafelki dla swojej aplikacji.
Podstawowe elementy
W poniższej tabeli opisano podstawowe elementy projektowania kafelków.
|
|
|
|
|
|
Ikona aplikacjiIkony aplikacji są dostarczane przez dewelopera aplikacji i są wyświetlane tymczasowo na ekranie. |
Obszar projektuKażdy szablon kafelka ma własne zasady dotyczące głównego obszaru treści. Zapoznaj się ze wskazówkami dotyczącymi układu. |
Dolny przyciskPrzyciski są ważne, ponieważ umożliwiają włączenie dodatkowych działań na kafelku. Umieść przyciski 6,3% nad dolną krawędzią ekranu. |
Ikona aplikacji
Wear automatycznie wyświetla ikonę aplikacji, gdy użytkownik przewija karuzelę kafelków. Ikona aplikacji zanika i nie powinna być implementowana w kafelku. Więcej informacji o tworzeniu ikon aplikacji znajdziesz w artykule Ikony usług.
Rysunek 1. Przykłady ikon aplikacji
Wear automatycznie wyświetla ikonę aplikacji
Tak
Nie wolno
Przycisk
Wybierz krótki tekst przycisków. Używaj tekstu dopasowanego do działania i celu wezwania do działania. Upewnij się, że tłumaczenie tekstu przycisku mieści się w limicie znaków. Jeśli przetłumaczony tekst przycisku jest za długi, zmień opcję na Więcej.
|
|
|
Umiejscowienie |
Specyfikacja przycisku |
Typ |
| Umieść przycisk 6,3% od dołu, jeśli tarcza zegarka. | Pozostaw dopełnienie 12 dp po obu stronach. | Rozmiary czcionek nie są skalowalne. Ustaw minimalny rozmiar czcionki na 9. W przypadku języków innych niż łacińskie używaj czcionki co najmniej 7. |
Szablony
Dostępne są 4 typy szablonów kafelków. Pobierz Tile Design Kit (Figma), aby zobaczyć przykłady i podzielić się opinią na temat korzystania z tego szablonu.
Ukierunkowany na tekst
Szablon kafelków tekstowych służy do wyświetlania na kafelkach tekstu obejmującego m.in. najnowsze wiadomości, nadchodzące wydarzenia i przypomnienia. Stosuje się go zwykle w przypadku stanów logowania, błędu i konfiguracji, aby informować użytkowników o tym, co się dzieje, i zawierać jednoznaczne wezwanie do działania.
Wyśrodkowany na przycisku
Szablon kafelków z przyciskami jest przeznaczony do kafelków z maksymalnie 5 działaniami głównymi. Użyj tego szablonu, aby szybko rozpocząć określone zadania.
Ukierunkowanie na informacje
Szablon kafelka z informacjami zawiera ogólne wskaźniki i postęp. Jest to szczególnie przydatne w przypadku kart dotyczących treści związanych ze zdrowiem i aktywnością fizyczną. Zapewnia elastyczne opcje wyświetlania treści. Aby zachować czytelność, nadaj priorytet ważnym danym i unikaj przepełnienia szablonu.
Ukierunkowanie na dane
Szablon kafelków z danymi jest uniwersalnym szablonem przeznaczonym do wyświetlania wykresów i elementów graficznych podsumowujących informacje z okresu. Zapewnia elastyczność w wizualizacji danych i przydaje się do tworzenia wizualnych pustych stanów. Ważne jest, aby elementy graficzne były proste, a kafelek był dobrze widoczny.
Kolor
Aby kafelki były dobrze widoczne, ogranicz do 3 kolorów.
Tak
Nie wolno
Typografia
Używaj Roboto jako głównej czcionki na Wear OS. Ustaw Tekst 2 jako domyślny i najmniejszy rozmiar czcionki, a Display 2 jako największy.
Więcej informacji na temat czcionki, jej grubości i rozmiaru znajdziesz w sekcji Typografia.
Komponenty
Używaj komponentów do tworzenia kafelków. Dostosuj kolory komponentu, aby wyrazić swoją markę, zgodnie z wytycznymi dotyczącymi motywów dla Wear Material Design.
Aby zobaczyć przykłady komponentów, pobierz pakiet Tile Design Kit (Figma).
| Komponent | Wariant | Przykład |
| Przycisk | Przycisk standardowy | Dostępne rozmiary: standardowy, duży i bardzo duży  |
| Przycisk | Standardowy przycisk tekstowy | Dostępne rozmiary: standardowy, duży i bardzo duży  |
| Układ scalony | Podstawowy element standardowy |
 |
| Układ scalony | Dodatkowy standardowy element |
 |
| Układ scalony | Element awatara małego |
 |
| Układ scalony | Duży element awatara |
 |
| Układ scalony | Element kompaktowy (u dołu) |
 |
| Wskaźnik postępu | Standardowy wskaźnik postępu |
 |
| Wskaźnik postępu | Wskaźnik postępu z przerwą |
 |
Materiały
Więcej informacji znajdziesz w wytycznych dotyczących projektowania kafelków.