首发于Ant Design
Ant Design 资产一起造 工作坊(下)

Ant Design 资产一起造 工作坊(下)

前言

目前,制定和维护界面标准,已经成为帮助设计和研发团队提高生产力的一种常见且重要的方式。从零开始建设一套设计体系是非常理想的方案,但面对快速增长的业务需求,集结一个团队来完成这件事情投入过高、效果不一定好,同时前端资源不足也是很多团队都会遇到的瓶颈。所以,是否存在折中方案,以 Ant Design 现已成熟规范的设计体系为基石,在其上制定一套设计标准,可以低成本、高效率实现专属定制。为此,我们做了一个有益的探索,希望通过工作坊的方式,分享如何基于 Ant Design 美观、系统、快速定义风格化指南,规范交互逻辑,满足业务对界面个性化、差异化诉求,沉淀一套独具业务特色的 ETCG,最终推广到业务应用中。

工作坊分为两部分:第一部分,核心是如何在团队内通过定义组件、页面模板、功能范例等方式,统一产品或应用的交互层规范,通过工作坊形式对具体的实施方式作示范;第二部分,核心是设计师可以利用 Token 等简便省力地定制视觉层的全局样式和组件样式,打造独树一帜的产品气质。本文介绍第二部分内容。第一部分内容看这里


气质

我们来看看下面这两张照片,大家现在可以在心里想想这位同学具体是什么工作的。

我想大部分人和我看到照片时是一个感觉,他应该是个说唱歌手,或者 DJ ;但其实这位,是我部门的新同事,一个正儿八经的程序员 。为什么看了照片,就会自然的联想他是一个说唱歌手?因为通常情况下,我们会对一个人的外貌、行为举止、谈吐表现出的气质去形成对他的第一印象,从而判断他是什么职业什么性格,当我们把每个职业,每个人对应成一个「产品」,他给我们的第一印象就是他的「产品气质」,如果「产品气质」不符合用户预期,这可能会将大量的用户拒之门外。所以无论产品属于哪个业务领域,我们需要做到的是让用户相信在这个领域中我们的产品是专业的,这就是我们产品设计师最需要关注和服务的地方。

在我们 Ant Design 的 ETCG 设计体系中的 Global Style ,他就主要负责「气质」中的「外貌」,负责传达产品给用户的感官感受,让用户形成对产品第一印象。

但目前在企业级中后台的设计领域中,不论是 PC 还是移动端都有很多成型并得到验证过的 UI 库和设计指引,例如Ant Design、Ant Design Pro、Ant Design Mobile ,所以当我们想有变化时,总会有一些声音:

最终在中后台的界面设计领域中,我们为了效率可能最终沦为「拼搭组件」的人,慢慢的我们会没有成就感,关注点也可能会转移到插画、动效等地方,但其实在一个企业级中后台产品的设计中,动效、图形化等,他更多是提升产品视觉上限的,而每天和用户「打交道」的更多还是字体、颜色、布局等界面设计中的基础元素,这些基础是保证你产品设计品质、透出「气质」的关键因素。

而我们做 Ant Design 的初心,也是为了提高效率,而并非去限制设计,让设计失去想象力。所以现在和大家介绍一个「好东西」,他能让你在产品设计中,不但保证效率,还能创造属于你自己产品的独特样式,这个「好东西」也不是新鲜概念,他就是「Design Token」, 先看看他的基本概念(取自 Salesforce ):

Design Token是设计系统中的视觉设计原子。它们是一组有着统一命名规则的实体,用于存储视觉设计部分的具体参数,比如HEX色值、间距、尺寸的像素等。使用它可以有帮助为UI开发工作维护一套具备可扩展性、一致性的视觉体系。

我们以「Font」这个界面设计中最常见的元素举个例子,来更好的理解:

通常情况下,很多人面对font 时会对每一个场景下的字体、颜色、尺寸进行样式设定。

但这种逐个处理的方式通常的结果就是随着产品场景增多,协作复杂度增加,页面元素越来越多,导致整个产品设计中关于「Font」的因素也越来越多,到最后没人能够搞清楚究竟有多少与 Font 有关的变量 ,更没人知道究竟该如何使用。甚至有可能同一个字号在不同页面里的行高不一样,同一个使用场景的字体颜色不一样。并且这样没有控制的设计,会导致产品背后的代码,也如下图:

