B端组件库超实用总结
编辑导语：B端产品设计师在日常工作中，如果有一套合适的组件库就能够大大提高自己的办公效率。那么，怎样建立自己的组件库呢？
近两年一直都在做B端产品相关的设计工作，深刻的体会到有一套组件库对于B端产品的设计来说是多么的香！
本文将结合B端项目，从多角度深入细节去解析组件库，帮助我们理解、构建组件库。
一、组件库 UI kit 如何理解
这个概念对于大家来说应该都不陌生，但是还要总结下自己的理解：
组件库是可以理解为是一个重复使用的界面设计元素的集合体，它是一个文件库。
- 「组」是设计元素的组合方式；
- 「件」由不同的元件组成；
- 「库」仓库，指储存组件的地方，即一个Sketch文件。
这里提一下，组件库在整个系统中扮演的是行为层面的对接，是团队内部设计师和开发间的横向协作，是保证产品输出一致的规范基础，设计规范更像是一份说明文档，组件库是设计规范组成里的一部分。
二、组件库的好处
提高团队效率，保证产品一致的输出。
1. 统一性
- 在团队中，避免多人多风格的现象；
- 新成员加入，可快速接手工作；
- 在产品体系内，保证所有产品都呈现一致的设计语言、产品调性、建立产品的连贯性、一致性；
- 在用户侧，统一的体验，减少用户学习成本，提升使用体验。
2. 高效性
- 可以大大缩短设计和开发团队重复开发的时间，提升团队协作效率；
- 开发新项目或迭代时，可减少沟通时间，快速适应市场。
3. 灵活性
- 在组件库的基础上，根据产品发展，不断更新维护库，适应变化。
- 是规范不是规定，只是搭建基层框架，需根据实际项目在不脱离的基础的情况下，灵活应用。
三、做组件库的时机
做组件库之前要思考时机是否恰当，那什么时机才适合去做呢？
在B端产品中，做组件库的时机要需要产品发展到较为稳定的版本。
它需要有多个需求沉淀出内容来，毕竟B端的组件库需要结合业务设计出符合业务场景的样式，真正可以组件化的逻辑和样式是不可以凭空想象的。
所以前提是要产品有一定的发展，要足够的了解业务逻辑，积累足够的业务场景，再开始着手设计组件库。
对于我们产品目前已经过了探索阶段，处于向成长阶段过度的时期，整个公司这一季度把系统性提升产品和服务的竞争优势提上了日程，毕竟做出产品差异化的前提需要做好底层架构工作。
也是趁着这个机会，我们设计部门又一次全盘复盘了一下组件库，迭代一个新版本，以更好地适应产品的发展。
四、组件库该怎么做
组件库的设计可以具体归纳为三个阶段。
1. 理解阶段
我们在制作组件库的过程中应用到了两个概念：原子化设计理论、结构细分。
在结构细分之前要了解什么是原子化，有关原子化的文章数不胜数，有心的童鞋可以自行百度学习。
结构细分其实就是将各个独立的模块（组织）进行打散（原子）、细化、整合、重组。举个
上一篇： B端体验细节（一）：按钮的里里外外
下一篇： B端设计师如何挖掘自己的设计价值
产品中心
推荐产品
热门文章
联系我们
公司: bowen.cn
联系人:
电话:
微信:
邮箱:
地址: