了解图块的基本要素。使用图块模板、布局和组件为您的应用设计和构建独特的图块。
基本要素
百分比内边距
顶部、底部和侧边外边距均使用百分比而非固定外边距值来实现按比例缩放。
底部紧凑纸片
对于在图块上启用辅助操作非常重要。一致地放置在距离底部 6.3% 的位置。
底部紧凑纸片
在按钮内，使用一个简短但针对特定操作或目标的词语。此行动号召文本的翻译必须适应字符数限制。您可以将“更多”用作默认或回退的行动号召文本。
位置
- 外边距：距底部 2.1%
- 内边距：顶部和底部 8 dp
按钮规范
- 内边距：两侧 12 dp
侧面内边距/外边距
- 16.64%
建议字符数限制 < 225 dp
- 最大行数：1
- 最大字符数限制：8
- 建议字符数限制：6
- 截断：否
建议字符数限制 > 225 dp
- 最大行数：1
- 最大字符数限制：9
- 建议字符数限制：7
- 截断：否
颜色
应用您的品牌主题
有多种品牌颜色可供选择。它们还可以定制和更改，以适应您的应用外观和风格。
使用Material 主题工具和指南，以您的主色为源色，生成具有足够颜色对比度的颜色。使用生成的调色板替换 Figma 中您的调色板中的主色、主色变体、主色上的颜色、表面色和表面上的颜色，以便正确地为您的图块应用主题。所有其他颜色均不可定制，以确保图块之间的一致性。
其他 Material 主题构建工具
颜色应用
始终将背景颜色设置为黑色。
正确做法
请勿将背景设置为全出血图像或纯色块。
错误做法
排版
Roboto 是 Wear OS 中使用的主要字体。建议将 Body 2 用作默认且最小的字体大小，而 Display 2 是图块可用的最大类型样式。
主要标签
主要标签文本始终距顶部边缘 16.64%，并且内边距为 6.3%。颜色和字体也始终保持一致。
内边距
顶部外边距：16.64%
侧边外边距：6.3%
颜色
On-Background-Variant（灰色 300）
类型
Tiles3P (Roboto) / Button - 15S Bold
如需了解有关字体、字重和大小的更多信息，请参阅排版。
组件
有几种组件可用于构建您的应用图块。这些组件与 Material Design 对齐。
图标按钮
选项：按钮或切换按钮
尺寸：标准、XS、S、L
类型：填充、色调填充和图像
最多列出 7 个选项。
文本按钮
选项：按钮或切换按钮
尺寸：标准、XS、S、L
类型：填充和色调填充
最多列出 7 个选项。
标准纸片
选项：图标、辅助标签和文本对齐
最多列出 2 个选项。
标题纸片（仅限 primary-fill）
居中对齐文本
创建一个突出显示的单一行动号召 (CTA)。
紧凑纸片
类型：填充和色调填充
选项：带图标或不带图标
用于底部按钮槽位。
进度指示器
类型：可定制描边宽度
（默认尺寸：8 dp 和 5 dp）
选项：底部有间隙或全尺寸
指示进度和任务完成。
Figma 设计套件
下载 Wear OS 图块设计套件，即可开始使用图块设计布局，其中包含内置组件、选项和建议，可根据您的需求创建不同的布局，同时遵循 ProtoLayout 模板中的指南。