应用程序布局

在为 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 设计工具包

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