设计规范虽然有其通用性，但因应对不同的业务环境和企业形态，其具体的运用可能会有所差异。对于新入行的B端设计师，各种B端组件可能会让他们感到困惑，不知在何种场景下应选择何种组件。这主要是因为我们在日常中学到的B端知识点多是零散的，缺乏整体和系统性的规范总结。因此，首要的步骤是理解和掌握B端设计包含的各项规范，这样才能在之后的设计过程中有效地运用它们。

基于B端设计实践的深厚经验，Pixso的设计师们编制了一套全面的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 中的图标设计原则)

为了方便设计师和开发进行对接，推荐使用Pixso作为设计工具。这是一款基于Web和移动端的设计工具，Pixso支持自建云端组件库和资源库，帮助设计师建立统一的设计规范。资源库支持一键迭代，所有文档自动更新，可以帮助打造一个团队的设计图标库，在后续的项目中，直接从团队资源库拖拽图标即可使用，减少重复设计。

栅格系统 

如何在手机和网页之间做好适配？让产品在不同尺寸下都能为用户提供良好的用户体验，栅格系统可以帮助我们做到这一点。栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。通常，在网页设计中经常使用8作为栅格的最小步进单位，一些知名公司都以8为最小单位划分网格，规范页面秩序，比如：Ant Design、Matierial Design等。

通常情况下，web 端采用 12 列，平板采用 8 列，手机采用 4 列。当然，你可以根据项目特点来设计你的网格系统。用户已经习惯通过鼠标滚轮或滚动条（scrollbar）来纵向浏览页面内容，因此竖直方向可以无限延伸。所以栅格系统在竖直方向的栅格可以不体现出来，我们在执行设计时只要在水平方向保持规律的变化就可以了。

组件规范 

B端组件库的建立，常用的组件包括按钮组件、面包屑、导航菜单、分页、下拉控件、上下左右滑条、日期选择框、单选复选框、树形选择、标签页、输入框、表单、上传样式、气泡卡片、表格列表、警告提示、弹窗等。

按钮

按钮的五种样式：主按钮、默认按钮、虚线按钮、文本按钮、链接按钮。

按钮的四种状态：常规、悬停、选中、禁用。

面包屑 

显示当前页面在系统层级结构中的位置，并能向上返回，用于系统拥有超过两层以上的层级结构，同时可以告诉用户当前页面在哪里，并提供导航功能。

导航菜单

导航菜单为页面和功能提供导航的菜单功能，用户依赖导航在各个页面中进行跳转。

分页

采用分页的形式分隔长列表数据，每次只加载一个页面。当加载/渲染所有数据将花费很多时间时可采用分页。

下拉菜单

当选项过多时，使用下拉菜单展示并选择内容。

时间日期选择器

用于选择或输入日期，分为固定时间点&范围、任意时间点&范围、选择日/月/年范围。

选择框

用于在一组备选项中进行选择，包括单选框和多选框。

标签页

通过切换不同的选项标签，查看不同的页面内容。

输入框

需要注意：输入框在输入前、输入中、输入后三种不同的状态设计。

上传

通过点击或拖拽上传文件。

表格

用于展示多条结构类似数据，可对数据进行排序、筛选、对比或其他自定义操作。

警告提示

用于页面中展示重要的提示信息。警告提示一般分为四个状态：成功、信息注释、警告、错误(失败)。

弹窗

用于消息提示、成功提示、错误提示、询问信息、填写表单。

以上就是Pixso设计师总结整理的B端设计规范分享。设计规范的建立过程在锻炼设计师抽象思维能力的同时，更塑造了适应B端平台产品的设计师模块化思维及产品化的设计方法。

因此，在设计师的工作流程中，注重和整理设计规范的重要性不容忽视，这对于整个团队的高效协作有着决定性的影响。同时，选择适当的设计协作工具能促进UI设计师、前端和测试人员之间的有效协同，这对于提升工作效率，确保项目产出质量以及保证产品设计的一致性具有重要的作用。(戳此参阅在线协作设计工具的优势)

在Pixso平台上，您可以方便地保存颜色、文本样式和图层样式，并将它们结合为可重复添加的组件资源。更棒的是，一旦资源发生更改，所有引用这些资源的实例都会自动更新，大大提升了设计创作和迭代的效率。所有这些资源都可以在团队间共享，实现快速复用。此外，Pixso还提供链接式交付和自动标注代码交付功能，帮助设计师解决交付中的难题，减轻开发工程师的工作压力，从而有效地提高产品落地速度。这让团队能够把更多精力放在高价值的创新工作上。赶紧启动Pixso，开启您的高效、流畅的团队协作之旅吧！