卡片设计系统

各个功能块具有一些相同的基本设计元素。您可以使用功能块模板和组件为您的应用构建独特的功能块。

基本元素

下表介绍了基本的功能块设计元素。

alt_text alt_text
alt_text alt_text alt_text

应用图标

应用图标由应用开发者提供,在屏幕上暂时显示。

设计区域

每个功能块模板都有一套关于主要内容区域的规则。请务必参阅布局准则。

底部的按钮

按钮对于在功能块上实现次要操作来说非常重要。请将按钮放在屏幕底部向上 6.3% 的位置。

应用图标

当用户滚动浏览功能块轮播界面时,Wear 会自动显示应用图标。应用图标会逐渐淡出画面,因此不应在功能块中实现。如需详细了解如何创建应用图标,请参阅产品图标

alt_text

图 1. 应用图标示例

Wear 会自动显示您的应用图标

假设 Wear OS 会自动显示您的应用图标。
将应用图标纳入功能块设计中 - 如果这样做,图标会显示两次。

按钮

为按钮选择简短的文本。使用的文本应为相应操作的专用文本和号召性用语的目标。请确保按钮文本的翻译符合字符数要求。如果翻译后的按钮文本过长,请将按钮设置为显示更多

alt_text alt_text alt_text

放置位置

按钮规格

类型

如果是表盘,请将按钮放在距离底部 6.3% 的位置。 两侧各留出 12dp 的内边距。 字体大小无法缩放。请将字体大小下限设为 9。对于非拉丁语系的语言,字体大小下限应为 7。

模板

目前提供 4 种功能块模板。如需查看示例,并就您对此模板的使用体验提供反馈,请下载 Tile Design Kit (Figma)

以文本为中心

基于文本的功能块模板专为在功能块上显示文本而设计,例如最新资讯、即将举办的活动以及各种提醒。这类模板通常用于显示登录、错误和设置状态,以让用户知道发生的情况并提供明确的号召性用语。

以文本为中心

以按钮为中心

以按钮为中心的功能块模板专为含多达 5 项主要操作的功能块而设计。使用这类模板可快速启动特定任务。

以按钮为中心

以信息为中心

以信息为中心的功能块模板会显示概要指标和进度。这对与健康和健身相关的功能块特别有用。它提供了灵活多样的内容显示选项。为了保持一目了然的显示效果,请优先考虑重要数据并避免在模板中呈现太多内容。

以信息为中心

以数据为中心

以数据为中心的功能块模板是一种具有多样用途的模板,旨在显示可汇总周期信息的图表和图形元素。它可以灵活且直观地呈现数据,对创建可视的空状态非常有用。坚持使用简单的图形元素对确保功能块始终一目了然至关重要。

以数据为中心

颜色

为确保功能块一目了然,请将您使用的颜色限制为 3 种。

将背景颜色设为黑色。
将背景颜色设为全宽图片或颜色。

排版

在 Wear OS 设备上使用 Roboto 作为主要字体。使用“Body 2”作为默认字号和最小字号,使用“Display 2”作为最大字号。

字号

如需详细了解字体、粗细和字号,请参阅排版

组件

请使用组件来构建功能块。遵循 Wear Material 主题设置准则,通过自定义组件颜色来传达品牌信息。

如需查看组件示例,请下载 Tile Design Kit (Figma)

组件 变体 示例
按钮 标准按钮

可供选择的尺寸:标准、大和超大

alt_text
按钮 标准文本按钮

可供选择的尺寸:标准、大和超大

alt_text
条状标签 主要标准条状标签 alt_text
条状标签 次要标准条状标签 alt_text
条状标签 小头像条状标签 alt_text
条状标签 大头像条状标签 alt_text
条状标签 紧凑(底部)条状标签 alt_text
进度指示器 标准进度指示器 alt_text
进度指示器 带间隔的进度指示器 alt_text

资源

如需了解详情,请参阅功能块设计准则