「专访」Ant.Design希望成为世界级设计体系

我们很荣幸此次通过站酷网邀请到蚂蚁金服体验技术部UED并围绕旗下设计体系Ant Design (ant.design)进行了相关采访。如下内容转自站酷网：

访谈嘉宾介绍：

.design是Top Level Design拓扑维度公司旗下的新顶级域名。与日常接触最多的.com, .cn 网址域名后缀不同的是.design带有明显的设计专属特征，更适用于设计行业个人，公司，组织等创建网站。.design同样支持浏览器的收录和搜索，网站备案，邮箱创建等。

蚂蚁金服体验技术部 UED是一家和前端工程师一起的，服务蚂蚁企业级应用的团队，分成两个大团队：分别是设计服务中心和体验设计中心。设计服务中心负责蚂蚁企业级设计体系与科技品牌的心智打造，主攻设计工程化与科技情感化，体验设计中心负责支持蚂蚁 CTO 业务线的日常业务支持，以 better UX 为目标，致力于企业级设计领域的体验方法与优秀案例 。

成规模的设计团队都有一套自己的设计规范，用它来解决设计产出的一致性，提升设计的效率。但是如果产品量级惊人，产品迭代，技术变革，用户行为等不确定大，不太灵活的设计规范就有了局限性，于是就有了设计体系。

“设计体系是一个具包容性且充满生命力的东西。包容性指的是从组件库到设计语言到设计方法等所有和产品设计相关的方面。而生命力指的是它并非静态的内容，而是可以应对不断变化的环境，是一个不断进化的过程。”2018年，在首届蚂蚁体验科技大会，Ant Design设计负责人它山这样描述设计体系的优越性。当天，蚂蚁金服体验技术部 UED对外正式发布了 Ant Design 3.0，正式将 Ant Design 从 UI 组件库的概念升级至面向企业级的设计体系。

蚂蚁金服体验技术部 UED （以下简称蚂蚁UED）是一支和前端技术团队在一起的设计团队，成立于 2014 年。初期团队只有 1 位设计师支持蚂蚁企业级产品的设计需求。随着蚂蚁金服 TechFin的战略转型（即重心将由支付及消费金融转向技术服务），内部的企业级产品开壮大，同时这类产品量级巨大、功能复杂、并发频繁。有限的人力，必然无法支持海量的业务需求，除了扩展团队人数外，蚂蚁金服UED联合社区一起打磨出 Ant Design —— 一个服务于企业级产品的设计体系。通过 Ant Design，以少量人力，提升大阿里内部1,000+ 产品、外部20,000+ 产品的研发效率，至今为止，累计为全球 300w+ 设计者和开发者使用，带去了友好的研发体验。

随着蚂蚁金服的高速发展和商业化进程的加快，企业级产品的用户体验变得越发重要。如今的蚂蚁金服UED已逐步发展成近 60+ 设计师的团队规模，储备着品牌、3D 动画、影视、用户研究、产品设计等等各种专业方向的人才，以满足企业级产品多元化的需求，实现不仅让设计者和开发者「体验美好」，更让终端用户「体验美好」的目标。

我们是在ant.design（https://ant.design）这个网站上知道了Ant design，知道了这个由中国团队出品的优秀的设计体系。于是我们联系了幕后团队——蚂蚁金服体验技术UED，Ant Design设计负责人它山接受了我们的专访。我们也非常高兴通过这次专访，能把Ant design介绍给更多人，把这个优秀的设计团队介绍给更多人。

现在就带你了解为全球 300w+设计者和开发者带来友好研发体验的设计体系，为你揭晓蚂蚁金服企业级产品高效研发的秘密。

企业级产品设计：把痛点和难点当作挑战

.design：蚂蚁金服体验技术部 UED是一只怎样的设计团队，它的构成如何，分别承担了什么样的设计职能？

蚂蚁UED：我们是一家和前端工程师一起的，服务蚂蚁企业级应用的团队。目前UED 一共分成两个大团队：分别是设计服务中心和体验设计中心，设计服务中心负责蚂蚁企业级设计体系与科技品牌的心智打造，主攻设计工程化与科技情感化，体验设计中心负责支持蚂蚁 CTO 业务线的日常业务支持，以 better UX 为目标，致力于企业级设计领域的体验方法与优秀案例 。

.design：谈起蚂蚁金服，可能很多人会先想到支付宝钱包，芝麻信用，蚂蚁森林等等，没有想到你们要服务这么多企业级产品。能否聊聊蚂蚁的企业级产品，其体验设计最大痛点和难点是什么？

蚂蚁UED：一说起蚂蚁金服，相信很多人对支付宝钱包、芝麻信用、网商银行、春节红包、蚂蚁森林这些应用并不陌生。如果这把我们蚂蚁的整个产品体系比做冰山的话，这些属于水面以上的部分。而 Ant Design 所服务的企业级产品更多的是属于水面以下的部分，这是一个非常庞大且复杂的产品网。功能囊括了资金、运维、研发、安全、风控、效能管理、渠道管理等所有维持我们前台业务快速高效安全稳定运行的模块。

