从构建到落地，学习组件化设计

Sponsor

UI组件化的设计越来越流行，对于大型平台的项目更加需要组件化设计，使用它不仅可以提高效率，后继也能让团队方便的迭代和维护，它的定制化、高效性和迭代性是最大特点。但是组件化设计并不容易，今天设计达人分享来自360TAD的组件化设计经验，学习组件化如何从构建到落地，我们一起看看。

目录：

1. 前言
2. 为什么要做组件化平台
3. 组件化平台的设计原则
4. 组件化平台的设计流程
5. 组件化平台的难点
6. 如何制定自身业务的组件
7. 组件化平台的迭代和维护

1.前言

后台作为支持前台业务的管理系统，它起到管理业务数据和管理前台内容的作用。

当公司业务规模的扩张时，后台的设计和开发需求也随之扩大。

大部分公司的后台的用户人数少，可能就那么几个管理员使用，亦或特定的几百人使用，所以绝大部分B端后台设计不像C端产品拥有广泛的使用人群（大规模商业化B端产品除外），公司也就不会投入大量的设计资源和开发资源在后台上面。

下图为ant design后台范例。

B端后台设计1.0时代，设计师将需求原型制作成视觉稿，在这一过程中，不太考虑组件样式的复用，组件样式一直在重复造轮子，组件各种样式和状态需要浪费设计师大量的时间和精力，这种工作流程低效，且拉低整个产品的上线周期。

B端后台设计2.0时代，B端后台设计不像C端那样具有品牌调性，后台组件交互形式和视觉样式具有高度的通用性，所以组件可以重复使用。

设计师只要将高复用性的组件做成设计规范，设计师接到需求，即可直接拼组件搭建界面，不需要再设计新的组件样式，这种工作流程极大的提升了设计人效，以前需要一周完成的设计，现在只需要2天就可以完成。

B端后台设计3.0时代。开发将设计师的制作的组件以代码的形式进行封装，打造成一个组件化平台。

PM用设计师制作的元件库直接搭建界面，原型完成之后，交互设计师review原型之后，对可优化的点进行优化，就可以交给开发，开发根据原型，直接进行代码的拼接修改调整即可完成后台网站的搭建。

一个后台网站用常规的设计流程，在设计1.0时代上线周期如果需要40天，那么在设计2.0时代只需要30天，在设计3.0时代（组件化平台）的情况下使用只需要10天。

组件化平台最大的价值是进行提效。将人力释放。开发有更多的时间进行代码的优化，提高代码质量，设计师有更多的时间优化设计细节、优化流程和熟悉业务。开发和设计不再被各种业务所追赶，拥有时间提升业务能力和专业能力。

2.为什么要做组件化平台

组件化平台具有3大特点分别为：定制化、高效性和迭代性，这3大特点决定了需要做组件化平台。

定制化

最大的组件化平台是ant design，其次是element ，既然有了ant design和element。为什么我们还要做自己的组件化平台呢？

原因在于我们自己的组件化平台可根据业务需求，对平台做定制化组件，这样可以更好的服务公司业务。

有些复杂或者特殊的业务，需要的组件样式或功能在ant design、element 并没有，基于这种情况，所以需要做自己的组件化平台。

高效性

高效复用于团队和公司业务后台，节约设计和开发资源。避免设计师在设计过程中重复做各种组件样式和状态，浪费大量时间。避免开发基于新的设计样式写代码，提高人效。

将人力用在更有价值的地方，而不是这种重复的搬砖工作中。

迭代性

组件化平台贴近公司业务，不断扩展组件类型，使得组件化平台服务于公司业务，后期基于业务需求不断的迭代组件样式。使得组件化平台成为一个真正有意义的提效平台。

3.组件化平台的设计原则

这里的设计原则指的是在设计整个设计平台需要明确的一系列原则，而这些原则都是在后续设计组件决策过程中的依据。

有了明确清晰的原则，对于构建整个组件化平台具有极大的意义。

兼容性

为什么ant design、element 两个网站很成功，很多公司后台在使用，其中一个核心原因就是他们的代码兼容性好、bug少。所以在构建组件化平台时候，需要开发花大气力优化组件代码兼容性。避免代码兼容性差导致业务组使用率低。

通用型

后台网站，因为信息量大，用户使用时间长且频繁，所以对于视觉设计来说，需要审美耐看，多看不腻，避免花哨的设计元素破坏用户对于信息的获取。

