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

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

前言

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

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

For what —— 我们面临的难题?

随着 Ant Design 成为广受好评的开源设计体系,现已被广泛应用于企业级应用。由于企业级应用具有体量庞大、增长迭代速度快等特点,所以常常需要多位设计师协同工作,甚至出现了由产品经理、开发自行设计上线的情形,使得线上 UI 质量不可控,这令设计师十分头疼。

举个简单例子:从在列表里增加一个"新增按钮"说起。

(一)选择的多样性

1.应该用什么样的按钮形式,“主按钮”“次按钮”“虚线按钮”“圆形按钮”选哪一种?

2.按钮文案到底是用“新增”“新建”“添加”还是加个图形化元素“+”进行强调?

3.按钮与列表的相对位置的选择,左右上下选什么地方?


(二)思维的差异性

不同的设计师有不同的心智模型,表达方式相异,以及还有时间、实践等因素对设计师个人的影响,当这些变量相互叠加,解决问题的设计方案就各不相同,甚至一个设计师的同一个产品在不同时间段也出现了不一致问题。多人协作或者团队加入新人时,那么大家很可能因为无法共享“如何设计新增按钮?”的想法,而产生方案不一致和工作效率低下等问题。​

(三)改进的方向

既然如此,Ant Design 为什么不去规定新增按钮应该如何设计呢?客观地讲,不太方便。哲学里有一个理论,大意是越灵活就越不能固定,越固定就不能更灵活。用这个理论来理解的话,就是越通用就越至简,越限定就越不能泛用。Ant Design 提供的是底层最通用的内容,更包容,不倾向于在交互层面制定严格的规则,精确控制界面最终呈现,而这部分的空间更适合留给业务自身。外部的企业级产品对这块诉求也非常强烈。如何做?首先要知道做什么。

Do what —— 自定义资产是什么?

(一)案例分享

先通过三个案例,来说明一些业务场景里通过自定义内容的方式补充 Ant Design 的缺失,给大家一个直观感受。

案例一:DatePicker Default 配置和订机票场景内嵌当日机票最低价格的定制版本。

案例二:由于页面大面积出现 Tag,需简化 Tag 设计,基于 Tag 语义衍生 "预警灯"组件。​


案例三:由 Ant Design 基础表单组件组合,定义出的规则表达式组件。

(二)自定义资产

这是三种基于 Ant Design 自定义组件的常见方式。相比更具通用性的 Ant Design,这些自定义部分更加业务化,未被 Ant Design 覆盖。不进行规范,设计者和工程师们就会重复造轮子,造成不一致。基于 Ant Design,补充更业务化的内容来解决具体业务场景中的一致性和协作效率问题。而基于成熟前端框架的封装,在设计和开发层面都具有更高的成本效益。


​(三)设计资产

三角里的内容是什么?这些内容应该是内在关联、有序组织的、并且可以实践的。在 Ant Design 设计体系中这些内容有一个统一的名字:设计资产

我们通过四个概念来组织设计资产:ETCG 。

Examples 功能范例 多个页面串联出功能的完整流程,启发用户如何使用和搭建出一个常见功能。

Templates 模板: 页面级示例,启发用户如何通过组件搭建出系统中的典型页面,如:详情页等。

Components 组件:

  • 基础组件:一般的前端框架提供的构成系统最基础的元素,如按钮、分页器等。
  • 业务组件:基于具体的业务场景定制组件,如拾色器、页头等。

Global Styles 全局样式:通过变量实现所有样式参数的体系化管理。

->概念详细解释:轻推转型之门:Ant Design Pro 在企业级产品的实践<-

Ant Design 先前仅覆盖到组件和全局样式,于2017 年推出了 Ant Design Pro ,补充了页面模板和功能范例,完善了资产结构。Pro 包含多个典型的页面模板,以及最基础的增删改查、设置、通知等功能流程,在蚂蚁中台覆盖了 700+ 以上的产品,大大缩短了产品从 0-1 搭建的速度,一些产品无需设计师也可以直接套用 Pro 上线。直白地讲,使用 Pro 与使用 Ant Design 基础组件相比,前者可以得到更加可预见的产出。

但是,如果你浏览过 Pro 的内容就会发现,Pro 无法深度覆盖你所在公司企业级产品需求,大粒度内容的通用性更低。在蚂蚁中台,同样的情况也存在,所以在一些垂直业务域和产品中我们自定义了资产。Ant Design 素来有 Open by Default 的理念,在设计层面亦是如此,如何体系化地自定义产品、产品线甚至公司级的设计资产就是今天想探讨的议题,也是我们工作坊想要达到的设计初衷。

