如何用项目思维，从零开始建立「设计组件库」？

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

前段时间，我在某个设计师交流群和知乎发现了同样的问题：有设计师根据目前主流的设计系统（比如Ant Design等），设计出了适合自己公司产品的设计组件库，但是设计方案给到前端工程师时，才得知目前产品的前端框架是基于 VUE 的，或者更老一点的前端框架，所以现阶段使用 React 的 Ant Design 设计系统不合适。

当时发现这个问题之后，就想分享一点我个人在公司建立设计组件库的经验。所以，本文将从「项目思维」的角度，分享如何在公司从 0-1 建立「设计组件库」。

首先，要明确一点：如果我们承担起了建立「设计组件库」这项工作，则需要将它当成一个属于自己的项目或产品，去规划、设计、开发、跟踪。在职场里，资源会向「有想法、有目标、有担当」的员工倾斜。有了这种项目经理的认知，我想你在建立设计规范的道路上就成功迈出了第一步。下面是具体的几个步骤：

明确目标和用户

目标：统一产品体验、提升协作效率、迭代技术框架。

所以，能满足上述目的的设计组件库，才是一个真正意义上的设计组件库。因为，完整的组件库不仅仅是 Axure 元件库、Sketch Symbol 等设计软件的组件，而是要深入到开发层。

简单点说，我们做的 Axure 和 Sketch 组件，工程师需要将它们封装成代码层的组件，才能提升从设计到开发的协作效率。相反，如果只是设计软件层面的组件，是无法从本质上达到设计组件库的目标的。

说完目标，我想你已经知道设计组件库的用户是谁了：设计师、工程师，甚至产品经理。

提前与关键人沟通

关键人1：领导或老板

我们在职场里，只要是自己主动想做一点事，首先必须要获得领导的认同和支持，因为不仅是从上下级关系的角度，还是人力资源的角度考虑，如果得不到领导的支持，那几乎是很难搞定一件事情的，毕竟话语权和资源分配权在领导手里。

所以，首先要和领导说清楚现阶段做设计组件库的意义和好处，特别是对部门和他的好处。至于沟通的技巧，可以参考我的这篇文章《为什么你的设计方案没问题，但开发就是不想做？》。

当然，有时候领导出于对时间、人力成本的考虑，会告诉你目前公司的项目进度和团队规模，还不需要急着做「设计组件库」。遇到这种情况，我个人认为设计师也别太勉强了，我们自己先将设计软件层面的设计组件做好，然后和领导说下：虽然现在不做，但希望工程师在开发过程中留个心，这些组件以后是要形成前端组件库的。

如果要说服老板答应做这件事，思路如下：

• 设计组件库能提高协作效率。（研发效率和时间成本的角度）
• 设计组件库能成为公司的技术资产，新同事来公司后可以快速调用和上手，就算有同事离职，也不会对产品的整体体验造成影响。（公司招聘成本的角度）
• 设计组件库可以让产品体验统一，有助于公司建立统一的产品品牌认知，方便销售和运营包装、运营、策划产品方案。（销售运营部门的角度）

总之，要让老板觉得，虽然老板可能不知道什么是设计组件库，但听你这么一说，觉得不做这个是对公司的损失，确实要考虑做。

关键人2：前端工程师

职场里人人都希望被尊重、被提前告知，而不是突如其来的需求，特别是勤勤恳恳、任劳任怨的工程师（大多数），如果没有前端工程师，我们的设计组件库就是 PNG。

所以，在开工前，一定要和那个技术不错的前端工程师聊聊做设计组件库的事情，其中最重要的是确定好：选择什么样的前端框架。

如果组件库服务的是 B 端或者中后台系统，那其实有很多可参考的开源组件框架：Ant Design、ElemetUI、Layui 等，注意不同的框架用到的前端技术不一样，兼容的浏览器版本也不一样，这要根据你们技术情况做选择。

如果觉得开源框架的风格和你们的产品不统一，那就需要二次设计和开发封装。

关键人3：研发主管

如果你的领导既管产品设计，也管研发，那恭喜你，沟通成本就会很小。如果前端工程师的领导不是你的领导，那最好让你的领导帮忙去和前端工程师的领导沟通好，毕竟你要用到研发部门的人力资源。

如果两个部门领导之间沟通不畅，那问题就比较复杂了。这时候除非你是设计 Leader，否则我不太建议你去强推设计组件库这件事。

关键人4：设计师、产品经理

这里的设计师指的是需要输出设计组件库设计稿的设计师，如果需要其他设计师的帮助，也是要提前沟通好的，设计一家亲，有了设计组件库，大家有福同享嘛。

至于产品经理，基本上从他的角度去告知他一下就可以了，产品经理比较关心产品的统一体验，产品研发进度等，所以有了设计组件库，体验和效率的问题会有效提升。

立项启动

搞定了目标、用户、前端技术、关键人之后，我们需要把「设计组件库」当成一个项目去运作，而我们自己就是项目经理，带领关键人从 0-1 建立设计组件库。

在和关键人都沟通确认好之后，写一封项目启动的邮件，把背景、意义、目标、责任人、相关资源、里程碑计划、风险等信息写清楚，这就算把这个项目启动了。

小步快跑，组织评审

先将常用的组件输出设计文档，然后让工程师评审确认一下。设计组件可以小步快跑，快速迭代，不要急着一次迭代完。

时刻沟通，关注进度

一般情况下，「设计组件库」这项工作的优先级应该是公司里比较低的，工程师通常会在项目闲暇时间做这件事，所以时刻保持与工程师的沟通，维护好人际关系，关注你的项目进度。

应用与测试

当前端工程师封装好组件库后，就可能会应用在近期的开发里，待到测试时，我们自己要记得测试组件库的可用性。

孵化产品，迭代组件库

当设计组件库投入使用后，我们需要时刻关注组件的适用性和优化，已有的组件能否满足新的业务需求等等。就像迭代产品一样，迭代设计组件库。

总结

1. 全链路是视角和思维的全链路

所谓的全链路设计师，我认为是视角和思维上的全链路，也就是能站在上下游各角色的角度，审视和推动自己的设计工作。真正的有实力，是能在有限的资源里，把工作做出色，用小成本实现大价值。

2. 做不出来，怎么办？

如果思路对了、方法对了、尽力沟通了，前端工程师也尽力开发了，最后因为时间、成本等因素没做出来，怎么办？

我想说，其实结果已经不重要了。虽然没收获最终成果，但在这过程中收获了团队的信任、老板的关注、自己的经验。老板和同事能看到我们的全局思考和工作方式，甚至是领导力。虽然今天没成，但以后如果有机会，老板可能会第一个想到你。

事实上，实际工作中的情况要比本文描述的复杂很多，如果你在实际推动工作中有问题，欢迎与我交流。

欢迎关注作者的微信公众号：「设计意志」