规范性自适应设计布局

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

磁贴

磁贴提供对用户需要完成任务的信息和操作的快速访问。用户只需从表盘上滑动,即可查看他们朝着健身目标的进展情况,查看天气等。从磁贴中启动应用程序或快速完成基本任务。

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

您可以将品牌的样式应用于某些组件。这包括主色调、应用程序图标、字体、图标以及应用于磁贴体验的任何视觉资产。

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

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

边距已设置为基于屏幕尺寸的百分比值,以便行填充可用空间,但不会扩展得太远而被顶部和底部的弯曲屏幕裁剪。磁贴具有固定的屏幕高度,因此我们调整了填充以最大限度地利用有限的屏幕空间,而不会造成不必要的裁剪。

两种主要模板 - 主要布局和边缘内容布局(带有进度环) - 具有不同的边距,但所有设计布局都是构建为映射到其中之一的。每个磁贴都有三个主要部分,以及分配给每个部分的插槽。在某些情况下,可能会有额外的内置边距和填充,以帮助内容填充可用空间,同时保持其可浏览的平衡设计。

查看 使用 ProtoLayout 构建响应式布局 以获取实施指南。

创建差异化体验

拥有四个主要规范性布局,以及内置的 80 多种排列,允许进行无限的定制。磁贴基于插槽系统构建,因此您可以用您选择的任何内容替换规范性布局中的插槽。在这种情况下,保持响应式行为并遵循我们的设计建议。

这些自定义应该有限,并且不应该破坏磁贴模板的结构。这是为了在用户在其 Wear OS 设备上滚动浏览磁贴轮播时保持一致性。

查看 通过断点在磁贴中提供差异化体验 以获取实施指南。

在更大屏幕尺寸上添加断点后的价值

为了最大限度地利用更大屏幕尺寸上的额外空间,在 225dp 处添加一个尺寸断点。此断点使您可以显示更多内容,包括更多按钮或数据,或更改布局以更好地适合更大的屏幕。

滚动和非滚动应用程序布局

在圆形屏幕上设计自适应布局时,滚动视图和非滚动视图分别对缩放 UI 元素以及维护平衡的布局和构图有独特的需求。

非滚动应用程序布局

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

非滚动应用程序视图布局包括媒体播放器、选择器、切换器以及使用进度指示器的特殊健身或跟踪屏幕。您可以限制任何屏幕的高度,确保用户专注于一项任务或一组控件,而不是需要浏览选项列表。为了适应屏幕尺寸较小的设备,请牢记有限的尺寸进行设计,确保可浏览性,并在相关情况下采用圆形屏幕。

响应式指南(百分比边距)

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

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

有关实施指南,请参见 Horologist 中的非滚动布局

创建差异化体验

非滚动布局是可自定义的,但它们在屏幕上可以添加的内容量以及最适合使用哪些类型的组件方面受到更多限制。使用 IconButton 而不是 Chips 可以更好地利用有限的空间,而进度指示器和大型数据点等视觉图形则有助于以图形方式传达关键信息。

所有紧贴屏幕边框的元素都会随着屏幕尺寸自动增长,因此它们会变得更加醒目。

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

在为更大的屏幕尺寸创建响应式设计时,非滚动应用程序布局从额外的屏幕空间中获益最大。现有的元素可以增长以填充额外的空间,从而提高可用性,并且组件和内容可以在屏幕尺寸断点后出现。

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

  • 媒体播放器可以获得额外的按钮或更大的控件。
  • 确认对话框可以获得插图或更多信息。
  • 健身屏幕可以获得额外的指标,并且元素可以增长。

有关实施指南,请参见 通过断点在 Wear Compose 中提供差异化体验

滚动应用程序布局

规范布局

滚动应用程序视图布局包括列表(ScalingLazyColumn)和对话框。这些布局构成了大多数应用程序屏幕,并且它们代表需要适应更大屏幕尺寸的组件集合。

检查组件是否响应式,即它们是否填充可用宽度并在更多屏幕高度可用时采用 ScalingLazyColumn 调整。这些布局本身就是响应式构建的,我们还有一些额外的建议可以进一步利用扩展的屏幕空间。

有关实施指南,请参见 使用 Horologist 构建响应式布局

响应式指南(百分比边距)

所有顶部、底部和侧边距应以百分比定义,以避免裁剪并提供元素的比例缩放。请注意,PositionIndicator 会在用户滚动时出现,并且它会自动紧贴屏幕边框,无论其大小如何。

创建差异化体验

滚动视图高度可自定义,可以按任何顺序添加任何组合的组件。

顶部和底部边距可能会根据位于顶部和底部的组件而变化。这是为了防止内容被屏幕不断增长的曲线裁剪。

在大型屏幕上添加断点后的价值

由于滚动布局会自动显示之前隐藏在屏幕折痕以下的内容,因此您不需要做很多事情来添加价值。每个组件都填充可用宽度,在某些情况下,组件可能会获得额外的文本行(如卡片),或者组件会伸展以填充可用宽度(如图标按钮)。