Te układy kanoniczne to sprawdzone, uniwersalne układy aplikacji, które zapewniają optymalne wrażenia na urządzeniach z większymi ekranami.
Karty
Karty zapewniają szybki dostęp do informacji i działań, które są potrzebne użytkownikom. Przesuwając palcem po tarczy zegarka, użytkownik może zobaczyć swoje postępy w drodze do celów sportowych, sprawdzić pogodę i wykonać inne działania. Uruchamiaj aplikację lub załatwiaj ważne zadania za pomocą kafelków.
Dostosowywanie za pomocą komponentów i stylu
Możesz zastosować styl swojej marki do niektórych komponentów. Obejmuje to kolor podstawowy, ikonę aplikacji, czcionkę, ikony i wszelkie zasoby wizualne związane z Twoim kafelkiem.
Tworzenie układów elastycznych (ekranów o stałej wysokości i marginesów procentowych)
Aby dostosowywać nasz kod i układy graficzne do większych ekranów, zaktualizowaliśmy je tak, aby uwzględniały wbudowane mechanizmy elastyczne, w tym marginesy i dopełnienie określone procentowo. Jeśli używasz naszych szablonów, możesz automatycznie dziedziczyć te aktualizacje za pomocą interfejsu Tiles API. Musisz tylko przesyłać układy, do których zostały dodane dodatkowe treści lub komponenty po punkcie przerwania rozmiaru ekranu. Pełną treść wskazówek i zaleceń dotyczących korzystania z większego ekranu znajdziesz w naszych wskazówkach dotyczących kart.
Wszystkie szablony są tworzone z dwoma punktami przerwania o domyślnym rozmiarze ekranu: 192 dp i 225 dp. Marginesy zostały ustawione na wartości procentowe w zależności od rozmiaru ekranu, tak aby wiersze wypełniły dostępną przestrzeń, ale nie rozciągały się zbyt daleko i nie były przycinane przez zakrzywiony ekran u góry i u dołu. Kafelki mają stałą wysokość ekranu, dlatego dostosowaliśmy dopełnienie, aby zmaksymalizować ilość dostępnego miejsca na ekranie bez tworzenia niechcianych klipów.
Dwa główne szablony – Układ podstawowy i Układ treści brzegowych (z pierścieniem postępu) – mają różne marginesy, ale wszystkie układy projektowe są z nimi dopasowywane. Każdy kafelek ma 3 główne sekcje i przydzielone do nich przedziały. W niektórych przypadkach mogą być dostępne dodatkowe wbudowane marginesy i dopełnienie, które pomagają wypełnić dostępną przestrzeń, zachowując jednocześnie czytelny i zrównoważony układ.
Zapewniaj zróżnicowane wrażenia
Cztery główne układy kanoniczne z wbudowanymi ponad 80 opcjami permutacji pozwalają na niemal nieograniczone dostosowanie. Kafelki są tworzone w systemie opartym na przedziałach, więc możesz zastąpić boks w układzie kanonicznym dowolną wybraną treścią. W takim przypadku zachowaj elastyczność i zastosuj się do naszych zaleceń dotyczących projektowania.
Takie dostosowania powinny być ograniczone i nie powinny uszkodzić struktury szablonu kafelków. Pozwoli to zachować spójność, gdy użytkownicy przewijają karuzelę kafelków na urządzeniach z Wear OS.
Dodaj wartość po punkcie przerwania rozmiaru na większych ekranach
Aby najlepiej wykorzystać dodatkową przestrzeń na ekranach o większych rozmiarach, dodaj punkt przerwania rozmiaru 225 dp. Umożliwia on ujawnienie dodatkowych treści, dodanie większej liczby przycisków lub danych oraz zmianę układu, aby lepiej dopasować go do większego ekranu.
Układy aplikacji z przewijaniem i nieprzewijaniem
Projektując układy adaptacyjne na okrągłym ekranie, należy pamiętać, że przewijanie i widok bez przewijania ma unikalne wymagania dotyczące skalowania elementów interfejsu oraz zachowania zrównoważonego układu i kompozycji.
Nieprzewijane układy aplikacji
Układy kanoniczne i komponenty pełnoekranowe (w tym multimedia i fitness)
Nieprzewijane układy widoku aplikacji obejmują odtwarzacze multimediów, okna potwierdzenia, panele wyboru, przełączniki oraz specjalne ekrany fitness lub śledzące ze wskaźnikami postępu. Możesz ograniczyć wysokość dowolnego ekranu, dzięki czemu użytkownik będzie mógł skupić się na jednym zadaniu lub zestawie elementów, zamiast przeglądać listę opcji. Aby dostosować je do urządzeń z mniejszymi ekranami, weź je pod uwagę, biorąc pod uwagę te ograniczenia, dobrze widoczny ekran i tam, gdzie jest to potrzebne.
Wytyczne dotyczące czasu reagowania (marża procentowa)
Zdefiniuj wszystkie marginesy w procentach i określ ograniczenia pionowe, tak by główna treść środkowa mogła zostać rozciągnięta, aby wypełnić dostępny obszar wyświetlania.
Podczas projektowania najlepiej podzielić ekran bez przewijania na górną, środkową i dolną sekcję. W ten sposób możesz dodać wewnętrzne marginesy do górnej i dolnej sekcji, aby uniknąć przycięcia, a jednocześnie zapewnić środkową sekcję na wykorzystanie pełnej szerokości ekranu. Rozważ użycie pokrętła do przewijania elementów ekranu, gdy jego rozmiar jest ograniczony. Samodzielne klikanie może nie być wygodne.
Zapewniaj zróżnicowane wrażenia
Układy nieprzewijane można dostosowywać, ale ich ilość jest ograniczona, podobnie jak ilość treści na ekranie i jakie komponenty sprawdzają się najlepiej. Użycie elementów IconButtons zamiast elementów pozwala lepiej wykorzystać ograniczoną przestrzeń, a grafiki wizualne, takie jak ProgressIndicators i duże punkty danych, pomagają przekazywać kluczowe informacje w sposób graficzny.
Wszystkie elementy otaczające ramkę ekranu automatycznie rosną wraz z rozmiarem ekranu, dzięki czemu stają się jeszcze skuteczniejsze.
Dodawanie wartości po punkcie przerwania na większych ekranach
Jeśli projekt strony jest responsywny na potrzeby większych ekranów, dodatkowe miejsce na ekranie najlepiej wykorzystuje układy aplikacji bez przewijania. Istniejące elementy mogą się powiększać, aby wypełnić dodatkową przestrzeń, co ułatwia obsługę, a komponenty i treść mogą pojawiać się po punkcie przerwania rozmiaru ekranu.
Poniżej znajdziesz kilka przykładów takich działań:
- Odtwarzacze mogą otrzymać dodatkowe przyciski lub większe elementy sterujące.
- W oknach z potwierdzeniem można znaleźć ilustracje lub inne informacje.
- Ekrany fitness mogą generować dodatkowe dane, a elementy mogą się powiększać.
Przewijane układy aplikacji
Układy kanoniczne
Przewijane układy widoku aplikacji obejmują listy (ScalingLazyColumn) i okna. Składają się one na większość ekranów aplikacji i stanowią zbiór komponentów, które trzeba dostosować do większych ekranów.
Sprawdź, czy komponenty są elastyczne, czyli wypełniają dostępną szerokość i wykorzystują korekty ScalingLazyColumn, gdy dostępna jest większa część wysokości ekranu. Układy te są już tworzone elastycznie, więc mamy dodatkowe zalecenia, które pomogą Ci lepiej wykorzystać powiększoną przestrzeń.
Wytyczne dotyczące czasu reagowania (marża procentowa)
Wszystkie marginesy górny, dolny i boczny powinny być określone procentowo, aby uniknąć przycinania i zapewnić proporcjonalne skalowanie elementów. Pamiętaj, że wskaźnik pozycji pojawia się, gdy użytkownik przewija stronę, i automatycznie przylega do ramki ekranu niezależnie od jej rozmiaru.
Zapewniaj zróżnicowane wrażenia
Widoki takie można łatwo dostosować, dodając dowolne kombinacje komponentów w dowolnej kolejności.
Górny i dolny margines może się zmieniać w zależności od tego, jakie komponenty znajdują się u góry i na dole. Zapobiega to przycinaniu treści przez rosnącą krzywą ekranu.
Dodawanie wartości po punkcie przerwania na dużych ekranach
Układy przewijane automatycznie pokazują więcej elementów, które były wcześniej ukryte w części strony widocznej po przewinięciu, więc nie musisz nic robić. Każdy komponent wypełnia dostępną szerokość, a w niektórych przypadkach może zyskać dodatkowe wiersze tekstu (np. karty) lub rozciągnąć komponenty tak, aby wypełnić dostępną szerokość (np. przyciski ikon).