Ant Design 3.0：全面升级的设计体系如何提升产品设计效率与一致性

hwyzw

    微信公众号@UX小学

    大型设计团队都有自己的一套设计规范，用来保证设计输出的一致性，提高设计效率。但如果产品规模惊人，并且产品迭代、技术变革、用户行为等存在很大的不确定性，不太灵活的设计规范就会有局限性，于是就会创建一个设计系统。

    设计系统是一个具有包容性且至关重要的东西。包容性是指与产品设计相关的各个方面，从组件库到设计语言到设计方法。而活力则意味着它不是静态的内容，而是能够对变化的环境做出反应，是一个不断进化的过程。

    Ant是国内团队开发的第一个面向世界的集视觉规范、交互模式、前端组件于一体的设计语言。

    去年，蚂蚁发布了全新的3.0系统，带来了全面的设计系统创新。近日，蚂蚁金服体验技术部UED正式发布蚂蚁4.0。与平常不同的是，这是一次非常大的突破和升级。这也意味着Ant将从UI组件库的概念升级为企业级设计系统，无论是在国内还是在全球都处于领先水平。

    后台回复“Ant插件”，下载Ant 4.0最新设计插件

    蚂蚁金服体验技术部UED（以下简称蚂蚁UED）是一个与前端技术团队协同工作的设计团队。它成立于2014年，最初团队只有一名设计师，可以支撑蚂蚁企业级产品的设计需求。随着蚂蚁金服的战略转型（即重点从支付、消费金融转向技术服务），内部企业级产品不断成长和壮大。同时此类产品规模庞大、功能复杂、并发频繁。有限的人力势必无法支撑海量的业务需求。除了扩大团队成员数量之外，蚂蚁金服UED还与社区联手打磨Ant——一个服务于企业级产品的设计系统。

    通过蚂蚁，我们可以用少量的人力提高阿里巴巴1000+内部产品和20000+外部产品的研发效率。截至 2019 年，全球超过 300 万设计师和开发人员正在使用 Ant。

    2020年，这一数字继续刷新。目前，蚂蚁已成为全球最大的设计开源社区，中国设计的影响力也达到了新的高度。

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

    下面我就带大家了解一下为全球300万+设计师和开发者带来友好研发体验的设计体系，为大家揭秘蚂蚁金服企业级产品高效研发的秘密。

    此外，我们还设计了公众号，建立了微信群，用于行业交流和讨论。如果您对Ant或者企业级设计有什么想法，也欢迎您加入我们一线设计师微信群，一起交流分享。长按识别下方二维码即可加入。

    以下为知名域名提供商：.蚂蚁体验科技UED独家专访。

    企业级产品设计：把痛点、难点当成挑战

    蚂蚁金服体验技术部UED是一个什么样的设计团队？它的构成是什么，承担什么设计功能？

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

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

    蚂蚁UED：说起蚂蚁金服，相信很多人都熟悉支付宝钱包、芝麻信用、网银、春节红包、蚂蚁森林等应用。如果把蚂蚁的整个产品体系比作一座冰山，那么这些就是露出水面的部分。蚂蚁服务的企业级产品大多在水面以下。这是一个非常庞大且复杂的产品网络。功能包括资金、运维、研发、安全、风控、绩效管理、渠道管理等模块，维持前端业务快速、高效、安全、稳定的运行。

    至于企业级产品设计的设计难点，如果从设计师的角度来回答这个问题，应该是量级大、变化快、产品逻辑复杂、用户共情难。建立。但事实上，我们更愿意关注痛点和难点。将其视为一个挑战。

    Ant：希望成为世界一流的设计系统

    用最简单的话来说，Ant 是什么？它能为设计师和开发人员做什么？

    Ant UED：提供前端组件库以及配套的Axure设计资源包，帮助设计者和开发者提升研发效率5-10倍。提供设计价值观、原则和模式，帮助设计师和开发人员更好地进行产品设计。

    ant.，这个网站是什么时候建立的？它是为了解决什么问题而建立的？

   

    蚂蚁UED：蚂蚁。蚂蚁金服成立于2015年初，当时蚂蚁金服的中端需求非常高，但前端和设计支持却很少。基本上，10 名设计师有 1,000 个系统。因此，我们想到使用统一的UI资产（组件库）来提高性能，让我们做事更快，直接支持关键项目。同时也可以降低UI设计门槛，从而为我们的合作伙伴赋能。 （产品经理和后端工程师等）间接支持更多的应用。

    为什么选择ant.域名？

    Ant UED：选择这个域名是基于我们能够逐渐传递设计价值观、原则和模式的期望，因为前端框架和设计风格会变得过时，而antd（React的Ant：用React前端实现的Ant） -end框架）肯定会被淘汰。但如果我们有了Ant，当下一个趋势到来时，我们可以快速构建一个新的XXX的Ant。非常感人的是，除了antd之外，我们已经有10+个不同的前端框架实现了Ant。我们的梦想确实在继续。

    Ant的设计价值观很特别。它遵循两个原则——自然性和确定性。您能给我们举个例子详细谈谈吗？

    Ant UED：自然：以颜色为例，一般设计师会根据经验来确定调色板。但我们通过抽象捕捉自然场景，并与蚂蚁的科技基因相结合，形成了独特的12种颜色。此外，通过大量的观察，他捕捉到了自然光下不同颜色的变化图案，并借助艺术素描的创意衍生出12种颜色。

    决心：页面的模块化和组件化意味着抢占设计规则并对其进行黑盒化。用户只需选择合适的组件即可使用，无需担心细节。这大大降低了专业性和沟通成本，也降低了研发的不确定性。例如：这种情况就不会发生。该页面具有悬停状态，但该页面没有悬停状态。

    从最初的版本到现在，Ant的每次迭代都有哪些重要的调整和扩展？

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

    2.0到3.0：引入“自然”的价值，对字体、排版、图标等多个视觉方面进行重大调整，同时启动“自然人机交互”研究，从单一的视觉自然升级为互动性；对外，ETCG概念正式推出，Ant Pro发布；随后，还发布了针对设计师的工具集，专门提高设计效率。

    4.0：基于“自然”、“确定性”、“有意义”、“成长”四大设计价值观，通过模块化解决方案，降低冗余生产成本，让设计师专注于更好的用户体验。

    还有一个小细节。每次我们更改主要版本时，主颜色都会进行调整。这是一种决定论的情况，调整是毫不费力的，但颜色值的每次变化背后都有很多想法。

    Ant希望成为世界一流设计体系的一部分。你一定比较和研究过不同的设计语言。优秀的设计语言和规范有什么共同点？

    Ant UED：参考对象包括：Fiori、Human、《Web界面设计》、《界面设计模式》等一些经典书籍。优秀的设计系统和优秀的设计一样，都看似简单易用，但却是深思熟虑的结果。

    除了Ant之外，你们还在服务和构建大量的企业级产品。基于Ant系统设计的产品又可以作为设计系统的验证。目前有哪些可靠的例子和数据证明Ant可以提高设计效率？

    蚂蚁UED：蚂蚁的企业级产品介绍基本都在这个网站上。这只是对外商业化的一部分。此外，还有很多内部建设需求。

    我从两个方面来回答这个问题：

    首先，设计效率提升可以从业务线宏观角度来衡量，也可以从业务线单点微观角度来衡量。一般来说，60人的团队可以支撑数千个系统的设计量，同时积累专业知识和创新。如果没有系统的思考，这是不可能的。经过我们积累了组件、模板以及使用了我们的ant lib等辅助设计工具，单点业务线的日常设计效率也比过去有了很大的提升。举个例子，2014年我们支持了一个企业，需要5个设计师全程投入。现在一个设计师可以同时支持多个业务的设计需求，也可以在这个过程中尝试创新方法。过去，业务线需要同时处理交互式视觉效果。通过设计系统，现在一名体验设计师就可以完成大部分的界面设计工作。我们甚至通过团队内部培训和授权带来了一些产品总监。 ，允许他们自己生成简单的界面。

    第二点是设计体系中的设计工程为效率奠定了很大的基础，让设计师释放重复性的工作，真正致力于重点项目的体验优化。从用户的角度来看，它可以帮助产品改进主要流程。用户体验目前内部已积累20多个优秀案例。在操作时间、用户满意度、首次使用成功率等方面都有明显的效果。

    蚂蚁不仅追求“用户”的用户体验，还追求“设计者”和“开发者”的用户体验，这是非常令人感动的。您是否经常收到设计师和开发人员为此目的的经验反馈？如何处理这个反馈？

    蚂蚁UED：截至今天，网上至少有12000个反馈问题。我们会专门安排工程师和设计师值班处理这些反馈。事实上，蚂蚁今天的成功离不开社区的反馈和共建。

   

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

    你开发的企业级产品不仅仅作为内部工具，也慢慢向外界开放，比如“语雀”。为什么要做语雀呢？与市场上的知识库产品相比，它有哪些特点和优势？

    Ant UED：语雀最初是为了满足内部用户大量的文档请求而创建的。经过三年的内部努力，语雀成为阿里巴巴内部首选的文档知识库。后来我们发现，外部中小企业对证件的需求也非常强烈。配合蚂蚁金服对外开放，语雀去年开始正式对外提供服务，为我们的生态合作伙伴带来更多价值。

    从特点和优点来看，知识库是知识管理领域的产物。这个领域有很多竞争对手，比如兰灵、兰陵等专业软件。它们都需要由专人维护。他们主要注重管理，忽视创造和组织。 ，大多是自上而下的管理方式。语雀的优势在于我们提供了一种轻量级的知识组织方式。不需要安排特殊的学生互相联系。任何人或者一个团队都可以轻松地创建他想要的内容，同时以更优雅的方式呈现给需要的人。人们。除了管理之外，在线协作也可以更高效地完成。

    您还能简单介绍一下还有哪些类似的创新产品吗？

    蚂蚁UED：云蜂蝶：/，基于SaaS模式的智能建站平台。使用云蜂蝶，您将获得自助建站、安全域名、网站托管、数据分析、第三方营销插件等服务。 :/，提高设计师工作效率的工具集。

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

    作为一个与前端技术团队一起工作、专门针对企业级产品的用户体验的设计团队，是否形成了一些独特的团队文化？

    蚂蚁UED：一切都应该专业、简单、自由、有爱。

    需要与前端技术团队紧密合作的设计师该如何保证自己声音的顺畅沟通和掌控？

    蚂蚁UED：因为我们扎根于技术，而且平时也坐在一起，所以日常和工程师的沟通可以说是比较顺利的。掌控话语权的问题，其实很考验设计师的责任感和专业度。

    短短几年时间，我们已经从单一的设计师成长为60人的团队。如何优化人才结构，保证团队能够适应快速成长？您有什么经验可以分享吗？

    蚂蚁UED：首先是构建一个系统，解放重复劳动。只有设计系统才能将人员从大量的重复性工作中解放出来。渐渐地，业务量和业务组合都会增加。这个时候，就到了吸引人才、打造梯队的时候了。最后一步是打造专业影响力，吸引更多人才。

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

    蚂蚁UED：首先一定是专业。无论是体验设计还是创意设计师，棒棒的作品一定是最好的敲门砖。其次，除了设计之外，还有一些软实力，比如沟通和协作。最后，在做企业级产品的体验设计时，拥有一颗耐得住寂寞的心非常重要。我们的产品往往从理念到产品化到商业化，从内部服务到普惠生态。这是一个漫长而劳累的过程。在这样的环境下，谦虚、简单、独创性就显得非常重要。

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

    蚂蚁UED：未来，除了完善更多企业级领域的设计资产外，我们还将升级ETCG组件抽象的思想，同时向服务化开发迈出尝试性的第一步。

    从长远来看，希望我们能够在企业级设计领域做得越来越好。在效率最大化的同时，我们可以探索更多实际的实施案例，积累良好的设计服务能力，最终可以逐步向同行开放。

    这是用匠心打造的良心设计体系和企业级产品以及蚂蚁金服的体验技术UED。我们希望这样优秀的大厂商团队的技术探索和经验分享能够引领国内设计行业走得更远。如果您想了解更多关于 Ant 的信息，可以访问官方网站： ，或者关注知乎专栏@Ant

    最后，欢迎大家转发这篇文章，让更多人了解蚂蚁和中国设计师。

    为了方便大家上班钓鱼，除了微信群之外，我们UXD FANS还建立了钉钉群，每天都欢迎大家进来钓鱼。

    想要加入微信群的同学请扫描下方二维码

    ----------我是分割线----------