功能块的常见布局

功能块有助于用户快速访问完成各种任务所需的信息和操作。用户只需在表盘上滑动一下手指,便能了解自己的健身目标进展、查看天气信息等等。功能块还非常便于快速启动应用或完成基本任务。

三个平铺界面,其中两个显示 1 行 3 列的主要内容,另一个显示 2 行 3 列的主要内容

制作自适应且经过优化的设计

为了帮助您使设计布局适应更大的屏幕尺寸,我们更新了布局和组件的行为,使其具有内置的自适应行为,包括基于百分比的边距和内边距。

如果您使用的是 ProtoLayout 模板,则可以通过 Wear ProtoLayout Jetpack 库的最新 Beta 版自动继承这些更新。此外,您只需提供在屏幕尺寸断点后添加了其他内容或组件的布局。如需有关如何充分利用大屏幕尺寸的完整指南和建议,请参阅我们的功能块指南。功能块具有固定的屏幕高度,因此我们调整了内边距,以最大限度地利用有限的屏幕空间,而不会造成不必要的裁剪。

检查组件是否填满可用宽度

所有组件都应以自适应方式构建。通过将高度和宽度设置为“展开”,它们会填充可用空间。添加必要的边距,以防止内容被圆角屏幕剪裁。

打造自适应且与众不同的设计

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

这需要为每个断点采用不同的设计。较大的屏幕设计(225+ dp)可以包含以下其他元素:

显示之前隐藏的标题广告资源

建议在断点前具有两行的布局上执行此操作,以便移除标题 slot,从而确保最小点按目标为 48dp。

增大现有组件的大小或更改其状态

这样做是为了显示更多细节或使内容更易于浏览。

在当前布局中添加组件 slot

通过添加组件,布局可以提供更多选项或额外详情。 不过,请确保内容仍可一目了然。

在底部添加更多内容

在某些情况下,在底部部分添加操作按钮或内容,而不是在主要插槽中添加组件,会更有意义。

注意: 较大的显示屏尺寸绝不应显示比其小的显示屏尺寸更少的信息。 这对于在断点处添加的自定义行为尤其相关。

一个常见的例子是,当组件或文字大小增加到超过断点时,最终在大屏幕上显示的区域反而更小。屏幕应始终随着尺寸的增大而显示更多价值。

响应式和自适应行为

自适应行为取决于布局的三个展示位置(部分)。

应用图标和标题位置

系统提供的应用图标的行为没有变化。标题槽会自动适应更宽的屏幕尺寸,显示更多字符。顶部部分具有按比例(百分比)设置的内部边距,以避免屏幕尺寸增加时出现任何剪裁。

标题显示在应用图标下方

主卡槽(组件)

主插槽中的所有组件都应将其宽度和高度设置为“展开”,以便自动适应更宽的屏幕尺寸。主插槽部分(以及此插槽中的每个行,在某些情况下)具有按比例(百分比)的内部边距,以避免在屏幕尺寸增加时出现任何剪裁。如果您同时使用圆角半径和布局,则主插槽可能需要更大的边距。

主卡槽显示 2 行,每行 3 个图标

底部插槽

底部按钮或文本的行为没有变化,但按钮和文本框的宽度会自动适应更宽的屏幕尺寸,并增加字符数。底部 slot 上有按比例(百分比)设置的内部边距,以避免屏幕尺寸增大时出现任何剪裁。如果没有底部 slot,系统会自动添加默认边距。

底部按钮文字为“更多”
底部插槽中包含按钮的功能块

底部 slot 以文本形式显示健身目标
底部插槽中包含文字的功能块

主要内容延伸到功能块底部
没有底部插槽的板块

打造差异化体验

一个完全可自定义的布局,内置 60 种或更多排列组合,可实现几乎无限的自定义。功能块基于基于 slot 的系统构建,因此您可以将规范布局中的 slot 替换为任何内容或组件,并将组件设置为多种变体和颜色组合之一。在这种情况下,请保持响应式行为并遵循我们的设计建议。

这些自定义内容应受到限制,并且不应偏离功能块模板。这是为了在用户滚动浏览 Wear OS 设备上的功能块轮播界面时保持一致性。