2025最新版！3个关键的B端设计规范样式详解

今天主要的分享内容，会直接针对具体规范中的部分样式规范说明，包括色彩、字体、图标三个关键对象。

往期B端干货：

一、色彩规范定义

色彩规范，即定义项目中使用的色彩类型和色号。色彩规范的定义需要完成以下工作内容：

1. 品牌色定义
2. 功能色定义
3. 中性色定义
4. 色彩变体定义
5. 特殊色彩定义

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. 标题字体
2. 正文字体
3. 注释字体
4. 数字字体
5. 其它字体

1. 标题字体

标题就是用于标示关键信息的文本，比如页面名、组件名、数据名等等。一个项目的界面中往往需要用到多种规格的标题，来表现不同层级、权重的信息。

标题的字号控制在 14-32 之间，对于中文标题来说，要使用 Medium 及以上的字重，而标题的种类尽量不要超过 5 个。

2. 正文字体

正文是用于最基础的信息和大段文本展示的字体。因为文本应用场景的多样化，正文也可以使用多种规格。

正文的字号要控制在 13-18 之间，中文的正文仅需使用 Regular 字重，正文的使用数量不要大于 3 个。

在正文定义中，有个额外需要关注的要素，即行高的变动。当文本进行多行展示时，行高必然要经过单独的设置。如果一开始定义的正文规格在多行文本应用中变更了行高，那就等于应用了两种字体。

如果正文会有多行使用场景的话，则字体属性定义直接以满足多行排版要求的行高为准。

3. 注释字体

注释是一些相对次要的信息，比如用户名旁边的 ID 号，输入框旁边的说明小字等。注释本身的权重比正文低，所以正常尺寸也会比正文小。

常用的注释字号通常为 12 或 13，也使用 Regular 字重，常规项目仅需使用一种注释的规格即可。

4. 数字字体

在 B 端项目中数据展示往往非常重要，所以一些数字展示频率非常高的项目，如金融平台、统计工具等就会单独定义数字的字体，提升它们的辨识度。

数字字体的定义意味着要和系统默认字体不同，所以要先和前端确认是否可以在项目中嵌入字体文件，可以的话我们可以选择任意拥有版权（或免费）的字体，不可以的话则从系统包含的字库中选择。

数字字体要定义集中规格和大小，就完全根据界面的实际需求和选择的具体字体决定。

最后特殊字体类型就不展开介绍了，当项目中出现特殊的文本使用需求时，把它们单独归类进行即可。

同理，所有定义出来的字体，都需要在软件的样式表中进行创建，包括编组和有效的命名，方便我们在后续设计中引用。

三、图标规范定义

图标规格，即定义在项目内图标的规格和具体图形，确保图标整体视觉的一致性。

第一个问题是图标的规格，常规 B 端项目往往不会只有一种图标类型，可能还会包含普通工具图标、装饰图标、业务图标、分类图标等等。

这些图标的大小不一，设计风格也不一致，所以要将它们进行总结和规范，防止在不同界面中一直设计出新的图标类型出来。

每个图标类型的规格包含三个要素：

1. 尺寸：该类图标的应用尺寸
2. 栅格：该类图标的栅格辅助系统
3. 风格：图标样式的细节特征

定义完规格以后，还要把图标全部画出来，而这些画出来的图标也要成为规范中的一部分。需要将它们全部整理罗列出来，并在软件中创建成组件（Component/Symbol），方便后续的调用。

图标规范的定义介于样式和组件之间，很多设计规范将图标组件化后，把它置于组件库之中，两者没有太大区别，看设计师自己怎么决定。

结尾

最近还在全力更新新一期 B 端全能班课程内容，想要变强的同学就不要错过了 👉 https://mrajw.xetslk.com/s/hVlyD

欢迎关注作者的微信公众号：「超人的电话亭」