B端产品设计师在日常工作中，如果有一套合适的组件库就能够大大提高自己的办公效率。那么我们为什么要搭建自己的组件库呢，组件库对于我们的工作来说有什么好处呢？

首先，组件库可以提高团队的工作效率，保证设计产出的统一性；
其次，组件库可以提升团队的协作效率，大大提高设计和开发同学的产能；
最后，他还具体很强的灵活性，在组件库的基础上根据后期产品的更新迭代，可以不断进行维护更新，适应变化。

既然组件库对于我们的工作帮助如此之大，我们就来深入的了解一下什么是组件库。

// 1.什么是组件库

组件是构成界面的基础元素和重复出现的集合体控件，而组件库就是将这些重复复用的元素控件整理集合，形成统一规范的组件集合，以此达到快速复用、批量修改的目的。

组件是平台非常重要的组成部分，搭建组件库不仅可以节约设计和开发成本，也是对平台的设计规范的约束体现，而设计和搭建一个优秀的组件库不仅能保持设计过程中的规范性、舒适性，解决平台产品体验的一致性，同时也能够支持无限的特色定制化需求。

组件库是一个强大的工具库，方便设计师随时调用，对其中一个元素的修改都会将这个已调用过的组件同步更新，非常利于团队之间协作。

// 2.为什么需要组件库

我们在进行设计工作时，会有很多重复使用的输入框、图标、按钮、颜色等等，如果没有形成可复用的组件，那么在每做一个新的界面时都需要重新绘制，或者去之前做好的的界面里复制粘贴来进行使用。

这样的话，很容易疏忽数值，混淆属性，出错率极高。而且一个大型项目往往需要团队协作，大家分工完成，那么这样的情况下，不止工作效率降低，出错的情况会更加普遍。每当需要统一修改调整尺寸或者色值，那么就需要每个单独修改，对于大一点的项目来说，简直就是花费巨大的时间去做一项价值极低的重复性劳动。

若事先将已有组件形成组件库直接调用，既能提高设计输出效率、也能确保整体视觉效果的统一性，将省出来的时间更多投入到业务需求思考中，提升设计价值。

// 3.结合原子方法论

在2013年，前端开发工程师 Brad Forst 在《Atomic Design》一书中提到：“化学世界中，所有的物质都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成宇宙万物”。Brad Forst认为，设计组件应该由原子、分子、组织、模版、界面5个内容层面构成，最终构建成一张完整的产品界面。

// 4.组件库的作用

// 5.组件库都包涵哪些元素（示例）

颜色
在界面的设计中对于颜色的定义主要包含主体色、辅助色以及点睛色。根据所需要使用的颜色整理分组分类命名，方便随时调用。

文字
文字样式主要包含字体、字号、字重、行间距、字间距，在不同的地方使用对应的文字样式，以规范应用。

图标
图标绘制时要考虑图标的统一规范，包括大小，颜色，线条的粗细比例，视觉上的比重，同时要考虑放大缩小避免失真的问题，最好做成矢量图，在后续的开发过程中，可根据高保真效果图随时切换颜色。

基础组建
根据原子方法论，将独立的元素组织成各种组件，组件作为基础元素组合的容器，需要适配不同的设计尺寸，以减少复杂又重复的工作量，此时，就需要我们对组件进行自适应布局。

// 6.总结

在0-1构建组件库时，要清晰它的定义与作用，组件库的构建不仅提升了我们的工作效率，并让我们的设计产出有了统一的标准与规范，提升了设计作品的精细度。

当然了，所有的设计都需要完成落地，我们在项目中，可能尝试过整理出一套标准的组件规范，输出给到团队，但是很多时候前端工程师实现后的页面，并没有达到组件化后的效果，导致视觉还原度比较差。我们需要知道，组件不仅仅是一张设计稿，最终需要达成的，是可以集合多功能的独立系统，依托开发同事将组件代码化，真正的应用到提升工作效率中。