不知不觉中，我已经深耕B端领域3年多了。很多人接触B端后会觉得无聊，因为B端的设计没有C端的视觉冲击力。更多的是结合业务逻辑来设计满足业务需求的交互，以及界面布局的合理性，以达到产品的易用性、易用性、易用性。由于业务的复杂性，功能实现的难度会比C端系统高很多，但是B端系统会有很多相似的组件可以共享，设计师一般都会准备规范在项目前期把这些组件组合起来，方便后期的设计和使用，同时也可以减少开发的开发量。通用组件库不仅可以减少开发时间，还可以达到系统界面统一的效果，降低用户的学习成本。B端的组件也丰富多样，也比较复杂。因此，在本文中，我只对组件样式进行统计并做简单介绍。具体的组件使用场景会一一分享。分为两大类，分别是：UI规范、组件规范UI规范：颜色、字体、布局、图标组件规范：按钮、面包屑、导航菜单、分页、下拉菜单、滑块、日期选择框、树、标签页、输入框、表单、上传、泡泡卡片、表单、警告提示、弹窗/抽屉UI规范1.UI规范-色系色彩规范，包括核心（品牌）色、辅助色、中性色品牌色：即、产品主色调，产品主色调的设置直接影响产品的气质和直观感受，也是产品的直接外在形象。品牌色彩应根据产品特性、用户使用场景、产品定位等进行选择，尽量使色彩具有延展性。支持换肤，品牌色应用场景包括操作状态、按钮颜色、可操作图标等辅助色：用于提示其他场景，如：成功、失败、警告、无效等中性色：常用于文字、背景、边框、分割线等，需要考虑深色背景和浅色背景的区别，可以选择相同的色调来控制透明度的变化，用它来表达不同的层次结构。整个系统中涉及的颜色通常不止这些。如果我们只限于上面总结的几种颜色，在需要多种颜色时是很难区分的。比如一些常见的数据图表分析，会涉及到多种颜色的组合，那么我们就按照主要的颜色规格进行推导。特殊情况下使用的色系较多，因此在制定颜色规格时会准备“其他颜色”。其他颜色：根据项目情况单独设置统计图表、数据可视化、多重标签等不同配色方案，由基础色衍生而来。2.UI规范——字体字体是系统界面设计中最基本的组成部分之一。字体的大小和颜色反映了界面信息的层次关系。建议选择中文字体：平方、思源黑体推荐英文字体：HelveticaNeue、思源Helvetics系统中字体大小为：14px、16px、18px、20px、24px、26px、28px、30px、36px...字体行高settings:根据文字大小和使用场景设置行高，行高=文字大小+8px。常规默认系统字体规格至少为12px。在之前的文章《B端系统》我的设计坑总结（上）中，也提到了不同分辨率下不同显示分辨率和布局的默认设置。字体规范会做出不同的渐变，这里就不细说了，有兴趣的可以回头看看。3.UI规范-布局B端系统用户的主流分辨率主要是1920、1440和1366，部分系统还有1280显示设备，通过动态适配布局以不同分辨率显示内容。系统中的结构方式有：左右结构，上下结构系统适配：左右布局设计方案中经常使用24格左右结构布局，一种常见的做法是固定左侧导航的宽度bar和topbarHeight（有topbar时），动态缩放右侧内容显示区域。顶底结构布局常用于顶底布局的设计方案中。常见的做法是固定顶部栏，动态缩放下方的内容显示区域，固定内容区域左右两侧的最小值。4.UI规范-图标B端系统图标以简洁、分类、易识别为主。默认大小：16X16px，主要是SVG格式。对于图标，相信大家都不陌生，但是对于B端的图标来说，图标主要以简洁易懂为主，一般起到分类识别和点缀的作用。在这里跟大家分享一下我在工作中是如何整理项目图标的，以及在开发中如何方便的分享图片给小弟。我用AI设计图标，大小设置为16x16px。绘制出来的图标直接保存为SVG格式，然后批量上传到iconfont.cn，这里我会根据不同的项目进行分类，开发小弟只需要在每个项目中下载需要的图标即可，大大提高了工作效率。组件规范1.组件规范——按钮按钮触发事件或动作，它们让用户知道接下来会发生什么。按钮有5种样式，分别是：主按钮、默认按钮、虚线按钮、文本按钮、链接按钮。主按钮：用于主要动作点，一个操作区域只能有一个主按钮默认按钮：用于一组动作点，不分主次虚线按钮：常用于添加动作文字按钮：用于mostsecondaryactionPointlinkbutton：作为外部链接的actionpoint按钮的状态分为4种，分别是：normal、highlighted、disabled、selected。normal：表示控件处于活动状态，但当前未被使用Highlighted：表示控件被按住或正在使用Disabled：表示按钮未启用，不能使用Selected：只有特定控件有此状态，表示当前选择了该控件2.组件规范——面包屑面包屑是一种导航系统，显示当前页面在系统层次结构中的位置，并且可以返回上一级。面包屑组件是B端系统中常用的组件，在网站中也是常用的。面包屑有两种类型：短面包屑和长面包屑。短面包屑：长面包屑用于用户层次相对较浅的页面：用户层次较深的页面3.组件规范-导航菜单提供用于页面和功能导航的菜单列表。导航菜单一般分为左右结构导航、上下结构导航两种模式。表单收缩二级目录，左右结构导航一般都支持左侧收缩的交互功能，为内容展示区提供更大的展示空间，一键收缩或鼠标左右拖动，您可以根据实际情况选择合适的交互方式。上下结构导航：菜单布局在顶部左侧或右侧。这种导航方式在网站中比较常见，但在B端系统中也有使用。在我接触过的实际项目中使用过，主要用于页面内容比较大，没有二级导航的时候。4.ComponentSpecification–Paging使用分页的形式来分隔长列表。一次只加载一页。分页的风格也是多种多样的，不同的场合会选择不同的风格。这里我总结了我们目前系统使用的3种分页样式：常规样式、长版样式、简洁样式。正则样式：默认样式为正则样式，控制在五个数字之间，避免数字过多混淆。长版风格：当数据信息量巨大时，页数会增加，可以多号切换。StyleConcisestyle：当页数固定或最多不超过10页时，一般采用左右切换的样式Drop-down，multi-leveldrop-downOne-leveldrop-down：最简单的drop-向下选择样式，直接平铺可选择的选项内容多级下拉：下拉框有层级关系（一级和二级），样式分为左右层级显示，向上-downdislocationHierarchicaldisplay,treestructurehierarchicaldisplay(树结构的下拉显示方式这里没有样式，后面有树结构组件的介绍，可以参考它的样式)6.组件specification-slider上下滑动显示更多内容Slider是产品中不可或缺的组件，无论是web端还是移动端都会用到。滑块的样式没有太大区别，也没有很大的设计差异。主要是根据实际需要区分其交互形式。例如：在我的实际工作中，我选择的交互方式是滑块不会一直显示在界面中（避免干扰页面的整体视觉效果），只有当鼠标移动到时才会出现滑块可滑动区域（告知用户页面内容可以滑动查看更多），所以我的组件中会有两种样式。7、组件规范-日期选择框输入或日期选择控件对于B端系统，日期会根据业务情况提取，精度会有所不同，精确到日、时、分、秒，当用作a时间设置过滤条件，一般使用时间间隔，所以日期选择框分为以下三种：普通日期选择、间隔日期选择、精确日期选择。普通日期选择：只能选择某个年、月、日、时间精度区间。日期选择：可选择不同的年、月、日时间间隔。精确日期选择：可选择年、月、日、时、分、秒高精度时间。8.组件规范-单选/多选当框在一组选项中进行单选/多选时：注意组件的使用场景：单选/多选框看起来是一个简单的普通组件，但在实际项目中使用时也需要仔细区分。当该选项仅支持单个选择时，我们会使用合适的圆形无线电框，并且在支持多个选择时，我们使用一个方形的多选框来区分单序和多种选择方案。注意组件的状态区分：单选/多选盒子的样式虽然简单，但也有3种显示状态：默认、选中、不选中。9.组件规范-tree树显示和树选择控件。树组件常用于B端系统中的权限设置。大多数B端系统都会有权限设置的功能。当然，在我的实际工作中，除了使用树结构进行权限设置外，还有其他的使用场景，比如：组织维护、功能维护、项目维护等等。树形结构可以清晰展示层级关系，节省空间，但在一些复杂的需求中，树形结构很难维护，所以在选择组件时也需要考虑实际的业务场景和维护成本。下图左侧为展示效果的树状结构，右侧为操作（选择）的树状结构效果展示。两种效果都可以在上面提到的下拉选择框中使用。10、组件规范-tab标签切换组件标签页分为两种形式：水平标签、垂直标签horizo??ntallabel：水平标签样式是最常用的样式，包括网站和移动端，标签样式分为Text+line，文字+色块，分别区分选中状态和默认状态的形式。除了默认的固定标签，还会有可编辑的标签，可以满足增删改查的功能，所以这样的标签会有“删除”的标记，比如网页标签就是可编辑的标签样式。垂直标签：垂直标签有点类似于左右结构的导航菜单，通过点击选择标签可以切换和改变页面内容。11、组件规范-输入框文本输入框和数字输入框输入框是最常见的组件，这里就不介绍组件了，主要分享一下输入框组件在不同显示器上布局的区别，例如移动端输入框的文本和输入框一般采用自上而下的结构，因为移动端的尺寸比较小，能够显示内容的区域有限。在web端，会根据页面的内容和内容展示的形式来区分展示方式。例如，当弹窗内容较少时，输入框样式一般会采用自上而下的结构。当内容较多，页面空间较大时，会选择左右结构排版，当然这不是固定的排版思路，需要根据实际情况选择合适的排版方式。12.ComponentSpecification-Form高性能表单控件，自带数据字段管理。在我看来，包括数据的录入、校验，以及对应的样式表，也就是多个输入框的组合，可以直接根据输入框的两种样式来显示表单的样式，左右结构和顶底结构。普通表单会根据实际业务情况中固定的字段信息，而对于一些特殊的表单信息，当用户可以增加或减少表单内容时，表单的样式会与普通样式不同，并且交互方式也会不同。比如下图右侧的表格样式就是可以增减的表格。支持点击右下角的“添加”按钮添加与上述内容信息相同的表单。您可以点击表单模块右上角的“x”删除该表单，实现自定义表单内容数量的要求。13.组件规格-上传文件。选择上传拖拽上传控件上传的功能在我们身边并不少见。对于B端系统来说，上传表单和文件是最常见的操作。这里我总结了3种上传组件样式：单文件上传、图片上传、批量上传。单项上传：单文件上传一般是上传一个或几个文件，多为按钮或拖拽等交互形式图片上传：简单的图片替换上传，常用于企业logo替换、登录页面图片替换等场景，等，请告知用户图片上传状态批量上传：对于批量文件上传，需要通知用户文件状态，支持用户取消上传操作，例如：常用的百度网盘上传并下载文件14.组件规范-泡泡卡片点击/鼠标元素，弹出的泡泡状卡片浮层由于B端产品内容庞大，很难全部展示出来有限空间内的数据。因此，为了在有限的空间内展示重要的内容，达到界面的可读性，使用二级内容隐藏点击或悬停显示综合内容的功能。最常见的表格内容过长出现“...”，鼠标移入出现浮泡显示完整信息；名称后跟“？/！”气泡显示有关数据等的信息。15.组件规范——表格显示行列数据表格是一个通用的组件，但是表格样式多种多样，各个表格的交互方式不同，使用的常用表格也不同。下图我只展示了2种表格样式，但实际上远不止于此。我目前工作涉及的一个项目使用了5种以上的表格样式。我不会在这里详细介绍它们。后面我会单独总结表格。不同的风格和使用场景。16.组件说明-警告提示警告提示，显示需要注意的信息。警告提示一般分为四种状态：成功、信息提示、警告、错误（失败）。根据提醒内容的展示以及是否需要用户手动操作，我总结了四种风格，如下图所示：17.组件规范——弹窗/抽屉信息展示和信息填充的浮动面板弹出窗口和抽屉在内容展示的外观方式上有所不同，组件的选择也需要根据实际需要。比如需要参考页面信息填写表单信息，那么使用抽屉样式就比较合理，这样可以在右侧填写表单，在左侧参考数据对比，抽屉的样式可以是悬浮窗也可以直接从右侧展开，左侧的内容被挤压。这种交互方式也是我实际项目中常用的一种。在这篇文章中，我只总结了自己在实际工作中常用的组件，还有很多不常用的组件没有全面总结。以后有机会再总结！也希望对B端领域的各位有所帮助。欢迎讨论B端设计的趣事！不仅是B面，我对平面设计领域也有浓厚的兴趣，欢迎大家和我一起探讨~~~
