• 产品经理跑过来说：“帮忙紧急支持一个需求，你就把原来 A 页面里面的某个部分加在 B 页面里，然后稍微调整一下就行。”
• 一个新产品的 MVP 阶段，很多功能和界面都可以复用现有的产品，我们却要为此重新设计开发。（也许开发可以复用之前的代码）
• 公司有多个设计师，每个设计师负责一部分业务，对于同一个控件，不同设计师的产出物会有一些差别，这让开发和设计同学都十分苦恼。
• 产品上线之后，某些不可抗拒的因素，希望可以尽快做一点调整，但是需要设计、开发、测试、审核之后才能上线，那么只能加班熬。

你也许在公司遇到过以上几种情况，这些情况往往会消耗你的时间和精力，进而影响你的情绪。为了提高我们的工作效率创造更多的价值，我们开展了组件化设计。

什么是组件化设计

组件化最早可以追溯到工业革命时期，福特创造了流水线生产方式。福特将汽车分解成零部件，再把零部件模块化组装，这一创举极大的提高了生产效率。那么，将设计拆分成一些基本元素，例如一个按钮、一个弹窗，再根据业务需求、产品逻辑重新组装，形成最终的产品，这就是组件化设计，一种新的工作流程。当然，组件化不仅仅只是设计的组件化，它同样需要开发的组件化，我们也不想仅仅停留在设计稿阶段。

组件化设计的好处

一致性

我们共用一个组件库，首先保证了界面的一致性，相同的组件不再出现两种样式，这对于设计师和开发同学都是很友好的，不需要重复设计开发，大大提升了工作效率；同时对于用户也很友好，在一个产品内，保证视觉上的一致性，可以减少用户额外的认知成本，让我们的产品更加可信。

提升效率

拥有一个组件库意味着不需要每次都重新造轮子，常规的并行式工作流程是：需求-需求沟通-交互设计-UI 设计-开发-测试-上线。使用组件化的工作流程，如果目前的组件库足够满足业务需求，那么只需要开发组合搭建就可以快速上线，甚至对于已上线的产品，可以通过更改后台来变更界面；如果需要新组件或升级组件，那么再通过常规流程来满足需求，同时新组件在通过组件委员会评估后加入组件库。组件升级后，整个系统内所有使用了该组件的界面都会同时修改完成升级。

我们除了提升工作流程上的效率，也提升了沟通效率。每一个组件都有唯一的命名，当我们互相沟通时使用一致的词语，这将减少很多的沟通障碍。

如何打造一个设计组件库

在上面的流程图中看到有一个设计组件库，那么该如何打造一个设计组件库呢？这时候就要先说一下「原子设计」这个概念了。原子设计是 Brad Forst 于2013年提出的设计概念，在化学上，原子结合在一起形成分子，分子组合成相对更复杂的组织……在界面设计时，原子设计是由原子、分子、生物、模块和页面共同协作，以更慎重和更具层次的方式创造出更有效的用户界面系统的一种设计方法。

对于我们来讲，原子设计是一个心理模型，其中的原子、分子等就是大小不同复杂度不同的组件，原子组件组成分子组件，分子组件和原子组件组成生物体组件，以此类推。了解了这个，就可以开始具体的实践了。下面的实践部分，我会根据我的情况来讲述，也许不完全适合你。

梳理全部组件

收集整理整个产品的全部组件，可以通过截图，也可以通过设计源文件，一一记录下来并整理分类，我们将所有的组件分成：导航、数据录入、数据展示、操作反馈和系统。在这个过程中你可能就会发现，有很多多余的样式或者需要升级的样式，记录下来，在下一个环节来解决。

归纳整理设计规范（Style Guide）

上面收集的组件都是表现，我们需要归纳整理出这些组件背后的规则：设计规范（Style Guide），包括颜色、字体、图形等，这些是每一个组件的基础，是确保一致性的最根本原因。也许你已经有设计规范并实时更新维护，那你将省去很多工作。前面梳理组件时发现的问题组件，在设计规范环节可以考虑如何修改或删减替换。

