打开网易新闻 查看精彩图片
不知不觉早已精耕在B端这个领域3年有余，很多人接触过B端后会感觉无趣，因为B端的设计在视觉上并没有C端这么有冲击力，更多的是结合业务逻辑，设计出符合业务需求的交互，以及界面排版的合理性，达到产品的可用性、易用性、好用性。
由于业务的复杂性，功能实现的难度程度相比C端会高好多，但是B端系统会有好多相像的组件可以共用，设计师通常会在项目前期做好这种组件的规范，便于后期设计使用，同时开发也能降低开发量，公用组件库除了能降低开发时间能够达到系统界面统一的疗效，降低用户的学习成本。
B端的组件也是丰富多样、同时也比较复杂，因此此篇文章我只对组件式样做统计，并作简单的介绍，具体的组件使用场景后续一一分享，欢迎持续关注~
打开网易新闻 查看精彩图片
B端的系统规范我分为两大类，分别是：UI规范、组件规范。
UI规范：色彩、字体、布局、图标。
组件规范：按钮、面包屑、导航菜单、分页、下拉菜单、滑条、日期选择框、树、标签页、输入框、表单、上传、气泡卡片、表格、警告提示、弹窗/抽屉
一、UI规范 1. 色彩
系统色调规范，包含核心（品牌）色、辅助色、中性色
1）品牌色
即产品主色，产品主色的设定直接影响产品知性和直观体会，也是产品直接对外的形象，品牌色要依据产品特点、用户使用场景、产品定位等进行选，尽量做好色调的延伸性，可支持换肤，品牌色的应用场景包括操作状态、按钮色、可操作图标等
2）辅助色
用于提示其他场景，比如：成功、失败、警告、无效等
3）中性色
常用于文本、背景、边框、分割线等，需要考虑蓝色背景和白色背景的差别，可以选择同一色相控制透明度变化，用来表现不同的层级结构
打开网易新闻 查看精彩图片
一整套系统所涉及到的色调常常不止这几种，如果我们只限制在里面所总结的几种颜色，那么在一些须要多种颜色时就比较难分辨，比如一些常见的数据图表剖析，就会涉及到多种颜色的结合使用，所以我们会依据主要的色调规范衍生更多的色系供特殊情况使用，因此在做色调规范时会打算一个“其它色”。
4）其它色
如统计图、数据可视化、多个标签的不同配色方案按照项目情况单独设定，通过基本色调衍生而至
打开网易新闻 查看精彩图片
2. 字体
字体是体系化界面设计中最基本的构成之一。
字体的大小、色彩分辨彰显界面信息的层级关系。
打开网易新闻 查看精彩图片
常规默认的系统字体规范最小为12px，上篇文章【B端系统】我的设计踩坑总结（上）中我也提及过关于不同码率下，不同显示器帧率和布局的默认设置情况，字体规范会作不同的梯度，这里就不再赘言，感兴趣的可以回头瞧瞧。
3. 布局
B端系统的用户的主流帧率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备，通过动态适配布局来完成在不同码率下展示内容。
系统中存在的结构形式有：左右结构、上下结构。
系统适配：采用24栅格。
1）左右结构布局
常被用于左右布局的设计方案中，常见的做法是将左侧的导航栏固定长度，顶部栏固定高度（有底部栏的情况下），对左边的内容展示区域进行动态缩放。
打开网易新闻 查看精彩图片
2）上下结构布局
常被用于上下布局的设计方案中，常见的做法是将底部栏固定，对下面的内容展示区域进行动态缩放，内容区域左右两侧固定有最小值。
打开网易新闻 查看精彩图片
4. 图标
B端系统图标简约为主、分类分辨、便于辨识，默认大小：16X16px，SVG格式为主。
对于图标来讲，相信你们都不会陌生，而对于B端的图标，图标主要侧重简约易懂，并且通常起到分类标示和映衬的疗效。
这里分享一下我在工作中如何整理我的项目图标，以及如何方便的和开发小妹妹配合传图，图标设计我使用AI完成，大小都设置为16x16px，画好的图标直接保存为SVG格式，然后批量上传到iconfont.cn，在这儿我会依照不同的项目分类，开发小妹妹只须要在每位项目中下载须要的图标即可，这样大大提升了工作效率。
打开网易新闻 查看精彩图片
二、组件规范 1. 按钮
是按键触发风波或动作，它们让用户晓得接下来会发生哪些。
按钮的款式分为5种，分别是：主按键、默认按键、虚线按键、文本按键、链接按键。
打开网易新闻 查看精彩图片
2. 面包屑
面包屑是一种导航系统，显示当前页面在系统层级结构中的位置，并能向下返回。
面包屑组件在B端系统是常用的组件，同时在网站中也是常用的，面包屑的款式分为2种：短面包屑、长面包屑。
打开网易新闻 查看精彩图片
3. 导航菜单
为页面和功能提供导航的菜单列表。
导航菜单通常分为2种模式：左右结构导航、上下结构导航。
打开网易新闻 查看精彩图片
4. 分页
采用分页的方式分隔长列表，每次只加载一个页面。
分页的款式也是多种多样，在不同情况下也会选择不同的款式，我这儿总结了我们目前系统使用的3种分页款式：常规款式、长版款式、简洁款式。
打开网易新闻 查看精彩图片
5. 下拉菜单
下拉菜单向用户显示操作或选项的列表。
下拉菜单款式可分为2种：一级下拉、多级下拉。
打开网易新闻 查看精彩图片
6. 滑条
上下滑动展示更多内容。
滑条是作为产品中不可缺少的组件，无论是web端还是移动端，都会运用到，滑条的款式也都差别不大，也没有很大的设计发散，主要是还是按照实际需求情况分辨其交互方式。
例如：在我的实际工作中，我选择的交互方法是，滑条不会仍然显示在界面中（避免页面整体视觉疗效深受干扰），只有当滑鼠联通到可滑动的区域才能出现滑条（告知用户页面内容可滑动看更多），所以我的组件中会出现两个式样。
打开网易新闻 查看精彩图片
7. 日期选择框
输入或选择日期的控件。
对于B端系统来说，日期会依照业务的情况精度提取会不同，精确到日、时、分、秒，作为时间设置和过滤条件使用时，一般会使用到时间区间，所以日期选择框分为以下3种：普通日期选择、区间日期选择、精准日期选择。
打开网易新闻 查看精彩图片
8. 单选/多选框
在一组可选项中进行单项/多项选择时。
注意组件的使用场景：单选/多选框看是简单又常见的组件，但是在实际项目中运用时也须要做到细致的分辨，选项只支持单选时我们就采用合适的方形单选框，支持多选时就采用圆形的多选框，做好单选和多选的场景分辨.
注意组件的状态分辨：单选/多选框的款式其实简单，但是也有3种显示状态：默认、选中、不可选。
打开网易新闻 查看精彩图片
9. 树
树型展示和树型选择控件。
树组件在B端系统中常用于权限设置，大部分的B端系统就会有权限设置的功能，当然在我实际工作中不仅权限设置使用树结构外，还有其它的使用场景，比如：组织维护、职能维护、事项维护等等。
树结构可以清晰的展示层级关系，并且节省空间，但是在一些复杂的需求中，树结构比较难维护，所以在选择组件时也须要考虑实际业务场景和维护成本。
下图中右侧为展示疗效的树结构、右侧为可操作（选择）的树结构疗效展示，两种疗效都可运用到上文提及的下拉选择框中使用。
打开网易新闻 查看精彩图片
10. 标签页
选项卡切换组件。
标签页分为2种方式：横向标签、纵向标签。
打开网易新闻 查看精彩图片
11. 输入框
文本输入框、数字输入框。
输入框是最为常见的组件了，这里就不做组件的介绍，主要还是分享一下关于输入框组件在不同显示器上排版布局的区别吧，例如在移动端输入框的文本和输入框通常会采用上下结构，因为移动端的规格比较小，可展示内容的区域有限。
而在web端，会依照此页面的内容量以及内容显示的方式来分辨显示方法，例如弹窗中内容较少时，输入框款式通常会采用上下结构，内容较多页面空间较大时会选中左右结构排版，当然，这并不是固定的排版思维，而是须要依照实际情况选中合适的排版形式。
打开网易新闻 查看精彩图片
12. 表单
高性能表单控件，自带数据域管理，包含数据录入、校验以及对应款式。
表单在我觉得，即多个输入框的组合，表单的款式可直接按照输入框的两种款式作分辨展示，左右结构和上下结构，普通的表单是会按照实际业务情况固定输入的数组信息，而对于一些特殊的表单信息，用户可以增减表单的内容时，表单的款式则会和普通的款式作分辨，并且交互方法也会有所分辨。
例如右图左边的表单款式即为可增减的表单，支持点击右下角的“添加”按钮降低一个和前面一样的表单内容信息，可点击表单模块右上角的“x”删除此表单，达到用户自定义表单内容数目的要求。
打开网易新闻 查看精彩图片
13. 上传
文件选择上传和拖放上传控件。
上传的功能我们不稀少，对于B端系统来讲，上传表单、文件是最为常见的操作，这里我总结了3种上传的组件款式：单件上传、图片上传、批量上传。
打开网易新闻 查看精彩图片
14. 气泡卡片
点击/鼠标移入元素，弹出气泡式的卡片浮层。
由于B端产品内容量巨大，需要在有限的空间展示所有的数据不为是个困局，所以为了在有限的空间展示重要额内容，达到界面的可阅读性、采用次要内容隐藏的功能，通过点击或则漂浮展示全面的内容。
最常见的表格内容太常出现“…”，鼠标移入出现漂浮气泡显示完整的信息；名称前面追随“？/！”图标，鼠标移入出现漂浮气泡显示注释的信息；数据剖析图表，鼠标移入出现漂浮气泡显示数据的信息等等。
打开网易新闻 查看精彩图片
15. 表格
展示行列数据。
表格作为常见的组件，样式是多种多样的，并且每一种表格的交互都各不相同，使用的常见也各有差别，下图我只展示了2种表格的款式，但是实际上远不止于此，在我目前工作中涉及的一个项目中就采用了超过5种的表格款式，这里我就不做详尽介绍，后期我会单独总结关于表格的不同款式以及使用场景
打开网易新闻 查看精彩图片
16. 警告提示
警告提示，展现须要关注的信息。
警告提示通常分为四个状态：成功、信息注释、警告、错误（失败）.
根据提醒内容的显示以及是否须要用户自动操作，我总结了四种款式，如下图：
打开网易新闻 查看精彩图片
17. 弹窗/抽屉
信息展示和信息填写的浮层面板。
弹窗和抽屉都是内容展示的不同出现形式，组件的选择同样须要依照实际需求情况，比如须要参考页面信息填写表单信息，采用抽屉的款式则更为合理，这样就可以在左边填写表单，在两侧参考数据对比，抽屉的款式可以是浮窗也可以是直接从左侧推出，左边内容被挤压得方式，这样得交互方法在我得实际项目中也是常用之一。
打开网易新闻 查看精彩图片
此篇文章我只总结了我实际工作中常用的组件，还有好多不常用的组件没有做全面的总结，后期有机会再做总结吧！，也希望对处于B端领域的你有所帮助，欢迎一起阐述关于B端设计有趣的事！
