设计规范虽然基础相同，但在应用到不同的业务环境和企业形态时，会因具体情况存在许多变化。对于B端设计的新手而言，他们可能会因为各种B端组件太多而感到迷茫，不清楚在具体哪种场景下使用哪种组件才最为合适。这个问题主要是因为我们通常接触到的B端设计知识过于零碎，缺少一个完整的规范性总结。因此，我们必须先了解B端设计中包含哪些规范，然后在实际设计过程中考虑如何恰当地运用它们。
Pixso设计团队凭借其在B端设计实践中积累的经验，编制了一套全面的B端设计规范，这其中包括了色彩规范、字体规范、图标规范、布局栅格以及组件规范等方面。在介绍组件规范时，详细列出了B端组件库中13种常用的组件。这套规范无疑可以对初次接触B端设计的新手提供很大的帮助，并有助于提高他们的工作效率。
色彩规范
色彩规范一般包含品牌色、辅助色和中性色。在B端产品中，颜色除了用来传达品牌调性外，更多的用来传达一些提示或警告。通过不同的颜色给予用户信息反馈，不同的状态运用不同的颜色展示，比如：
•绿色通常代表成功、已发送、已签到等状态；
•红色通常代表失败、未发布、未签到等状态。
另外，通过颜色可以对内容进行分层级展示，提高用户阅读信息的效率。
品牌主色
一套产品只有一个品牌主色，是界面中出现最多的颜色。在需要用色强调而且没有其他要求时，一般都会选择主色。
在工作日常中，很多企业会要求品牌主色必须是公司的品牌色。(戳此参阅UI设计中创建颜色方案的五个技巧)
例如Pixso的品牌色是饱和度较高的紫色，那么在定主色时，我们就不能跳脱这个色彩范围。在这样的情况下，我们可以考虑将品牌色饱和度降低或者用其他暗色系的颜色进行搭配，从而在观感上尽量显得不是那么刺眼，降低用户眼睛疲劳度。
辅助色
用于提示其他场景，比如：成功、失败、警告、无效等，辅助色主要是帮助用户高效获得信息。
中性色
常用于文本、背景、边框、分割线等。
字体规范
在B端的产品设计上，文字的字体、字重、字号、行号、颜色用来区分界面信息的层级关系。(戳此参阅网页字体怎么设置？大厂设计师手把手教你）
**** **字体**
中文字体一般用苹方体、思源黑体、微软雅黑，英文字体一般为Helvetica Neue、思源黑体、微软雅黑。
字号
系统中字体大小为：12px、14px、16px、18px、20px、24px、26px、28px、30px、36px......
在开发中，浏览器最小字体一般为12px，注意设计中不可以低于最小字体设计。
行高
行高上，可以采用行高=文字大小+8px，例如14px字体，则14px+8px=22px，则行高为22px。
字重
通常采用regular、medium、semibold三个字重。
颜色
目前最常用的字体颜色是#333333、#666666、#999999，区分标题、正文、辅助文字，具体可根据设计进行调节。
图标规范
在B端设计中，图标要简洁易懂，用来帮助用户更快导航，提高用户使用产品的效率。(戳此参阅UI 中的图标设计原则)
栅格系统
如何在手机和网页之间做好适配？让产品在不同尺寸下都能为用户提供良好的用户体验，栅格系统可以帮助我们做到这一点。栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。通常，在网页设计中经常使用8作为栅格的最小步进单位，一些知名公司都以8为最小单位划分网格，规范页面秩序，比如：Ant Design、Matierial Design等。
组件规范
B端组件库的建立，常用的组件包括按钮组件、面包屑、导航菜单、分页、下拉控件、上下左右滑条、日期选择框、单选复选框、树形选择、标签页、输入框、表单、上传样式、气泡卡片、表格列表、警告提示、弹窗等。
**按钮**
按钮的五种样式：主按钮、默认按钮、虚线按钮、文本按钮、链接按钮。
按钮的四种状态：常规、悬停、选中、禁用。
面包屑
显示当前页面在系统层级结构中的位置，并能向上返回，用于系统拥有超过两层以上的层级结构，同时可以告诉用户当前页面在哪里，并提供导航功能。
导航菜单
导航菜单为页面和功能提供导航的菜单功能，用户依赖导航在各个页面中进行跳转。
分页
采用分页的形式分隔长列表数据，每次只加载一个页面。当加载/渲染所有数据将花费很多时间时可采用分页。
下拉菜单
当选项过多时，使用下拉菜单展示并选择内容。
时间日期选择器
用于选择或输入日期，分为固定时间点&范围、任意时间点&范围、选择日/月/年范围。
选择框
用于在一组备选项中进行选择，包括单选框和多选框。
标签页
通过切换不同的选项标签，查看不同的页面内容。
输入框
需要注意：输入框在输入前、输入中、输入后三种不同的状态设计。
上传
通过点击或拖拽上传文件。
表格
用于展示多条结构类似数据，可对数据进行排序、筛选、对比或其他自定义操作。
警告提示
用于页面中展示重要的提示信息。警告提示一般分为四个状态：成功、信息注释、警告、错误(失败)。
弹窗
用于消息提示、成功提示、错误提示、询问信息、填写表单。
以上就是Pixso设计师总结整理的B端设计规范分享。设计规范的建立过程在锻炼设计师抽象思维能力的同时，更塑造了适应B端平台产品的设计师模块化思维及产品化的设计方法。
因此，设计师在工作过程中，一定要重视设计规范，抽时间把它整理好，这是对整个团队有效率的协作工作起到至关重要的作用。同时，选对好的设计协作工具能帮助UI设计师与前端和测试高效协同，有效地提高工作效率和保证项目的产出质量和产品设计的一致性。(戳此参阅在线协作设计工具的优势)
