Ant Design
首发于Ant Design

体验,不只是用户的!Ant Design 在蚂蚁中台的应用

引言:

本文图文内容,来源于蚂蚁金服体验技术部在 2017UCAN 用户体验设计论坛 - 金融分会场 的专题分享。

对于 UI/UX ,中台/企业级服务就像是冰山不曾裸露的一角,就像是用户体验不曾到达的处女地。
关键词:中台、Ant Design、antd、互联网金融、设计者、UCAN 。
本文将分为 5 个部分为你展开:A.背景阐述;B.解决思路;C.具体做法;D.总结和展望;E.相关材料。预计阅读时间 10 分钟。


A.背景阐述

如何直观的理解中台

前台和中台的关系,就类似海军陆战队和航母作战群的关系。前者是精锐,能深入敌军,给出致命一击;后者是基础,能给予稳定高效的火力支持。↓


中台现状

把中台比喻成航母是一个美好的愿景。而所谓愿景,就是你努力去实现,但还未实现的东西。中台的 UI 不但辣眼睛,而且各种难用(图略,各位可以参看自己的内部系统)。所以现在的中台只是小渔船,离航母大概还有 100 条驱逐舰的距离,起码在 UI/UX 这个领域。

造成如此现状的原因

在中台,绝大数的项目是没有设计师支持的,所以『产品经理 – 交互设计 – 视觉设计 – 开发 – 测试』这种精细化分工方式不再有效。这使得技术人员无法触及常规的『工具』和『原材料』,从而产生了鸿沟,并导致了整个中台效率和质量难以提升。↓



B.解决思路

我们尝试通过建设 Ant Design 中台,来弥合这个鸿沟。↓


重新定义核心用户:设计者

我们重新定位了服务的用户,从专业设计师扩展到设计者。其中,设计者不只是设计师,他们还包括产品经理、运营和工程师等。↓


降低生产资料门槛;提升设计者的能力

设计者不是专业设计师,不具备专业的技能和能力,所以我们从两个角度出发,弥补中间的鸿沟:

1.降低门槛:通过原材料、工具,降低生产资料的门槛;

2.提升能力:通过培训、语言、辅导,提升设计者的能力。↓


C.具体做法

由于篇幅限制,我们将聚焦在『原材料』这部分内容

整个原材料的发掘,可以分成三个阶段:扎根基(基础组件)、长躯干(获取反馈)、结硕果(打造行业解决方案)。↓


Part 1/3 扎根基:打造基础组件

基础组件 antd:是构成一个系统最基本的元素,比如 Button、Table 。

克制:一个问题,只提供一种解决方案

扎根基,看起来很简单,但处处存在陷阱。因为内外部都会给我们很多的诱惑或者压力,让我们越做越多、越来越复杂。而一个产品在初期保持克制是至关重要的,所以我们时刻提醒自己:一个问题只提供一种解决方案。

就比如一个 Button,都会碰到众多挑战和个性化需求,让你无法克制。他们会反复提出颜色、圆角等个性化需求,而且听起来也非常合情合理,而且也不难实现。但是我们要思考,这到底是『设计者』需求么?到底是 产品经理 、架构师、工程师的需求,还是『设计师』的需要?↓

我们坚持了一年,坚决不做换肤、不做圆角适配。因为我们认识到,区别主按钮和次按钮是强需求,是我们一定要做的,是我们的根基,但至于长成什么颜色、多少圆角,却不是中台设计者真正关心的,只要给他们一种即可。

所谓克制,就是『我能做,但我不做』。

创新:把那一个解决方案,不断做得更好

但克制不是目的,只是手段。真的目的是:帮我们争取时间和精力,把那一个找到的解决方案,做的更好。

下面举一个分页的例子。原有设计为了满足切换、批量切换、置顶等功能,不断增加和堆砌元素,使得分页这个组件变得极其复杂。↓

在优化过程中,我们保留了上述所有功能,并将所有元素整合在更小的空间中,让组件变得更加洗练和富有生气。↓


