Макеты приложений
Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
При разработке приложений для Wear OS внимательно относитесь к макетам, которые вы выбираете для каждого опыта. Поскольку Wear OS работает на круглых дисплеях, а обрезка встречается чаще, чем на портативных устройствах, существует две категории канонических макетов, которые следует учитывать при разработке приложения.
Макеты без прокрутки ориентированы на удобную для просмотра информацию и предлагают пользователям ценность при минимальном взаимодействии или вообще без него. Из-за этого может быть сложно встроить в эти макеты адаптивное поведение:
- Тестируйте сочетание языков, масштабирование шрифтов, устройств и переменное содержимое.
- Используйте макеты без прокрутки только в том случае, если содержимое известно или контролируется заранее, или если вам необходимо использовать определенный дизайн.
- Примените к макету рекомендованные верхние, нижние и боковые поля .
- Определите поля в процентных значениях в тех местах, где в противном случае контент мог бы быть обрезан.
- Располагайте элементы так, чтобы максимально эффективно использовать пространство на экране и сохранять баланс на устройствах разных размеров.
Для страниц, которые содержат больше информации, чем может поместиться на одном экране, или которые необходимы для поддержки более длительных и захватывающих путешествий, используйте режим прокрутки.
- Примените рекомендуемые верхние, нижние и боковые поля .
- Определите внешние поля в процентных значениях, чтобы предотвратить обрезку в начале и конце прокручиваемого контейнера.
- Применяйте поля в фиксированных значениях DP между элементами пользовательского интерфейса.
Представления прокрутки, в которых используются методы адаптивного дизайна, обычно адаптируются к различным размерам экрана. Однако в некоторых особых случаях вы можете использовать точку останова для переопределения размеров и расширения макетов, которые отображают дополнительные параметры, улучшают обзорность или улучшают размещение контента на экране. В следующем примере показано, как на больших экранах расширяются две нижние кнопки:
Наборы конструкторов Figma
Посетите страницу загрузки комплекта дизайна , чтобы изучить макеты дизайна со встроенными компонентами, опциями и рекомендациями по созданию различных дизайнов приложений и плиток, соответствующих передовым практикам.
Контент и образцы кода на этой странице предоставлены по лицензиям. Java и OpenJDK – это зарегистрированные товарные знаки корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2025-07-29 UTC.
[[["Прост для понимания","easyToUnderstand","thumb-up"],["Помог мне решить мою проблему","solvedMyProblem","thumb-up"],["Другое","otherUp","thumb-up"]],[["Отсутствует нужная мне информация","missingTheInformationINeed","thumb-down"],["Слишком сложен/слишком много шагов","tooComplicatedTooManySteps","thumb-down"],["Устарел","outOfDate","thumb-down"],["Проблема с переводом текста","translationIssue","thumb-down"],["Проблемы образцов/кода","samplesCodeIssue","thumb-down"],["Другое","otherDown","thumb-down"]],["Последнее обновление: 2025-07-29 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."]]
