交互组件库是什么？

首先问一个问题，你认为交互设计的日常工作是什么？

如果你认为仅仅是画线框图可就误解了，或者是太狭隘了。

如果觉得设计师只要能画好功能线框图那就很难成为一个好的交互设计师。 不管是产品还是交互设计，画图这一个步骤都是最不重要的步骤。

我把交互设计的工作分为三大部分： 前期调研、中期设计、后期跟进。 中期设计包含设计思考和设计绘图，所以你看，前期调研和中期的设计思考占比接近一半，这才是最重要的部分。

也就是要先想清楚，方向对了，画图只是水到渠成的事情。

所以我现在回答你交互组件库是什么？

是工具，存粹的工具。

工具的特点是重复性强，你能用，我拿来也能用，尽量少重复造轮子。 交互组件库就像是设计师手中的积木，当设计师方向确定后即可使用积木搭建出自己想要的建筑。

交互组件库能给我们带来哪些好处？

好处太多了，谁用谁知道，我只总结两点。

1、提升工作效率

避免每次做设计都要重复绘制组件，组件库可以大大提升我们的工作效率。

2、提升产出质量

实际工作中留给设计师产出的时间是有限的，需求要上线，不可能无限等待，有时候甚至需要设计师的产出又快又好，要想产出方案好，那么调研和思考的时间必须够。

在总时间不变的情况下，挤压绘图时间能够节省出很多思考的时间。

使用组件库就能帮助我们有效减少绘图时间。

怎样做一份贴合自己业务的组件库？

要想获得一份组件库很简单，现在很多大厂都有开源的组件库，但是你拿来直接用就会发现效率可能并不高，为什么？

两个原因：

其一，大厂的组件库一般是UI组件库，意味着有颜色，而交互稿最好不要有色彩偏向，避免给UI同学造成先入为主的印象，所以交互稿最好做成灰度稿。

其二，大厂的组件库大部分都很全面，一个按钮动辄几十个组件，而交互设计一般能用到的组件因为是灰度稿，所以比UI组件少多了，组件太全面使用起来反而冗余难找，找半天还不如重新绘制来得高效。

所以你看，有些东西虽然好，但是不合适，那就是不好。

（好像人生哲理啊哈哈哈哈……）

怎么做一份贴合自己业务的组件库？

4个步骤：梳理、分类、制作、迭代

梳理

首先把自己常用的组件库梳理出来。

每个人工作中使用的组件都不尽相同，可以在基础组件的基础上进行增删改。

分类

第二步就是把自己常用的元素进行分类， 比如我是做B端直播的，日常能用的组件也不算多，我把我需要的组件分为了几类： 图片素材、图标、按钮、头像、反馈类、数据输入类、导航类、以及一些移动端特有的组件等。

这里要多说一点，你会发现我的组件里有一个图片素材这一个选项，这个我得解释一下为什么我需要这个组件。 前面也提到过了，组件的目的就是为了提升工作效率，减少重复造轮子，所以我把我在绘制交互稿时常用的元素都做成了组件， 而图片素材就是我需要常用的元素。 因为我做直播产品，直播产品经常有视频和连麦以及PPT等信息。

而我个人绘制交互稿的习惯是尽量贴合实际使用中的场景，也就是尽量贴近高保真，但是仍然保持灰度稿，一来高保真能让开发和设计更好地理解我想要传达出来的想法，二来纯属个人习惯，能用图标和图片代替的就不用文字。

制作

第三步是制作，制作这一步其实很简单，但是很耗时间和耐心，但是你想呀，前期制作完成后续就可以持续使用，也是一劳永逸的事情。

我习惯使用figma来做交互稿，所以也会使用figma做组件库。 figma的优势我就不赘述了，它的组件搭建功能非常强大，你也可以使用蓝湖的MasterGo或者即时设计，它们的组件功能和figma差不多。

但是不推荐sketch，三个原因。

第一，sketch不是在线设计软件，对于我这种在家和公司两台电脑需要协作的情况根本无法满足。使用figma可以在公司做完设计后，回到家后想改个东西立马用家里的电脑就可以同步修改。

第二，sketch太吃电脑内存了，文件稍微大一点就卡顿，卡的不是软件，而是我们的心啊……figma或者蓝湖的MasterGo就非常丝滑。

第三，sketch的组件创建远没有figma强大，还处于比较基础和笨拙的阶段。

综上，sketch迟早要成为时代的眼泪的……

figma创建组件的教程网上有很多，大家可以搜来看一看，其实很简单，摸索一两个小时就能掌握。 这里简单给大家录个屏让大家感受figma调用组件有多方便。

迭代

最后一步就是持续迭代，因为第一次做的组件库很难一下子做得非常完善，我一般的习惯是在绘制交互稿的时候发现组件库有缺漏的，记录下来，每周找一个统一的时间一起补充到组件库中。

组件库资源分享

下面分享一份我自己日常工作的组件库，不一定适合你，但是可以拿来改改成为属于你自己的组件库。

关注我的公众号“馊面包”（我的站酷首页就有二维码），公众号内回复“组件库”就可以获得源文件。

目录：点击可以直接跳转到对应页面👇🏻

组件：一些常用的组件👇🏻

组件使用指南 👇🏻

帮助你掌握上手组件的使用方法。

最后，获得源文件的方式：关注我的公众号“馊面包”（我的站酷首页就有二维码），公众号内回复“组件库”就可以获得源文件。