5000 字干货！超全面的B端设计规范总结

不知不觉现已深耕在 B 端这个范畴 3 年有余，许多人接触过 B 端后会觉得乏味，由于 B 端的规划在视觉上并没有 C 端那么有冲击力，更多的是结合事务逻辑，规划出契合事务需求的交互，以及界面排版的合理性，到达产品的可用性、易用性、好用性。

由于事务的杂乱性，功用完结的难度程度相比 C 端会高许多，可是 B 端体系会有许多相似的组件能够共用，规划师一般会在项现在期做好这些组件的标准，便于后期规划运用，一起开发也能减少开发量，共用组件库不仅能减少开发时刻还能到达体系界面一致的作用，下降用户的学习成本。

B 端的组件也是丰富多样、一起也比较杂乱，因此此篇文章我只对组件款式做计算，并作简略的介绍，具体的组件运用场景后续逐个共享，欢迎继续关注~

B 端的体系标准我分为两大类，分别是：UI 标准、组件标准

UI 标准：颜色、字体、布局、图标

组件标准：按钮、面包屑、导航菜单、分页、下拉菜单、滑条、日期挑选框、树、标签页、输入框、表单、上传、气泡卡片、表格、警告提示、弹窗/抽屉

UI 标准

1. UI 标准 – 颜色

体系颜色标准，包含核心（品牌）色、辅佐色、中性色

品牌色：即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象，品牌色要依据产品特性、用户运用场景、产品定位等进行选取，尽量做好颜色的延伸性，可支撑换肤，品牌色的应用场景包含操作状况、按钮色、可操作图标等

辅佐色：用于提示其他场景，比方：成功、失利、警告、无效等

中性色：常用于文本、背景、边框、分割线等，需求考虑深色背景和淡色背景的差异，能够挑选同一色相控制透明度改变，用来表现不同的层级结构

一整套体系所涉及到的颜色往往不止这几种，如果咱们只约束在上面所总结的几种颜色，那么在一些需求多种颜色时就比较难差异，比方一些常见的数据图表剖析，就会涉及到多种颜色的结合运用，所以咱们会依据首要的颜色标准衍生更多的色系供特殊状况运用，因此在作颜色标准时会预备一个“其它色”。

其它色：如计算图、数据可视化、多个标签的不同配色方案依据项目状况独自设定，经过根本颜色衍生而来。

2. UI 标准 – 字体

字体是体系化界面规划中最根本的构成之一。

字体的巨细、颜色差异体现界面信息的层级联系。

• 中文字体主张挑选：苹方体、思源黑体
• 英文字体主张挑选：Helvetica Neue、思源黑体

体系中字体巨细为：14px、16px、18px、20px、24px、26px、28px、30px、36px…

字体行高设定：依据文字巨细及运用场景设置行高，行高=文字巨细+8px。

惯例默许的体系字体标准最小为 12px，上篇文章「B 端体系」我的规划踩坑总结（上）中我也提到过关于不同分辨率下，不同显现器分辨率和布局的默许设置状况，字体标准会作不同的梯度，这儿就不再赘述，感爱好的能够回头看看。

3. UI 标准 – 布局

B 端体系的用户的主流分辨率首要为 1920、1440 和 1366，单个体系还存在 1280 的显现设备，经过动态适配布局来完结在不同分辨率下展现内容。

• 体系中存在的结构办法有：左右结构、上下结构
• 体系适配：选用 24 栅格

左右结构布局

常被用于左右布局的规划方案中，常见的做法是将左面的导航栏固定宽度，顶部栏固定高度（有顶部栏的状况下），对右边的内容展现区域进举动态缩放。

上下结构布局

常被用于上下布局的规划方案中，常见的做法是将顶部栏固定，对下边的内容展现区域进举动态缩放，内容区域左右两边固定有最小值。

4. UI 标准 – 图标

B 端体系图标简洁为主、分类差异、便于辨认，默许巨细：16X16px，SVG 格局为主

关于图标来讲，相信咱们都不会陌生，而关于 B 端的图标，图标首要注重简洁易懂，而且一般起到分类标识和点缀的作用

这儿共享一下我在工作中怎样整理我的项目图标，以及怎样便捷的和开发小哥哥配合传图，图标规划我运用 AI 完结，巨细都设置为 16x16px，画好的图标直接保存为 SVG 格局，然后批量上传到 iconfont.cn，在这儿我会依据不同的项目分类，开发小哥哥只需求在每个项目中下载需求的图标即可，这样大大提高了工作效率。

组件标准

1. 组件标准 – 按钮

按钮触发事情或动作，他们让用户知道接下来会发生什么。

按钮的款式分为 5 种，分别是：主按钮、默许按钮、虚线按钮、文本按钮、链接按钮

• 主按钮：用于主举动点，一个操作区域只能有一个主按钮
• 默许按钮：用于没有主次之分的一组举动点
• 虚线按钮：常用于添加操作
• 文本按钮：用于最次级的举动点
• 链接按钮：用于作为外链的举动点

