设计系统是一套设计标准,通过减少冗余且重复性的设计来规模化管理设计资产,同时可以帮助在不同系统、不同平台、不同页面中创造、共享一致的设计语言。随着技术发展,UI设计的规模和速度也在增加,企业迫切需要精简设计工作。因此,许多设计团队会利用搭建和维护设计系统来管理大规模的设计。让我们来详细地了解一下设计系统是如何从多方面解决日益增长的痛点的。

1.让设计规模化

随着团队增长,每个设计师都专注于自己的一亩三分地,比如员工A只负责搜索,员工B只负责发现页,员工C只负责账号管理等等。这就会导致设计语言支离破碎,就像是一个设计的通天塔,每个设计师都讲着不同的语言——设计师各自解决各自的问题,没有系统性思考。

没有共同的设计语言来约束产品,设计流程和用户体验就变得不统一。当团队没有形成统一的设计惯例,设计评判也变得不够高效。想要在团队内形成统一的惯例,就必须要有一个共享的库,用来存放公共的设计模式和样式。

一般来说这是一些静态文件,比如说一些示例元素,但是这种方式很容易过时。所以,很多团队会采用Pixso工具,它能系统性地展示包含组件、设计规范、原型动画和设计交付管理,跟随业务实时更新。内部的设计系统站点可以保证团队所有人都拥有一份统一的设计数据源,并及时保持同步更新。

设计系统可视化让设计规模化

2.管理设计负债

随着团队和产品增长,会有很多负债。这里所说的负债,并不是指金钱上的,而是指设计和技术上的负债。当我们为一些短期目的做设计时,就会出现设计负债。大量丰富的、不可复用的和不统一的样式或模式,就形成了设计负债,并导致设计系统的维护变成不可能的任务。随着时间流逝,这种负债积累起来,让我们在前进的道路上负担越来越重。

设计创造并不一定会产生负债,就像花钱不会恒定产生金融负债一样。但是设计系统可以让你的设计工作更加有计划性,不会产生太多设计或代码上的负债,同时也让你的设计模式持续增长,有效促进产品迭代。

3.保障设计统一性

一致可复用的标准化组件可以让产品设计变得更加统一,更容易理解,且更加可预测。同时,标准化组件也让设计师更多地专注于如何构建更好的用户体验,而不是纠结于样式的调整。通过使用设计体系中可重用组件,所有人都能更快地设计和搭建原型,让沟通与迭代成为可能,而不变过多关注色彩、排版、阴影数值等细枝末节,更快获得解决方案的认知。

设计系统可视化管理设计负债

4.快速构建原型

基于设计系统,设计师可以快速地构建界面、交互和流程,就像搭乐高积木一样。Pixso可以让你快速构建一些产品原型或实验性的功能,来进行测试以快速验证想法。同时,Pixso社区内置数千种设计资源、大厂设计规范、通用界面原型组件等,海量精美的图标素材即拿即用,简直是设计师版GitHub,能轻松复用心仪的模板。如果你的文件在框架之间设置有任何原型连接,那么在绘图视图中,Pixso将会显示具有连接的框架,可以演示视图中预览原型,并与原型进行交互。

设计系统保障设计统一性

5.快速迭代

不管是样式迭代还是用户体验改进,使用设计系统都可以减轻工作量。以前可能要更改几百行代码,现在只需要改动几行就可以了,迭代更加快捷无痛,可以快速灵活地探索产品方向。同时,使用设计系统之后,我们可以使用统一的全局的组件库,而不再是独立分散的组件,来提高产品可用性。

为了验证这一结论,Pixso团队进行了一项实验。我们抽取了7位Pixso团队成员,根据大家的日程安排可以大概知道每个人每周会有20小时的时间是专注于设计工作的,那么7个人就是140个小时。如果他们每天的任务都经过设计系统的处理,那么在这140小时的基础上还可以增加72个小时的设计时间!这相当于节省了3.5个人力资源成本!通过一系列的测评我们还发现,当参与者可以使用设计系统时,他们完成目标的速度比没有设计系统时快34%,这对于团队工作效率提升是非常明显的。

总结一下,设计系统通过“设计复用”让设计团队更好更快地设计产品,并使规模化成为可能,这就是设计系统的最初出发点。同时,设计体系为用户带来更加连贯和一致的体验,帮助用户理解产品。当我们想要规模化设计流程来适应快速迭代的产品节奏时,就会发现这种基于组件的设计和开发模式是一种十分可靠的解决方案。