今天主要的分享内容，会直接针对具体规范中的端设部分样式规范说明 ，包括色彩、计规解字体 、范样图标三个关键对象 。式详
一 、最新色彩规范定义
色彩规范 ，关键即定义项目中使用的端设色彩类型和色号 。色彩规范的计规解定义需要完成以下工作内容 ：
- 品牌色定义
- 功能色定义
- 中性色定义
- 色彩变体定义
- 特殊色彩定义
1. 品牌色定义
品牌色是一个品牌或产品的色彩身份标识 ，用于输出和强化品牌认识 ，式详也是最新项目中最重要的颜色类型，要应用在项目全权重最高的关键元素和区域 ，是端设奠定项目色彩应用的基础。
品牌色包含两种色彩类型 ，主色和辅助色 。
品牌色的定义包含两种情况 ，第一种是项目在设计前已经创建过品牌 VI 和色彩规范 ，则项目中就可以沿用这些色彩 。比如为麦当劳设计某套内部管理系统 ，那么就可以沿用黄色作为主色（金拱门 Uknow ？） ，红色作为辅助色 。
第二种情况 ，则是没有关联品牌 VI 规范的项目 ，要重新选择项目的品牌主色和辅助色 ，这就需要设计师自己根据项目的设计情况做出选择 。
对于普通 B 端项目来说 ，品牌色只需要定义个主色即可，无需额外增加品牌辅助色 。且 B 端产品相对 C 端产品的使用场景更单一 ，主要输出的情绪是专业 、稳重 、商务 、科技 ，所以主色基本就围绕在蓝 、绿 、红、紫这寥寥几个色相范围内选择 。
最后要强调如无特殊理由 ，项目中的品牌主色有且只能有一个 。
2. 功能色定义
功能色是借助色彩特性传达特殊信息的相应色彩 ，比如错误提示用红色，正确提示用绿色 ，警示操作用黄色等等。
功能色的定义由项目中应用的字段 、控件 、组件内容决定，因为这些元素需要用到特定的色彩来有效地传递信息 ，而不仅仅是为了视觉的美观程度创建功能色 。所以 ，要定义多少功能色也有需求推导而来 ，而不仅仅是考虑视觉的美观程度 。
这也是功能色和品牌辅助色的不同 ，辅助色更多是配合主色来实现一些特殊的视觉方案和观看体验 ，突出品牌的调性和特质。
但品牌色也可以作为功能色使用 ，比如前面麦当劳的配色 ，辅助色可以作为错误、警告色来使用 ，不用额外再创建一个相似的红色功能色 。
3. 中性色定义
中性色即没有色彩的颜色，是构成项目基础色彩框架和信息对比度的黑 、白、灰色。一个项目想要有效的呈现背景 、描边 、文字信息 ，就需要应用多种中性色实现强弱的对比。
中性色的定义主要由 HSB 中的 B 值（灰度值）决定 ，B 值越小越黑越大越亮 。
中性色的定义数量无需过多，合理的中性色数量在 6-8 个即可 。虽然中性色名义上是无色（饱和度 S 为 0） ，但实际项目应用中 ，可以适当为中性色填加蓝色的色相 ，让界面整体偏冷色调，降低用户的用眼疲劳。
4. 色彩变体定义
色彩变体 ，是指一种色彩类型的同状态变化 ，用于满足界面交互过程或信息表现上的变体需要 。
比如一个按钮 ，包含了默认 Defult、鼠标悬浮 Hover 、鼠标点击 Click 、禁用 Disable 等状态 ，我们往往需要使用不同的色彩来表达这些状态，通过色彩的差异让用户感知到状态的变更 。
那如果按钮默认使用的是主色 ，那么它在其它状态中应用的颜色应该属于哪种类型？是品牌色 ，还是功能色……这么归类肯定都不合适，把色彩变体本身作为一个分类也不合适 。
色彩变体是一个色彩类型的不同状态和表现 ，创建变体只是为这个色彩类型做补充 ，而不是创建出新的色彩类型出来 。
5. 特殊色彩定义
除了前面提到的色彩类型外 ，往往根据项目需求还会定义一些特殊的色彩类型 。
比如图表使用多独立定义一套图表用色 ，或是装饰图标用得多定义标准渐变色，以及 SaaS 运营活动多另外创建一个运营用色标准等等 。
色彩的定义根据实际设计的需求触发，需要加多少定多少 。无需像 B 端组件库一样提前定义出一整套色卡再进行选色。
所以定义好的颜色 ，可以在软件的色彩样式表中进行添加 ，并创建相应的分类和命名 ，方便我们在后续设计中进行选择 。
二 、字体规范定义
字体规范 ，是定义项目中使用的文字类型和具体属性参数 。字体规范的定义要完成对以下字体类型的设置 ：
- 标题字体
- 正文字体
- 注释字体
- 数字字体
- 其它字体
1. 标题字体
标题就是用于标示关键信息的文本 ，比如页面名 、组件名 、数据名等等 。一个项目的界面中往往需要用到多种规格的标题 ，来表现不同层级、权重的信息 。
标题的字号控制在 14-32 之间，对于中文标题来说 ，要使用 Medium 及以上的字重 ，而标题的种类尽量不要超过 5 个。
2. 正文字体
正文是用于最基础的信息和大段文本展示的字体 。因为文本应用场景的多样化 ，正文也可以使用多种规格。
正文的字号要控制在 13-18 之间 ，中文的正文仅需使用 Regular 字重 ，正文的使用数量不要大于 3 个 。
在正文定义中 ，有个额外需要关注的要素 ，即行高的变动 。当文本进行多行展示时 ，行高必然要经过单独的设置 。如果一开始定义的正文规格在多行文本应用中变更了行高 ，那就等于应用了两种字体 。
如果正文会有多行使用场景的话 ，则字体属性定义直接以满足多行排版要求的行高为准。
3. 注释字体
注释是一些相对次要的信息 ，比如用户名旁边的 ID 号 ，输入框旁边的说明小字等 。注释本身的权重比正文低 ，所以正常尺寸也会比正文小 。
常用的注释字号通常为 12 或 13，也使用 Regular 字重 ，常规项目仅需使用一种注释的规格即可 。
4. 数字字体
在 B 端项目中数据展示往往非常重要 ，所以一些数字展示频率非常高的项目 ，如金融平台 、统计工具等就会单独定义数字的字体 ，提升它们的辨识度 。
数字字体的定义意味着要和系统默认字体不同 ，所以要先和前端确认是否可以在项目中嵌入字体文件 ，可以的话我们可以选择任意拥有版权（或免费）的字体 ，不可以的话则从系统包含的字库中选择 。
数字字体要定义集中规格和大小 ，就完全根据界面的实际需求和选择的具体字体决定 。
最后特殊字体类型就不展开介绍了 ，当项目中出现特殊的文本使用需求时 ，把它们单独归类进行即可 。
同理 ，所有定义出来的字体，都需要在软件的样式表中进行创建 ，包括编组和有效的命名 ，方便我们在后续设计中引用 。
三 、图标规范定义
图标规格 ，即定义在项目内图标的规格和具体图形，确保图标整体视觉的一致性 。
第一个问题是图标的规格 ，常规 B 端项目往往不会只有一种图标类型 ，可能还会包含普通工具图标 、装饰图标 、业务图标、分类图标等等 。
这些图标的大小不一 ，设计风格也不一致，所以要将它们进行总结和规范，防止在不同界面中一直设计出新的图标类型出来 。
每个图标类型的规格包含三个要素 ：
- 尺寸 ：该类图标的应用尺寸
- 栅格：该类图标的栅格辅助系统
- 风格：图标样式的细节特征
定义完规格以后，还要把图标全部画出来 ，而这些画出来的图标也要成为规范中的一部分 。需要将它们全部整理罗列出来 ，并在软件中创建成组件（Component/Symbol） ，方便后续的调用 。
图标规范的定义介于样式和组件之间 ，很多设计规范将图标组件化后 ，把它置于组件库之中 ，两者没有太大区别 ，看设计师自己怎么决定 。
结尾
最近还在全力更新新一期 B 端全能班课程内容 ，想要变强的同学就不要错过了 ? https://mrajw.xetslk.com/s/hVlyD
作者 ：超人的电话亭
