Ant Design 4.0正式发布：创造快乐工做

2月28日，广受开发者欢迎的前端开源项目Ant Design发布4.0正式版本。这是两年多以来的首次发布的里程碑版本。新版本中进行了多项改进，包括：

• 设计规范升级。增长了暗色主题和无边框组件。
• 兼容性调整。最低支持IE 11，依赖的React最低版本升级到16.9。
• 更小的尺寸。调整了图标使用API以支持tree shaking，并对相关依赖进行精简。
• 组件重作。包括Table、Form、DatePicker等组件进行重作。

你们能够访问 ant.design 了解更多信息，或在GitHub上关注Ant Design项目。

2015 年，Ant Design 发布第一个版本，到如今时间过去整整 5 年了，第一代 Ant Designers 陆续退出舞台中心，第二代、第三代 Ant Designers 正在扛起大旗。他们不只仅扛起发展的重任，还要传承 Ant Designer 的精神。正如「天然」中的万事万物，有发展、有死亡、更有进化。

本篇文章将和你们一块儿聊聊 Ant Design 4.0，以及穿插一些 4.0 背后的故事，但愿给各位完整的输入和体感。

Ant Design 4.0 的由来

在一次内部会议中，咱们谈及 Ant Design 的历史的问题：

林外说：Ant Design 已经作 4 年多了 

玉伯立马纠正：Ant Design 才作了 4 年，刚刚起步，咱们起码要作 30 年 

Ant Design 已经走过了四个年头。此时的 Ant Design ，已经远不止是一个 UI 组件库。咱们诞生可视化资产（AntV）、插画资产（海兔），以及体验设计、增加设计、品牌设计等各类策略；同时，在可预见的将来，咱们也将会涉及工业设计、运营设计等工做范畴。随着业务复杂性和人员复合性不断增长，如何去诠释和融合新生力量，去构建一个紧密联系的体系，而非一味的堆砌，成为咱们须要思考的重要问题。

此外，做为一个立志作 30 年的设计体系，光依靠一两代人的努力是远远不够的。为 Ant Design 创建一套科学的核心模型，并指引一代又一代的 Ant Designers 去传承、发展、演进，成为当下愈发紧急的事项。

找到 Ant Design 的思考原点，衍生出咱们的价值取向，泛化原则和模式来解决一再出现的问题，并经过工具化和团队不断放大效能、赋能生态，是 4.0 的立项初衷。咱们得让每一个 Ant Designer 都有一颗心，有一张图，打好一场仗。

以上即是 Ant Design 4.0 升级的最大内因。所以，这一次咱们除了增长了一些资产之外，更重要的是找到一个根基，自下而上天然生成：

• 底层静水深流，探索设计深度：肯定「每一个人都追求快乐工做」这一基本假定，做为体系的原点。在此之上，衍生出 4 个设计价值观：天然、肯定性、意义感、生长性。
• 顶部百花齐放，融合设计广度：生长出更多设计资产和设计策略。其中，设计资产提升研发的效率和一致性，让产品更好看；而设计策略让产品更加好用，让用户目标更加专一，让人机交互更加紧密。

如偏右的所说：这两年的 Ant Design，底层静水深流、顶部百花齐放。整个设计体系，将在设计师和工程师的碰撞和融合中继续前行，为业界和蚂蚁生态带去更多设计和技术价值。

基本假定：每一个人都追求快乐工做

时下经常听到一句话：「工做使我快乐」，然而，工做真的令人快乐吗？对于大多数人来讲，工做是一个复杂的话题，由于咱们对它又爱又恨。

根据《发现心流：平常生活中的最优体验》的数据统计，工做的体验并不那么友好，具体有三大特征：

• 工做让咱们专一：工做令人专一，是全部活动中专一度最高的。
• 工做大部分时间，咱们不快乐：咱们在从事爱好、看电影、吃东西等活动，都会频繁感觉到快乐，然而在从事工做/学习以及家务的时候，并不快乐。
• 宁愿发呆，咱们也不肯意工做：在全部活动中，工做的动机最低。对于不少人而言，宁愿发呆也不肯意工做。