对于交互来说，后台网站设计已经基本固化，目前市面看到的组件设计几乎就是组件的最优设计形态。

所以在设计组件交互时候，可以参考目前主流产品（ant design、element）组件交互设计。

扩展性

在设计组件之前，需要熟悉后台常用的使用场景，知道通用的组件类型有哪些。

前期要尽量减少组件类型的冗余，方便组件功能和设计的后续扩展。前提也是要保证上线的组件可以覆盖绝大部分场景，避免组件化平台的不可用。

在设计过程中一种类型的组件各种状态做完整，避免后续改动。一种组件后续可增加其他类型，方便业务使用。这样可以很好的保证组件化平台健康而良性的发展。

4.组件化平台的设计流程

组件化平台在设计过程中，流程有原型设计、原型评审、视觉设计、视觉稿确认和最终的走查验收。

原型设计

前期需要交互设计完成对组件类型进行分类，常见的分类是基于功能分类。即相同功能的组件分为一组。

将所有组件分类完成，可生成了一个组件化平台内容目录。接下来就是对每个组件进行定义和功能类型设计。

在设计功能类型时，需要参考ant design、element等知名网站，以及结合自己的B端经验和现有业务具体情况，确定哪些组件类型可以先设计，哪些组件类型放在后面设计。和开发私下确认每个组件类型是否有遗漏或多余的组件类型。

原型评审

拉上所有开发一起评审，评审基于一个分类和开发讨论确定所有对细节。确保整体交互细节统一，交互效果和规则无问题。下图为select组件部分内容。

视觉设计

视觉设计师前期需要花大量的时间用于探索视觉风格和对应的视觉规则，例如颜色规范、字体的颜色、字号、行高和栅格规则等。保证视觉风格使用合理。在视觉元素确定之后，再设计组件。

视觉稿确认

视觉设计基于交互稿，完成视觉设计，完成后，和交互设计师一起确认，当视觉稿没有问题后，发送给前端开发。

走查验收

交互和视觉设计师对线上开发的组件效果进行走查，形成走查报告，并发给前端开发，并和前端开发开会讨论，形成最终的走查报告，将前端开发修改后的问题，从走查报告中删掉，这样可以保证线上问题逐步修改完成。

5.组件化平台的难点

在组件化平台的过程中存在3个难点：1.设计师要明确前端实现逻辑；2.组件类型设计取舍；3.视觉全局规划。

前端实现逻辑

明确前端demo展示和代码配置的区别，组件demo展示的交互样式可以在代码中展示，也可以在代码中移除。如下图所示，含有可删除的图标，其他前端使用时可以在代码中删除。

明确前端demo展示和前端可更改的范围。例如block组件，其他前端复用代码时，可以自定义设置其宽度以适应各种不同的页面内容设计。

组件类型设计

选择常用组件类型，尽量不上功能兼容性差的组件。前期平台尽量不上低频类型的组件。

例如对于选择器的多选样式，我选择了选项前加复选框，而不是用目前ant design的选项被选中后勾号放在后面。

这种选择有两个理由：1、用户未选择，很难判断这个选择器是单选还是多选。2、选项前加复选框，和之后做树展示保持一致，样式上可以复用。

下图为上线平台样式：

下图为ant design样式：

视觉全局规划

组件种类众多，每个组件对应的类型也众多，组件化平台需要考虑所有组件的兼容性，所以在定义颜色、颜色四态和元素间距时候，需要全局平衡，尽量减少规则太多，导致组件化平台设计规则紊乱。

以颜色为例，基于360品牌色调，确定了主色基调，通过对多种因素（例如各种不同素质的显示屏）的综合考量并进行试验，结合颜色具有的三个特性，并从视觉的角度定义辅助色。

关于按钮：按钮状态遵循了“状态可感知”原则，快速的让用户了解自己处于何种状态，基于这种情况，将按钮5个状态清晰的表现出来。

6.如何制定自身业务的组件

设计团队如果已经做了很多后台业务，那么只需要将所有对后台业务对组件进行梳理、分类、将存在重叠组件类型进行删除。形成属于自己业务的组件库。

7.组件化平台的迭代与维护

配合业务进行组件化平台的迭代和维护，使组件化平台在迭代中不断发展成长，在这个迭代和维护过程中，设计师是产品经理的角色，让设计师和组件化平台一起成长发展。

交互设计：吴轶 ；视觉设计：侯婷、宋紫漫
来源公众号：360TAD

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。