Elastyczne i adaptacyjne projektowanie
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Aby dostosować się do rosnącego rozmiaru ekranu, w ramach szablonów układów Material Design w ProtoLayout i układów projektów w Fimrze dodaliśmy zachowanie elastyczne. Dzięki temu sloty mogą automatycznie się dostosowywać. Zasadniczo, sloty są zaprojektowane tak, aby wypełnić dostępną szerokość. Nasze marginesy są ustawiane jako wartości procentowe, a dodatkowe marginesy wewnętrzne są dodawane do slotów u dołu i góry ekranu, co uwzględnia wahania w krzywoliniowości ekranu w miarę jego powiększania.
Aby w pełni wykorzystać większy rozmiar ekranu i dodatkową przestrzeń, rozważ wykorzystanie dodatkowej przestrzeni ekranu na wyświetlanie dodatkowych informacji lub opcji. Uzyskanie tych układów wymaga dodatkowej personalizacji wykraczającej poza wbudowane zachowanie responsywne. Aby to osiągnąć, dodaj do układu po punkcie kontrolnym więcej przydatnych treści. Pamiętaj, że zalecany punkt przecięcia jest ustawiony na rozmiar ekranu 225 dp.
Warunki
Projektowanie responsywne: podejście do projektowania, w którym układy dynamicznie formatują i umieszczają elementy, takie jak przyciski, pola tekstowe i okna dialogowe, aby zapewnić optymalne wrażenia użytkownika. Automatycznie oferuj użytkownikom dodatkową wartość na większych ekranach, stosując metody projektowania responsywnego. Niezależnie od tego, czy chodzi o większy tekst, więcej działań na ekranie czy większe i łatwiej dostępne elementy dotykowe, strony responsywne zapewniają lepsze wrażenia użytkownikom dużych ekranów.
Projektowanie adaptacyjne: podejście do projektowania, w którym interfejs zmienia się na podstawie znanych warunków użytkownika, urządzenia lub środowiska. W ramach projektowania responsywnego w Material Design uwzględnia się układ i adaptacje komponentów.
Tworzenie elastycznych i zoptymalizowanych projektów
Aby układy Twoich projektów dostosowywały się do większych rozmiarów ekranu, zaktualizowaliśmy działanie naszych układów i składników, aby były one elastyczne, m.in. z marginesami i odstępami wyrażonymi w procentach.
Jeśli używasz naszych szablonów ProtoLayout, możesz automatycznie dziedziczyć te aktualizacje za pomocą ProtoLayout API i notatek do wersji beta. Musisz tylko dostarczyć układy, w których dodano dodatkowe treści lub komponenty po punkcie przełamania rozmiaru ekranu. Pełne wskazówki i zalecenia dotyczące korzystania z większego ekranu znajdziesz w przewodniku po kafelkach. Płytki mają stałą wysokość ekranu, więc dostosowaliśmy odstęp, aby zmaksymalizować ograniczoną przestrzeń ekranu bez niepożądanego przycinania.
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-27 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-07-27 UTC."],[],[],null,["# Responsive and adaptive design\n\nTo accommodate the increasing screen size, we've incorporated responsive behavior into the [ProtoLayout Material layout templates](https://developer.android.com/reference/kotlin/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).primaryLayout(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.wear.protolayout.ModifiersBuilders.Clickable,androidx.wear.protolayout.material3.PrimaryLayoutMargins)) and Figma design layouts, allowing the slots to automatically adapt. In essence, slots are designed to fill the available width. Our margins are set as percentages, with additional inner margins added to slots at the bottom and top of the screen, accounting for fluctuations in the curve of the screen as it enlarges.\n\nTo maximize the larger screen size and additional space, consider utilizing the extra screen space to provide more value by allowing users to access additional information or options. Achieving these layouts requires additional customization beyond the built-in responsive behavior. This can be accomplished by adding more helpful content to the layout after the breakpoint. It's important to note that the recommended breakpoint is set at the 225dp screen size.\n\nEssential terms\n---------------\n\n**Responsive design:** A design approach in which layouts dynamically format and position elements such as buttons, text fields, and dialogs for an optimal user experience. Automatically offer users additional value on larger screens by utilizing responsive design practices. Whether it's more text visible at a glance, more actions on screen, or larger, more accessible tap targets, responsive practices provide an enhanced experience for users of large screens.\n\n**Adaptive design:** A design approach in which the interface changes based on known user, device, or environmental conditions. Adaptive design in Material includes layout and component adaptations.\n\nBuilding responsive and optimized designs\n-----------------------------------------\n\nTo ensure your design layouts adapt to larger screen sizes, we have updated the behavior of our layouts and components to have built-in responsive behavior, including percentage-based margins and padding.\nIf you are using our ProtoLayout templates, you can inherit these updates automatically through the [ProtoLayout API](/design/ui/wear/guides/surfaces/tiles/reference/kotlin/androidx/wear/protolayout/material3/package-summary) and the [beta release notes](https://developer.android.com/jetpack/androidx/releases/wear-protolayout#1.3.0-beta02), and only need to supply layouts where you have added additional content or components after a screen size breakpoint. For full guidance and recommendations on how to take advantage of a larger screen size, view our [Tiles guidance](/design/ui/wear/guides/surfaces/tiles/wear/guides/surfaces/tiles). Tiles have a fixed screen height, so we've adjusted the padding to maximize the limited screen real estate without creating unwanted clipping."]]
