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

前言

中台，近段时间横跨前端圈与产品圈的热门话题。本文是2017UCAN用户体验设计论坛金融分会场的话题，刚好最近在了解Ant design pro 看到的这篇，本文不谈技术。今日早读文章由蚂蚁金服@林外分享。

正文从这开始～～

对于 UI/UX ，中台/企业级服务就像是冰山不曾裸露的一角，就像是用户体验不曾到达的处女地。本文将分为 5 个部分为你展开：A.背景阐述；B.解决思路；C.具体做法；D.总结和展望；E.相关材料

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。在近期的研究中，我们发现字阶与指数函数有这么大关联时，我们笃定所有感性的背后都存在自然的理性。

关于本文作者：@林外原文：https://zhuanlan.zhihu.com/p/26846739

 好文 推 荐 

☞ 可能是你见过最完善的微前端解决方案

☞ ES2019 新特性

☞ 【PPT】Vue.js 团队成员蒋豪群：Vue 高效开发之路

好文章，我 在看