Design System工具:持续提高团队设计效率的必然选择

数字化的大趋势下,企业内部的设计将越来越民主化(Design Democratization),人人都是设计师可能不再仅仅是一句调侃。但面对越来越复杂的商业场景和产品形态,如何在设计时保障客户体验的一致性,持续提高团队的设计效率,不断提升设计开发一体化、自动化的程度,Design System工具将是必然选择。


将来的设计师,不再只是单枪匹马地使用一个设计工具进行设计,而是在一个设计体系和环境下进行设计。


一:为什么会出现设计体系工具


2017年在用户体验设计领域,除了AI这个超级热点,另外一个焦点就是Design System(设计体系)。近几年来,由于企业与用户的触点急剧增加,需要设计的交互类型、产品形态越来越多,设计团队的规模越来越大,为了保证用户体验的一致性,提高团队设计的效率、设计与开发协同效率,design system的概念开始出现。

而2013年,Brad Forst提出的Atomic Design设计理念为Design System提供一个初步完整的理论框架,同时这几年Design Tools/Platform(设计工具/平台)的迅速发展,为Design System的应用和落地提供了技术基础,Design System相关的插件、工具和平台逐步面世,但这些工具往往需要与现有的设计工具、文档工具(如Sketch、PS、Dropbox、Gethub等)结合使用。2017年,这个领域开始出现整合,一站式的Full Stack design system工具和平台开始逐步成型,如inVISION。

随着All In One式的Design System工具和平台的推出,Design System的应用范围和深度将大大加快加深,其内涵和功能也将不断演进和扩展,成为设计开发一体化、自动化和智能化最强劲的推动力,也许将来Desing System会成为用户体验设计从业者必须了解和掌握的工具之一。


二:有哪些类型的设计体系工具


在介绍具体的Design System之前,有必要明确一下对Design System的定义,有了定义才能对范围进行明确的界定。Design System有很多很多很多很多很多很多很多很多很多很多个版本的定义,虽然在概念的延展上大家各有不同,但核心部分大同小异。在所有这些定义中,个人觉得设计师Nathan Curtis的定义的角度和层面更准确,对Design System近期和远期的目标描述更完整。为避免翻译可能造成的歧义,直接原文引用如下:


”Almost always, a design system offers a library of visual style and components documented and released as reusable code for developers and/or tool(s) for designers. A system may also offer guidance on accessibility, page layout, and editorial and less often branding, data viz,UX patterns, and other tools.


A design system is adopted by and supported for other teams making experiences. These teams use it to develop and ship features more efficiently to form a more cohesive customer journey.


A design system is made by an individual, team, and/or community. While some arise less formally, organizations now dedicate small to large squad(s) to develop and release system versions and processes over time.”


——Nathan Curtis

Founder of UX firm @eightshapes


基于这个定义,最基本的Design System工具能提供视觉元素的组件库,并能进行组件库的文档管理,提供给开发人员(组件库代码文档)和设计师(组建界面设计文档)重复使用。同时提供在各种类型和各个层面的Style Guidline规范指南和工具。

除了提供基本的组件库和规范指南,Design System工具更具有技术含量的功能,是要能支持用户体验相关的人员和团队(主要是设计师和开发人员)方便地将这些组件和规范应用到产品和服务的设计开发中,并且效率相对没有Design System支持时能有明显的提高,具体到功能上,最关键的就是能支持从规范到组件库、设计稿,甚至到代码的自动化调整,也就是说你调整了规范里颜色,组件库、设计稿和实际的页面都会自动根据规范调整,而不需要再人工进行逐项逐层修改。

目前,能否实现从规范到代码的自动调整,是判断一个Dseign System是真是假的关键判断依据。不能提供这项功能的Design System工具只属于Library/Style Guide(组件库和规范)基础层面的工具;能提供这个功能,就可以被称作为Living Desing System(真正的设计管理工具)。

如果从更广的角度,更长期的阶段来看,Design System不仅仅支持目前版本的设计和开发,还要能支持规范和组件的体系化的、平滑的不断完善、演进和创新,同时也不仅仅只是支持某个设计师、开发者的效率提供,而是一个能支持一个团队、机构协同式工作的平台,交流的社区。


三:目前的设计体系工具清单


第一类:只提供Library(组件库)的工具,可进行组件库的分类管理、存储,组件库包括代码形式和视觉文件形式:



第二类:只提供Style Guideline(视觉规范)的工具,可提供进行视觉规范的分类、设计、编辑、发布和共享功能:



第三类:同时提供Library+Style Guideline(视觉规范和组件库)的工具,部分能实现设计规范和组件库的联动。



第四类:Living Design System(真设计体系)工具,这些工具首先都是设计工具或插件,同时可以实现规范、组件库和设计稿之间的联动:




五:大型机构设计体系案例


目前,一些大型企业和设计机构都建立了自己的设计体系,并都有一个炫酷的名字,例如Salesforce的lighting、VMware的Clarity、shopify的Polaris等等,很多公开发布了自己的Style Guide,都是很不错的参考。


编辑于 2018-03-21

文章被以下专栏收录