宁愿发呆也不肯意工做，分明是「工做使我难过呀」！那么，是什么让工做体验如此糟糕呢？

工做设计的不合理，致使挑战大于技能

虽然致使不快乐的缘由不少，可是总结概括以后，大体分为三大类缘由：

• 目标不一致：大部分工做者认为，工做是帮助老板完成目标，而不是本身的人生目标。
• 很差的反馈，带来负面感觉：工做结果不被承认，常常被否认。此外，还有人际关系冲突，尤为是与直属上司之间的冲突和矛盾。
• 挑战和技能不匹配：因为工做设计的不合理，致使挑战和技能的不匹配。有些企业主只关注成本和效益，把工做设计的很是枯燥，员工处于重复性劳做，好比：生产线上的工人；而另一些工做，又设计的过于复杂或者难度太大，致使员工疲于应付，没有时间和精力陪伴本身的家人，好比：互联网从业者。

而在数字世界中，这个矛盾变得更加尖锐和突出。70 年前，第一台计算机诞生，占地 170 平方米，却只能作 5000 次/秒的运算，然而当下咱们手上任何一只手机，都是它运算的万倍、甚至几十万倍。随着计算机技术能力的提高，系统的数据、信息、功能爆发式增加。然而，人却没有明显变化。咱们和 70 年前的爷爷辈没有本质区别，好比：爷爷辈能够记住 7+2 的数字短时记忆能力，到了 00 后这一代仍是这个水平。

因此，系统迭代的光速，远远超过人进化的龟速。在数字世界的人机交互中，系统给咱们挑战远远、远远、远远大于咱们掌握的技能。

不一样的挑战，会带来不一样的情感体验

当工做中挑战和技能不匹配时，会给咱们带来不一样的内心感觉。

• 当技能高于挑战的时候，咱们会感受到无聊、松懈。
• 当挑战高于技能的时候，咱们会感受到担忧、焦虑。而数字世界中的咱们，长时间面临过大的挑战，使得担忧和焦虑成为了常态。

而只有挑战和技能匹配的时候，咱们的工做才会有快乐。同时，随着技能不断提高，又能匹配更高的挑战，就能在工做上持续体会到快乐。那么，工做就会如游戏般好玩，是一种别样的快乐。

全情投入，快乐工做

工做中的快乐，和咱们在沙滩上晒太阳的那种快乐，很不同。你们看一下这张图，回想一下本身的工做，必定会有这样的体会。当你面临一件很是有挑战的事情，你须要集中全部注意力，保持专一，作一件事。一抬头，2 个小时过去，竟然下班了。过程当中，你不会有任何感觉，而完成后，你会有很强的成就感和知足感。

这才是工做的快乐，是全情投入的快乐，也是成长的快乐。

Ant Design 基本假定：每一个人都追求快乐工做

咱们认为「每一个人都追求快乐工做」。由于这两个主要缘由：

• 第1、每一个人，都曾经有快乐工做的经历。只要让挑战持续匹配技能，就能创造连续的快乐工做。
• 第2、工做不可避免。由于咱们一半以上时间都在工做。若是咱们想要一个快乐的人生，那么快乐工做，对咱们每一个人都意义重大。

今天，「每一个人都追求快乐工做」正式成为 Ant Design 的基本假定，就像「光速不变」至于相对论同样。咱们期待这个假定，能引领 Ant Design 能不断传承、发展、演进，活过三十年。

基本假定衍生 4 个设计价值观

基于「每一个人都追求快乐工做」这一基本假定，咱们分别为两类人：用户（最终使用用户的人）、设计者（创造应用的人），带去两种感觉：快感、乐趣。自此，咱们衍生出 4 个价值观：

