如何用项目思维,从零开始建立「设计组件库」? - 优设网 - UISDC

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

2019/07/17 10600评论 6

前段时间,我在某个设计师交流群和知乎发现了同样的问题:有设计师根据目前主流的设计系统(比如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. 做不出来,怎么办?

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

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

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

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

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/project-thinking-design-component-library

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里