至于企业级产品设计的设计难点，从设计师的视角来回答这个问题的话，应该是量级大、变化快、产品逻辑复杂、用户同理心比较难建立，但其实我们更愿意把痛点和难点看成是挑战。

Ant Design：希望成为世界级设计体系

.design：用最简单的话概括，Ant Design是什么，能为设计师和开发人员做什么？

蚂蚁UED:提供前端组件库和配套的 Sketch、Axure 的设计资源包，帮助设计师和开发人员提升 5-10 倍的研发效能。提供设计价值观、原则和模式，帮助设计师和开发人员做更好的产品设计。

.design：ant.design，这个网站是何时建立的？为解决什么问题而建立？

蚂蚁UED：ant.design 是 15 年初建立的。当时蚂蚁金服的中台需求非常之多，但支持的前端和设计非常得少，基本上 1000 个系统对 10 个设计师这样的规模。所以，我们就想到用一个统一的 UI 资产（组件库）来提升效能，让我们做得更快，从而把重点项目直接支持好，同时，也能降低 UI 设计门槛，从而赋能我们的合作伙伴（产品经理和后端工程师等），来间接支持更多应用。

.design：为什么选择了ant.design这个域名？

蚂蚁UED：选择 Design 这个域名，是期待我们能将设计价值观、原则和模式逐步传承下去，因为前端框架、设计风格都会过时，antd （Ant Design of React：用 React 前端框架实现的 Ant Design）一定会被淘汰。但如果我们有 Ant Design ，下个潮流来的时候，我们能快速搭建新的 Ant Design of XXX。非常感动的事，除了 antd，我们已经有 10+ 不同前端框架实现的 Ant Design。 我们的 Design 梦得到了真正的延续。

.design：Ant Design的设计价值观很特别，它有两个坚持——自然和确定，能否举例和我们具体聊聊。

蚂蚁UED：自然，以色彩为例子，一般设计师会根据经验来定色板。但我们通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。

确定：将页面模块化、组件化，是将设计规则进行前置和黑箱化，用户只要去选择合适的组件用就可以，不必担心里面的细节，这就极大降低专业性和沟通成本，也就降低研发的不确定性。比如：不会出现这样状况，这个页面的 Button 有悬停状态，那个页面的 Button 没有悬停状态。

.design：Ant Design从最初版本到现在Ant Design 3.0，每一次的迭代有什么重要调整和拓展？

蚂蚁UED：1.0 到 2.0：组件能力的不断优化和整合，同时增加模式，从单一组件库逐步成为国内领先的设计体系。

2.0 到3.0：引入「自然」这个价值观，在字体、排版、icon 等多个视觉层面做了重大调整，同时也启动「人机自然交互」的研究，从单一的视觉自然升级到交互自然；对外正式推出 ETCG 的概念，并发布 Ant Design Pro；后续，还发布面向设计师的 Sketch 工具集 Kitchen，专门提升设计效率。

还有一个小细节，我们每次大版本变化，主色都会调整。这是确定性的一个应用案例，调整起来毫不费力，但是每个色值变化的背后都是深思熟虑的结果。

.design：Ant Design希望成为世界级设计体系的一份子，你们一定也对比研究过不同的设计语言， 优秀的设计语言和规范有哪些共性？

蚂蚁UED：参考对象包括：Fiori Design、Human Interface Guidelines、Lightning Design System、Material Design，还有一些《Web 界面设计》、《界面设计模式》等经典书籍。优秀的设计体系和优秀的设计一样，都是看起来简单、好用，但都是深思熟虑的成果。

.design：除了Ant Design，你们还在服务和打造大量的企业级产品。基于Ant Design体系设计的产品，反过来可以成为设计体系的验证，目前Ant Design对于设计效率的提升上有哪些可靠的实例和数据证明？

蚂蚁UED：蚂蚁的企业级产品介绍基本在这个网站上了https://tech.antfin.com/ ，这还只是商业化对外的一部分，除此之外，还有大量的内部建设需求。

这个问题我拆分成两个方面来回答：

首先，设计提效可以从业务线宏观的视角去衡量，也可以从单点业务线微观的视角去看。大面上，一个60人规模团队，能撑起上千个系统的设计量的同时还能够去沉淀专业做创新，这一点如果没有体系化的思考是不可能的。单点业务线上的日常设计效率，在我们沉淀了组件，模版并通过我们的kitchen、ant design lib等辅助设计的工具，也有较以往很大的提升，举一个例子，2014年我们支持一个业务，5 名设计师需要全程投入，到现在 1个设计师可以同时支撑多个业务的设计需求并且还能在过程中尝试方法创新。以往一个业务线需要交互视觉同时搭配来做的事情，通过设计体系，现在一名体验设计师就可以完成大部分的界面设计工作，甚至通过团队内部的培训赋能，我们还将一部分 PD 带起来，让他们自己也可以产生简单的界面。