• 设计者的快—肯定性 Certain：绝大部分数字产品，都是分工合做的产物。而人越多，团队合做的熵就会变高，这是一切低效的来源。尽量少的功能，尽量简单易学的规则，尽量模块化的方案，让全部人都在一个思惟频道推理出一样的方案，这能明显下降合做熵。Ant Design 的各种资产，都在落实这个理念，让更少人更快、更好的完成研发工做。
• 用户的快—肯定性 Certain：一致性的方案，下降学习成本。一样的问题，一样的解决方案，有利于用户在系统内外快速学习和操做，下降学习熵。
• 用户的乐—意义感 Meaningful：用户经过和系统的互动和链接实现超我，并完成他的目标，体验到心流，产生一种工做的意义感。前提要实现二者：互动要有利于他的目标的产生和完成，造成意义感；互动应该是天然的，让他对过程也有意义感。Ant Design 对 JCD 方向的探索，就是在工做场景中寻找目标的意义和过程的意义。有趣的 JCD 是 Job Centered Design，也能够是 Joy Centered Design
• 设计者的乐—生长性 Growing：设计的系统有用户互动，有愈来愈多的用户互动。并非指用户群体的变大，系统功能的增加，而是指用户群体和系统功能的互动关系更加紧密，生长和演化出一个群体。
• 用户/设计者—天然 Natural：全部价值观的底座，将来会孕育出更多价值观。天然能够分红感知天然和行为天然两个方向，分别映射人机交互中的反馈和前馈。

限于文章篇幅，在这里，咱们给你们讲讲「天然」，了解详尽内容，能够阅读设计价值观（https://next.ant.design/docs/...）。

天然

视觉是人获取信息的最主要途经，也是人类感知的最主要通道，因此在 Ant Design 3.0 的时候，咱们重点讨论视觉的天然之美。这一次，咱们在前馈层面，讨论行为的天然之美。

一次收纳，用户就记不住、找不到

有一天晚上，在咱们语雀（十万人阿里人喜欢的文档协同软件）的用户交流群，发生了一段颇有表明性的对话：

用户：语雀能够插入图片么？ 

语雀负责人：固然能够，最基础的功能。用户：但是咱们找不到在哪里？ 

让咱们来还原一下过程：在语雀编辑页面的左上角，有一个绿色的 icon；点击以后，能够在第一行发现图片上传功能。但只是把它收纳了一次，就会有不少用户，记不住这个功能；就会有不少用户，找不到这个功能。

这不是语雀特有的问题，是咱们这个时代产品的通病，由于咱们都采用 WIMP 界面的组织方式。

WIMP 界面：用户找功能

整我的机交互界面发展，经历了多个不一样的发展阶段，从批处理界面，到命令行界面，再到 WIMP 界面，以及学术界正在探索的 Post-WIMP 界面和 Non-Command 界面。每过一段时间，系统的易用性会获得很大提高，用户生产力就会获得极大提升，尤为对于普通用户而言。

1973 年，Xerox 独创的 WIMP 界面，是一种划时代的界面组织方式，后来被苹果和微软传承和发展，影响了一代又一代人。WIMP 极大下降人机交互的门槛，提高易用性，让人人都能使用计算机。即便到了 49 年后的今天，大部分系统仍然采用 WIMP 界面进行组织。

WIMP 是 Window, Icon, Menu, Point Device 的简称，即：窗口、图标、菜单、点击设备。这种界面交互的本质上，能够理解成：开发者首先组织好功能，而后让用户记住这个功能，并在须要的时候找到这个功能，进行人机交互。简单理解，让用户找功能。

当系统只有几十个功能组织的时候，这是很是好的组织方式，带来了质的飞跃，让普通人也能使用电脑。但如今，50 年过去了，功能几十倍增加以后。不管怎么组织，都会有人记不住，找不到。

因此，在功能爆炸的今天，WIMP 界面变得愈来愈不天然。

WIMP 界面不天然的两大缘由

第1、过于依赖用户触发，容易走不通。让咱们看看人机交互的 7 个过程。当功能太多的时候，用户记不住有没有这个功能，这就致使了用户没法计划。当功能太多的时候，用户找不到这个功能在哪里，这就致使了用户没法迅速确认动做，不知道从哪里开始？

