Elastyczne i zoptymalizowane
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Aplikacje, które są elastyczne i zoptymalizowane, korzystają z układów elastycznych, które automatycznie dostosowują się do różnych rozmiarów ekranu. Dzięki temu zapewniają użytkownikom dodatkową wartość i zapewniają produktywne, atrakcyjne środowisko.
Zwiększ wartość dzięki elastycznym projektowaniu
Układy elastyczne dynamicznie formatują i pozycjonują elementy, takie jak przyciski, pola tekstowe i okna, aby zapewnić wygodę użytkownikom. Automatycznie oferuj użytkownikom aplikacji dodatkową wartość na większych ekranach, stosując metody elastycznego projektowania stron. Niezależnie od tego, czy zależy Ci na tym, żeby tekst był widoczny na pierwszy rzut oka, zwiększyć liczbę działań na ekranie, czy też większe, bardziej przystępne elementy dotykowe, metody responsywności zapewniają lepsze wrażenia użytkownikom większych ekranów.
Tworzenie elastycznych aplikacji i kafelków na Wear OS
Elastyczne interfejsy się rozciągają i zmieniają się, aby jak najlepiej wykorzystać całą dostępną przestrzeń na ekranie, niezależnie od rozmiaru ekranu, na którym są renderowane. Przy projektowaniu układów elastycznych na okrągły ekran trzeba zastosować unikalne wymagania związane z utrzymywaniem skalowania elementów interfejsu oraz zachowaniem zrównoważonego układu i kompozycji w widokach z przewijaniem i bez przewijania. W przypadku widoków przewijanych użyj wartości procentowych, aby zdefiniować wszystkie górne, dolne i boczne marginesy. Pozwoli to uniknąć przycięcia i zapewni proporcjonalne skalowanie elementów. W przypadku widoków bez przewijania wszystkie marginesy stosuj procenty i ograniczenia pionowe. Dzięki temu główna treść pośrodku
może się rozciągnąć i wypełnić cały dostępny obszar.
Zapoznaj się ze wskazówkami dotyczącymi implementacji układów elastycznych (Tworzenie i Kafelki).
check_circle
Tak
- Używaj standardowych komponentów zaprojektowanych do adaptacji.
- Wykorzystaj układy adaptacyjne, które płynnie dopasowują się do różnych rozmiarów ekranu.
cancel
Nie wolno
- Rozciągnij elementy interfejsu (pola tekstowe, przyciski, okna), aby wypełnić dodatkową przestrzeń.
- Zwiększ rozmiary czcionek (chyba że służą przede wszystkim graficznym).
Następny krok: adaptacyjna i zróżnicowana
Aplikacje, które są adaptacyjne i zróżnicowane, zapewniają wygodę użytkowników, co jest niemożliwe na urządzeniach z mniejszymi ekranami.
Pierwsze kroki
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 optimized\n\nApps that are **responsive and optimized** utilize responsive layouts that\nautomatically adapt to different screen sizes, offering some additional value to\nusers and providing a productive, engaging user experience.\n\nAdd value through responsive design\n-----------------------------------\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\n\nBuild responsive apps and tiles for Wear OS\n-------------------------------------------\n\nResponsive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on. When designing\nresponsive layouts on a round screen, scrolling and non-scrolling views each\nhave unique requirements to maintain UI element scaling, as well as preserve a\nbalanced layout and composition. For [scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#scrolling), use percentages to\ndefine all top, bottom, and side margins to avoid clipping and provide\nproportional scaling of elements. For [non-scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#non-scrolling), use percentages\nand vertical constraints for all margins. That way, the main content in the\nmiddle can stretch to fill the available area.\n\nSee the [Compose](/training/wearables/compose/screen-size#responsive-layouts) and [Tiles](/training/wearables/tiles/screen-size#responsive-layouts) implementation guidance for responsive\nlayouts. \ncheck_circle\n\n### Do\n\n- Use standard components which are designed for adaptation.\n- Utilize adaptive layouts which adapt smoothly across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space.\n- Increase the sizes of fonts (unless they're serving a primarily graphic purpose).\n\nNext step: adaptive and differentiated\n--------------------------------------\n\nApps that are **adaptive and differentiated** create a user experience that\nisn't possible on devices with smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)"]]