这样的 style 代码都是一些几乎没有体感的参数,难以脑补出他对应出的界面会是一个什么样子。如果产品复杂,时间一久想要全局迭代维护也会是件痛苦的事情。

其实我们面对这种情况,只需与你的程序员小哥一起做几件「小事」,就能轻松解决这个困扰

第一步,我们将这些页面现在关于「Font」的元素,全部收集整理,并将其对应的使用场景一一梳理,抽取出你产品中关于「Font」的设计规范形成文档(关于设计规范要怎么做,下次另写文章详细与大家讲),如同这样:

第二步,我们与程序员小哥一起将设计规范中的分类、使用场景等统一命名,将其语义化(关于怎么思考语义化,下次另写文章详细与大家讲):

最后再将设计规范中的值,一一对应到「Token」中,就能得到一套属于你自己产品关于 Font 的 「Token」:

我们再来看看,这样整理过后,背后的代码会是什么效果:

可以看出来,如果我们将这些参数封装起来用语义化的方式来进行描述,整个界面的「画面感」就会清晰很多。这样处理后,不但你清晰、你的团队、你的开发小哥都会清晰很多,我们在过程中沟通也会顺利很多,并且再遇到产品迭代,你只需轻松的修改一些「Token」对应的值,就能快速完成全局视觉的迭代

万物皆可 Design Token

说了这么多是什么,有什么好处,那有没有真实案例来讲讲在中后台的设计中究竟可以通过 Token 来怎么改变,从而让自己产品视觉升级呢?今天就和大家分享我自己在做一个中后台产品时的一些思考。

通过改变「Token」来视觉升级,一般有两个程度的玩法,那么第一种就是大家最熟悉的,全局改变主色,从而让视觉焕然一新;而第二种玩法,就是高阶一点的,通过改变通用变量和适当的改变组件变量,来完成产品的视觉升级,今天主要就是想与大家介绍第二种玩法。

通用变量 - 色彩

通用变量中,大家最熟悉的肯定就是颜色了,而一般设计体系中,会将颜色分为:主色、中性色、辅助色,

但在一般的设计体系和框架中,这三者往往是相互独立,相互无关联的。

如果画过画就知道,一张画面中,色彩之间建立联系才能让画面更加和谐,所以我当时就在想,这三者是否可以产生联系,接着我就先针对主色和中性色开始研究:

既然是他是「主色」,我们就以他为主,先进行分解看看(基于色彩 HSB 模型),能得到什么:

先补充科普一下什么是 HSB:

色相-H:简单来说就是一眼望去是什么颜色,我们常说的红色黄色橙色绿色蓝色。这些就是对色相的一个描述。

纯度-S:简单来说就是饱和度,颜色越灰,一眼望去色相越不明确,纯度越低;越容易分辨,纯度越高,颜色越正。

明度-B:色彩的明亮程度,也就是感官上的比较亮比较暗

大家应该发现色相是决定「是什么颜色」的,所以当所有颜色都是相同色相时,他们肯定更和谐,基于这个想法,我将之前主色的色相值(H)- 209 ,输进「新中性色」的 HSB 中:

第二个值考虑明度,因为在界面设计中,中性色主要使用场景是字体颜色,而明度又是保证文字阅读的可读性的最关键因素,所以我就将 Ant Design 中性色的明度值取了出来(Ant Design 中性色的明度值是在保证 WCAG 2.0 可读性标准下,针对画面灰阶层次丰富度综合考量得到的):

既然是保证可读性和为了拉开灰阶层次得到的数值,我们就不要轻易对他进行改变,不然随意的改变会导致体验下降,所以我直接将 Ant Design 中性色的明度值(B) ,输进「新中性色」的 HSB 中:

最后,我们就来思考纯度值,其实对于纯度大家在生活中有个场景应该很熟悉,当洗白衣服时,几滴蓝色墨水滴入,衣服很容易就变成浅蓝;当洗黑衣服时,相同的墨水滴入,衣服几乎看不出蓝色在衣服上有留存。基于这个思路,我就对这「八件中性色衣服」开始进行「滴墨试验」,往「更白的衣服里滴少点」「更黑的衣服里滴多点」,在上百次尝试后,最终得到一套「滴入墨水」数值,这套数值下的「八件衣服」在感知上我认为最和谐,然后将这串数值,输进「新中性色」的 HSB 中:

从而得到一套全新的,与主色更为和谐统一的中性色:

紧接着,我就继续在想,是不是用一样的方法,可以对辅助色也进行「和谐升级」,然后我就对当时的三个辅助色进行了分解:

可以看出来,在纯度和明度上,其实他们与主色都在一个高纯度、高明度的范围,所以关于纯度和明度,我们就不再做变化,那该怎么变呢?我当时就想,主色是一个标准的冷色系颜色,而现在这三个辅助色,明显都是在各自色相中偏暖的那一块,所以我将他们的色相都统一往主色的色系-冷色系进行调整,得到一套在色系上更加和谐舒适的辅助色:

通用变量 - 圆角、阴影、字体

除了颜色这个大家最熟悉也是影响力最大的元素外,其实每个通用变量都对界面设计的品质,对整体呈现的产品气质有着息息相关的联系,那这关于圆角、阴影、字体的思考,就不一一举例了,写了一些过程中的一些小 Tips :

组件变量 - 表格

除了这些通用变量,高阶玩法中其实最重要的就是对组件变量进行思考与变化,大家看一下下图,这是直接用 Ant Design 原始组件直接搭建的:

搭出来后,视觉感受觉得有些繁琐,然后针对这个表格,我就对我产品的使用者们进行了一次简单的调研,发现其实这个表头对于他们来说是一个完全没有必要的元素,因为大家一看表格里的信息就知道是什么;并且真实场景下,表格的内容,行数本来就少,表头显得特别多余,这些中间的分割线也造成整个画面看起来元素特别多,造成了内容干扰,所以,我第一步就将表格中的多余元素去掉:

那第二点,这个产品是一个中后台产品,本身中后台产品中区块众多,内容众多,但一屏的大小是有限的,所以我针对这个,将表格的间距进行了缩小:

第三步,就是将之前思考的关于通用变量的修改值(这里主要调整了中性色)输入:

最后,再加入一些图形化的元素(这个图形化的增加主要目的是为了让用户更快的查阅和判断每一行内容的相关信息,如是来自哪个应用、到哪个阶段、是谁发布的任务等):

最终得到一个完全不一样的表格,并且这些改变也只需在 「Token」中修改、新增几个值,就能解决,后续也就能大胆的将这个表格使用到你产品中的任何场景了:

最终通过改变通用变量和适当的改变组件变量,就收获了一个焕然一新,却又没耽误多少码代码时间的全新界面:

结语

其实在做视觉时,我个人有一个观点就是「视觉无绝对的对与错,好与坏,每个人都有自己对视觉的表达方式和审美」,我分享的案例,是我当时是从「和谐」和「产品性质」出发思考的,我想一定有更多的方法和理论等着我们去探索,但归根结底我们产品设计师不要因为界面设计在中后台容易被忽视,就放弃这一块「真正的沃土」,我始终觉得界面设计的每一个小元素一定背后都有很多规律、玩法,并且我坚信细节是设计中最打动的人因素之一,我们开放「Design Token」也是希望大家可以大胆的去尝试改变,发挥想象力。


相关推荐

1.《Design System》-- Alla Kholmatova

这本书2017年9月问世,深入讨论了设计体系的本质和价值,提出了功能型模式和感知型模式的概念,以及 Why When How 在组织中建立和运用设计体系,是一本非常完整的创建设计体系的实操手册。

2.Ant Design 设计语言

蚂蚁金服体验技术部经过大量的项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和『自然』的设计价值观,通过模块化的解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验。

3.Ant Design 设计资源 - Ant Design 相关设计资源和设计工具的下载

4.Kitchen - 一款为设计者提升工作效率的 Sketch 工具集

编辑于 2019-01-15

文章被以下专栏收录