这是 WIMP 交互不天然的第一个缘由：过于依赖用户触发，一旦用户记不住、一旦用户找不到，这条路就会走不通。

第2、过分依赖意识触发，容易费脑力。咱们回到人身上：根据消耗的能量不一样，人的意识行为分为两层：意识和无心识。意识比如耗能，消耗更多的卡路里和氧气。而 WIMP 界面交互中，系统功能是被动的，它须要人有意识的触发动做，激活全部的功能。

这是 WIMP 交互不天然的第二个缘由：过于依赖意识的触发，比通常活动更耗脑力，若是长期作，这条路就会越走越累。

增长主动式交互，让功能找到用户

如何去解决 WIMP 界面下的这两个问题呢？首先，明确将系统功能分红主动功能和被动功能，人也要分红意识和无心识。其次，咱们要守正出奇：

• 守正：保留 WIMP 界面的常见模式，让用户有意识触发被动功能。
• 出奇(jī)：奇是奇数的奇，而奇数要比偶数多一点。因此，咱们要在守正的基础上，多作一步。增长系统主动式交互，让功能找到用户。

既然用户记不住、找不到功能；那么这一次，咱们就让功能主动找用户。

通常状况下，常见的主动交互能够分红两种类型。

• 相逢不相识：系统主动式交互，因为不是用户有意识触发的。因此用户能看到变化，但不必定明白背后的逻辑。
• 可用不可见：系统主动式交互，用户压根看不见，可能历来没有意识到过。

举一个相逢不相识的例子。在使用支付宝的收款码时，当你的设备旋转达到必定角度以后，界面会天然翻转。此时，对面的人经过扫一扫，就能看到人的正面。仔细想一想这个细节，很是天然。

举一个可用不可见的例子。iOS 的键盘很特别，它会根据你的上一个动做，主动调整每一个字母的点击热区。好比：你输了 Ant Desig 以后，那么 n 出现的可能性会大于旁边的 b 和 m，让你更容易点击。这一切，很是天然，天然到咱们彻底意识不到它的存在。

当分析 500+ 个天然交互的设计细节以后，咱们发现异曲同工，全部主动式能够分为 9 大类，叫作天然交互工具。经过使用它，能够快速寻找天然交互的方法和脉络。让你的用户更省力、更快乐。

解决图片上传的问题

回到刚开始的语雀上传的案例，咱们能够经过将「图片」icon 拿出来，解决用户找不到、记住不的问题。可是，明天表格找不到了？后天附件找不到了？咱们不可能将全部的 icon 都拿出来，经过打平的方式解决。

今天，咱们用另一种思路「主动式交互」，去解决记不住、找不到的问题。

首基于主动式交互的 9 个维度，咱们能够依次排查每种互动可能性。对于靠谱的方式，打 1；不靠谱的方式，打 0。最终在一轮排查以后，发现两种可行的方式。

第一种，上下文（上一个动做）。咱们发现用户在使用同类型产品时，常常会下意识的将图片拖到文档里，这一动做在桌面软件中尤为盛行。虽然语雀是 Web 应用，但为了让用户的上下文保持串联，咱们让用户能够直接将图片拖进去。直接拖进去，而不须要费力的寻找对应的 icon。

第二种，元数据。图片是一种特殊格式数据：jpg、png，系统是很容易识别的。因此当用户粘贴了这种格式，在进入到编辑页面时候，适时的冒出一个提示，询问用户是否粘贴。

这两种方式，并不惊世骇俗，甚至比较常规。可是它们都跳出了 WIMP 界面的思惟模式（让用户记、让用户找的模式），用全新的视觉，更天然的交互方式来弥补 WIMP 的不足。而天然交互工具，就是提供一种思惟框架，让设计者快速得出水准之上的设计方案。

咱们认为：传统的 WIMP 界面在海量功能面前，变得愈来愈不天然了。须要更多的主动式交互，让系统功能找到用户，节省用户脑力和体力。这是咱们的天然之道，这也是用户的快乐之道。