应用布局

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

非滚动应用布局

非滚动布局侧重于一目了然的信息,仅提供少量互动或无需互动即可为用户提供价值。因此,将响应行为内置到这些布局中可能颇具挑战性:

示例包括对话框、确认叠加层、选择器、步进控件和组合

专为响应式非滚动视图而构建

  • 针对语言、字体缩放、设备和可变内容的组合进行测试。
  • 仅当内容已知或提前控制时,或者您必须使用特定设计时,才使用不可滚动布局。
  • 对布局应用建议的上外边距、下外边距和侧边外边距
  • 在可能裁剪内容的位置以百分比值定义外边距。
  • 排列元素以充分利用屏幕上的空间,并在不同尺寸的设备之间保持平衡。

滚动应用布局

如果页面包含的信息过多,无法在单个屏幕上呈现,或者页面需要支持更长且更具沉浸感的历程,请使用滚动视图。

示例包括条状标签列表、混合列表、卡片列表、按钮列表,以及带有底部条状标签和底部按钮的对话框

专为自适应滚动视图而构建

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

采用自适应设计做法的滚动视图通常会适应各种屏幕尺寸。不过,在某些特殊情况下,您可以使用断点来替换尺寸并扩充布局,从而显示更多选项、提升一目了然度,或让内容更适合屏幕。以下示例展示了如何在较大的屏幕上加宽底部的两个按钮:

在适用于较大屏幕尺寸的布局中,按钮更宽,列表项可以容纳更多文本