Układy aplikacji

Projektując aplikacje na Wear OS, zwracaj uwagę na układy wybierane dla poszczególnych funkcji. Wear OS działa na okrągłych wyświetlaczach, a przycinanie treści jest częstsze niż na urządzeniach mobilnych, dlatego przy projektowaniu aplikacji warto wziąć pod uwagę 2 kategorie układów kanonicznych.

Układy aplikacji bez przewijania

Układy nieprzewijane koncentrują się na łatwo dostępnych informacjach i zapewniają użytkownikom wartość przy niewielkiej interakcji lub bez interakcji. Z tego powodu tworzenie elastycznych elementów w takich układach może być trudne:

Przykłady obejmują okna, nakładki z potwierdzeniem, selektory, elementy krokowe oraz kombinacje.

Tworzenie elastycznych widoków bez przewijania

  • Przetestuj kampanię na kombinacji języków, skalowania czcionek, urządzeń i zmiennych treści.
  • Używaj układów bez możliwości przewijania tylko wtedy, gdy treść jest znana lub kontrolowanej z wyprzedzeniem albo jeśli musisz zastosować określony projekt.
  • Zastosuj do układu zalecane marginesy górny, dolny i boczny.
  • Określ marginesy w procentach w miejscach, w których treść mogłaby zostać przycięta.
  • Ułóż elementy tak, aby jak najlepiej wykorzystać miejsce na ekranie i zachować równowagę na urządzeniach o różnych rozmiarach.

Przewijane układy aplikacji

W przypadku stron, które zawierają więcej informacji niż mieści się na jednym ekranie lub które muszą obsługiwać dłuższe i bardziej atrakcyjne ścieżki, użyj widoku przewijania.

Przykłady: listy elementów, listy mieszane, listy kart, listy przycisków oraz okna z dolnymi elementami i przyciskami dolnymi

Tworzenie elastycznych widoków przewijania

  • Zastosuj zalecane marginesy: górny, dolny i boczny.
  • Zdefiniuj zewnętrzne marginesy w wartościach procentowych, aby uniknąć przycięcia na początku i na końcu kontenera z możliwością przewijania.
  • Stosuj marginesy w stałych wartościach DP między elementami interfejsu.

Jak tworzyć adaptacyjne widoki przewijania za pomocą punktu przerwania rozmiaru ekranu

Widoki przewijania, które wykorzystują elastyczne projektowanie stron, zwykle dostosowują się do różnych rozmiarów ekranów. Jednak w niektórych przypadkach możesz użyć punktu przerwania, aby zastępować wymiary i ulepszać układy, które pokazują dodatkowe opcje, poprawiają czytelność lub dopasowują treść do ekranu. Ten przykład pokazuje, jak na większych ekranach poszerzać zakres 2 dolnych przycisków:

Przyciski są szersze, a więcej tekstu mieści się w układzie na większe ekrany.