规范的自适应设计布局

这些规范布局是经过验证的多功能应用布局,可在屏幕尺寸较大的设备上提供最佳用户体验。

功能块

功能块有助于用户快速访问完成各种任务所需的信息和操作。只需在表盘上滑动一下,用户就可以查看健身目标进展、查看天气信息等。通过功能块快速启动应用或完成基本任务。

通过使用我们的组件和样式进行自定义

您可以将品牌样式应用于某些组件。这包括主要颜色、应用图标、字体、图标以及适用于功能块体验的任何视觉资源。

针对响应式布局(固定高度屏幕和百分比外边距)进行构建

为了适应更大的屏幕尺寸,我们更新了代码和设计布局,使其具有内置的响应行为,包括基于百分比的外边距和内边距。如果您使用的是我们的模板,则可以通过 Tiles API 自动继承这些更新,并且只需提供在屏幕尺寸断点后添加了其他内容或组件的布局。如需有关如何充分利用较大屏幕尺寸的完整指南和建议,请参阅我们的功能块指南。

所有模板均使用 192dp 和 225dp 这两个默认的屏幕尺寸断点构建。外边距已根据屏幕尺寸设置为百分比值,以使行填充可用空间,但又不会延伸得太远,被顶部和底部的曲线屏幕裁剪。功能块具有固定的屏幕高度,因此我们调整了内边距,以最大化有限的屏幕空间,而不会造成不必要的裁剪。

主要布局和边缘内容布局(带有进度环)这两个主要模板的外边距不同,但所有设计布局都旨在映射到其中一个。每个功能块都有三个主要部分,以及分配给每个功能块的槽位。在某些情况下,可能会添加额外的内置外边距和内边距,以帮助内容填充可用空间,同时保持其一目了然且均衡的设计。

打造差异化体验

它具有四个主要的规范化布局,并内置了 80 多种排列,可以实现几乎无限的自定义。功能块基于槽位构建,因此您可以将规范布局中的槽位替换为您选择的任何内容。在这种情况下,请保持响应式行为并遵循我们的设计建议。

这些自定义设置应受到限制,并且不应破坏功能块模板的结构。这是为了确保当用户在其 Wear OS 设备上滚动浏览功能块轮播界面时保持一致。

在较大屏幕尺寸上,在尺寸断点后添加值

为了在较大的屏幕尺寸上充分利用额外的空间,请在 225dp 处添加一个大小断点。此断点使系统可以显示更多内容、添加更多按钮或数据,或者更改布局以更好地适应较大的屏幕。

滚动和非滚动应用布局

在针对圆形屏幕上的自适应布局进行设计时,滚动视图和非滚动视图在缩放界面元素以及保持均衡的布局和组合方面都有独特的要求。

非滚动应用布局

规范布局和全屏组件(包括媒体和健身)

非滚动式应用视图布局包括媒体播放器、确认对话框、选择器、切换器,以及使用进度指示器的特殊健身或跟踪屏幕。您可以限制任何屏幕的高度,确保用户专注于一项任务或一组控件,而无需浏览选项列表。为了适应屏幕尺寸较小的设备,请在设计时考虑尺寸有限,确保一目了然,并在适当的情况下采用圆形屏幕。

响应能力指南(百分号)

以百分比定义所有外边距,并定义垂直约束条件,以便中间的主要内容可以拉伸以填充可用的显示区域。

设计时,最好将非滚动屏幕分成顶部、中间和底部部分。这样,您可以向顶部和底部部分添加内外边距以避免裁剪,但允许中间部分充分利用屏幕的整个宽度。当屏幕大小有限时,请考虑使用旋转滚动按钮来控制屏幕元素,因为单独的点按互动可能无法提供最佳体验。

打造差异化体验

非滚动布局是可自定义的,但在可向屏幕添加的内容数量以及哪些类型的组件效果最佳方面受到更多限制。使用 IconButton(而不是 Chip)可以更好地利用有限的空间,而且 ProgressIndicators 和大型数据点等视觉图形有助于以图形方式传达关键信息。

围住屏幕边框的所有元素都会自动随屏幕尺寸增大,从而使其更具冲击力。

如何在较大屏幕尺寸上的断点后添加值

在针对较大屏幕尺寸创建自适应设计时,非滚动式应用布局可以从额外的屏幕空间中获益。现有元素可以扩展以填充额外的空间,从而提高易用性,并且组件和内容可以在屏幕尺寸断点之后显示。

以下列表中列出了此行为的几个示例:

  • 媒体播放器可以获得更多按钮或更大的控件。
  • 确认对话框可能会提供插图或更多信息。
  • 健身屏幕可以获得更多指标,而元素的大小可以增大。

滚动应用布局

规范布局

滚动应用视图布局包括列表 (ScalingLazyColumn) 和对话框。这些布局构成了应用的大部分屏幕,并且代表了需要适应较大屏幕尺寸的一系列组件。

检查组件是否具备自适应能力,即它们填充了可用宽度,并在有更多屏幕高度可用时采用 ScalingLazyColumn 调整。这些布局已经采用响应式构建,并且我们还有一些其他建议可以进一步利用扩张的房地产。

响应能力指南(百分号)

所有上外边距、下外边距和侧外边距都应采用百分比定义,以避免裁剪,并按比例缩放元素。请注意,PositionIndicator 会在用户滚动时显示,无论屏幕大小如何,它都会自动拥抱屏幕的边框。

打造差异化体验

滚动视图的自定义性很强,能够以任何顺序添加组件的任意组合。

上外边距和下外边距可能会因位于顶部和底部的组件而异。这是为了防止内容被屏幕不断增长的曲线裁剪。

在大屏设备上,在断点后添加值

由于滚动布局会自动显示更多之前隐藏在屏幕非首屏的内容,因此您无需执行太多操作即可增加价值。每个组件都会填充可用宽度,在某些情况下,组件可能会获得额外的文本行(例如卡片),或者会拉伸组件填满可用宽度(例如图标按钮)。