概览

Wear OS 生态系统包含各种屏幕尺寸的设备。使用自适应 UI 原则对于为所有人提供高质量的体验至关重要。自适应 UI 可以拉伸和变化,从而无论在何种尺寸的屏幕上渲染,都能充分利用所有可用屏幕空间。自适应 UI 具有响应性,会使用直接构建在布局逻辑中的组件和方法进行调整。这些布局还利用屏幕尺寸断点(在不同屏幕尺寸上应用不同的设计),为每个人创造更丰富的体验。

基本术语

响应式设计:一种设计方法,布局会动态地格式化并定位按钮、文本字段和对话框等元素,以实现最佳的用户体验。通过利用响应式设计实践,自动为大屏用户提供额外价值。无论是让用户一眼看到更多文本、在屏幕上显示更多操作,还是提供更大、更易于点击的目标,响应式实践都能为大屏用户提供更佳的体验。

自适应设计:一种设计方法,界面会根据已知的用户、设备或环境条件进行更改。Material 中的自适应设计包括布局和组件的适配。

布局类型

在为圆形屏幕设计自适应布局时,滚动视图和非滚动视图在缩放 UI 元素以及保持平衡的布局和构图方面都有各自的独特要求。

alt text

自适应滚动布局

所有顶部、底部和侧边边距都应定义为百分比,以避免被裁剪并提供元素的比例缩放。

alt text

自适应非滚动布局

所有边距都应定义为百分比,并且垂直约束应定义为使中间的主要内容能够拉伸以填充可用区域。

关键屏幕尺寸

Wear OS 生态系统中的许多手表具有不同的屏幕尺寸。在为 Wear OS 设计时,请记住您的应用界面会显示在这些不同的屏幕尺寸上。为不同设备进行设计时,请牢记以下原则。

alt text

优先考虑小尺寸

始终先针对支持的小尺寸圆形屏幕模拟器进行设计:204dp - 216dp。如果布局较为密集,请以 192dp 进行渲染以确保不会出现布局错乱——请务必同时在 192dp 下测试更大的字体大小。然后,再针对较大设备进行优化。

alt text

为缩放而设计

将外边距定义为百分比而非绝对值,这样边距可以在圆形屏幕上按比例缩放,避免任何 UI 元素被裁剪。

alt text

字体大小

根据字体缩放和辅助功能设置(如粗体文本),UI 元素的高度可能会以非线性方式变化。

以下屏幕尺寸是 Wear OS 设备中特别常见的选择。使用 225dp 作为较小屏幕和较大屏幕之间的断点是很有利的。

alt text

192dp 至 224dp

alt text

225dp 至 240+dp

设计质量层级

我们还通过使用灵活的容器形状,以更广泛且更有意义的方式融入形状语言,通过应用圆角/锐角来支持形状变换列表和按钮状态。我们还引入了边缘贴合按钮(edge-hugging buttons)作为 Wear OS 圆形设备的一种新组件和标志性设计模式。我们的质量准则分为三个层级。通过满足所有三个层级的准则,为您的用户提供最佳体验。

alt text

适配所有屏幕尺寸

确保您的应用在所有屏幕尺寸上都能提供高质量的体验。创建能充分利用可用应用空间的布局。

alt text

响应式与优化

在允许的设备上为用户提供更多内容,并利用能自动适应不同屏幕尺寸的响应式布局。

alt text

自适应与差异化

利用断点充分利用额外的空间,在大屏幕上提供在小屏设备上无法实现的功能强大的新体验。