了解 ProtoLayout Material 布局模板和示例设计布局，以便为您的应用设计和构建独特的 Tile。
ProtoLayout Material 布局模板
为了帮助您创建推荐的自适应布局体验，请使用提供的布局模板。这些模板涵盖了常见的设计用例。
每个模板都有可选位，以便实现特定的密度和布局
这些固定高度的 ProtoLayout Material 布局模板是构建所有 Tile 的基础和框架。它们之间的唯一区别在于内置的边距和内边距。为了与其他应用的 Tile 设计保持一致，请使用上图中推荐的位。
要自定义这些布局并在主要内容位中包含各种组件组合，请使用这些附加布局组件
- 多按钮位：创建圆形按钮网格
- 多内容位：创建最多三列内容，通常是数据点。
- 自定义位：所有位均可自定义，并可包含任何组件。在某些情况下，该位包含图片或图表，而不是系统提供的组件。
规范设计示例布局
要设计您的应用 Tile，请使用此处描述的布局模板以及Figma 设计模板中提供的模板。
为了在 Tile 设计中保持一致性，请使用这些规范的设计布局。它们基于常见的 UX 用例，Figma 设计和示例提供了您可以开始使用的预构建布局，帮助您更快地创建 Tile。这些模板中显示的布局非常灵活，您可以使用所需的任何内容填充这些位。
设计工具包让您可以充分探索这些布局的灵活性。您可以在自定义布局的同时，与所有 ProtoLayout Material 布局模板保持一致性。
不建议自定义的元素包括以下内容
- 主要标签样式和位置
- 进度指示器样式和位置
- 底部紧凑纸片样式和位置
根据以下顶级标准，有几种 Tile 布局可供选择。考虑您的 Tile 的主要目标是什么，以及您想要显示的内容类型。
以文本为中心的布局
此布局使用PrimaryLayout 模板。
此布局最适用于包含大量文本和明确号召性用语的 Tile，以及表示空状态和已退出登录状态的 Tile。
为了在屏幕尺寸较小的设备上最大化可用高度，请移除辅助标签位和主要纸片位。
以按钮为中心的布局
以按钮为中心的布局包括包含纸片的布局和包含按钮的布局。
以按钮为中心（纸片）
此布局使用PrimaryLayout 模板。
纸片组件显示在主要内容位中。在使用两个标准纸片的布局中，请勿在屏幕尺寸较小的布局中使用辅助标签。
以按钮为中心（按钮）
此布局使用PrimaryLayout 模板。
要在网格布局中显示多个按钮，请在主要内容位中使用 MultiButtonLayout。此组件在屏幕尺寸较小的设备上最多可容纳六个按钮，在屏幕尺寸较大的设备上可容纳更多按钮。
在包含两行按钮的布局上，请勿在屏幕尺寸较小的设备上使用辅助标签位。
以信息为中心的布局
以信息为中心的布局包括包含进度指示器和不包含进度指示器的布局。
以信息为中心（不含进度指示器）
此布局使用PrimaryLayout 模板。
要显示多列数据，请在主要内容位中使用 MultiSlotLayout。此组件在屏幕尺寸较小的设备上最多可容纳三列，在屏幕尺寸较大的设备上可容纳更多内容或列。要实现最终示例（跑步统计信息）中所示的布局，请在每列中使用主标签和辅助标签，并且不要使用下方典型的辅助标签位。
以信息为中心（含进度指示器）
此布局使用EdgeContentLayout 模板。
使用此布局显示进度和一个关键指标。进度指示器会减少布局中心可用的空间。
此布局保留了与不含进度指示器的布局相同的位，但主要纸片位除外。
要创建最终示例（天气）中所示的布局，请在主要内容位中使用 MultiSlotLayout 组件。
以数据为中心的布局
此布局使用PrimaryLayout 模板。
使用此布局显示图形和图表，或者在屏幕尺寸较大的设备上 Tile 需要最大视觉灵活性时使用此布局。
为了最大化可用高度，请关闭辅助标签位和主要纸片位。此配置允许您在屏幕尺寸较大的设备上显示更大的图形以及附加信息。
响应式设计
以下模板展示了 Tile 布局如何响应性地适应屏幕尺寸较大的 Wear OS 设备。这些示例说明了内置行为，有助于最大化较大显示屏尺寸提供的额外屏幕空间。作为应用开发者，您还可以定义多种可能的布局，并设置断点告知系统要显示哪种布局（“较小屏幕”布局或“较大屏幕”布局）。
详细了解如何设计自适应布局。
以文本为中心的设计布局
此模板有助于显示文本内容，例如最新新闻、即将发生的事件和提醒。它也常用于登录、错误和设置状态，提供空间告知用户正在发生的事情并提供明确的号召性用语。
以按钮为中心的设计布局
这些模板有助于显示最多 5 个相关的主要操作，例如快速启动特定任务。它为用户创建清晰、简洁、易于一瞥的 Tile，有助于简化您的应用交互。
包含纸片的以按钮为中心的布局
包含圆形按钮的以按钮为中心的布局
以信息为中心的设计布局
这些模板（包含和不包含进度指示器）显示高级别指标和实现目标的进度。它们对于与健康和健身用例相关的 Tile 特别有用。它还为内容显示和主要号召性用语提供了灵活的选项。
为了保持易于一瞥，请优先显示重要数据，并避免 Tile 过载。
以数据为中心的设计布局
此模板以图表或类似图片的形式呈现信息。
下载适用于 Wear OS 的 Tile 设计工具包
下载设计工具包，开始使用 Tile 设计布局。该工具包包含内置组件、选项和建议，可实现多达 80 种不同的布局以满足您的需求，同时与 ProtoLayout 编码模板保持关联。
下载 Figma 设计工具包 (64 MB)
SHA-256 哈希值：db443d4ba5cc10716719bed84b859f9d66cbd3a0a41694666a3752415434b362