B端系统在这里主要指的是运行在浏览器内的网页管理系统，而B端设计规范通常就是指这类管理系统所应用的设计原则和标准。

制定设计原则和标准的目的，就是建立视觉的统一性，让设计师在项目设计中遵循既定的标准完成界面设计，例如固定的色值、字体的尺寸、间距的大小等等。防止设计师在设计过程中随意发挥，导致最终项目的界面缺乏视觉关联性，影响用户的认知和体验。

作为B端设计师，必然掌握相关的知识，在B端项目中使用和创建设计规范。而首先要理解的，就是B端设计规范包含了两种含义：

• 开源框架规范
• 项目设计规范

开源框架规范

开源框架指的是网上第三方团队或个人上传并开源的B端系统前端框架，提供了实现B端网页所需的各种基础架构、样式、组件、功能的代码，供其它程序员免费使用。

简单来说，就是提供了一套代码“模版”，其它程序员只要使用这套模版就可以快速搭建页面，而不用从零开始造轮子，大大提高了前端程序员的开发效率，节省项目的研发成本。

目前这类前端框架非常多，国内的主流前端开源框架由不同大厂的不同团队提供，因为它们才有财力、人力、技术来完成这部分工作且免费开源（背后原因感兴趣可以自己探索）。

国内最主流的前端开源框架包括下面几个：

• 阿里蚂蚁支付 AntDesign：https://ant.design/index-cn
• 阿里饿了么 Elements：https://element.faas.ele.me/#/zh-CN
• 字节火山 ArcoDesign：https://arco.design/
• 腾讯云 TDesign：https://tdesign.tencent.com/

要注意这些框架的主体是 —— 前端代码，而这些复杂的框架都包含了大量的代码，做的再简单易用也有很高的使用成本，因为使用它们的程序员光看代码会遇到下面的问题：

• 这套框架里有哪些内容
• 不同组件模块的功能和规则
• 代码的调用方式和对应语法

为了解决这种问题，这些前端框架就需要创建官网，并在官网内来展示内容和作出说明，降低程序员的使用门槛。而这类官网中主要会包含下面这些内容：

对于框架来说，本身包含大量的样式内容和功能组件，所以一方面要做出介绍展示，方便引用者查看。另一方面还要提供对应的设计文件，让项目团队可以用它们完成界面的设计，引导程序员实现界面的开发。

所以，开源框架提供的规范介绍和组件库，是对系统内容的说明和解释，并没有明确指出你的项目应该如何设计。比如里面提供的数百种色彩，数十种按钮类型，只是提供给设计师和开发者的选项，可以用也可以不用。

项目设计规范

项目设计规范，则是只服务于当前项目的具体设计规范，包括样式、布局、组件、动效等所有和设计有关的要素。

从上面的说明我们可以知道，框架规范只是框架自己的说明书，项目的设计不管有没有使用它们，都需要另外定义项目的设计规范，两者并不冲突。

我们需要在设计过程中把应用到框架的具体内容和使用场景规范出来，比如品牌色、功能色用了色卡中的哪个色号，标题、正文的具体应用字号和使用场景，或者不同页面类型指定页面布局等等，都是项目规范要完成的工作。

同时，开源框架无法满足所有复杂项目的设计需求，而这部分需求会形成新的设计样式，也就会形成新的项目设计规范。

如果项目完全独立开发，没有使用外部的开源框架规范，则设计规范就需要设计师从零开始独立创建，这反而更容易理解一点。

对于学习B端规设计规范而言，了解B端框架规范和项目规范的差异是最重要的基础，如果分不清两者的区别，不能明白它们共存的逻辑，就无法在真实项目中实现对规范的使用和创建。