前段时间京东APP进行了全新的9.0产品升级，借助这次升级，我们对京东设计体系中的组件库进行了重新整理和制作。接下来就以实际案例跟大家分享组件库构建的逻辑和思路，希望能给大家带来一些思考和帮助。

什么是组件库？

在开始之前，我们先来看下什么是组件库？

组件库是将界面设计中具有标准规范的基础元素和重复出现的控件进行归纳整理，通过对元素、控件进行命名和排列组合，最终形成一个可快速复用，便捷维护的组件库。

对比设计规范来说，组件库更像是一个强大的工具库，是保证团队协作一致性的基础，而设计规范更像是一份说明文档，是我们设计过程中的指导规则。

组件库本质上是一个普通的Sketch文件，其中的元素和控件可以被其他Sketch文件调用，如果编辑了组件库当中的元素或控件，那么调用了该组件库的其他Sketch文件也可以进行同步更新，并且通过组件分离功能也可单独对样式进行调整，非常利于团队协作。

Material Design 设计组件库

Apple Design 设计组件库

组件库的价值

组件库作为设计系统的一部分，在产品设计过程中设计师可直接调取，组合构建出新的页面，通过组件库带来的价值主要体现在三个维度：

1. 一致性

对于一个含有多业务系统的大型复杂产品，每个业务形态都是基于不同的场景去传达，因为场景的多样性，在设计表现上就会催生出不同的样式。而当我们使用统一的设计模式和组件库，能够在保持基础体验一致的同时，针对业务特性做差异化设计，给用户带来一致体验和品牌感知。在团队中有新成员加入时，也能够快速上手工作。

2. 效率

设计效率：一个产品内许多页面或模块会使用到相同的元素和组件，通过组件库的调用能够减少重复性设计时间。当组件设计细节有改动时，只需要改动组件库，所有共用组件库的页面即可实时响应。针对新的业务线也能够快速进行页面搭建，实现设计效率的提升。

产研效率：通过组件库搭建的设计框架能够快速移植到新的业务场景中，减少设计和产品之间的沟通成本。将组件库封装为代码库，减少冗余，优化性能，提升开发效率。

3. 协同