按钮的状况分为 4 种，分别是：正常、杰出显现、禁用、已选中

• 正常（normal）：表明控件处于活动状况，可是当时并未运用
• 杰出显现（highlighted）：表明控件正被按住或正被运用
• 禁用（disabled）：表明按钮未启用且无法运用
• 已选中（selected）：仅特定控件具有该状况，表明控件当时已被选中

2. 组件标准 – 面包屑

面包屑是一种导航体系，显现当时页面在体系层级结构中的方位，并能向上回来。

面包屑组件在 B 端体系是常用的组件，一起在网站中也是常用的，面包屑的款式分为 2 种：短面包屑、长面包屑

• 短面包屑：用户层级比较浅的页面
• 长面包屑：用户层级比较深的页面

3. 组件标准 – 导航菜单

为页面和功用供给导航的菜单列表。

导航菜单一般分为 2 种模式：左右结构导航、上下结构导航

左右结构导航：咱们见过最多的便是左右结构的导航，通常会选用图标+案牍的办法呈现，而且有层级差异，选用点击展开的办法缩短二级目录，左右结构的导航一般都会支撑左面缩短的交互功用，为内容展现区域供给更大的展现空间，一键缩短或者鼠标左右拖动缩短，可依据实践状况而挑选适宜的交互办法

上下结构导航：菜单排版在顶部左面或者右侧，这样的导航办法在网站中比较常见，可是在 B 端体系中也会运用，我曾接触过的实践项目中就有运用，首要运用于页面内容量大，导航无次级时

4. 组件标准 – 分页

选用分页的办法分隔长列表，每次只加载一个页面

分页的款式也是多种多样，在不同状况下也会挑选不同的款式，我这儿总结了咱们现在体系运用的 3 种分页款式：惯例款式、长版款式、简洁款式

• 惯例款式：默许展现的款式即惯例款式，控制在五个数字间，防止数字太多太紊乱
• 长版款式：当数据信息量巨大的状况下，分页的数量也会增多，选用多数字可切换的款式
• 简洁款式：页数固定或最多不超越 10 页时，一般选用左右切换的款式

5. 组件标准 -下拉菜单

下拉菜单向用户显现操作或选项的列表

下拉菜单款式总可分为 2 种：一级下拉、多级下拉

• 一级下拉：最简略的下拉挑选款式，直接平铺可挑选的选项内容
• 多级下拉：下拉框中存在层级联系（主次层级）、款式可分为左右分级展现、上下错位分级展现、树结构分级展现（这儿关于树结构的下拉展现办法没有作款式，不过后边有关于树结构的组件介绍，可参阅其款式）

6. 组件标准 -滑条

上下滑动展现更多内容

滑条是作为产品中不行缺少的组件，无论是 web 端还是移动端，都会运用到，滑条的款式也都差距不大，没有很大的规划发散，首要是还是依据实践需求状况差异其交互办法

例如：在我的实践工作中，我挑选的交互办法是，滑条不会一向显现在界面中（防止页面全体视觉作用受到干扰），只要当鼠标移动到可滑动的区域才会呈现滑条（奉告用户页面内容可滑动看更多），所以我的组件中会呈现两个款式

7. 组件标准 -日期挑选框

输入或挑选日期的控件

关于 B 端体系来说，日期会依据事务的状况精度提取会不同，精确到日、时、分、秒，作为时刻设置何过滤条件运用时，一般会运用到时刻区间，所以日期挑选框分为以下 3 种：一般日期挑选、区间日期挑选、精准日期挑选

• 一般日期挑选：只可挑选某年月日时刻精度
• 区间日期挑选：可挑选不同年月日时刻区间
• 精准日期挑选：可挑选年月日、时分秒高精度时刻

8. 组件标准 -单选/多选框

在一组可选项中进行单项/多项挑选时

留意组件的运用场景：单选/多选框看是简略又常见的组件，可是在实践项目中运用时也需求做到详尽的差异，选项只支撑单选时咱们就选用适宜的圆形单选框，支撑多选时就选用方形的多选框，做好单选和多选的场景差异

留意组件的状况差异：单选/多选框的款式尽管简略，可是也有 3 种显现状况：默许、选中、不行选

更多单/多选框的规划知识：

9. 组件标准 -树

树型展现和树型挑选控件。

树组件在 B 端体系中常用于权限设置，大部分的 B 端体系都会有权限设置的功用，当然在我实践工作中除了权限设置运用树结构外，还有其它的运用场景，比方：安排保护、职能保护、事项保护等等。

树结构能够清晰的展现层级联系，而且节约空间，可是在一些杂乱的需求中，树结构比较难保护，所以在挑选组件时也需求考虑实践事务场景和保护成本。

下图中左面为展现作用的树结构、右侧为可操作（挑选）的树结构作用展现，两种作用都可运用到上文提到的下拉挑选框中运用。

更多树形挑选相关的知识点：

10. 组件标准 -标签页

选项卡切换组件

标签页分为 2 种办法：横向标签、纵向标签

横向标签：横向的标签款式是最常用的款式，包含在网站和移动端都会运用，标签款式分为文字+线条、文字+色块，分别差异选中和默许的状况办法，标签除了默许固定的标签外，还会有可编辑的标签，可满足增删去功用，所以这类标签会有“删去”标识，例如网页页签便是可编辑的标签款式。

纵向标签：纵向标签有点相似左右结构的导航菜单，也是经过点击选中页签，完结页面内容的切换改变。

11. 组件标准 -输入框

文本输入框、数字输入框

输入框是最为常见的组件了，这儿就不做组件的介绍，首要还是共享一下关于输入框组件在不同显现器上排版布局的差异吧，例如在移动端输入框的文本和输入框一般会选用上下结构，由于移动端的尺度比较小，可展现内容的区域有限。

而在 web 端，会依据此页面的内容量以及内容显现的办法来差异显现办法，例如弹窗中内容较少时，输入框款式一般会选用上下结构，内容较多页面空间较大时会选中左右结构排版，当然，这并不是固定的排版思想，而是需求依据实践状况选中适宜的排版办法。

12. 组件标准 -表单

高性能表单控件，自带数据域办理。包含数据录入、校验以及对应款式

表单在我以为，即多个输入框的组合，表单的款式可直接依据输入框的两种款式作差异展现，左右结构和上下结构，一般的表单是会依据实践事务状况固定输入的字段信息，而关于一些特殊的表单信息，用户能够增减表单的内容时，表单的款式则会和一般的款式作差异，而且交互办法也会有所差异。

例如下图右侧的表单款式即为可增减的表单，支撑点击右下角的“添加”按钮增加一个和上面相同的表单内容信息，可点击表单模块右上角的“x”删去此表单，到达用户自定义表单内容数量的要求。

更多关于 B 端表单的规划办法：

13. 组件标准 -上传

文件挑选上传和拖拽上传控件

上传的功用咱们不少见，关于 B 端体系来讲，上传表单、文件是最为常见的操作，这儿我总结了 3 种上传的组件款式：单件上传、图片上传、批量上传

• 单件上传：单文件上传一般是上传一个或者几个文件，常选用按钮或拖拽的交互办法
• 图片上传：简略的图片替换上传，长用于企业 logo 替换、登录页图片替换等场景，需奉告用户图片上传的状况
• 批量上传：关于大批量的文件上传需求奉告用户文件的状况，支撑用户取消上传操作，例如：常用的百度网盘上传和下载文件

14. 组件标准 – 气泡卡片

点击/鼠标移入元素，弹出气泡式的卡片浮层

由于 B 端产品内容量巨大，需求在有限的空间展现一切的数据是个难题，所以为了在有限的空间展现重要内容，到达界面的可阅览性、选用次要内容躲藏的功用，经过点击或者悬浮展现全面的内容。

最常见的表格内容太长呈现“…”，鼠标移入呈现悬浮气泡显现完好的信息；名称后边跟随“？/！”图标，鼠标移入呈现悬浮气泡显现注释的信息；数据剖析图表，鼠标移入呈现悬浮气泡显现数据的信息等等。

15. 组件标准 – 表格

展现行列数据

表格作为常见的组件，可是表格款式是多种多样的，而且每一种表格的交互都各不相同，运用的常见表格也各有差异，下图我只展现了 2 种表格的款式，可是实践上远不止于此，在我现在工作中涉及的一个项目就选用了超越 5 种的表格款式，这儿我就不做具体介绍，后期我会独自总结关于表格的不同款式以及运用场景。

咱们能够先看这篇干货：

16. 组件标准 – 警告提示

警告提示，展现需求关注的信息。

警告提示一般分为四个状况：成功、信息注释、警告、过错（失利）

依据提示内容的显现以及是否需求用户手动操作，我总结了四种款式，如下图：

17. 组件标准 – 弹窗/抽屉

信息展现和信息填写的浮层面板

弹窗和抽屉都是内容展现的不同呈现办法，组件的挑选相同需求依据实践需求状况，比方需求参阅页面信息填写表单信息，选用抽屉的款式则更为合理，这样就能够在右侧填写表单，在左面参阅数据比照，抽屉的款式能够是浮窗也能够是直接从右侧推出，左面内容被挤压的办法，这样的交互办法在我的实践项目中也是常用之一。

此篇文章我只总结了我实践工作中常用的组件，还有许多不常用的组件没有作全面的总结，后期有时机再做总结吧！，也希望对处于 B 端范畴的你有所协助，欢迎一起讨论关于 B 端规划风趣的事！

不仅是 B 端，在平面规划范畴我也有稠密的爱好，也欢迎咱们和我一起讨论哦~~~

欢迎关注作者的微信大众号：「规划小余」