B端设计规范解析及组件库合集
B端设计规范解析及组件库合集
一、B端设计规范的价值
B端企业级产品一般是庞大且复杂的系统，业务模块数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
1、可方便交互设计师和UI设计师反复使用，从而减少工作量并提高工作效率。设计师可以把更多的时间和精力放到更有价值的工作上去，关注业务目标和用户需求，对业务逻辑做深度理解和剖析，用系统性思维为整个产品做全方位的体验优化。
2、由于B端产品一般比较庞大且不断的迭代，整个产品可能有不同的设计师在不同时间完成，为了避免由于每个设计师的设计风格和设计水平不一样导致产品设计规范不统一，因此需要统一的组件保持团队产品体验的统一性，保证产品相似场景的交互、视觉统一。
3、很多业务领域有其独特性，其组件在应用的过程中可以被再次组合、拼装和沉淀，通过标准化复用，避免重复造轮子节省研发资源，提升研发效率。
4、可作为团队以后做设计的依据和参考，无论是新员工到来， 还是老员工离去，都可以通过设计规范来很好地对接工作，从而提升团队的协同效率。
二、设计规范组成
完整的设计规范包括设计理念、设计原则、组件控件、界面交互及输出文档等内容。
设计师可以根据自身的设计理念和原则按照功能需求直接调用组件库中的控件，很轻易地输出高保真原型图，减轻设计过程中对交互控件选择和对各种状态与信息排版反复思考的负担。
1、设计理念
不同的使用对象和不同的终端设备，适用的设计理念与方式也是不一样的 。B端一般以业务为导向，可能有很多高级功能，突出高效易用的特点，SaaS则侧重普适性和标准化。C端产品一般要考虑满足大部分用户的使用场景和诉求，包含的高级功能相对会少一些，突出易学性。
2、设计原则
设计原则目前已经有很多，如尼尔森的十大可用性原则、格式塔原则、剃刀法则、菲茨定律及设汁中常见的对比和对齐原则等。设计师在设计组件的时候需要根据自身或团队实际情況去把控和梳理。设计过程中也可以多参考一些成熟大厂的设计组件。
3、组件控件
组件控件是整个设计规范中的重要内容。对组件控件可以根据属性进行分类，也可以根据功能进行划分。
一般是按住组件控件的功能进行划分比较多。 按功能划分，表单类的组件就可以划分为单文本输入、多文本输入、日历时间选择器、选择器、单选及多选、常用表格、常用分页等。
三、B端基本设计理念
1、业务需求为基础的设计
首先，以业务需求为基础的设计需要注意思维的转化。设计脱离了业务需求就失去了设计存在的意义，设计师应该讲业务思维转化为设计思维。
其次，以业务需求为基础的设计需要注意触达点延伸的问题。在满足业务需求的基础上，要更加主动地去思考用户完成某一基础操作后下一步会做什么，并思考解决方案的延伸面。如下图所示：
最后，以业务需求为基础的设计需要注意抽象方法论的建立。设计师对业务的理解很重要。设计师在持续深入理解业务之余，需要有意识地去建立独立于业务的通用跨界思维、框架和方法论，不能满足于逐一解决单一、孤立的业务问题。如下图所示：
2、以用户为中心的设计
设计师设计产品应该从用户需求和用户的感受出发，以用户为中心设计产品，而不是让用户去适应产品。无论是产品的使用流程、信息架构，还是人机交互方式，设计师都需要考虑用户的使用习惯、预期的交互方式及视觉感受等因素，如下图所示：
3、B端和C端设计理念区别
B端产品提升效率，降本增效才是产品的目标，B端产品的价值在于用尽量短的时间抓住用户痛点。如果用户需要在某个B端产品上花费很多时间，那说明这个产品太难用。
对B端的用户来说，功能齐全和高效性大于易用性。高效性是指通过设计帮助用户精准、 快速地完成目标任务。在设计B端产品时，由于产品的使用场景相当复杂，用户会同时面临 很多种选择，如何在复杂的界面中让用户的操作变得高效，对于设计师来说是一大挑战。
B端产品的高效性提升，从3 个方面入手：
① 功能齐全，齐全的功能显示可以让用户快速了解其可以进行的操作有哪些；
② 减少操作路径，优化用户操作路径，确保用户能用尽可能少的步骤完成需要的操作；
③ 减少页面跳转，更少的页面跳转能增加页面的连贯性，减少用户的操作和记忆负担，让用户的操作过程更具连续性。
C端产品需要关注用户的使用时长，以及易用性。产品做得越好，用户越愿意为产品花时间。
对于C端用户来说，易学性和易用性大于功能齐全。C端产品具有界面结构简单明了、设计清晰对C端的用户来说，易学性和易用性大于功能齐全。C端产品具有界面结构简单明了、 设计清晰、易理解及易操作的特点，通过界面元素的表意和界面提供的线索就能让用户清楚地知道其操作方式。同时，C端产品具备的这些特性也易于缩小新用户与老用户之间的认知 差距，进而提升用户体验。
C端产品的易学性和易用性的提升，从3个方面入手：
①恰当的引导， 通过文字提示或浮层提示来引导用户，使新用户对该产品或新增功能一目了然；
② 场景指示， 在相应的场景下给予用户一定的指示（如浮层提示、文字提示等），让用户更清晰地知道下一步的操作方向；
③ 遵循己有用户习惯，用户习惯是由用户长期适应和积累而形成的，很难改变，所以尽量遵循现有主流设计习惯对于产品的易学性和易用性的提升来说 是极为关键的。
四、搭建B端组件库的方式
1、复用成熟的组件库，根据业务特性微调
成熟的设计组件库有很多，比如Fusion、Ant Design、Element、iview、Ant Design中后台组件库等。根据自己业务系统实际情况，选取适用的组件内容，放入组件库，比如按钮、表单、弹窗等。
这种方式的优点就是快速、成本低。缺点也很明显，就是“知其然而不知其所以然”。
比如：我们复用Element搭建了自己组件。但是Element都是白底黑字，当业务需要黑底模式时，我们就需要重新定义一套颜色使用规范。但是，Element框架中有几种中性色，这些色值会应用到不同组件（如下拉选择器、列表标头）、在不同状态（如默认态、hover态、选中态）的文字、线、框、背景、阴影颜色中，当设计师根据自己的经验定义一套颜色时，发现在实际的页面中会有各种问题。
因为我们只知道需要定义几种颜色，但是不知道这些颜色用在什么场景，也不知道Element当初这样使用颜色的逻辑是什么。在黑底模式下，Element原来的逻辑是否适用？浮层与底部背景之间采用什么方式做颜色区分更科学，是透明度叠加还是定义几个颜色等级？
所以建议在复用别人的组件框架时，尽量多探索背后的逻辑和设计原则是什么。当出现问题时，及时调整方案，不断迭代规范，这样可以沉淀出适合自己业务的组件库。
2、从零搭建组件库，知其然知其所以然
从零搭建组件库，就需要设计师投入极大的精力。思考设计价值观，并以此为标准，从业务中提取高复用的内容，梳理出点（色彩、文字、图标、阴影等）、线和面（按钮、搜索、表单、列表、分页器等）。比如，我们公司就有高级参照的组件，在一般的组件库中就很少见。
有时，为了给出更科学的组件方案，可能需要做人因研究（比如表单组件中，Lable与输入框的对齐方式有顶对齐、左对齐、右对齐3种，哪种方案最佳？）、数据验证研究（比如错误提示文案用户更倾向于正向引导还是负向反馈？）
实际研究证实的方案让我们“知其然，也知其所以然”。这样，从业务中梳理的点与线、面的逻辑关系是清晰的。
五、搭建B端组件库的注意事项
1、与前端团队紧密合作
设计师做事要以能够落地为前提，如果前端不认可，设计组件无法落地到实际产品中，那设计组件就没有多少价值。所以，开始做设计组件时就要和前端协作。
2、持续优化迭代
组件库搭建完之后，需要持续优化迭代。如果因为业务发展，出现组件无法满足需求时，需要制作新的组件。比如穿梭框是B端常用组件，但是这个组件可选择的内容只有对象的名称，如果业务需要选择的内容包含多个维度，比如对象的名称、属性信息，并且需要支持筛选时，这个组件就无法满足业务需要了，就需要制作业务组件。
3、以实用性为目标，业务用不到的组件建议不做
成熟的设计组件库内容很多，但是有些在自己业务中是用不到的，比如“回到顶部”一般只有在页面很长的情况下才会使用。如果自己的业务中暂时用不到，就不建议设计师花精力放入组件库。因为真正用到的时候，也许会因为某些原因无法直接复用，现在做出来也没有价值。
六、B端常用七大开源组件库
2015年，Fusion电商中后台组件库发布；
2016年，Element中后台组件库发布；
2016年，iview中后台组件库发布；
2016年，蚂蚁金服Ant Design中后台组件库发布；
2021年，阿里云Xconsole组件库发布；
2021年，字节跳动ArcoDesgin、SemiDesgin中后台组件库发布；
2021年，腾讯TDesgin组件库发布。
以上发布的组件库，均还在更新和迭代。部分有能力的公司基于组件库做了体系化的扩展。
1、Fusion电商中后台组件库
https://fusion.design/pc/?themeid=2
Fusion是阿里巴巴旗下的电商中后台设计系统，从国际UED，天猫，商家等各类业务形态中抽象解构。
它诞生的背景是(以下来自Fusion设计团队描述）：随着互联网行业的聚变式发展，在电商业务从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了体验一致性、设计效率、UI系统构建/应用效率、多端适配等诸多问题。许多人认为构建一套设计系统（Design System） 是解决企业级用户体验规模化问题的关键。 而当业务演进到 “平台化、垂直市场、采购市场” 阶段时，UI 也面对了更多的问题和挑战：“周期性业务的品牌更新”，“不同品牌的多种垂直业务同期构建”，“众多相似的后台系统构建”，“跨业务/部门的设计、前端协作问题”。面对这些问题，体验工程的建设已经远远不止于一套设计规范或一套组件库，他需要一套完整的系统来支撑。因此，Fusion从组件库拓展到了界面设计生态系统。
2、Element中后台组件库
https://element.eleme.cn/#/zh-CN/component/container
饿了么前端团队基于日常中后台系统，抽象出了基于Vue开发的Element组件库，并且通过开源的方式赋能给大中小公司的B端团队。虽然其设计团队不如Ant Design大，也没有那么多的设计理论来支撑，但这些都没关系，Element提供的能力足以支撑目前B端界面设计与开发的需求。由于“组件交互逻辑合理、前端上手快、设计风格也相对好看”受到了诸多使用者的好评，尤其是研发工程师的好评。好多团队，基本都是用的Element。
3、iview中后台组件库
iview是北京视图更新科技旗下的一款产品。大家总是会拿iview与Element相比，因为它们在UI上实在太像了，iview也是基于Vue的中后台UI组件库。从 2019 年 10 月起iview正式更名为 View UI，但由于大部分小伙伴比较熟悉iview的称呼，因此我们后面还是称它为iview。iview目前已经到了4.0版本，并且提供了比Element多的多的功能来满足绝大部分的B端中后台场景。
4、Ant Design中后台组件库
https://ant.design/docs/spec/introduce-cn
Ant Design大家都不陌生，可以说在设计圈应该是响当当的。蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。于是蚂蚁集团体验技术部经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。可见，Ant Design不止于组件库，它是一套设计体系。
5、ArcoDesgin中后台组件库
接近2021年年末，字节跳动一下子发布了两款企业级中后台设计体系，一个是ArcoDesgin，另一个是SemiDesgin。ArcoDesgin团队描述，ArcoDesgin通过设计系统去解决产品面临的体验问题，以及通过给出的设计原则，来指导解决业务问题，并且它还可以促进设计团队与研发团队的协作。他们认为ArcoDesgin是务实而又浪漫的，务实在于设计体系解决基础问题，浪漫在于设计体系具备开放性，允许浪漫的设计模式诞生。并且ArcoDesgin一推出时，就具备了非常完善的能力，组件库只是其中之一。可见，ArcoDesgin直接对标Ant Design，设计体系在中国不再只有Ant Design一家。
6、SemiDesgin中后台组件库
SemiDesgin官方解释：SemiDesgin由是字节跳动抖音前端与UED团队设计、开发并维护，包含设计语言、React 组件、主题等开箱即用的中后台解决方案，帮助设计师与开发者打造高质量产品。
7、TDesgin组件库
腾讯TDesgin设计体系不仅包括了企业级中后台组件库，基于腾讯广泛的业务能力，同时还推出了移动端、小程序端的组件库，并且包含了Figma、Sketch、Axure等常用的设计资产。按照设计团队的描述，其也是从腾讯繁杂的业务中寻找共性，抽取出普适的通用设计解决方案，为产品赋能。在研发侧支持业界主流的 React/Vue/Angular/微信小程序/Flutter 开发技术栈；多端适配，提供桌面端和移动端两套风格统一的组件资源。
有些已经远远超越了组件库的范畴，延展到了设计体系的维度，例如Ant Design、Xconsole、ArcoDesgin、TDesgin等，最终要选择基于哪个组件库进行研发，不仅仅是组件库的生态决定，还与公司政策、业务形态、研发技术栈等密切相关。
七、总结
组件并不是一劳永逸的设计工具，它需要紧跟业务的步伐迭代更新。只有当组件的质量达标，具备了一定的稳定性和易用性，才能被设计师和开发高效、高质地使用，更好地支持业务需求，为业务赋能。除了建立组件的设计规范，组件如何被更新、怎样被同步给相关方、怎样才能被正确地使用，也是影响产品最终质量的关键因素。
