Design System & Application - Chapter 4 分类样式 Type & Style

本篇主要介绍文本部分通过其作用进行通用性分类，并描述通用样式（主要涉及到 字重 的使用，颜色以 中性色 为主），和 UI 组件相关的部分不在此说明。

本篇内容均针对 标准尺寸（单倍网格，即 @1x = 4px）进行说明。

---

Part 1

标题类 - Title

所有标题，通常情况下都需要进行 加重（W900） 处理，同时配以 重色（CN900）。文档类结构 的标题，在引入 Semibold 字体的情况下，建议使用 Semibold 来单独处理。

标题类 的字号一般会在 标题类字号（H1 到 H6）中进行选择。

---

Part 2

正文类 - Main Text

正文通常使用 标准字重（W400），配以 标准色（CN700），它是最广泛出现在产品中的文字类型。

正文类 的字号通常是 14px（Text，有时可能是 Text Large）。

---

Part 3

说明类 - Explain

说明类文字通常用于解释某项内容，在配合主要内容出现的情况下，它是相对次要的文本。因此我们也总是使用较小的字号及较弱的颜色，以降低它的权重。

同样，它在大多数情况下，都是 标准字重（W400），配以 次级色（CN500）。

大多数情况下，说明类 的字号选择都是固定的 12px（Secondary）。

---

Part 4

标签类 - Label

无论是指标的 Label，还是表格中的 Label，我们都建议采用 标准字重（W400）。大多数情况下，我们都希望用户在读取 Value 时，就可以知道它的含义，进而弱化 帮助性（解释性）文字对其阅读上的干扰。并且它们总是要配合较小的字号，使其相较于 Value 的权重降低。

所以，通常它都是 标准字重（W400），配以 次级色（CN500）。

大多数情况下，标签类 的字号选择都是固定的 12px（Secondary），配合 卡片（Card） 或 指标板（Parameter Board） 出现的情况下，可能会使用更大的字号。

---

Part 5

数值类 - Value

我们将 数值类 分为 控件类数值 和 指标看板类数值。

控件类数值 由于存在 交互性载体（如 Input 或 Table 等控件形态的最近载体），通常都使用 标准字重（W400）。

指标看板类数值 由于不存在交互性载体，我们通常都会对其使用 加重（W900） 处理，同时使用较大的字号，大幅提高它的权重。

实际上，卡片 中的数值是按着看板类进行处理的，但是卡片本身也是一种交互性载体，不过其特殊的情况，使我们往往只考虑它的 最近结构（Nearby Structure），而这个结构通常是 指标形态 的，而非控件形态。

这里我们只对 指标看板类 进行说明，通常情况下，它的字重选择都是 加重（W900），配以 重色（CN900）。

字号的选择较多，视具体使用场景而定。

---

Part 6

辅助类 - Accessory

辅助类 涵盖较广，但它们（如 时间戳 及 单位）总是相对次要的存在，所以多数情况下，它们都是 标准字重（W400），配以较小的字号，以此来降低它的比重。

单位（Unit） 由于总是配合 数值（Value） 出现的，在数值被强化的情况下，单位通常会使用 标准色（CN700）。其他辅助类的颜色通常会选择 弱色（CN300）。

单位 的字号选择也总是相对于 数值 而言的。

辅助类 的字号选择大多数情况下，都是 12px（Secondary），移动端会出现 11px（Accessory） 甚至 10px（Accessory Small） 的情况，但相对而言出现的频率会很低，过小的文字不利于阅读。

---

Part 7

装饰类 - Decorate

装饰类 没有标准的样式，它们可能因为风格和作用的不同，存在各种各样的样式形态，根据实际情况去使用即可。