专栏名称: AlibabaDesign
这是一个充满魅力的组织,是一群疯狂热爱用户体验的家伙;这里有国际音乐家、有舞者、游戏玩家、摄影师以及各个领域的爱好者;我们坚信,创新、设计、技术和客户第一的价值观粘合在一起,一定会创造出我们为之疯狂的用户体验!
目录
相关文章推荐
51好读  ›  专栏  ›  AlibabaDesign

Ant Design 设计工程化

AlibabaDesign  · 公众号  ·  · 2021-06-04 00:00

正文



01

Ant Design 设计体系


本文的主题叫做 Invisible Design System,隐形的设计体系,主要是想和大家分享,我们对可见的设计体系背后隐形的设计规则的思考,以及如何通过设计工程化的方式,让这些复杂的规则可用而不可见。


整个设计工程化探索主要分成两部分内容,第一部分是以设计师视角出发的工程化规则探索,第二部分是以工程师视角的工程化实践。本文从设计师视角,聊聊 Ant Design 设计体系的建设。

Ant Design 从 2015 年第一个版本发布,至今已有 5 年时间,去年 Ant Design4.0 发布,提出了全新的价值观:自然、确定性、意义感、生长性,基于这几个价值观向上发展,有最基础的设计语言、设计资产,以及去年探索出的以工作流为中心的设计策略 JCD,最上层包括设计工具 Kitchen 以及云凤蝶,这些内容构成了 Ant Design 设计体系的完整建设框架。



随着整个行业的发展,企业级产品和系统的复杂度不断的增强,我们也在思考,Ant Design 提供的组件和模板,在未来的应用场景中能否持续提效和保证体验一致。同时,我们也在思考,Ant Design 下一代的组件会是什么样子,以及 Ant Design 整个设计体系会朝着什么方向演进。



目前 Ant Design 一共有 63 个基础组件,这些组件基本可以满足一个系统 80% 以上的页面搭建诉求,而且这些组件也提供高自由度的配置和自定义属性。但也正是因为高灵活性,会导致很多人在使用组件的时候,找不到统一的原则和规范,尤其是设计层,在面对同样的场景下,使用同样的组件和规范,不同的人还是会出现不同的结果。



我们尝试从整个设计体系的角度来思考,如何解决统一性和规范共识的问题。一套设计体系,除了最上层呈现的设计资产,例如,antd、antd pro、antV、TechUI 等,还包括资产背后的设计模式、设计原则、组织协同等,可见的设计资产只是整套设计体系呈现出来最直观的一部分,而不可见的模式、原则和机制,提供了整套体系不断演进和创新的思路。



2020 年 UXTOOLS 对整个行业设计体系调研中总结到:“设计体系不能仅仅停留在组件层,而要将注意力聚焦在组件背后的体系上,既要支持从规范到代码的自动调整,还要支持规范和组件体系化的演进和创新。”

简单来说,设计体系区别于单纯的组件库最大差异就是,能否支持从规范到代码的自动调整,如果能做到这一层,才可以称之为,Living Desing System(真正的设计体系)。

我们对整个设计体系的定位和思考,主要聚焦在两个维度,一是从规范本身出发,另一个是从组织协同角度。从规范本身比较容易理解,大多数组件或者规范的建立基本都会从规范本身去迭代和进化,但是组织协同是大家很少提到的一个点。那么组织协同和设计体系是一种什么关系呢?



如果从更长远的阶段来看,一个设计体系不仅仅能支持当前阶段的设计和开发工作,也不只是支持某个开发者或者某个设计师的生产提效,而是要支持一个团队、一个组织的整体协同工作,还要能从规范本身支持不断的演进和创新。

首先从规范本身思考,以一个按钮为例,一个按钮除了直观呈现出的样式之外,还包括语义、位置、交互等,这些维度组合在一起,决定了按钮最终呈现的状态。而每一个维度里,又包含很多变量,这些变量可能会导致最终结果千差万别。所以,因为规则本身的变量,会导致规范本身存在不确定性,这种不确定性会导致大家对组件的认知和使用成本增加,进而导致设计决策和研发成本增加,这是第一层思考。



另一个维度是从组织协同的角度去思考。Ant Design 的组件和规范从设计到最终被用户使用,一共有四类角色参与,分别是 Ant Design 的设计师和工程师,业务设计师和工程师。理想的情况下生产和消费流程是:Ant Design 的设计师设计组件,Ant Design 的工程师开发组件,再把组件给到业务设计师和工程师使用,业务工程师和设计师把使用过程中的问题反馈给生产端,形成一个完整的闭环。



