如何用项目思维,从0-1建立设计组件库?

数据分析如何避免沦为形式?15天在线学习get一套可落地的数据分析方法,了解一下 >>

建立设计组件库时,要将其当作属于自己的项目或者产品,去定位、规划、与相关人员沟通、设计、开发、跟踪和迭代。

前段时间,我在两个设计师交流群和一些设计BBS发现了同样的问题:

有设计师根据目前主流的设计系统(比如Ant Design等),设计出了适合自己公司产品的设计组件库,但是设计方案给到前端工程师时,才得知:目前产品的前端框架是基于VUE的,或者更老一点的前端框架,所以现阶段使用React的Ant Design设计系统不合适。

当时发现这个问题之后,就想分享一点我个人在公司建立设计组件库的经验,帮助那些要给公司建立设计组件库的朋友们。

所以,本文将从「项目思维」的角度,分享如何在公司从0-1建立「设计组件库」。

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

下面是具体的几个步骤:

一、明确目标和用户

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

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

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

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

二、提前与关键人沟通

关键人1:领导或老板

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

所以,首先要和领导说清楚现阶段做设计组件库的意义和好处,特别是对部门和他的好处。至于沟通的技巧,可以参考我的这篇文章《两个步骤,提升你的沟通能力》。

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

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

  1. 设计组件库能提高协作效率。具体大家都知道,我不啰嗦了。(这是站在研发效率和时间成本的角度)
  2. 设计组件库能成为公司的技术资产,新同事来公司后可以快速调用和上手,就算有同事离职,也不会对产品的整体体验造成影响。(这是站在公司招聘成本的角度)
  3. 设计组件库可以让产品体验统一,有助于公司建立统一的产品品牌认知,方便销售和运营包装、运营、策划产品方案。(这是站在销售运营部门的角度)

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

关键人2:前端工程师

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

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

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

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

关键人3:研发主管

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

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

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

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

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

BTW:如果你一人既会设计、又会前端、也会前后端联调,那请忽略前2个步骤。

三、立项启动

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

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

四、小步快跑,组织评审

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

五、时刻沟通,关注进度

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

六、应用与测试

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

七、孵化产品,迭代组件库

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

总结

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

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

2. 做不出来,怎么办?

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

我想说,其实结果已经不重要了。虽然没收获最终成果,但在这过程中收获了团队的信任、老板的关注、自己的经验。老板和同事能看到我们的全局思考和工作方式,甚至是领导力。虽然今天没成,但以后如果有机会,老板可能会第一个想到你。
事实上,实际工作中的情况要比本文描述的复杂很多,如果你在实际推动工作中有问题,欢迎与我交流。

#专栏作家#

王晗陵,微信公众号:设计意志(ID:D-Minder),人人都是产品经理专栏作家。关注交互/UI设计领域及职场能力,擅长需求分析、用户体验和原型设计。

本文原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!