第二点，设计体系中设计工程化打好了一个效率的大基础，让设计师们可以释放重复工作真正的投入到重点项目的体验优化中去，从用户视角出发，帮助产品提升主流程的用户体验，目前已经在内部积累了大约 20 多个优秀的案例。在操作时长、用户满意度、首次使用成功率等方面都有明显的成效。

.design：Ant Design不但追求『用户』的使用体验，还追求『设计者』和『开发者』的使用体验，这非常感人。为此你们经常会接收到设计者和开发者的体验反馈吗？如何处理这些反馈？

蚂蚁UED：截止今天，在 GitHub 上至少有 12,000 条反馈 issue ，我们会专门安排工程师和设计师值班处理这些反馈。其实，Ant Design 能走到今天，离不开社区的反馈和共建。

开放创新产品：为生态伙伴带去更多价值

.design：你们研发的企业级产品，不仅作为内部工具还慢慢对外开放，比如「语雀」，为什么要做语雀，它相比市面上的知识库产品有什么特色和优势？

蚂蚁UED：首先做语雀是为了满足内部用户的大量文档述求，在经过三年的内部捶打之后，语雀成为阿里内部首选的文档知识库。之后，我们发现外部中小企业也有非常旺盛的文档需求，本着蚂蚁金服对外开放的大背景，语雀从去年开始正式对外服务，为我们的生态伙伴带去更多价值。

至于特色和优势，知识库属于知识管理这个领域的一种产品，在这个领域有很多竞争对手，比如 Confluence 和 蓝凌等专业软件，它们都需要安排专人进行维护，主要是重管理而轻创作和组织，大多数都是自上而下的管理方式。而语雀的优势在于，我们提供了一种轻盈的知识组织方式，不需要安排专门同学对接，任何人或团队都可以轻松的创作出他想要的内容，同时以更优雅的方式呈现给需要的人。在管理之余可以更高效率地完成在线协同。

.design：类似的创新产品还有哪些，简单介绍一下？

蚂蚁UED：云凤蝶，https://www.yunfengdie.com/，一个基于 SaaS 模式的智能建站平台。使用云凤蝶将获得自助建站，安全域名，站点托管，数据分析，和第三方营销插件等服务。

Kitchen：https://kitchen.alipay.com/，一款为设计者提升工作效率的 Sketch 工具集。

一切用专业说话的团队：简单、自由、有爱

.design：作为一支和前端技术团队在一起的设计团队，专为企业级产品的用户体验，是否形成了一些独特的团队文化？

蚂蚁UED：一切用专业说话，简单、自由、有爱。

.design：和前段技术团队需要密切配合的设计师们，应该如何保证沟通通畅和话语权的掌握？

蚂蚁UED：因为扎根在技术体内，平时大家也都坐在一起，所以和工程师在日常沟通上可以说还是比较通畅的，话语权的掌握这个问题，其实还是考验设计师的责任感与专业度。

.design：短短几年从一个设计师到现在的60人团队的高速发展，这其中如何优化人才结构，保证团队适应快速成长，有什么经验可以分享？

蚂蚁UED：首先，是建体系，解放重复劳动力，只有设计体系才有能把人员先从大量反复的工作中解放出来。逐渐的业务量和业务盘子就会起来，这个时候就是吸引人才，搭梯队。最后是做专业影响力，吸引更多的人才。

.design：蚂蚁金服体验技术部 UED欢迎什么样的设计师加入你们的团队？

蚂蚁UED：首先一定是专业度，不管是体验设计还是创意设计师，棒棒的作品一定是最好的敲门砖。其次，是一些沟通，协作等设计以外的软实力。最后一点，做企业级产品的体验设计，很重要的一点是有一颗耐的住寂寞的心，我们的产品从idea，到产品化，到商业化，从服务内部到普惠生态，往往是一个漫长的且磨人的过程，在这样的环境里，谦逊、简单、匠心非常重要。

.design：团队接下来有什么伟大计划和小目标？

蚂蚁UED：短期内我们正在筹备ant design 4.0的升级计划，除了会完善更多企业级领域的设计资产之外，还会升级 ETCG 组件抽象的思路，同时尝试性的迈出服务化的第一步。

长远来看，希望我们可以在企业级设计领域越做越好吧，极致提效的同时，探索更多体验实践落地案例，积累好的设计服务能力，最终可以逐步的开放给同行们。

参考文献：Ant Design 3.0 背后的故事

https://zhuanlan.zhihu.com/p/32746810

这就是用匠心打造良心设计体系和企业级产品和蚂蚁金服体验技术UED，希望在这样优秀的大厂团队的技术探索和经验分享能带领国内的设计行业走得更远。如果你想了解Ant Design，可以访问官网https://ant.design/