Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Material 3 Expressive w znacznie większym i bardziej znaczącym stopniu wykorzystuje język kształtów, stosując elastyczne kształty kontenerów, aby zaokrąglać i wyostrzać promienie narożników, co ułatwia przekształcanie list i stanów przycisków.
System projektowania wprowadza też przyciski przylegające do krawędzi jako charakterystyczny wzorzec projektowy dla okrągłych urządzeń z Wear OS.
Zachowaj skalowanie elementu interfejsu
Podczas projektowania układów na okrągłym ekranie widoki przewijane i nieprzewijane mają różne wymagania dotyczące zachowania skalowania elementów interfejsu oraz zrównoważonego układu i kompozycji.
Widoki z przewijaniem
W przypadku widoków przewijanych używaj wartości procentowych do określania wszystkich marginesów u góry, u dołu i po bokach, aby uniknąć przycinania i zapewnić proporcjonalne skalowanie elementów.
Wszystkie marginesy górne, dolne i boczne powinny być określone w procentach, aby uniknąć przycinania i zapewnić proporcjonalne skalowanie elementów.
Wyświetlenia nieprzewijane
W przypadku widoków bez przewijania używaj wartości procentowych i ograniczeń pionowych dla wszystkich marginesów. Dzięki temu główna treść na środku może rozciągać się na cały dostępny obszar.
Wszystkie marginesy powinny być zdefiniowane w procentach, a ograniczenia pionowe powinny być zdefiniowane tak, aby główna treść na środku mogła rozciągać się na dostępny obszar.
Poziomy wytycznych dotyczących jakości
Nasze wskazówki dotyczące jakości są podzielone na 3 poziomy. Zapewnij użytkownikom jak najlepsze wrażenia, spełniając wytyczne na wszystkich 3 poziomach.
Dostosowane do wszystkich rozmiarów ekranu
Zadbaj o to, aby aplikacja zapewniała wysoką jakość na wszystkich rozmiarach ekranu.
Twórz układy, które w pełni wykorzystują dostępną przestrzeń aplikacji.
Elastyczne i zoptymalizowane
Dostarczaj więcej treści użytkownikom na urządzeniach, które na to pozwalają, i korzystaj z elastycznych układów, które automatycznie dopasowują się do różnych rozmiarów ekranu.
Adaptacyjne i zróżnicowane
Wykorzystaj w pełni dodatkową przestrzeń, używając punktów przerwania, aby oferować nowe, zaawansowane funkcje na większych ekranach, które nie są dostępne na urządzeniach z mniejszymi ekranami.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-26 UTC.
[null,null,["Ostatnia aktualizacja: 2025-07-26 UTC."],[],[],null,["# Design quality tiers\n\nMaterial 3 Expressive leans into shape language in a much more expansive and\nmeaningful way by utilizing flexible container shapes to apply rounding and\nsharpening of corner radii to support shape morphing lists and button states.\nThe design system also introduces edge-hugging buttons as an ownable and iconic\ndesign pattern for round devices on Wear OS.\n\nMaintain UI element scaling\n---------------------------\n\nWhen designing layouts on a round screen, scrolling and non-scrolling\nviews each have unique requirements to maintain UI element scaling and preserve\na balanced layout and composition.\n\n\n**Scrolling views**\n\nFor scrolling views, use percentages to define all top, bottom, and side\nmargins to avoid clipping and provide proportional scaling of elements.\n\nAll top, bottom, and side margins should be defined in percentages to avoid\nclipping and provide proportional scaling of elements. \n**Non-scrolling views**\n\nFor non-scrolling views, use percentages and vertical constraints for all\nmargins. That way, the main content in the middle can stretch to fill the\navailable area.\n\nAll margins should be defined in percentages and vertical constraints should be\ndefined such that the main content in the middle can stretch to fill the\navailable area.\n\n\u003cbr /\u003e\n\nTiers of quality guidelines\n---------------------------\n\nOur quality guidelines are organized into three tiers. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n\n**Ready for all screen sizes**\n\nEnsure your app is delivering a quality experience across all screen sizes.\nCreate layouts that fully use the available app space. \n\n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes. \n\n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n\u003cbr /\u003e\n\n| **Caution:** A larger display size should *never* display less information than ones that are smaller than it, this is especially relevant for custom behaviors added in at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less are the larger screens. Screens should always show \"more value\" and never \"less value\" with increasing size."]]