工作坊活动计划 —— 让我们一起造吧!

下面,结合本次工作坊计划逐一详解自定义资产设计的六个步骤。本次计划的是每组8人,为了增强工作坊的互动性,准备一些动手材料。

1.产品界面:由于大部分蚂蚁中台的界面无法对外,本次使用 语雀 的界面作为案例。(建议彩打)

2.设计指南:​设计指南模板.pdf(83.17 kB)​。(工作坊中需产出的部分,已用虚线框出)

由于参会者对语雀可能不熟悉,需要对语雀做一个简介。如:一个文档、设计稿在线协作平台。为了控制时长,界面筛选部分功能;语雀的协同基于团队,每个团队下可以下挂文档类和画板类知识库作内容上协作,讨论区用于议题讨论。

准备工作完成,开始主体流程。


How to do —— 资产怎么一起造?

在现实工作中,资产设计开始之前,需要拉动一些合伙人,但本次工作坊就不涉及这个步骤了。

老板:事前主动汇报,通过成本收益的最大化案例等说服老板获得支持,甚至能获得更多的资源,投入生产环节老板可以提供更多帮助,确保团队在流程中能够实践这些内容。

前端:方案可行性评估,内容代码化。

产品经理:最理解业务需求的人,却常常很容易被忽略,帮助资产建设得更具前瞻性。


自定义资产的实施分为六步:

1.识别 Findout:识别重用的部分

2.定义 Define:定义资产的用途

3.设计 Design:检视现有设计方案,进行多场景兼容性优化

4.命名 Name:识别资产用途和用法

5.指南 Guiding:成为共享的语言

6.使用 Practice:易于访问易于使用

(一)识别 Findout

在提供的产品界面打印稿中,找出重复出现的部分:布局、模块。

1.1 找出重复的布局

先将相似的页面根据经验快速分组,绘制每组页面的布局。统计下最终每种布局对应的页面数,用红色笔标记到便笺纸上。统一将全部布局便笺贴到 A3 纸上。

Tips:绘制布局时,细节没有意义,粒度控制在每个布局在 3~7 个区块之间,这样可以保持一定的抽象度。每个区块用简短的词语描述区块的功区块它在如何引导用户行为。这个步骤的目的是要弄清楚不同布局功能上的差异,和交互设计中梳理界面的框架层相似。绘制布局时,原先的分组一般会有调所整。

1.2 找出重复的区块

区块或者元素,不论大小,只要重复出现,剪下来,将这些重复的部分摆放到一起,分组,随意给分组起个名字。比如“列表上方的区块”。

(二)定义 Define

这些重复的布局、区块,它们分别是用来做什么的,这一步最重要的是从用户角度思考。可以尝试使用这个句式导出定义(下滑线部分):

用了这个组件,我可以__________________

比如“列表上方的区块”,如果要进行定义,套用句式:用这个组件,我可以了解到列表里展示的是什么、控制列表内容的展示。

此步骤的作用是厘清产品设计的目标,以此进行目标导向的方案设计。

Tips:你可能会很纠结于资产定义应该更通用或是更紧贴业务,判断的关键在于你将怎么去使用它。在下图这个案例中,只要动态列表复用度足够高,不防作为一个组件,使用起来会甚至会更方便。定义时需注意和其他相似资产拉开功能上的差异,避免重复定义,如果差异度不够,就需要考虑合并为一种资产。

(三)设计 Design

设计过程和一般的交互设计过程没有太大差异,相对来说更强调去考虑多种场景下的兼容性,而不是从单一问题出发。实施时,有几个重要的步骤:

一、梳理信息架构:从枚举案例中提取核心元素,即从剪下来的内容中提取核心元素;仍然以“列表上方的区块”举例,抽信出其信息架构,见下。

二、建立交互规则:基于此信息架,考虑必选和可选元素,重新设计组件的布局和功能,对各个场景兼容。设计的要点在于建立逻辑,每个细分的部分都有其明确的用途。一旦建立规则,使用时就不再是凭感觉行事,出现“我觉得放在左边比较好”“感觉右边比较合理”这样的讨论。

三、检视交互和视觉在整个系统中的一致性。退后一步,从整个产品 or 设计体系中审视结果,其交互行为和视觉风格是否一致。比如:圆角大小与原有系统的圆角大小保持一致。

工作坊时间不足以对一个资产进行深入设计,不同的资产交互描述使用的内容框架可能不同,不可一概而论。交互规则涉及内容包括但不限于:

