“ 近年来，随着Style Guide 向 Design System的发展，越来越多的设计体系被我们熟知，例如Ant Design、Fusion Design及Material Design等等。由于行业性质及产品差异而各有不同，但设计体系其核心指导理论均为Atomic Design（原子设计），即通过原子化设计出一套架构严谨、规则统一的框架体系，以模块化的方式实现产品运作，从而大大提高产品设计与开发效率，其中还包括设计资产的沉淀及设计工具赋能。”
星火在To B业务开拓新市场，在这样的需求背景下，星火UED团队从设计系统的概念出发，围绕从如何提炼满足业务场景的组件库，到输出统一的设计规范，来满足To B业务的降本增效。
01—组件库概念
组件库是什么意思呢？其实也没啥意思，就是简单的理解为帮助我们排忧解难。 头部To B设计团队这样来定义的组件库：组件库是将界面设计中，具有标准规范的基础元素和重复出现的元素以可被复用为目的进行归纳整理，形成规范化的控件。
通过对控件进行命名和排列组合，把产品需求场景化、视觉表达模块化。最终形成一个可快速复用、便捷维护、能构建整个设计方案的组件库。
组件库是一个重复使用的界面设计元素的集合体，它是一个文件库。✦ 组 ✦ 是设计元素的组合方式；✦ 件 ✦ 由不同的元件组成；✦ 库 ✦ 储存组件的仓库，我们是基于Sketch来搭建的组件库，所以我们的组件库其实就是一个Sketch文件。
然后我们来看看组件、设计规范、和我们产品的关系：
组件库简单来说就是一些积木，而产品相当于积木拼起来的成品模型。我们可以根据业务需求，以“搭积木”的方式，让“模型”快速落地。而“搭积木”过程中并不是随心所欲，至少需要看一看“使用说明”，而“使用说明”就是设计规范。组件、设计规范、产品差不多就是这样的关系。
02—
组件库价值
1、组件是效率工具
UI工作上：使用组件库可以快速复用组件，提高效率。组件库可以避免我们重复的造轮子，将不必要的、重复性劳动的时间节省出来，做更有价值的事。缩短从设计到交付的周期，降低时间成本。
工作流程上：与研发有效沟通的工具，提升团队协作效率，提高设计还原度，节省沟通成本。研发可以建立公共组件库，极大的提高开发效率。
2、组件是质量保障
对内部：多位设计师协作，依然能保证设计风格的统一，解决视觉一致性的细节问题。
对用户：提高产品体验一致性，降低认知成本，减少用户决策、提升操作效率，加深对产品对记忆
3、方便产品迭代
随着产品的业务变化、或发现一些问题、或需要优化用户体验的时候，针对单个控件进行调整，就可以影响全局，十分便捷。
4、商业价值 降本增效
用组件库来提高团队协作的有效性和产品迭代的连续性。更高效的沟通、更迅速的开发、更一致的体验。节省产品整个周期的时间成本。
03—
痛点分析
组件库可以让设计协作变得更丝滑，但首先要解决几个关键问题：
团队协作的时候，组件不统一，只能把组件发来发去，更新组件后，还需要及时同步给其他设计师，工作成本变高、严重甚至导致整个项目进度受阻，页面视觉呈现不统一、用户体验不一致，组件复用性低，变更主题速度慢，阻碍业务的快速扩展。
04—解决方案
那么该如何优化这些问题，首先，第一步，规范设计语言
第二步，明确设计原则市面上已经有很多成熟的组件库，但不一定贴合我们自身的业务特点，我们基于B端产品和自身业务特点，融会贯通一些约定书成的设计原则，制定设计规范，减少风险的同时也易推动落地效率简化流程：让操作流程简洁直白清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策帮助用户识别：界面简单直白，减少用户记忆负担一致性与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中的一致：所有的元素和结构需保持一致，比如：设计样式、图标、文本、元素的位置等反馈控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作页面反馈：操作后，通过页面元素的变化清晰地展现当前状态可控用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策结果可控：用户可以自由但进行操作，包括撤销、回退和终止当前操作等 第三步，搭建具备复用性和拓展性的组件需要针对业务场景进行深度思考和分析，与同事深度沟通、统筹。才易形成满足设计标准和业务需求的组件库。
根据颗粒度大小，按照原子设计方法论，把所有控件分成原子、分子、组织、模板和页面五个维度，让他们共同协作，以创造出更有效的组件库。
1、原子：原子是所有元素中最小的单位，他们没有办法再进行细分，并且本身不具备独有的功能。
2、分子：分子由原子按照既定规律进行组合构成而来。形成了一个组件，从而被赋予了独有的功能。
3、组织：同理，组织就是由多个原子、分子构成的模块。
4、模版：模版基本开始和产品挂钩了，它多个组织进行组合，从用户体验五要素来说，它属于框架层，模版的意义在于帮助设计师 专注在功能、内容的排版布局上。
5、页面：最终我们产出的高保真 视觉稿，它就是将模版具像化的结果，对应着体验五要素的 视觉表现层。
B端业务主要解决的核心问题是：增、删、改、查，我们把原子组件按照应用场景再进行归纳。便于设计师，调用组件库时，能快速找到需要的控件，减少选择，因为选择多了，每一次操作都在拉低效率。
以上是对搭建原子组件库及制定设计规范的一些总结， B端项目不同于C端项目在于更重产品逻辑和业务流程，更注重降本增效，需要明确设计目标和流程。提高不同用户高效操作，降低用户学习成本。
设计系统需要产品、交互、设计、开发等多方协作，需要进行不断的检验和优化迭代，才能让设计系统真的成为平台重要的生命体，实现降本增效和体验的一致性目标。
除非注明，否则均为UIED用户体验学习平台-宜信设计团队的原创文章，转载必须以链接形式标明本文链接
本文链接：https://www.uied.cn/10201.html
