一个拥有1328个组件的完整组件库是如何搭建和维护的

作为设计师的你，一定对「组件库」的概念并不陌生。

简单的来说，组件库就是界面设计中常用的控件与元素的组合。或许我们可以将组件库比作乐高的基础颗粒，它们看起来很简单，也没什么特别的，却可以通过设计师的巧手搭建出炫酷的城堡。

千米网是中国领先的专业电商 SaaS 平台，主要服务新零售企业，产品包含订货系统、分销系统、微商城、门店管理系统等电商解决方案。

电商产品错综复杂，产品线之间牵连很深，让这棵盘根错节的大树在面临大版本迭代时苦不堪言。

为了保持迭代时设计风格统一、设计语言一致，并减少沟通成本，同时减轻产品经理原型设计的负担，产品架构师宋高峰协助UE组从零到一搭建一套相对完整的组件库。

大而全还是小而美？

组件库究竟应该小而美还是大而全？这似乎是一个两难的抉择。

凭借对业务的深入理解和扎实的产品背景，千米UE组以技术架构为基础，结合业务特点和产品逻辑，将千米众多产品线归纳成为5个组件库

基础组件

基础组件如同积木的最小颗粒，按钮、下拉框、输入框等基础内容被归档在这里。

通用组件

通用组件就是复用性很高的一类非行业性组件，比如登陆注册、找回密码等 大部分 App 都有的功能。

核心组件

核心组件是基于行业来提取的，比如电商常用的购物车、结算页面、订单页面。

聚合组件

聚合组件更像是多个导航集合的入口，比如商城的个人中心页面。

个性组件

个性组件是复用性较低的部分，比如营销类活动。

在搭建中理解业务

基础框架梳理清楚后，设计团队着手梳理业务，搭建组件库。

通过将具体产品的抽象提取，设计师们在搭建过程中更加深了对业务的理解。

UE负责人刘甜甜说：“大家都知道，业内很多的UI设计师只关注界面的美丑，而忽略页面的流程交互。我们用墨刀搭建组件库，让我们的设计小伙伴们对页面的流转更加清晰，避免了一些页面流程交互的疏漏，在交互上有了更多的提升。”

从某种程度上讲，组件库是对设计师的约束。

配色、图标、按钮等一系列设计语言要素共同构成了一套标准化的设计体系，限制了基础设计方向，为后期的设计决策提供着指引。

通过这些组件的设计积累，也避免了多业务线多款产品设计上的不统一。

从另一个角度看，组件库也是对设计师的解放。

过去，在时间有限的情况下，设计师常常会优先基础层面的表层设计，而忽略了业务层面的体验优化。

有了组件库后，通过提升设计团队的业务认知，把组件省下的时间去触及业务，来更好的为设计服务，让业务和设计相辅相承。

团队协同时，组件库的功用被放大到极致。

组件库搭建好后，设计团队在墨刀上与产品团队共享了这套组件库，将其提供给产品经理使用，进行原型搭建。

协同之间，组件库让产品和设计团队避免了表层展现不同所带来的理解误差。

“比如单选项，一般选项少时我们会用radio ，选项多时会用下拉框选择，当我们定义了组件给到了说明，就相当于给到了规范，定义了规范，减少了一些不必要的沟通和解释。包括一些核心组件的信息结构布局，由专业的设计定义，产品直接使用，也提升了产品的效率。”千米UE负责人刘甜甜解释道。

维护与迭代

迭代分为两方面，一方面的迭代是基于业务，业务有变化，组件就需要跟着更新。

另一方面是设计本身需要迭代，这是出于视觉优化的迭代。

迭代可以基于需要分周期进行，旧的版本对应封版作为记录留存。

在搭建之初，千米UE组就考虑到了后期的维护和迭代。结构清晰的基础搭建为后期维护提供了一个条理清楚的框架。

对于日常维护，UE组为每个组件库分配了相应的责任人，让团队每个人只需要关注自己相关业务的组件库维护。而墨刀本身的多人协同属性，也让组件库的协同维护成为可能。

另外，组件不仅需要 UI 的维护，还要有前端开发的通力配合的，才能保证更好的推进和落地。

总结

组件库搭建是一个团队共同完成的大项目，为了搭建出一个真正高可用、可拓展的组件库，一定要在团队内、部门间打通沟通阻碍，完成高效配合。

开始搭建前，也需要以产品特点和技术架构确定组件库的结构，再顺着结构脉络梳理产品功能。

当然，一款优秀的工具更是不不可或缺的。上手快，功能涵盖页面设计与交互跳转，支持多人协作共同编辑，墨刀或许也可以成为你搭建组件库时的得力帮手。