位置 Position:在环境中的位置限制,比如footer,pageheader,page header 页头的层级属于页面,因此页头放置在页面内容区域的最上方。
布局 Layout:资产内部内容布局
元素 Anatomy:资产的构成元素
响应式&适应性 Responsiveness & Adaptiveness:当设备或窗口大小变化时,如何响应变化。当设备或环境变化,如何适应变化。
状态 State:如不可用、已选择等…
视觉规则 Visual Style:视觉的限制条件,包括颜色、字体、图像、边界空间,大小,相邻元素和其他视觉属性。“更多按钮始终位于按钮组的最右侧。”-- 按钮 Button
动效 Motion


Tips:

一、为了更好适配一些特殊场景,可以使用“变体”的方式拓展资产的兼容性。仍然以“列表上方的区块”举个例子,相比列表场景,平铺卡片列表场景中,没有边框的“列表上方的区块”视觉负担更轻,可以将没有边框的方案视为一种变体。除非有足够理由,请尽量克制。

二、拆分元素的过程,颗粒度降低,可能发现新组件,这时可拎出来单独定义。但仍需保持克制,如果 Ant Design 中有相同功能的组件,除非有足够的理由,不建议新增组件。

三、把案例聚集在一起,思考其内在逻辑时,很容易发现原产品中的不一致问题,敲定方案后,回过头对现有方案纠正。

(四)命名 Name

一个好的命名能够帮助我们快速识别资产,同时能准确理解资产用途。资产命名一旦确定下来,就必须在所有工具和文档中完全保持一致,才能保证设计系统的一致性。

资产可以从功能来命名,突出的是功能性,比如“拾色器”;也可以从外观来命名,强调的是可知性,比如“抽屉”。当外观命名比较困难时,可以使用隐喻来实物化命名,使用户在看见名字时就能在脑海中出现一个具体的形象,便于用户理解记忆,比如“走马灯”。

以上文中“列表上方的区域”为例,从功能命名,可以叫“列表工具条 ListToolBar”;从外观命名,可以叫“列表头 ListHeader”。

(五)指南 Guiding

设计指南是一系列规范标准的设计元素集,作为设计参与者所共同的知识体系和必须遵守的设计行为规范。也可以简单地将其理解为资产的词典,词典的作用是确定唯一的官方语言规范,统一共识和大众共享,设计指南让也能让资产成为共享的工作语言,就像大家在共享同一个大脑。

把前面四步所设计的资产内容,按照设计指南模板逐一填入。由于工作坊时间有限,模板中只标记了一些必选的填写项目。


(六)使用 Practice

通过工具将设计资产转化为团队效率。只有规则的资产是静态的,最后只能尘封在时光中。工具和人完美结合,才能让资产融入设计体系,成为工作流程的一环。比如制作 Sketch Symbol ,利用 Kitchen 或其他 Sketch 插件,同步资产给到流程中其他协作者使用。Ant Design 提供了一套Symbol Libr,囊括 Ant Design 的全部基础组件 ,允许自定义主题色、圆角等全局样式,基于这个库自建资产相信会非常省时省力,but 目前正在内测中。。对于开发者,Ant Design 后续也会提供自定义资产的工具,敬请期待…

结语

虽然工作坊有其局限性:一是纸面仅展现了静态界面,资产的互动过程难以被观察到。实际演练时,可以采用界面截图的方式来实施。二是工作坊现场无法跟工程师、产品交流。三是没有足够的时间进行深入思考。但是,我们也要正确认识到工作坊的重要意义,它可以帮助团队的同学了解资产的构建方式,其产出结果是次要的,重点是培养了体系化的设计思维。对于企业级应用的设计师而言,大型平台、系统迫使你体系化、结构化构建产品界面,这样的训练方式也会很有帮助。

最后,我想对资产设计和工作坊作个简要概括。不论业务组件还是通用组件,也不论是功能范例还是页面模板,抽取的思路都是一致的。识别重用的部分,围绕用途进行设计,起个好记易懂的名字,通过设计指南共享设计思路,最后通过工具落实到项目流程中。如果你想抽取更通用的设计资产,可以从更多的产品中识别重用的资产,然后执行这个流程。关键在于,对于每份资产的设计意图要时刻保持清醒。重复以上步骤,Making and Testing。

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



推荐阅读

1.《Design System》-- Alla Kholmatova

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

2.SAP Fiori Design Systems

Fiori 很适合作为自定义资产时的内容参考,相比 Material Design 下沉、松散的设计规则,Fiori 更加严格、精确性和一致性更强。

3.Component Design Guidelines--Nathan Curtis

如何撰写组件设计指南

编辑于 2019-01-15

文章被以下专栏收录