高级进阶 | 如何建立适合产品的设计组件库（上）
点击"小凯的设计笔记"添加关注，我们一起进步🤔🤔🤔
本文1937字，预计阅读10分钟
组件库是设计系统里的一个重要分支，我们应该不会陌生。一个合适的组件库可以帮助设计师和开发者提高工作效率且让产品的可用性更高、风格更统一等等，那么今天我们就来聊聊应该如何建立适合的组件库。
发现问题
首先思考一个问题，什么样的情况下会需要建立组件库呢？建立组件库的目的是什么？带着这两个问题我们来看看下面的工作场景：
设计师：xxx把你之前的设计稿发我下，我要用里面的一个组件。
设计师：xxx为什么你的稿子里的颜色和我的不一致，到底应该以哪个为主？？？
设计师：xxx为什么组件不统一？？？
设计师：多个稿子用到了同一个组件，想做修改但是工作量很大怎么办呢?
产品经理：这次需求跟上次没有什么大的变化，很多组件都可以复用，为什么设计师需要那么多的时间？？？
开发小哥：为什么每次给的设计稿样式，颜色，组件都不同，我又要写新的样式表进去。
......
想必上面的场景我们很多同学都很熟悉，是我们以前或现在正经历着的，通过上面的场景我们不难总结出一些问题来，例如：
设计师的效率变低，设计稿可控性差，设计师缺少规范指导等;
设计师以及开发者团队协作效率低，问题多等；
开发者抱怨开发工作量增加，觉得设计师不专业等；
产品经理抱怨设计师进度太慢，等等一系列问题；
......
分析问题
这些问题会让人头大，上面的问题我们可以通过建立适合的组件库来解决（因为文章标题已经告知了答案，所以不做过多分析）。那么如何建立组件库呢，我们通过参考多个大厂的设计组件库先来看看他们的差别：
（点击看大图）
例如IBM Carbon 的组件库有 32 个组件，Element 有 11 个，UWP有12个等等。然而看完之后还是一脸懵逼。到底有多少个组件才算是一个完整的、成熟的组件库呢？组件太少，没存在的必要。组件太多又会造成设计系统庞大繁杂，不利于扩展维护以及多方协作。那么一个组件库到底有组件多少对的呢？答案是：“合适”，库里面的组件不能太多也不能太少。关于这一点《设计系统的组件库，究竟是应该大而全，还是小而美？》这篇文章可以给你详细的解答，在此就不做过多赘述。
那合适的组件库是什么样的呢？这个问题就像找对象一样，每个人的要求都不尽相同，但是有一些基本的要求是必不可少的，例如做人做事要实在、有包容心、有孝心、懂得尊老爱幼、为人正派、有爱心等等。
同理，组件库也有一些最基本的要求，例如组件使用率要高、扩展性要高、方便团队设计师协作、风格以及命名要统一、以及要轻量化等等，所以不用太纠结，适合你自己的就是最好的。
可能很多小伙伴还是一头雾水还是不知怎么样做，如果遇到这样的情况呢告诉你们最简单的办法，那就是从最小的、最常用的组件入手，然后快速征集意见更新，然后逐步完善起来。
解决问题
我们先来归纳下常规的组件库里面都会有那些常用的组件存在：颜色、列表、文字、图标、弹层、按钮等等，这些最基本的都是组件库必不可少的组成部分。我们通过Sketch的Symbol功能进行组件设计，利用Libraies进行团队协作。下面我针对几个最基本的组件模块教大家如何设计组件库：
颜色：
颜色就是产品的气质，赋予什么样的色彩就会传达出什么样的气质，一般来说每个产品会有一种主色、3-5个辅助色、再加上文字的颜色 、背景色、分割线颜色等构成产品的设计系统。
（点击看大图）
上图就是组件库内的颜色模块，是不是感觉和平时的设计文件差不多，其实它就是一个普通的Sketch文件，跟日常的设计稿没有区别。
下面我们在看看她们Symbol里面是怎么样的：
需要注意几个重要的点：
1、组件库本身就是一个Sketch文件，但是组件一定要使用Symbol来制作（很多设计师并不用Symbol），重点 重点 重点，不然组件是不可用的；
2、组件命名以及排列要规则有序，方便小伙伴们查找对应的组件；
3、一定要考虑到响应式解决方案，这会用到另一个小知识，在列表模块会详细解释；
4、组件之间的元素是可以互相替换的，例如按钮的颜色，文字颜色都可以根据场景不同选择对应的方案，图标可以根据场景替换对应的颜色或者其他图标等等，这个在按钮模块会提到。
列表：
列表基本上应该是所有产品里面最常用的组件之一了，它的使用场景是多的，它当然必不可少。
（点击看大图）
列表组件在Symbols里面的呈现是这样的：
（点击看大图）
在建立列表组件的时候我们要充分考虑使用场景，列表的使用场景太丰富。还要考虑响应式的方案，因为一个列表可能在ios端 、安卓端、 ipad端以及其他端都会使用，所以在做列表的时候我们要用到Resizing这个功能，根据需要来进行调整。
（点击看大图）
上图的这三个列表用的都是一个控件，利用Resizing功能做响应式调整，既方便又快捷可以提高很多工作效率。
需要注意几个重要的点：
1、对Resizing功能不熟悉的同学可以多尝试，找到最合适的设置；
2、列表里面的文字，背景色以及图标建议都Symbol，这样方便元素的调整以及替换提高使用灵活性；
3、一定要考虑到响应式解决方案；
文字：
在一个产品中我们会有很多的文字样式，例如：大标题、副标题、正文、提示等等。
（点击看大图）
我们的文字样式，可以利用Sketch的样式预设功能针对每个文字类型创建样式，后面我们就可以利用样式表来快速调整文字。
（点击看大图）
通过建立文字样式，可以快速的对单行，多行，各种文字进行样式调整，提高效率，增加文字样式的统一性。我们还可以通过文字样式管理，对文字样式的预设进行增加、删除、改变等操作。
需要注意几个重要的点：
1、因为文字的灵活度极高，所以不是所有文字都有适合做成组件。可以在组件库里面做好最基本上的样式展示，方便团队成员查阅，然后在自己的文件内设置文字样式；
2、样式预设的功能不仅仅只可以设置文字样式对图层样式等等一样适用 快去解锁新技能吧。
下期预告：
因为这篇文章比较长，所以分为上下两个部分，有兴趣的小伙伴们可以关注一下，欢迎大家一起探讨交流。下篇将在明天发出来，敬请关注。
我整理了30家大厂的组件库源文件文件，分享给大家，关注我的公众号回复“组件库”获取文件，期待着你的进步。
作者：Kane_D
本文由Kane_D原创发布于小凯的设计笔记。未经许可，禁止转载。
往期精彩✨✨
想法结合工具，让你的效率翻十倍
渐变质感技法：渐变配色之对比用色（上）
点击“阅读原文”更多内容等着你✨✨✨