各个功能块具有一些相同的基本设计元素。您可以使用功能块模板和组件为您的应用构建独特的功能块。
基本元素
下表介绍了基本的功能块设计元素。
![]() |
![]() |
|
![]() |
![]() |
![]() |
应用图标应用图标由应用开发者提供,在屏幕上暂时显示。 |
设计区域每个功能块模板都有一套关于主要内容区域的规则。请务必参阅布局准则。 |
底部的按钮按钮对于在功能块上实现次要操作来说非常重要。请将按钮放在屏幕底部向上 6.3% 的位置。 |
应用图标
当用户滚动浏览功能块轮播界面时,Wear 会自动显示应用图标。应用图标会逐渐淡出画面,因此不应在功能块中实现。如需详细了解如何创建应用图标,请参阅产品图标。
图 1. 应用图标示例
Wear 会自动显示您的应用图标
![](https://developer.android.google.cn/static/wear/images/tiles/app-icon-do.png?authuser=5&hl=he)
正确做法
![](https://developer.android.google.cn/static/wear/images/tiles/app-icon-dont.png?authuser=5&hl=he)
错误做法
按钮
为按钮选择简短的文本。使用的文本应为相应操作的专用文本和号召性用语的目标。请确保按钮文本的翻译符合字符数要求。如果翻译后的按钮文本过长,请将按钮设置为显示更多。
![]() |
![]() |
![]() |
放置位置 |
按钮规格 |
类型 |
如果是表盘,请将按钮放在距离底部 6.3% 的位置。 | 两侧各留出 12dp 的内边距。 | 字体大小无法缩放。请将字体大小下限设为 9。对于非拉丁语系的语言,字体大小下限应为 7。 |
模板
目前提供 4 种功能块模板。如需查看示例,并就您对此模板的使用体验提供反馈,请下载 Tile Design Kit (Figma)。
以文本为中心
基于文本的功能块模板专为在功能块上显示文本而设计,例如最新资讯、即将举办的活动以及各种提醒。这类模板通常用于显示登录、错误和设置状态,以让用户知道发生的情况并提供明确的号召性用语。
以按钮为中心
以按钮为中心的功能块模板专为含多达 5 项主要操作的功能块而设计。使用这类模板可快速启动特定任务。
以信息为中心
以信息为中心的功能块模板会显示概要指标和进度。这对与健康和健身相关的功能块特别有用。它提供了灵活多样的内容显示选项。为了保持一目了然的显示效果,请优先考虑重要数据并避免在模板中呈现太多内容。
以数据为中心
以数据为中心的功能块模板是一种具有多样用途的模板,旨在显示可汇总周期信息的图表和图形元素。它可以灵活且直观地呈现数据,对创建可视的空状态非常有用。坚持使用简单的图形元素对确保功能块始终一目了然至关重要。
颜色
为确保功能块一目了然,请将您使用的颜色限制为 3 种。
![](https://developer.android.google.cn/static/wear/images/tiles/background-color-do.png?authuser=5&hl=he)
正确做法
![](https://developer.android.google.cn/static/wear/images/tiles/background-color-dont.png?authuser=5&hl=he)
错误做法
排版
在 Wear OS 设备上使用 Roboto 作为主要字体。使用“Body 2”作为默认字号和最小字号,使用“Display 2”作为最大字号。
如需详细了解字体、粗细和字号,请参阅排版。
组件
请使用组件来构建功能块。遵循 Wear Material 主题设置准则,通过自定义组件颜色来传达品牌信息。
如需查看组件示例,请下载 Tile Design Kit (Figma)。
组件 | 变体 | 示例 |
按钮 | 标准按钮 | 可供选择的尺寸:标准、大和超大 ![]() |
按钮 | 标准文本按钮 | 可供选择的尺寸:标准、大和超大 ![]() |
条状标签 | 主要标准条状标签 |
![]() |
条状标签 | 次要标准条状标签 |
![]() |
条状标签 | 小头像条状标签 |
![]() |
条状标签 | 大头像条状标签 |
![]() |
条状标签 | 紧凑(底部)条状标签 |
![]() |
进度指示器 | 标准进度指示器 |
![]() |
进度指示器 | 带间隔的进度指示器 |
![]() |
资源
如需了解详情,请参阅功能块设计准则。