为 Wear OS 设计应用时,请有意地为每种体验选择布局。由于 Wear OS 在圆形显示屏上运行,并且裁剪比手持设备更常见,因此您在设计应用时应考虑两种规范布局类别。
非滚动应用布局
非滚动布局侧重于快速浏览的信息,并通过少量或零交互为用户提供价值。正因为如此,在此类布局中构建响应式行为可能会具有挑战性
构建响应式非滚动视图
- 在语言、字体缩放、设备和可变内容组合下进行测试。
- 仅当内容已知或提前控制时,或者必须使用特定设计时,才使用非滚动布局。
- 将推荐的顶部、底部和侧边边距应用于布局。
- 在内容可能被裁剪的地方,以百分比值定义边距。
- 安排元素以充分利用屏幕空间并在不同设备尺寸上保持平衡。
滚动应用布局
对于包含的信息超出单个屏幕范围,或需要支持更长、更沉浸式旅程的页面,请使用滚动视图。
构建响应式滚动视图
- 应用推荐的顶部、底部和侧边边距。
- 以百分比值定义外部边距,以防止在可滚动容器的开头和结尾处发生裁剪。
- 在 UI 元素之间以固定的 DP 值应用边距。
如何使用屏幕尺寸断点构建自适应滚动视图
使用响应式设计实践的滚动视图通常会适应一系列屏幕尺寸。但是,在某些特殊情况下,您可以使用断点来覆盖尺寸并增强布局,以显示附加选项、提高可浏览性或使内容更好地适应屏幕。以下示例展示了如何在更大的屏幕上加宽底部两个按钮
Figma 设计工具包
访问设计工具包下载页面,探索包含内置组件、选项和建议的设计布局,以创建遵循最佳实践的不同应用和图块设计。