Tiles 提供对用户完成任务所需信息和操作的快速访问。从表盘轻扫一下,用户就可以查看健身目标的进展、天气等。通过 Tiles 快速启动应用或完成基本任务。
构建响应式和优化的设计
为了帮助您将设计布局适应更大的屏幕尺寸,我们更新了布局和组件的行为,使其具有内置的响应式行为,包括基于百分比的边距和内边距。
如果您使用的是我们的 ProtoLayout 模板,则可以通过 Wear ProtoLayout Jetpack 库的最新 Beta 版本自动继承这些更新。此外,您只需在屏幕尺寸断点后添加了额外内容或组件的地方提供布局即可。有关如何利用更大屏幕尺寸的完整指南和建议,请查看我们的 [Tiles 指南][2]。Tiles 的屏幕高度是固定的,因此我们调整了内边距,以最大限度地利用有限的屏幕空间,同时避免不必要的裁剪。
检查组件是否填满可用宽度
所有组件都应具有响应式构建。通过将高度和宽度设置为“扩展”,它们将填满可用空间。包括必要的边距,以防止内容被圆形屏幕裁剪。
构建自适应和差异化设计
为了最大限度地利用较大屏幕尺寸上的额外空间,请在 225dp 处添加一个尺寸断点。此断点可让您显示更多内容、包含更多按钮或数据,或更改布局以更好地适应较大屏幕。
这需要为每个断点设计不同的布局。较大屏幕设计(225+ dp)可以包含以下附加元素
显示之前隐藏的标题槽
对于断点前包含两行的布局,建议这样做,因为需要移除标题槽以确保最小点击目标尺寸为 48dp。
增加现有组件的尺寸或更改其状态
可以这样做以显示更多细节或使内容更易于一瞥。
在当前布局内添加组件槽
通过添加组件,布局提供了更多选项或附加详细信息。但请确保内容仍然易于一瞥。
在底部添加更多内容
在某些情况下,在底部区域添加操作按钮或内容比在主槽中添加组件更有意义。
注意: 较大的显示尺寸绝不应显示比其更少的信息。这对于在断点处添加的自定义行为尤其重要。
一个常见的例子是当组件或文本尺寸超过断点增加后,最终导致在较大屏幕上显示的内容反而减少。屏幕应随着尺寸的增加而始终显示更多价值。
响应式和自适应行为
响应式和自适应行为取决于布局的三个槽位(部分)。
应用图标和标题槽
系统提供的应用图标没有行为变化。标题槽自动适应更宽的屏幕尺寸,显示更多字符。顶部部分有按比例(百分比)的内部边距,以避免屏幕尺寸增加时出现任何裁剪。
主槽(组件)
主槽中的所有组件都应将其宽度和高度设置为“扩展”,以便它们自动适应更宽的屏幕尺寸。主槽区域以及某些情况下此槽内的每行都具有按比例(百分比)的内部边距,以避免屏幕尺寸增加时出现任何裁剪。如果您结合使用圆角和布局,您的主槽可能需要更大的边距。
底部槽
底部按钮或文本没有行为变化,但按钮和文本框的宽度会自动适应更宽的屏幕尺寸,并容纳更多字符。底部槽具有按比例(百分比)的内部边距,以避免屏幕尺寸增加时出现任何裁剪。如果不存在底部槽,则会自动添加默认边距。



创建差异化体验
一个完全可自定义的布局,内置 60 种或更多排列组合,几乎可以实现无限的自定义。Tiles 采用基于槽位的系统构建,因此您可以用任何内容或组件替换规范布局中的槽位,并将组件设置为众多变体和颜色组合之一。在这种情况下,请保持响应式行为并遵循我们的设计建议。
这些自定义应受到限制,不应偏离 Tiles 模板。这是为了在使用 Wear OS 设备的用户滚动 Tiles 转盘时保持一致性。