制作组件

进入制作组件环节，按原子设计这种组件嵌套的方式来制作组件，Sketch 的 Symbol 功能基本可以满足设计组件的需求，当然组件不能仅仅停留在设计图阶段，我们需要与开发同学合作才能保证后续实际使用。原子设计的作者描述使用了五个层级来搭建一个组件库，但是不同产品的框架结构和复杂度并不相同，所以你并不需要完全按照作者所说的五个层级来搭建组件库，也许对于你来说两三个层级就足以。再次强调：原子设计是个心理模型。

• 原子组件

原子组件是其他组件的基础，这里可以参考 HTML 里的元素来划分原子组件，比如：标题、按钮、输入控件等。

• 分子/生物组件

由几个原子或分子组件组成的独立小功能，比如：由按钮和输入控件组成的搜索组件；由头像、昵称、时间等组合成的一条聊天记录等。

• 模块组件

由原子、分子、生物组件按照一定布局结构组成区块。比如：金刚区、为你推荐模块、评论回复模块等。

• 页面组件

按照一定的排序规则、层级结构将模块组件组合成一个完整的页面或一个页面的某个状态。

在线文档

仅仅只是停留在 Symbol 库和代码库还远远不够，我们需要把所有的一切书面记录下来，方便更多人的使用和学习。我们需要记录每一个组件的名称、特殊状态、交互、代码、设计文件等信息，同时还需要记录每次的更新说明。

维护

如果你不希望辛苦的成果因为缺少维护而被遗忘，那一定要按时更新维护。你可以跟随产品更新的节奏同步更新组件库。

实践

正如这句话所说：听过很多道理但依旧过不好这一生。前面讲了那么多理论，在实际操作过程中可能还是会出现很多问题，下面讲一个具体的案例来看一下在实际工作中是如何制作组件并运用的。

项目背景

为了满足将来个性化推荐需求，希望把混沌大学 APP 首页改为灵活的 feed 流，同时，日益丰富复杂的首页，亟需规范统一样式。

需求要点

规范首页不同种类信息卡片的样式

确保不同种类的信息可以自由组合

梳理已有样式

首先，我们梳理了首页不同种类信息卡片的样式，也就是现有的首页模块组件样式，截图如下：

通过观察我们可以发现，这些模块组件可以统一抽象为：标题区+内容详情区+行为引导区，通过逐层叠加的方式组合而成。

因为我们不会过多的创造新的原子组件，所以接下来更多的就是对分子/生物组件的升级，也就是标题区组件、内容详情区组件和行为引导区组件。

设计分子/生物组件

我们希望标题区、内容详情区和行为引导区可以通过逐层叠加的方式组合成模块组件，我们选择将每个分子/生物组件的 padding-bottom 设置为 0 ，通过设置 padding-top 来调整组件元素和组件元素之间的距离。

根据上图的模型结构，我们对已有的首页分子/生物模型进行一一升级。

由于我们每一个分子/生物组件的 padding-bottom 设置为 0 ，因此需要在最后一个组件下面增加一个圆角组件来收尾。

生成模块组件

当每一个分子/生物组件完成后，就可以开始进行下一步组装了，由于前面已经确定了组合规则，这一步也就相对轻松一些，只需要进行叠加即可。

完成

到此组件的制作环节就结束了，当然，这些并没有展示我们全部的设计过程以及一些特殊情况，如果你对此还有一些兴趣，欢迎下载体验混沌大学的 APP ，也许你会收获更多。

写在最后

以上就是我们对组件化设计的探索与总结，组件化设计并不能解决工作中所有的问题，但是这会提高我们的效率，让我们有更多能量去挖掘更有价值的东西。如果大家有任何的看法，欢迎善意拍砖，互相学习，再会！

Powered by Froala Editor