Układy aplikacji
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Projektując aplikacje na Wear OS, zwracaj uwagę na układy, które wybierasz
każdej z nich. Wear OS działa na okrągłych wyświetlaczach, więc przycinanie jest bardziej
Istnieją dwie kategorie układów kanonicznych.
które należy wziąć pod uwagę
podczas projektowania aplikacji.
Układy nieprzewijane koncentrują się na łatwo dostępnych informacjach i zapewniają użytkownikom korzyści
z małą lub zerową interakcją. Z tego powodu tworzenie
responsywności w takich układach:
- Przetestuj kombinację języków, skalowania czcionek, urządzeń i zmiennej
treści.
- Używaj układów bez możliwości przewijania tylko wtedy, gdy treść jest znana lub kontrolowanej
z wyprzedzeniem lub musisz zastosować
konkretny projekt.
- Zastosuj do układu zalecane marginesy górny, dolny i boczny.
- Ustal marże w procentach tam, gdzie treść mogłaby w inny sposób działać.
być przycięty.
- Ułóż elementy tak, by jak najlepiej wykorzystać przestrzeń w
ekranu i zachować równowagę na urządzeniach o różnej wielkości.
w przypadku stron, które zawierają więcej informacji niż mieści się na jednym ekranie;
które są wymagane do obsługi dłuższych i bardziej wciągających podróży, użyj przewijania.
widok.
- Zastosuj zalecane marginesy: górny, dolny i boczny.
- Zdefiniuj procentowe marginesy zewnętrzne, aby zapobiec przycinaniu
początku i końca przewijanego kontenera.
- Stosuj marginesy w stałych wartościach DP między elementami interfejsu.
Widok przewijania, który wykorzystuje praktyki elastycznego projektowania stron, zwykle przystosowuje się do
rozmiarów ekranu. Jednak w niektórych szczególnych przypadkach możesz użyć punktu przerwania, aby
zastępuj wymiary i powiększaj układy, które pokazują dodatkowe opcje, poprawiają
lub lepiej dopasować treści do ekranu. Przykład poniżej
pokazuje, jak na większych ekranach rozszerzają się 2 dolne przyciski:
Zestawy projektowe Figma
Odwiedź stronę pobierania pakietów do projektowania, aby poznać układy z wbudowanymi pakietami do projektowania
komponenty, opcje i rekomendacje do tworzenia różnych aplikacji i kafelków
zgodnie ze sprawdzonymi metodami.
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,["# App layouts\n\nWhen designing apps for Wear OS, be intentional about the layouts you choose for\neach experience. Because Wear OS runs on circular displays and clipping is more\ncommon than on handheld devices, there are two categories of canonical layouts\nthat you should consider when designing your app.\n\nNon-scrolling app layouts\n-------------------------\n\nNon-scrolling layouts focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts:\n\n### Build for responsive non-scrolling views\n\n- Test on a combination of languages, font scaling, devices, and variable content.\n- Use non-scrollable layouts only when the content is known or controlled ahead of time, or if you must use a specific design.\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts) to the layout.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Arrange elements to make the best possible use of the space within the screen and maintain balance across different device sizes.\n\nScrolling app layouts\n---------------------\n\nFor pages that contain more information than can fit on a single screen, or\nwhich are required to support longer and more immersive journeys, use a scroll\nview.\n\n### Build for responsive scroll views\n\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts).\n- Define outer margins in percentage values to prevent clipping at the beginning and end of the scrollable container.\n- Apply margins in fixed DP values between UI elements.\n\n### How to build for adaptive scroll views using a screen size breakpoint\n\nScroll views that use responsive design practices usually adapt to a range of\nscreen sizes. However, in some special cases, you can use a breakpoint to\noverride dimensions and augment layouts which show additional options, improve\nglanceability, or make content fit better on screen. The following example\nshows how, on larger screens, the bottom two buttons are widened:\n\nFigma design kits\n-----------------\n\n[Visit the design kit downloads page](/design/ui/wear/guides/foundations/download) to explore design layouts with built-in\ncomponents, options, and recommendations to create different app and tile\ndesigns that follow best practices."]]
