Aplikacje, które wykorzystują elastyczne układy i automatycznie dostosowują się do różnych rozmiarów ekranu, zapewniają użytkownikom dodatkową wartość i zwiększają ich produktywność oraz zaangażowanie.
Elastyczne układy dynamicznie formatują i umieszczają elementy takie jak przyciski, pola tekstowe i okna dialogowe, aby zapewnić użytkownikom jak najlepsze wrażenia. Automatycznie oferuj użytkownikom aplikacji dodatkową wartość na większych ekranach, stosując metody elastycznego projektowania. Czy to więcej tekstu widocznego na pierwszy rzut oka, więcej działań na ekranie czy większe, łatwiejsze do kliknięcia elementy, responsywne praktyki zapewniają lepsze wrażenia użytkownikom korzystającym z większych ekranów.
Dodawanie wartości dzięki projektowi elastycznemu
Tak
- Użyj biblioteki komponentów M3 Compose, która ma wbudowane zachowanie responsywne i adaptacyjne.
- Stosuj układy elastyczne, które automatycznie i płynnie dostosowują się do dostępnej przestrzeni na różnych rozmiarach ekranu.
Nie
- Rozciąganie elementów interfejsu, w tym pól tekstowych, przycisków i dialogów, aby wypełnić dodatkową przestrzeń.
- Zwiększ rozmiary czcionek, chyba że służą one głównie do celów graficznych.
Tworzenie elastycznych aplikacji i kafelków na Wear OS
Elastyczne interfejsy użytkownika rozciągają się i zmieniają, aby w pełni wykorzystać całą dostępną przestrzeń ekranu, niezależnie od jego rozmiaru.
Podczas projektowania elastycznych układów na okrągłym ekranie widoki z przewijaniem i bez przewijania mają różne wymagania, aby zachować skalowanie elementów interfejsu i zrównoważony układ oraz kompozycję. W przypadku widoków przewijanych definiuj za pomocą wartości procentowych wszystkie marginesy górny, dolny i boczny, aby uniknąć przycinania i zapewnić proporcjonalne skalowanie elementów. W przypadku widoków bez przewijania użyj wartości procentowych i ograniczeń pionowych dla wszystkich marginesów. Dzięki temu główna treść w środku może się rozciągać, aby wypełnić dostępną przestrzeń.
Wyświetlenia po przewinięciu
Wszystkie marginesy górny, dolny i boczny należy zdefiniować w procentach, aby uniknąć przycinania i zapewnić proporcjonalne skalowanie elementów.
Wyświetlenia nieprzewijanych treści
Wszystkie marginesy powinny być zdefiniowane w procentach, a ograniczenia pionowe powinny być zdefiniowane w taki sposób, aby główne treści w środku mogły się rozciągać, wypełniając dostępną przestrzeń.
Przykłady
Na poniższych obrazach znajdziesz przykłady aplikacji, które są responsywne i zoptymalizowane.
Przyciski przylegające do krawędzi
Lista kart
Lista przełączników i przycisków
Tytuł z kartami obrazkowymi
Lista kart z obrazami
Płytka z wykresem
