Typowe układy dla kafelków

Karty zapewniają szybki dostęp do informacji i działań, których użytkownicy potrzebują, aby wykonywać różne zadania. Przesuwając palcem po tarczy zegarka, użytkownik może sprawdzić swoje postępy w realizacji celów fitness, zobaczyć pogodę i nie tylko. Uruchamiaj aplikacje i szybko wykonuj najważniejsze zadania za pomocą kart.

Trzy kafelki, z których 2 zawierają 1 wiersz z 3 kolumnami treści głównej, a 1 – 2 wiersze z 3 kolumnami treści głównej.

Tworzenie elastycznych i zoptymalizowanych projektów

Aby ułatwić Ci dostosowywanie układów projektów do większych rozmiarów ekranu, zaktualizowaliśmy działanie naszych układów i komponentów, aby miały wbudowane elastyczne zachowanie, w tym marginesy i dopełnienie oparte na procentach.

Jeśli używasz naszych szablonów ProtoLayout, możesz automatycznie przejąć te aktualizacje za pomocą najnowszej wersji beta biblioteki Wear ProtoLayout Jetpack. Musisz też podać tylko te układy, w których po punkcie przerwania rozmiaru ekranu dodano dodatkowe treści lub komponenty. Aby uzyskać pełne wskazówki i rekomendacje dotyczące korzystania z większego ekranu, zapoznaj się z naszymi wskazówkami dotyczącymi kart. Karty mają stałą wysokość ekranu, dlatego dostosowaliśmy dopełnienie, aby zmaksymalizować ograniczoną przestrzeń ekranu bez tworzenia niechcianego przycinania.

Sprawdzanie, czy komponenty wypełniają dostępną szerokość

Wszystkie komponenty powinny być elastyczne. Ustawiając wysokość i szerokość na „rozwiń”, wypełniają one dostępną przestrzeń. Dodaj niezbędne marginesy, aby zapobiec przycinaniu treści przez zaokrąglony ekran.

Tworzenie adaptacyjnych i zróżnicowanych projektów

Aby jak najlepiej wykorzystać dodatkową przestrzeń na większych ekranach, dodaj punkt przerwania rozmiaru na 225 dp. Ten punkt przerwania umożliwia wyświetlanie dodatkowych treści, dodawanie większej liczby przycisków lub danych albo zmianę układu, aby lepiej pasował do większego ekranu.

Wymaga to innego projektu dla każdego punktu przerwania. Projekt na większy ekran (225+ dp) może zawierać te dodatkowe elementy:

Wyświetlanie wcześniej ukrytego miejsca na tytuł

Zalecamy to w przypadku układów z 2 wierszami przed punktem przerwania, w których trzeba usunąć miejsce na tytuł, aby zapewnić minimalny rozmiar elementu docelowego 48 dp.

Zwiększanie rozmiaru lub zmienianie stanu istniejących komponentów

Można to zrobić, aby wyświetlić więcej szczegółów lub ułatwić przeglądanie treści.

Dodawanie miejsc na komponenty w bieżącym układzie

Dzięki dodaniu komponentów układ zapewnia więcej opcji lub dodatkowe szczegóły. Upewnij się jednak, że treść pozostaje czytelna.

Dodawanie większej ilości treści u dołu

W niektórych przypadkach bardziej sensowne jest dodanie przycisków działania lub treści w dolnej sekcji niż dodawanie komponentów w głównym miejscu.

Uwaga: większy rozmiar wyświetlacza nigdy nie powinien wyświetlać mniej informacji niż mniejsze wyświetlacze. Dotyczy to zwłaszcza niestandardowych zachowań dodanych w punkcie przerwania.

Typowym przykładem jest sytuacja, gdy rozmiar komponentów lub tekstu jest zwiększany po przekroczeniu punktu przerwania i na większych ekranach wyświetla się mniej treści. Ekrany powinny zawsze wyświetlać więcej treści wraz ze wzrostem rozmiaru.

Elastyczne i adaptacyjne zachowanie

Elastyczne i adaptacyjne zachowanie zależy od 3 miejsc (sekcji) układu.

Miejsce na ikonę i tytuł aplikacji

Nie ma zmiany zachowania ikony aplikacji dostarczanej przez system. Miejsce na tytuł automatycznie dostosowuje się do większego rozmiaru ekranu, wyświetlając dodatkowe znaki. W górnej sekcji znajdują się proporcjonalne (procentowe) marginesy wewnętrzne, aby uniknąć przycinania, gdy rozmiar ekranu się zwiększa.

Tytuł jest wyświetlany pod ikoną aplikacji.

Miejsce główne (komponenty)

Wszystkie komponenty w miejscu głównym powinny mieć ustawioną szerokość i wysokość na „rozwiń”, aby automatycznie dostosowywały się do większego rozmiaru ekranu. W sekcji miejsca głównego – a w niektórych przypadkach w każdym wierszu w tym miejscu – znajdują się proporcjonalne (procentowe) marginesy wewnętrzne, aby uniknąć przycinania, gdy rozmiar ekranu się zwiększa. Jeśli używasz połączenia promienia narożnika i układu, miejsce główne może wymagać większych marginesów.

Główne miejsce na reklamy zawiera 2 wiersze po 3 ikony.

Miejsce dolne

Nie ma zmiany zachowania dolnego przycisku ani tekstu, ale szerokość przycisku i pól tekstowych automatycznie dostosowuje się do większego rozmiaru ekranu i zyskuje znaki. W miejscu dolnym znajdują się proporcjonalne (procentowe) marginesy wewnętrzne, aby uniknąć przycinania, gdy rozmiar ekranu się zwiększa. Gdy nie ma miejsca dolnego, automatycznie dodawany jest margines domyślny.

Tekst przycisku na dole to „Więcej”.
Karty z przyciskiem w miejscu dolnym

Dolne miejsce wyświetla cel związany z aktywnością fizyczną w formie tekstu
Karty z tekstem w miejscu dolnym

Główna treść rozciąga się do dolnej krawędzi kafelka.
Karty bez miejsca dolnego

Tworzenie zróżnicowanych doświadczeń

W pełni konfigurowalny układ z co najmniej 60 wbudowanymi permutacjami umożliwia praktycznie nieograniczone dostosowywanie. Karty są oparte na systemie miejsc, dzięki czemu możesz zastąpić miejsce z układu kanonicznego dowolną treścią lub komponentem i ustawić komponent na jedną z wielu odmian i kombinacji kolorów. W takim przypadku zachowaj elastyczne zachowanie i postępuj zgodnie z naszymi zaleceniami dotyczącymi projektowania.

Te dostosowania powinny być ograniczone i nie powinny odbiegać od szablonu karty. Ma to na celu zachowanie spójności, gdy użytkownicy przewijają karuzelę kart na urządzeniach z Wear OS.