概览

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

设计质量层级

我们还以更广阔和更有意义的方式倾向于形状语言,通过利用灵活的容器形状应用圆角/尖角半径,以支持形状变形列表和按钮状态。我们还引入了边缘贴合按钮,作为 Wear OS 圆形设备上的新组件和标志性设计模式。我们的质量指南分为三个层级。通过满足所有三个层级的指南,为您的用户提供最佳体验。

alt text

支持所有屏幕尺寸

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

alt text

响应迅速且经过优化

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

alt text

自适应且差异化

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