质感设计/基础/设计代号

概览

设计代号是所有界面元素的构建块。在设计、工具和代码中使用相同的代号。

• 设计代号代表样式值，如色彩、字体和尺寸。
• 使用设计代号代替硬编码。
• 每个代号都以其使用方式或位置命名（例如：md.fab.container.color为FAB设置容器色彩）。
• 即使代号的值发生了变化，它的名称和用途也保持不变。
• 质感设计有三类代号：引用、系统和组件。

使用设计代号而非硬编码可以简化使用设计系统的建立、维护和应用到更多产品等工作。

速记

• 代号是一种平台无关的格式，也可以用于特定于平台代码。
• 有三类的代号：引用、系统和组件。质感设计目前使用引用和系统代号，组件代号正在开发中。
• 代号有助于维护设计系统中的对齐和一致性。

什么是设计代号

设计代号表示小的、重复的设计决策，这些决策构成了设计系统的视觉样式。代号用于替代固定值（比如色彩的十六进制代码），并使用含义清晰的词汇命名。

一个质感设计代号由两部分组成：

• 类似代码的名称，如“md.ref.palette.secondary90”。
• 关联的值，如#E8DEF8。

代号的值可以是以下几种东西：色彩、字体、度量，或另一个代号。

设计代号将样式选择有效连接起来，若非如此将缺乏明确的关联。

例如，如果设计师的模型和开发者的实现都引用了称为第二容器色彩的相同代号，二者可以确信在各自工作中使用了同一种色彩。即使代号所关联的色彩值发生了改变，这种一致性也能得到保证。

设计代号为何重要

代号让设计系统具有单一事实源，提供了用于记录和跟踪样式选择和变更的仓库。

当使用代号进行设计和实现时，样式变更将在整个产品或产品套件中一致的传播。

因为代号是可重用的和目标驱动的，它们可以定义系统级别的主题和环境更新。例如，代号可以用于整体应用高对比度的色彩方案以提高可见性，或者更改字体刻度让电视上的小文本更清晰。

代号和质感设计

在过去，质感设计样式通过指导方针、设计文件、工具和特定平台组件库进行传播。

使用设计代号，你现在可以下载、定制和应用质感设计样式，并将其集成到你的设计和开发过程中。

代号允许以平台无关且可共享的格式记录设计决策。

判断设计代号是否对你适用

设计代号对下列情况最有帮助，最有效：

• 你计划变更产品设计或建立一个新产品。
• 你的设计系统应用于多个产品或平台。
• 你希望将来能够轻松地维护或变更样式。
• 你想充分利用质感设计，包括动态色彩功能。

设计代号对下列情况帮助有限：

• 你现在的应用使用硬编码，并在未来一、两年内不会改变。
• 你的产品没有设计系统。

如何理解代号

代号表格

样式

在质感设计指引中，你会发现列出色彩和字体排印的设计代号参考表格。

代号参考表格可用于查找质感设计默认的色彩、字体、字体尺寸、线条粗细等值。

这些表格将职责、系统代号、引用代号和默认值关联起来。

组件规范

你还可以在组件指引的规范部分找到设计代号。

这些表格显示了带有下列数据的图表：

• 状态：组件的交互状态，例如可用、悬停或按下。
• 元素：组件中应用代号或值的部分，例如按钮的容器或标签文本。
• 设计属性：样式中代号或值应用的方面，例如色彩或字体。
• 职能：系统代号的别名（例如：第二容器色彩、标题1）。
• 代号或值：定义设计属性的信息，保存在代号或硬编码中。

使用代号表格

示例：要查找填充按钮标签文本的默认色彩，首先导航到公共按钮指引页面的规范选项卡。

接下来，查找展示填充按钮色彩值的表格，查找元素部分列出的标签文本。

代号列中用于标签文本色彩的代号就是你在找的代号。

理解代号名字

代号名字的各部分由点分隔，从最一般的信息（md）到最具体（on-secondary）。

A

设计系统中的所有代号名都以系统名开头，例如md表示质感设计Material design。

B

代号类型的缩写：ref是引用代号，sys是系统代号，comp是组件代号。

C

代号名以一个传递描述代号职能的说明性名字结尾。

代号类别

质感设计包含三种代号：

引用代号

与具体值关联的所有可用代号。

系统代号

让设计系统具有自身特征的决策和职能，包括色彩、字体排印、高程、形状等。

