自适应布局使用入门
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
Wear OS 生态系统由屏幕尺寸各异的设备组成。为了为所有用户提供最高品质的体验，利用自适应界面原则至关重要。
什么是自适应界面？
自适应界面会拉伸和更改，以便尽可能充分利用所有可用的屏幕空间，无论它们在何种尺寸的屏幕上呈现。
自适应界面会使用直接内置到布局逻辑中的组件和方法进行响应式更改。这些布局还会利用屏幕尺寸断点（在不同屏幕尺寸上应用不同的设计），为用户打造更丰富的体验。
主要屏幕尺寸
布局类型
在圆形屏幕上设计自适应布局时，滚动视图和非滚动视图在缩放界面元素和保持平衡的布局和组合方面各有独特的要求。
滚动视图
所有上边距、下边距和侧边距都应定义为百分比，以避免剪裁并按比例缩放元素。
非滚动视图
所有边距都应以百分比定义，并且应定义垂直约束条件，以便中间的主内容可以拉伸以填充可用区域。
通过自适应布局和设计实践提升价值
在圆形屏幕上设计自适应布局时，滚动视图和非滚动视图在缩放界面元素和保持平衡的布局和组合方面各有独特的要求。
以下图片仅供大致参考；示例仅作说明之用。查看每个组件或界面页面，获取详细的上下文响应式指南。
一目了然地浏览更多内容
自适应布局可让更多条状标签、更多卡片、更多行文本和更多按钮在单个屏幕上显示
可显示更多内容元素
利用在指定屏幕尺寸断点处应用的新布局，以便尽可能引入新内容，从而在屏幕尺寸较大的设备上为用户提供额外价值。
一目了然
利用额外的屏幕空间提供更大的容器、更大的文本、更粗的圆环和更精细的数据可视化，以便用户一目了然。
易用性更高
利用额外的屏幕空间提供更大的点按目标、更清晰的视觉层次结构，并在内容项之间留出额外的空间，让界面更易于交互且更舒适。
优化后的组合
利用更新后的组件和模板，为所有屏幕尺寸的界面提供更好的外观和风格。
应用质量
我们的质量指南分为三级。满足所有三个层级的准则，为用户提供尽可能出色的体验。
质量指南
适用于所有屏幕尺寸
确保您的应用在所有屏幕尺寸上都能提供优质体验。创建可充分利用可用应用空间的布局。
开始
自适应且经过优化
在允许的情况下，向用户提供更多内容，并利用可自动适应不同屏幕尺寸的自适应布局。
开始
自适应和差异化
利用断点充分利用额外的空间，在大屏设备上提供小屏设备无法提供的强大新体验。
开始
利用已建立的规范布局
使用已建立的规范布局，帮助界面在各种设备尺寸上顺畅自适应。
我们的规范布局经过精心设计，可在所有屏幕尺寸上提供优质体验。
规范布局
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-07-27。
[null,null,["最后更新时间 (UTC)：2025-07-27。"],[],[],null,["# Get started with adaptive layouts\n\nThe Wear OS ecosystem is made up of devices that have a wide variety of screen\nsizes. Utilizing adaptive UI principles is critical to delivering the highest\nquality experience for all users.\n\nWhat is adaptive UI?\n--------------------\n\nAdaptive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on.\n\nAdaptive UIs change responsively, using components and methods built directly\ninto the layout logic. These layouts also utilize screen size\nbreakpoints---applying a different design on different screen sizes---to create an\neven richer experience for users.\n\nKey screen sizes\n----------------\n\n\nLearn about key reference sizes to keep in mind as you design new experiences\n\n[Screen sizes](/design/ui/wear/guides/foundations/screen-sizes) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nTypes of layouts\n----------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\n\n**Scrolling views**\n\nAll top, bottom, and side margins\nshould be defined in percentages to avoid clipping and provide\nproportional scaling of elements. \n\n**Non-scrolling views**\n\nAll margins should be defined\nin percentages and vertical constraints should be defined such that the\nmain content in the middle can stretch to fill the available area.\n\n\u003cbr /\u003e\n\nAdd value through adaptive layouts and design practices\n-------------------------------------------------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\nThe following images are broad suggestions; examples are for illustrative\npurposes only. View each component or surface page for detailed, contextual,\nresponsive guidance.\n\n\n**More content at a glance**\n\nResponsive layouts allow for more chips, more cards, more lines of text, and\nmore buttons to fit on a single screen \n\n**More content elements visible**\n\nUtilize new layouts, applied at defined screen size breakpoints, to allow for\nthe introduction of new content when possible, giving the user additional value\non devices with larger screen sizes.\n\n\u003cbr /\u003e\n\n\n**Improved glanceability**\n\nUse extra screen space to provide larger containers, larger text, thicker rings,\nand more granular data visualization to provide better glanceability for users. \n\n**Improved usability**\n\nUse extra screen space to provide bigger tap targets, greater visual hierarchy,\nand additional space between content items to make interfaces easier and more\ncomfortable to interact with.\n\n\u003cbr /\u003e\n\n\n**Optimized compositions**\n\nUtilize our updated components and templates to offer a better look and feel for\nour UIs across all screen sizes. \n\n\u003cbr /\u003e\n\nApp quality\n-----------\n\n\nOur quality guidelines are organized into three levels. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n[Quality guidelines](/docs/quality-guidelines/wear-app-quality) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\n\n**Ready for all screen sizes**\n\nMake sure your app is delivering a quality experience across all screen\nsizes. Create layouts that fully use the available app space.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-ready) \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[Get started](/design/ui/wear/guides/foundations/larger-screens-optimized) \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[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\nUtilize established canonical layouts\n-------------------------------------\n\n\nUse established canonical layouts to help your UIs adapt smoothly across a range\nof device sizes.\n\nOur canonical layouts have been developed thoughtfully to offer a high quality\nexperience across all screen sizes.\n\n[Canonical layouts](/design/ui/wear/guides/foundations/canonical-adaptive-layouts) \n\n\u003cbr /\u003e"]]
