建立设计组件库时,要将其当作属于自己的项目或者产品,去定位、规划、与相关人员沟通、设计、开发、跟踪和迭代。
前段时间,我在两个设计师交流群和一些设计BBS发现了同样的问题:
有设计师根据目前主流的设计系统(比如AntDesign等),设计出了适合自己公司产品的设计组件库,但是设计方案给到前端工程师时,才得知:目前产品的前端框架是基于VUE的,或者更老一点的前端框架,所以现阶段使用React的AntDesign设计系统不合适。
当时发现这个问题之后,就想分享一点我个人在公司建立设计组件库的经验,帮助那些要给公司建立设计组件库的朋友们。
所以,本文将从「项目思维」的角度,分享如何在公司从0-1建立「设计组件库」。
首先,要明确一点:如果我们承担起了建立「设计组件库」这项工作,则需要将它当成一个属于自己的项目或产品,去规划、设计、开发、跟踪。在职场里,资源会向「有想法、有目标、有担当」的员工倾斜。有了这种项目经理的认知,我想你在建立设计规范的道路上成功迈出了第一步。
下面是具体的几个步骤:
一、明确目标和用户
目标:统一产品体验、提升协作效率、迭代技术框架。
所以,能满足上述目的的设计组件库,才是一个真正意义上的设计组件库,因为,完整的组件库不仅仅是Axure元件库、SketchSymbol等设计软件的组件,而是要深入到开发层。
简单点说,我们做的Axure和Sketch组件,工程师需要将它们封装成代码层的组件,才能提升从设计到开发的协作效率。相反,如果只是设计软件层面的组件,是无法从本质上达到设计组件库的目标的。
说完目标,我想你已经知道设计组件库的用户是谁了:设计师、工程师、甚至产品经理。
二、提前与关键人沟通
关键人1:领导或老板
我们在职场里,只要是自己主动想做一点事,首先必须要获得领导的认同和支持。因为不仅是从上下级关系的角度,还是人力资源的角度考虑,如果得不到领导的支持,那几乎是很难搞定一件事情的,毕竟话语权和资源分配权在领导手里。
所以,首先要和领导说清楚现阶段做设计组件库的意义和好处,特别是对部门和他的好处。至于沟通的技巧,可以参考我的这篇文章《两个步骤,提升你的沟通能力》。
当然,有时候领导出于对时间、人力成本的考虑,会告诉你目前公司的项目进度和团队规模,还不需要急着做「设计组件库」。遇到这种情况,我个人认为设计师也别太勉强了,我们自己先将设计软件层面的设计组件做好,然后和领导说下:虽然现在不做,但希望工程师在开发过程中留个心,这些组件以后是要形成前端组件库的。
如果要说服老板答应做这件事,思路如下:
设计组件库能提高协作效率。具体大家都知道,我不啰嗦了。(这是站在研发效率和时间成本的角度)设计组件库能成为公司的技术资产,新同事来公司后可以快速调用和上手,就算有同事离职,也不会对产品的整体体验造成影响。(这是站在公司招聘成本的角度)设计组件库可以让产品体验统一,有助于公司建立统一的产品品牌认知,方便销售和运营包装、运营、策划产品方案。(这是站在销售运营部门的角度)总之,要让老板觉得:虽然老板可能不知道什么是设计师组件库,但听你这么一说,觉得不做这个是对公司的损失,确实要考虑做。
关键人2:前端工程师
职场里人人都希望被尊重、被提前告知,而不是突如其来的需求,特别是勤勤恳恳、任劳任怨的工程师(大多数),如果没有前端工程师,我们的设计组件库就是PNG。
所以,在开工前,一定要和那个技术不错的前端工程师聊聊做设计组件库的事情,其中最重要的是确定好:选择什么样的前端框架。
如果组件库服务的是B端或者中后台系统,那其实有很多可参考的开源组件框架:AntDesign、ElemetUI、Layui等,注意不同的框架用到的前端技术不一样,兼容的浏览器版本也不一样,这要根据你们技术情况作选择。
如果觉得开源框架的风格和你们的产品不统一,那就需要二次设计和开发封装。
关键人3:研发主管
如果你的领导既管产品设计,也管研发,那恭喜你,沟通成本就会很小。如果前端工程师的领导不是你的领导,那最好让你的领导帮忙去和前端工程师的领导沟通好,毕竟你要用到研发部门的人力资源。
如果两个部门领导之间沟通不畅,那问题就比较复杂了。这时候除非你是设计Leader,否则我不太建议你去强推设计组件库这件事。
关键人4:设计师、产品经理
这里的设计师指的是需要输出设计组件库设计稿的设计师,如果需要其他设计师的帮助,也是要提前沟通好的,设计一家亲,有了设计组件库,大家有福同享嘛。
至于产品经理,基本上从他的角度去告知他一下就可以了,产品经理比较关心产品的统一体验,产品研发进度等,所以有了设计组件库,体验和效率的问题会有效提升。
BTW:如果你一人既会设计、又会前端、也会前后端联调,那请忽略前2个步骤。
三、立项启动
搞定了目标、用户、前端技术、关键人之后,我们需要把「设计组件库」当成一个项目去运作,而我们自己就是项目经理,带领关键人从0-1建立设计组件库。
在和关键人都沟通确认好之后,写一封项目启动的邮件,把背景、意义、目标、责任人、相关资源、里程碑计划、风险等信息写清楚,这就算把这个项目启动了。
四、小步快跑,组织评审
先将常用的组件输出设计文档,然后让工程师评审确认一下。设计组件可以小步快跑,快速迭代,不要急着一次迭代完。
五、时刻沟通,