Wear OS 生态系统由屏幕尺寸各异的设备组成。为所有用户提供最优质的体验,采用自适应界面原则至关重要。
什么是自适应界面?
无论在何种尺寸的屏幕上渲染自适应界面,系统都会拉伸和更改自适应界面,以充分利用所有可用的屏幕空间。
自适应界面使用直接内置于布局逻辑中的组件和方法能够做出响应。这些布局还利用屏幕尺寸断点(针对不同的屏幕尺寸应用不同的设计)为用户打造更丰富的体验。
主要屏幕尺寸

了解在设计新体验时应注意的关键参考尺寸
布局类型
在针对圆形屏幕上的自适应布局进行设计时,滚动视图和非滚动视图在缩放界面元素和保持均衡布局和构图方面都有独特的要求。

滚动视图
所有上外边距、下外边距和侧外边距都应以百分比形式定义,以避免裁剪,并按比例缩放元素。
所有上外边距、下外边距和侧外边距都应以百分比形式定义,以避免裁剪,并按比例缩放元素。

非滚动视图
所有外边距都应以百分比进行定义,并且应定义垂直约束条件,以便中间的主要内容可以拉伸以填充可用区域。
所有外边距都应以百分比进行定义,并且应定义垂直约束条件,以便中间的主要内容可以拉伸以填充可用区域。
通过自适应布局和设计实践创造更多价值
在针对圆形屏幕上的自适应布局进行设计时,滚动视图和非滚动视图在缩放界面元素和保持均衡布局和构图方面都有独特的要求。
以下图片表示建议,示例仅供说明之用。查看每个组件或 surface 页面,获取内容相关、响应式的详细指南。

更多内容一览无余
自适应布局支持在单个屏幕中显示更多条状标签、更多卡片、更多文字和更多按钮
自适应布局支持在单个屏幕中显示更多条状标签、更多卡片、更多文字和更多按钮

显示更多内容元素
利用在定义的屏幕尺寸断点处应用的新布局,尽可能允许引入新内容,从而在屏幕尺寸更大的设备上为用户提供更多价值。
利用在定义的屏幕尺寸断点处应用的新布局,尽可能允许引入新内容,从而在屏幕尺寸更大的设备上为用户提供更多价值。

提高一目了然性
利用额外的屏幕空间提供更大的容器、更大的文本、更粗的圆环和更精细的数据可视化,让用户更一目了然。
利用额外的屏幕空间提供更大的容器、更大的文本、更粗的圆环和更精细的数据可视化,让用户更一目了然。

提高易用性
利用额外的屏幕空间提供更大的点按目标、更出色的视觉层次结构以及在内容项之间提供更多空间,使界面更易于互动。
利用额外的屏幕空间提供更大的点按目标、更出色的视觉层次结构以及在内容项之间提供更多空间,使界面更易于互动。

经过优化的组合
利用我们更新后的组件和模板,在各种尺寸的屏幕上改善界面的外观和风格。
利用我们更新后的组件和模板,在各种尺寸的屏幕上改善界面的外观和风格。
应用质量

我们的质量指南分为三个级别。通过遵循这三个层级中的指南,尽可能为您的用户提供最佳体验。
适用于所有屏幕尺寸 |
响应式和优化 |
自适应和差异化 |
利用已建立的规范布局

使用既定的规范布局来帮助界面针对各种设备尺寸顺畅地适应。
我们的规范布局经过精心开发,旨在为所有屏幕尺寸提供优质体验。