Part 2/3 长躯干:获得反馈

长躯干的关键是长、是成长,并不是说从 30 个组件做到 50 个组件就是成长,那只是一种堆砌。

我们认为成长的关键是不断获得反馈,无论是正向的、还是负向的。然而在中台,反馈成了奢望。因为我们做了一个组件,可能就三五个项目会用,其中一两个给我们点反馈;然后半年就没啥动静,然后就没有然后了。↓

为了破局,为了获得更多反馈,我们做了一个非常重要的决定:开源。就是把我们的产品拿出去,让国内外大量的社区用户来使用,来不断给我们反馈,督促我们前行。↓

截止目前,我们在 Github 上拥有超过 19,000+ stars ,成为国内外知名的开源产品;同时通过一段国际化的运作,我们的服务对象已经遍布世界各地。哦,精确的说,非洲中部地区和格陵兰群岛还是有待加强的。↓


Part 3/3 结硕果:打造行业解决方案

在持续成长之后,终于迎来了开花结果的时候,即打造行业解决方案。

基础组件 antd:构成一个系统最基本的元素。↓

行业组件 antd-plus:复用性没有基础组件高,或者只在某些行业中复用的组件。↓

模板 template :比组件更开放的元素,是用来被人改的。在设计上,它告诉我们如何做一个查询页;在代码上,通过简单的复制和粘贴,工程师就能快速完成一个查询页面。↓

产品范例 example:将某些系统抽象成若干核心流程和页面。↓

我们为这种原材料起了一个富有味道的名字:UI 资产。其中,取名字的背后是我们赋予这个产品更高的期待,希望它能为我们内外部设计者,带来源源不断的收益。↓

这是设计、技术和行业三者的交融。其中,蚂蚁金服作为互联网金融行业,会聚焦在金融解决方案,并和生态伙伴一起来打造『普惠金融』的 UI 基础。↓


D.总结和展望

体验,不只是用户的,也是设计者的

总结前文所述,通过 UI 资产、工具,降低生产资料的门槛;通过培训、语言、辅导,提升设计者能力。我们笃定:只有不断提升设计者的体验,才能帮助他们创造出优质产品,才能根治中台产品的顽疾。

所以我们说:体验,不只是『用户的』,也是『设计者的』,当然最终是『用户的』。


以设计语言为核心,构建 UI 资产和配套服务

由于 UI 资产依托于技术栈和设计潮流,而技术栈会落伍、设计潮流也会过时。如果有一套完整的的设计语言,我们就能快速搭建出新的 UI 资产以及配套服务。↓


无需依托载体,亦可发挥设计价值

值得骄傲的是,Ant Design 作为一个设计语言已经初见端倪。基于现有的 Ant Design,内外部团队用不同的技术栈搭建出新的 UI 组件、文档和站点。目前,我们和合作伙伴,逐步点亮了 React(官方维护)、Angular、Vue 三大主流的前端技术栈,站点数接近 10 个。↓

对于设计师来说,这点非常鼓舞人心。

因为,这和我们是不是蚂蚁员工,没太大关系;这和我们是不是有牛逼技术,没太大关系;这只和设计好不好,有关系。

同时,同行的认可也对 Ant Design 提出了更高的要求,我们除了需要知道 What 和 How,还必须知道 Why。在近期的研究中,我们发现字阶与指数函数有这么大关联时,我们笃定所有感性的背后都存在自然的理性。期待明年,能为各位带来有关『自然设计』的精彩分享。

谢谢各位的倾听。


E.相关材料

相关站点:

A UI Design Language

联系我们:

知乎:Ant Design

Github:ant-design/ant-design

编辑于 2017-11-10

文章被以下专栏收录

    Ant Design 是一个致力于提升「用户」和「设计者」使用体验的企业级设计体系,利用统一的设计规范、前端实现、设计/研发工具链对产品研发赋能,全面提升企业级产品的使用体验和研发效率。