在前不久的上海外滩大会上，蚂蚁集团高级体验设计专家林外分享了Ant Design4.0背后的设计理念，咱们将内容整理出来与你们分享。微信
今天，我和你们分享的话题叫作，创造快乐工做。网络
在我开始全部话题以前，我有问题想问你们，你们工做快乐吗？app
我听到了特别积极的反应，说很是的快乐。框架
可是呢，其实，工做并无咱们想象中那么快乐，是全部的活动当中快乐指数最低的，跟躺着带来的快乐差很少的，有些人躺着什么也不干，也比工做快乐。less
什么缘由致使了工做的不快乐？大部分人认为工做是为老板服务，因此很难受。另外一类人是由于反馈，不少工做的结果依靠于外界，依靠于老板，因此你跟直属上司的关系，决定了工做的体验。机器学习
第三类是咱们认为挑战和技能的不匹配，致使了咱们工做的不快乐。当挑战大于技能的时候，你就会焦虑，当技能大于挑战的时候，你就会以为无聊，你的工做就会在焦虑和无聊之间来回地徘徊，这是咱们理解的世界。编辑器
这个问题，在数字世界中会变得更加的明显。70 年前，第一台计算机出来以后能解决的问题很是的简单，可是 70 几年过去了，数字世界获得了很是大的发展，我身边任何一个小设备都远远大于 70 年的。而如今的咱们和 70 年前的前辈们没有本质的区别，咱们有 7+2 的记忆法则，最多只能记住9个数字，这就致使了在数字世界当中，咱们所面临的挑战远远大于人类所掌握的技能。ide
数字世界每每给咱们带来了挑战大于技能，因此你的体验是负能的。若是你的工做更加有趣，挑战可以匹配技能的时候，工做就会变得很好玩。工做就像打游戏同样，你经过了一关，技能获得了提高，工做就会变得持续好玩，因此咱们在无聊和焦虑中间寻找平衡，这个平衡就是快乐的通道。工具
提及工做，你们多多少少会有快乐的体验，可是和躺在沙滩上睡觉的体验彻底不同。某一个下午或者晚上，须要处理一件稍微有难度的事情时，你须要集中全部的注意力，专一于你和你的事情，一抬头两个小时过去了，这是一种极度饱满、极度被知足以后的快乐，它是一种成长的快乐，也是一种挑战和技能匹配的快乐，也是全情投入的快乐，因此咱们所说的快乐工做指的是全情投入的工做。布局
基于这样的思考，咱们将每一个人都追求快乐工做，做为Ant Design 的基本假定。
第一个缘由是，咱们认为人或多或少都有这样的快乐体验；第二个很重要的缘由在于，对于大多数人而言，咱们醒着的绝大部分时间都要工做，若是你没法在工做中体验到快乐，人生将会在焦虑和无聊中度过。
基于这样的思考，咱们找到了 Ant Design 的基本假定。就像光速不变基于相对论同样，咱们想基于这样的假定，表达 Ant Design 的体系。
这就是 Ant Design 的基本假定，每一个人都追求快乐工做，Ant Design 中每一个人是谁？咱们分红两种不一样类型的用户：第一类是用户，第二类叫作设计者。所谓的设计者是创造这些应用性能的人，也就是在座的大多数。
咱们将快乐拆成两部分，一部分是快感，一部分是乐趣，基于此，咱们衍生出了 Ant Design 四个价值观，设计首先是天然的，其次是肯定的，第三，设计是要有意义的，第四，设计是能让用户和产品不断成长的，它是具备生长性的。
因此接下来的分享当中，由于时间的关系，我会重点分享其中的两块。第一块叫作肯定性。分享一个小案例，我刚入行的时候，就碰到了社会的毒打，我想找到个人合做伙伴进行验收发布的环节，由于设计师对细节有很是强的管控情系，我用略微虔诚的态度说：“亲，能稍微调整一下列宽吗？”，他可能没理解个人意思，说“我以为挺好”，我说“都换行了，哪里好？”，我觉得会引发他的注意，结果他回了我一句：“这不重要，你行你上。”
我一开始并不明白，为何这个世界是这样的？我认为咱们都应该有一样的认知，直到有一天我看到他的竞争升级 PPT 的时候，我就明白了，原来他不是针对我，他不换行不只在产品上，PPT 里也不换行。不一样的人有不一样的想法，不一样的工种也有不一样的想法，而咱们的工做是须要这样一群人一块儿合做，就会致使一个问题，当不一样的人有不一样的、不肯定性的想法，会致使研发过程的不肯定性。
咱们总说，一我的能够走得很快，一群人才能走得很远。咱们要想办法怎么让这群人能够步调一致地走得快，又走得远，咱们把这套体系、方法论叫作 ETCG 2.0。
这是原有 ETCG 的基础上，进行升级的过程。咱们但愿面对一样的问题，各个角色都能推理出一样的方案。就像你在春天种下一颗苹果树的种子，你必定在秋天能够获得一颗苹果树，而不是一颗梨树。
ETCG 2.0几个字母分别表明不一样的意义，第一个是功能范例，第二个是模板，模板是咱们基于业务的抽象，目的是帮助新手或者帮助不一样设计师保持设计的一致性，指引页面如何设计，好比这是典型的列表页，由高级搜索和表格组成。今年在模板的基础之上又作了一层更大的精进，咱们作了抽象和规范衍生出了模板组件。一行模板组件，当没法知足你的需求时，只要一行代码，就能够获得一个完整的序列。
除了列表页，还有表格页，还有图表、表单，以及布局，构成了咱们对系统的抽象，叫作「四表一局」，它大概覆盖了中后台系统、或者企业级产品 80% 以上的业务诉求，同时本着很是开源、开放和普惠的心理，整个「四表一局」正式对外开放，你们能够访问 Ant Design 的仓库下载和使用。
ETCG 中的 C 是组件，是 Ant Design 最先和你们见面的内容，五年的时间里面，咱们有了不少数量上和质量上的精进，同时创造了很是多的社会价值。这五年前，很是令咱们自豪的是，有接近 1000 名贡献者参与到 Ant Design 的建设中，同时 TOP 50 当中，60% 来源于社区，他们为 2 万家企业提高了 3-5 倍的研发效能，同时咱们正式于去年年末成为全球开源第一的组件库。五年前，蚂蚁集团发起了 AntDesign 这个项目，可是它今天所取得的成就是来源于社区和咱们的共同努力，这里的荣誉和掌声应该献给全部为Ant Design 贡献过代码的同窗，谢谢大家的支持。
ETCG的 G 有两个。第一个 G，是对组件样式的抽象，咱们用了变量化的方式进行了约束和管控，它能够作什么？特别简单，你的老板今天不喜欢蓝色，想要橙色，你只要一行编码，就让组件库发生了面目一新的变化。ETCG 的第二个 G，是咱们今年重点建设的部分，也是全新的一部分，叫作 Guides，指的是人和机如何进行互动交互的过程。
好比说这里是应该放一个数值输入框，仍是放一个输入框？以及如何进行放置？咱们将琐碎的交互规则进行抽象和封装，让机器学习这些规则，让机器帮助咱们进行这些规则。你只要导入原数据，几乎不用作任何的配置和更改，能够获得可进入生产环境、可研发的表单页面，设计得可能比初级的设计师产生的效果更好，你想要的一切都应该放在合适的地方。
这就是咱们对 Ant Design 肯定性的理解，不须要设计师参与的设计产品，极致提高了设计和研发的体验，固然商业化还须要很长的时间。当下如何解决如今碰到的问题？仰望星空，也要脚踏实地。做为设计师，我在想怎么解决五年前的问题，我很想说我行我上。
咱们怎么使用？使用 Kitchen 进行编辑化的能力，把 13% 甩给个人合做伙伴。若是你以为还不够，想作更多的管理和管控，甚至能够用「四表一局」的能力进行服务的搭建，搭建可进入生产环境的服务产品，让设计师变成设计工程师的角色。
在今天分享的最后一趴，我和你们聊聊这个场次常常听到的词，那就是“天然”，学术界和产业界对天然有很是多的理解。咱们把它定义成了形容词，咱们认为这个行为很天然，你们常常在各个场合听到的一句话，设计是关乎如何运做的问题，Ant Design 在这个基础上，要聊的是 how it worksnaturally。
一样分享一个小案例，在咱们有一天的用户群里，咱们的用户反馈了一个很是有意思的问题。他说语雀能够插入图片吗？语雀的负责人当时在现场，就回到：“固然能够，最基本的能力”。咱们的用户问出第二个特别具备表明性的问题：“但是咱们找不到在哪里”。语雀是阿里内外都很喜欢的一款文档类文件。编辑页的第一页，咱们的工程师特地作成了绿色的，你点进第一个的第一行就是图片上传的功能。可是你们有没有想过？咱们仅仅隐藏了一级，就让用户记不起来有这个功能，咱们仅仅隐藏了一级，就让用户找不到这个功能。这不是语雀产品特有的特征和问题，而是这个时代大部分问题具备的特征和问题，由于大部分的产品处于 1973 年的基础上。
WIMP 是什么？Window、lcon、Meru、PointDevice，当咱们的功能只有20几个的时候，这是很是好的设计，总比代码行好太多，今天咱们说了数字世界当中，咱们的设备、计算机、网络成千上亿倍的发展，用户怎么记得住 8000 个功能？用户怎么定位到8000个功能在哪里？因此 WIMP 界面碰到了人机交互的瓶颈阶段。
为何碰到瓶颈会愈来愈不天然？第一个角度从人机互动的环节，当用户记不住的时候，就没办法从哪一个入口出发。因此 WIMP 界面第一个不天然的缘由在于，全部动做的发起都依托于用户。用户一旦记不住，一旦找不到，人机交互就没办法走通，这是 WIMP 界面的第一个问题。
第二个问题，要回到人身上。人的行为分为有意识、无心识的两层，能量消耗比较大的就是有意识层面。WIMP 在于全部的行为依托于用户有意识地触发，这自己就是一个很是消耗脑力的一件事情。在咱们面对这么多功能的环境下，这两个问题致使了咱们在数字世界当中碰到的巨大问题。由于咱们知道系统的功能天天在增长，数字世界不须要遵循物理制造的极限，它能够进入无限备功能的叠加，因此在这个世界当中碰到的挑战远远大于咱们所掌握的技能，因此 WIMP 界面碰到了诞生以来最大的问题。
咱们如何解决这个问题呢？首先必定要清晰地认识到，人是有意识和无心识两种思惟的结构和意识形态的。同时系统也能够分为两部分，一部分是主动功能，第二部分是被动功能，咱们要尝试的守正出奇。守正延续了 WIMP 界面常规的功能，让人有意识寻找功能，触发系统的能力。可是出奇要多作一步，除了让用户找功能以外，咱们要增长不少的主动式的交互，让功能找到用户。
接下来分享几个案例，在咱们的常规设备当中，都已经有这样一些主动式的服务来寻找到你。
第一类是相逢不相识，名字很好听，解释也特别好玩。在语雀当中有一个小功能是我特别喜欢的功能，当我编辑一篇文档，编辑了大于 30%、50% 的文本量，这个钩会天然地帮我钩上，由于它有一个基础的设定：若是这篇文章发生了比较大规模的修改，你的订阅者很天然的想知道你这篇文章作了什么。第二个相逢不相识的地方，你们能够聚焦一下支付宝。有兴趣能够打开支付宝首页，在你的收款码应用里，解决什么样的问题？解决面对面交易的问题，因此当你输入一个金额完成之后，天然旋转屏幕的时候，这个屏幕会进行天然的翻转，这样对面扫你钱的人，能够看到信息的正面，这很是天然。
第二个主动式交互的类型，叫作可用不可见。和相逢不相识的区别在哪里？就是默默地为你提供了服务，但你可能永远不会知道它的存在。在苹果第一代出来的时候，作了一个很是牛逼的设计，由于你们都知道虚拟键盘，没有物理触感，因此误触率很高。虚拟键盘怎么解决？苹果基于很是有趣的思考，在苹果的全键盘里面，只要输入了 Desig 的时候，经过语义词的分析，N 点击的范围远远大于旁边的 B 或者 M，以及上面的 G 部分，这是帮助你作主动选择的服务，只是咱们历来不知道有这样一件事情。因此咱们将这些天然的人机互动方式进行整理，包括融入到更多的案例之后，发现人机主动式交互有九种不一样类型的分类，除了输入法，更可能是经过用户使用情景的上下文进行优化的过程。
咱们有了这张人机天然的交互，怎么解决语雀的问题？我和在座的语雀设计师有过这样的讨论，用户说图片上传找不到，咱们大部分人的第一反映是把图片上传显示单独放出来。这可能会解决刚才的问题，可是若是明天财务说表格找不到了，我是否是还要把表格拿出来？有人说附件找不到了，还要把附件拿出来吗？咱们须要从主动式交互的角度畅想怎么优化人机互动的过程。
回到这张天然交互的工具，提供了一种简易的思惟框架。咱们去判断哪些是能够去作的，第一件事特别简单，咱们判断用户使用的上下文是什么，咱们发现不少产品的通用习惯，直接把图片拖进去，作成小的服务，用户根本不须要知道功能的存在就可使用。
第二个从原数据角度来理解，图片是一种特殊结构的数据，它是 jpg、png，用户在外部复制了以后，进入编辑页能够主动推送他一个服务，询问他是否要粘贴，本质上并不复杂，可是它确实在 WIMP 界面传统意义的基础上，又提供了初级的部分，又额外作了一部分。
咱们所定义的天然里面，是须要咱们作更多的主动式的服务，让咱们这个海量的功能可以在合适的场景下，去找到用户，从而节约人的脑力和体力。由于对于人来讲，咱们和 70 年前的爷爷辈们没有本质的区别，咱们须要被善待。有感兴趣的同窗能够看支付宝的访问码，也期待和你们作更多的互动。
分享的最后一趴，我简单总结一下今天作了哪些事情和分享了哪些内容。第一趴，咱们提出了 Ant Design 的基本假定，咱们认为每一个人都缺乏快乐工做，这种快乐工做是和咱们平时闲散彻底不一样的问题。同时大多数人都不可避免的来工做，咱们怎么扭转工做对咱们的体验，这是人生中很是大的问题。第二趴，咱们衍生出新的价值观，这四个价值观中，由于时间篇幅的缘由，重点和你们讲了肯定性和天然的价值观，这是历史最悠久，也是最有表明性的两块。基于这两个价值观，咱们衍生出了不一样的组建库也好、可视化资产也好，相关的设计资产以及设计策略，以及配套的设计工具，固然蓝色部分是咱们今天介绍的重点。最后这张图特别适合拍照，这是咱们系统提供给你们的主动式服务。
我是设计师林外，来自于Ant Design，谢谢你们！
- END -
本文分享自微信公众号 - 支付宝技术（Ant-Techfin）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。