聊聊组件库

在设计师的工作中、组件库是可以高度复用的，减少了设计师的重复性的工作，当团队协作时也保证了相互之间的顺畅。所以这里梳理下我在工作中对于组件库的看法和制作方法。

组件库的意义

1、保证上下游的工作更顺畅

Axure-RP组件库：Axure是比较普遍的原型设计工具，广大的产品经理和交互设计师、体验设计师都在用。所以Axure-RP的组件库是可以由UE、UX设计师逐步完善后同步给产品的，让那些出低保真原型的产品使用，减少了对于原型部分的重复工作。

这里值得注意的是，要针对产品团队的能力和流程合理的要求其使用规范。最近的标准为，产品经理在产出原型时、所用的组件皆要在组件库范围内，如出现了组件库内没有的组件、需要及时与设计师沟通，以看是更新组件库还是使用已有组件库。

稍高一些的标注，产品经理能够合理的使用组件库。当然这需要团队的素质，和产品经理对于组件的理解。

sketch组件库：如果您是全栈设计师，交互、视觉一把薅那么可以考虑使用sketch组件库。或者说产品经理的原型距离实际产品的差距较小，也可以同样将工具的中心转移到sketch里。

如果您是交互设计师或视觉设计师，那么请这两个岗位的同学一起完善组件库。交互设计师在这里更注重控件样式的正确表达、说明。视觉设计师更注重于线上产品的高度一致。

2、保证设计的统一

保证视觉的统一,一个产品在固有的品牌基调上仍然有不同调性的可能性，如果没有组件的统一，必然会让产品五花八门，其实如果你们团队在组件库的对接上已经很顺畅了，那么基本会保证了设计的统一。

保证交互的统一，用户在使用产品的过程中，会逐渐的形成对于操作、流程的概念模型。对雷同、相似操作、流程的统一、会减少用户的认知成本、提升可用性。

3、便于管理

Axure-RP组件库：优势在于可以将说明附在组件下，加强团队的管理，用以后续的持续更新是很方便的。

sketch组件库：可以使用libraries或者阿里语雀下的Anto，（文字尾部会给与网址链接）这类组件库做到了全局修改，大大减少了重复的工作量。

这里说一个小方法，使用语雀的插件“Kitchen”来统一管理控件颜色，比如、创建成为组件后、使用Kitchen的画板创建颜色并填充，这样满足不同项目再不同风格上的需求，也减少了工作量。

4、减少设计疏忽

组件库的另一个含义在于，设计师在相应场景下选择合适控件会减少犯错。一般来说一个控件会对应了场景、前后置条件，或者说搭配了一个短线的任务流程。但这也同样可能让设计师按部就班，这里的权重需要权衡。

组织库的创建流程

1、梳理组件清单

2、场景分析

如上所说、当你的组件库需要提供给产品经理或者其他设计伙伴协同使用时，则需要加注说明，场景分析就是最重要的说明之一。描述出你的空间在什么条件下使用。

3、方案设计

开始具体的组件设计，可以根据现有的调整，也可以在项目迭代的过程中逐步完善

4、意见收集、主动验证

一方面可以听取其他同事的建议，另一方面最重要的是，在设计，开发、测试，上线的每个环节中，有修改或者意见反馈请同步修改你的组件库、并同步信息。

最后写给2020的自己，疫情下经济压力大、工作压力大，希望大家不要放弃，共同努力