但实际上,这个流程远远没有这么理想化。实际过程各类角色并不是一个单独的个体,所以每个角色之间可能存在各种交叉和连接,这就会导致两个问题:一个是刚才提到过的规范本身的不确定性,每个人对规则的理解有所不同,导致规则在传播过程中存在信息的分散和损耗。

另一个是因为多角色的协同,导致协作过程中存在信息不对等,比如,设计师更新了设计稿,但是前端没有及时更新,就会导致最终的的组件效果存在差异。针对这两个问题,我们尝试通过设计工程化的方式,来收敛整个过程中的不确定性,提升Ant Design 组织协同和组件生产效率。

设计工程化主要包含两部分内容,第一部分是基于 ETCG 模式的工程化规则探索,另一部分是系统化协作流程的建立。




02

ETCG 工程化规则探索


首先来看看 ETCG 工程化规则探索的部分。ETCG 是 Ant Design 基础的设计模式,提供了从全局样式到组件再到模板的设计体系建设思路,比如大家比较熟悉的 Globe Styles:全局样式层,最基础的色彩、字体、图标等,Components:antd 组件,Templates:Ant Design Pro 以及内部版本的 TechUI。



今年,我们主要在前四个的基础上新增了一个 G,Guides 交互规则。前四部分决定了组件和模板长成什么样,最后一个 G,决定了人和机器之间应该如何进行交互。这套模式的核心是希望,不同的人在遇到同样的问题时,能够运用这套模式推理得出同样的结论。通过 ETCG进行工程化规则探索,可以简单抽象成四个步骤:聚拢资产、定义概念、定性描述、定量决策。


前面两个是大多数组件或者规范建设的思路,我们在工程化规探索上,重点对规则本身进行定性和定量的区分,定性规则作为设计指南提供给设计师,定量的规则,提供给机器进行工程化规则和组件的封装。



第一步,聚拢资产,简单来说就是收集业务中的页面,找到高复用度的组件和模块,并按照类型分类。通过对蚂蚁中台 50+产品的收集和整理,初步确定八个类型的专题,再经过一轮收敛之后,最终确定下五大类专题,分别是:图表、表单、列表、表格以及布局,内部简称:四表一局。并按照专题小组的形式,对每个专题进行规则探索。


确定好专题类型之后,下一步需要定义清楚每类专题里面的模板和组件,这里的定义概念,主要是用通俗易懂的原则去描述组件的用途。Ant Design 有 63 个组件和十几套模板,如果每个都是单独描述,属性和概念会非常多,所以,这里就需要一层通用规则的概念。

关于通用规则的理解,这里举一个例子——右行制,靠右行驶,右侧通行。全世界有 90%的国家都实行右行制,这是一条深入人心且得到广泛共识的原则。具体到不同的场景,比如马路上的行车线,指示牌,斑马线上的弯折箭头,自动扶梯上的分隔线,虽然不同的场景会有不同的呈现形态,但是这些背后都是依据右行制这个通用的原则去建立的。即使在一个完全陌生的环境,潜意识里也可以根据这个原则找到规律。



根据这个思路,在组件设计和规则的制定上,也需要找到这种通用且被广泛共识的原则。

比如,在元素的空间布局上,会根据阅读习惯去考虑,大多数文字的阅读习惯都是从左到右,比如页面布局经典的 F 模式和 Z模式,所以在元素的空间位置上,会倾向于根据视觉动线和阅读习惯来放置元素。

在字号、间距、尺寸上,会根绝梳理逻辑来推理,比如最基础的 8n 模式、菲波那切数列数列等,让整套数值符合某种规律,这样才能方便推理和传播。

同样,在交互上也需要尽量模拟现实世界中的物理反馈,例如自然光影的变化对应的色彩模式,按钮的点击、按下、抬起、结果反馈等,应该都是不同的状态,所以需要通过光影和色彩变化来模拟现实世界中的物理反馈。


总结下来就是,在通用规则层要尽可能找到符合大家认知的某种认知和规律,这也是探索自然交互的核心内容。

根据这个思路,在按钮位置上,我们通过对大量按钮进行研究和分析,制定了这样一条规则:主按钮贴边原则。意思是,如果页面中出现按钮组,要尽量让主按钮贴近容器的边缘,除方向性按钮之外。比如整体左对齐,那主按钮就贴近容器左边缘,右对齐,主按钮贴近容器右边缘。这是一条非常简单的规则,稍加推理,就能找到不同场景下按钮的位置规律,比如在表单、表格、弹窗、抽屉中,不同的组件,都可以按照这个规则去细化按钮的对齐方式。







请到「今天看啥」查看全文