应用布局

为 Wear OS 设计应用时,请有意地为每种体验选择布局。由于 Wear OS 在圆形显示屏上运行,并且裁剪比手持设备更常见,因此您在设计应用时应考虑两种规范布局类别。

非滚动应用布局

非滚动布局侧重于快速浏览的信息,并通过少量或零交互为用户提供价值。正因为如此,在此类布局中构建响应式行为可能会具有挑战性

Examples include dialogs, confirmation overlays, pickers, steppers, and combinations

构建响应式非滚动视图

  • 在语言、字体缩放、设备和可变内容组合下进行测试。
  • 仅当内容已知或提前控制时,或者必须使用特定设计时,才使用非滚动布局。
  • 推荐的顶部、底部和侧边边距应用于布局。
  • 在内容可能被裁剪的地方,以百分比值定义边距。
  • 安排元素以充分利用屏幕空间并在不同设备尺寸上保持平衡。

滚动应用布局

对于包含的信息超出单个屏幕范围,或需要支持更长、更沉浸式旅程的页面,请使用滚动视图。

Examples include chip lists, mixed lists, card lists, button lists, and dialogs with bottom chips and bottom buttons

构建响应式滚动视图

  • 应用推荐的顶部、底部和侧边边距
  • 以百分比值定义外部边距,以防止在可滚动容器的开头和结尾处发生裁剪。
  • 在 UI 元素之间以固定的 DP 值应用边距。

如何使用屏幕尺寸断点构建自适应滚动视图

使用响应式设计实践的滚动视图通常会适应一系列屏幕尺寸。但是,在某些特殊情况下,您可以使用断点来覆盖尺寸并增强布局,以显示附加选项、提高可浏览性或使内容更好地适应屏幕。以下示例展示了如何在更大的屏幕上加宽底部两个按钮

Buttons are wider, and more text fits on list items, in the layout for larger screen sizes

Figma 设计工具包

访问设计工具包下载页面,探索包含内置组件、选项和建议的设计布局,以创建遵循最佳实践的不同应用和图块设计。