设计干货：产品设计团队如何搭建和维护组件库？

Posted 2021-01-22 productcompass

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

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

一个优秀的组件库可以复用在许多项目中，也可以大大减少设计师的工作量。目前市面上已经有一些开源的组件库（如：ant design、material design），然而这些组件库在我们经手的实际项目中却没有太大的意义。

这是因为不同行业、不同产品、不同项目的常用组件差异非常大，即使有了这些现成的组件库，也无法适用自己的产品，可以说每个公司所需的组件库都是非常个性化的，这也正是千米网想要搭建自己组件库的原因。

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

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

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

在工具的选用上，几乎没花太多时间。千米一直在使用墨刀作为生产力设计工具，也已在墨刀中积累了大量的设计文件和素材。同时，墨刀的产品特性支持多人协同编辑，也方便记录交互逻辑跳转，这些特性是在组件库搭建和维护当中都不可或缺的。所以，千米UE组毫不犹豫地敲定用墨刀来完成组件库搭建。

大而全还是小而美？

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

如果只将核心业务模块拆解，形成小而美的组件库，那实际投入使用后，许多页面没办法用组件库而只能从零到一绘制，最后与没有组件库的时候相比也没有太好地提升效率。

然而，大而全的组件库也有一些问题。

首先，大型组件库意味着维护成本高，在产品高速迭代的情况下，组件库的迭代有可能跟不上产品的迭代最后导致被弃用。

同时，以什么样的框架搭建组件库也会大大影响后期的维护与使用。

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

1基础组件

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

2通用组件

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

 

3核心组件

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

4聚合组件

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

 

5个性组件

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

在搭建中理解业务

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

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

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

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

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

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

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

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

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

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

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

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

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

维护与迭代

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

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

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

 

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

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

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

总结

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

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

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