组件代号

分配给组件中元素的设计属性，如按钮图标的色彩。

使用三种类型代号，团队可以全盘更新设计决策或只修改单个组件。

引用代号

引用代号以md.ref开头。

这些代号构成设计系统中的所有样式选项。

引用代号通常指向一个固定值，例如色彩十六进制代码、字体或线条粗细。通常包括：

• 色彩十六进制值
• 字体
• 线条粗细

引用代号也可以指向其他引用代号，引用代号不会因用户或设备环境而改变。

质感设计的引用代号提供了保证色彩、类型、度量等一致性的起点。

系统代号

系统代号以md.sys开头。

这些决策将特定主体或环境中的设计语言系统化。

系统代号定义了界面中引用代号的目的。

在使用主题时，系统代号可以根据环境指向不同的引用代号，例如浅色主题或深色主题。如果可能，系统代号应该指向引用代号，而非一个固定值。

组件代号

所有组件代号都以md.comp开头。

组件代号表示构成组件的元素和值，例如容器、标签文本、图标和状态。

如果可能，组件代号应该指向系统代号或引用代号，而非类似十六进制值的硬编码。

虽然有些组件的样式不会用代号描述，但是当一个设计决策应用于多个具有类似用途的组件时，应该使用代号。

注意：质感组件代号目前仍在开发中。

环境：不同的默认值

代号可以在不同条件下指向不同的值。这些条件称为环境，随环境变化的值称为环境值。

不同环境的例子包括：设备因素、深色主题、密集布局和从右向左的文本系统。

你可以把环境当成一种标签。如果代号值被打上深色主题标签，那么它将在深色主题环境中覆盖默认的代号值。

如何使用代号

下载质感设计基准代号

质感设计的基准主题包括设计代号和默认值。下载主题并作为设计系统包Design System Package（DPS）进行定制和协作，并在你的设计和产品代码中使用。了解DSP JSON格式。

在Figma中使用代号

首先从社区页面安装质感主题生成器Material Theme Builder Figma插件。

生成代号

• 打开Figma并导航到：Plugins > Material Theme Builder > Open Plugin。
• 选择Get started，创建具有基准值的质感主题。色彩和文本样式将在右侧设计面板中展示。代号生成完毕时，画板将包含浅色和深色方案的调色板，以及默认标尺。
• 代号已经转换为Figma样式，可以在设计中使用。

通过DSP导入代号

• 打开Figma并导航到：Plugins > Material Theme Builder > Open Plugin。
• 打开主题下拉菜单，选择Import DSP。
• 从文件列表中选择代号DSP文件。色彩和文本样式将在右侧设计面板中展示。代号完全导入时，画板将包含浅色和深色方案的调色板，以及默认标尺。
• 代号已经转换为Figma样式，可以在设计中使用。

更新代号值

• 使用材质主题生成器Figma插件（只更新色彩）

  • 打开Figma并导航到：Plugins > Material Theme Builder > Open Plugin。
  • 选择Custom，选择色彩。色彩和文本样式将在右侧设计面板中展示。代号完全导入时，画板将包含浅色和深色方案的调色板，以及默认标尺。
  • 代号已经转换为Figma样式，可以在设计中使用。

使用Figma样式

• 在Figma中，导航到定义代号化样式的文件。快捷方式：右键单击右侧边栏中的样式，选择“转到样式定义”。
• 在右侧边栏中，将鼠标悬停在要更新的样式上，并在选择新出现的调整图标，或者右键单击样式选择器中的样式并选择编辑样式。
• 使用编辑样式面板对代号名称、描述、属性等进行更改，然后关闭面板。

在产品模型中使用代号

• 不要手动设置布局中元素的色彩或排版，使用Figma样式表示设计代号。这有助于确保开发者正确理解和使用设计决策。

在质感设计工具包中使用代号

• 在Figma中复制质感设计工具包Material Design Kit。
• 导航到Plugins > Material Theme Builder > Open plugin。
• 选择组件后，选择swap。这将使用你生成的代号样式替换质感设计基准主题中的样式值。

导出代号

• 打开Figma并导航到：Plugins > Material Theme Builder > Open Plugin。
• 导航到Export选项卡，选择你想要导出的格式（Android，Jetpack Compose，DSP）。
• 命名导出的.zip文件并选择Save。
• 代号已经导出并且可以共享。