Wear OS 生态系统包含各种屏幕尺寸的设备。使用自适应 UI 原则对于为所有人提供高质量的体验至关重要。自适应 UI 可以拉伸和变化,从而无论在何种尺寸的屏幕上渲染,都能充分利用所有可用屏幕空间。自适应 UI 具有响应性,会使用直接构建在布局逻辑中的组件和方法进行调整。这些布局还利用屏幕尺寸断点(在不同屏幕尺寸上应用不同的设计),为每个人创造更丰富的体验。
基本术语
响应式设计:一种设计方法,布局会动态地格式化并定位按钮、文本字段和对话框等元素,以实现最佳的用户体验。通过利用响应式设计实践,自动为大屏用户提供额外价值。无论是让用户一眼看到更多文本、在屏幕上显示更多操作,还是提供更大、更易于点击的目标,响应式实践都能为大屏用户提供更佳的体验。
自适应设计:一种设计方法,界面会根据已知的用户、设备或环境条件进行更改。Material 中的自适应设计包括布局和组件的适配。
布局类型
在为圆形屏幕设计自适应布局时,滚动视图和非滚动视图在缩放 UI 元素以及保持平衡的布局和构图方面都有各自的独特要求。
自适应滚动布局
所有顶部、底部和侧边边距都应定义为百分比,以避免被裁剪并提供元素的比例缩放。
自适应非滚动布局
所有边距都应定义为百分比,并且垂直约束应定义为使中间的主要内容能够拉伸以填充可用区域。
关键屏幕尺寸
Wear OS 生态系统中的许多手表具有不同的屏幕尺寸。在为 Wear OS 设计时,请记住您的应用界面会显示在这些不同的屏幕尺寸上。为不同设备进行设计时,请牢记以下原则。
优先考虑小尺寸
始终先针对支持的小尺寸圆形屏幕模拟器进行设计:204dp - 216dp。如果布局较为密集,请以 192dp 进行渲染以确保不会出现布局错乱——请务必同时在 192dp 下测试更大的字体大小。然后,再针对较大设备进行优化。
为缩放而设计
将外边距定义为百分比而非绝对值,这样边距可以在圆形屏幕上按比例缩放,避免任何 UI 元素被裁剪。
字体大小
根据字体缩放和辅助功能设置(如粗体文本),UI 元素的高度可能会以非线性方式变化。
以下屏幕尺寸是 Wear OS 设备中特别常见的选择。使用 225dp 作为较小屏幕和较大屏幕之间的断点是很有利的。
192dp 至 224dp
225dp 至 240+dp
设计质量层级
我们还通过使用灵活的容器形状,以更广泛且更有意义的方式融入形状语言,通过应用圆角/锐角来支持形状变换列表和按钮状态。我们还引入了边缘贴合按钮(edge-hugging buttons)作为 Wear OS 圆形设备的一种新组件和标志性设计模式。我们的质量准则分为三个层级。通过满足所有三个层级的准则,为您的用户提供最佳体验。
适配所有屏幕尺寸
确保您的应用在所有屏幕尺寸上都能提供高质量的体验。创建能充分利用可用应用空间的布局。
响应式与优化
在允许的设备上为用户提供更多内容,并利用能自动适应不同屏幕尺寸的响应式布局。
自适应与差异化
利用断点充分利用额外的空间,在大屏幕上提供在小屏设备上无法实现的功能强大的新体验。