从支付宝设计原则说起

“不知道在腾讯的地盘，发布阿里的内容会不会被打死。——尼古拉斯 · 摊主

花了一上午时间窝在床上看完了腾讯 CDC 出版的《在你身边，为你设计》（一本）

所以今天的内容是 阿里AUX 写的《支付宝体验设计精髓》

（好像并没有什么因果关系，不过并不重要）

文章整理的是本书设计原则这一节，先上个思维导图，方便大家掌握脉络。文章很长，但看完肯定有收货。

1

简单的力量

简单原则使界面看起来简洁，还能使交互流程简化，使整个产品轻量化。

简单遵循两个原则

● 一个页面只做一件事情，突出两个重点

● 删除不必要的内容，隐藏次要的内容

（1） 一个页面一件事情

与PC相比，移动终端的屏幕小了很多。App的一个页面能展示的信息本来就非常有限，不可能像PC一样堆满各种不同的信息。

况且，App的使用环境还非常不稳定，如走路、坐车、单手、双手等，这些进一步限制了一个App页面只能做一件事情。

（2） 删除&隐藏

人在处理信息、学习过程和记忆细节方面的能力是有限的。

现实中，人可能还面临各种中断和打扰，这些都进一步限制了人的能力。

界面中过多的小细节会增加用户的认知负担，就像路障会降低人们的行走速度一样，过多的小细节会降低用户的使用效率。

删除那些可有可无的功能、多余的选项、冗余的文字、花哨的修饰，可以减轻用户的负担，让用户专心做自己想做的事。界面清清爽爽、简简单单，不去分散用户的注意力。

1）删除

我们带着“删除不必要功能”的目的，重新来审视支付宝的生活缴费，看看哪些不必要的功能可以删除。

●   确定主要任务和次要任务，并排定优先次序。

专注解决用户优先级最高的需求，然后再考虑满足用户其他目标。

用户使用生活缴费，主要目的就是完成缴费；然后是新增缴费；最后是辅助功能——账户分组。

●   要知道能够满足主流用户的“足够好”的生活缴费与“完美”生活缴费有什么区别。

如9.2版的支付宝生活缴费（下图中左图），要求补全家庭地址、芝麻信用、家庭成员，这么多的附加元素，在绝大多数情况下，没人使用。

这些功能就是不必要的，可以删除，如下图中的右图所示。

2）隐藏

有些功能用户很少使用，但又是必需的。

例如，自定义、删除、设置等，隐藏这些不常用但不能少的功能（因为可以少的功能我们已经删除了），可以为移动界面节约很多空间，让界面简单。

用户也不会因为它们而分散过多的注意力，更聚焦主要任务，如下图所示。

隐藏的功能在用户需要的时候会出现在合适的位置。

例如支付宝转账到卡，默认隐藏了到账时间，以简化页面。

当用户填好卡号等信息的时候会自动出现到账时间，如下图所示。

2

高效的执行

生活的节奏越来越快，高效是一款产品必备的素质。减少等待、稳定快捷，才能留住用户。

外面的世界很精彩，用户不想等待，用户不想填写没完没了的表单，用户不想总要跳转才能看到想看的内容，用户不想不停地点击……

（1）1秒钟等待

不知道大家有没有这样的经历：

风和日丽的下午，慵懒的阳光洒在身上，你漫步在一条商业街上。闲逛中发现一个店铺在搞活动，于是掏出手机扫描二维码，无奈网速太慢，手机一直在安全扫描，你只好耐心地等。

漫长的等待过后，终于打开一个页面，但那是空白页面！而且，这个页面还没有任何提示。为了5折的优惠，你决定再等等。1秒、2秒、3秒，终于页面再次跳转，进到一个全新的页面，而且显示了加载的进度。

5秒、6秒、7秒，页面终于刷出了大部分内容，无奈活动按钮还是犹抱琵琶半遮面，不肯出现。于是你一遍一遍地刷新，Ioading，刷新，Ioading……

许多研究都表明，用户能够忍受的等待时间为6～8秒，如下图所示。

也就是说，8秒是一个临界值，如果你的页面打开速度过慢，等待8秒以上，大部分用户会离你而去。

在0.1秒内显示反馈结果用户是可以接受的。

1秒是用户保持不间断的思维流的限定时间，用户会注意到这样的延迟。

8秒是保持用户关注当前界面的极限时间，超出8秒用户会愤然离场。

（2）转移注意力

转移注意力是减轻等待的负面影响的常用手段。

其实，在现实生活中，我们常常使用转移注意力这一方法。 

比如，某底捞在客人排队等待就餐的时候提供各种小吃和休闲游戏。

客人有好吃的、好玩的就会忘记等待的烦恼。这种方式在应用的设计中也同样管用。

支付宝的明星产品“余额宝”，当用户进入页面的时候会从服务端获取金额信息。

在这一过程中伴随着金额数字随机变换以吸引用户注意，使用户不会有等待之苦。如下图所示。

（3）一次点击

懒，是人的天性。交互设计师的天职就是将用户从繁重的交互操作中拯救出来，提升产品的可用性，让用户方便快捷地完成任务。

在交互设计中，应尽可能地减少额外的点击，做到一键完成任务。一次点击意在减少用户操作次数，提高操作效率，成全人类“懒”的天性。

交互产品经常包括一些不必要的额外点击，对于用户而言，这些不必要的操作都是附加工作。

支付宝9.2版本以前的手机充值从选择金额到付款需要4次点击：

①点击金额唤起选择picker;

②滑动选择金额

③点击完成关闭picker

④点击“立即充值”进入付款页面

如下图所示。

9.2版本改版以后将充值金额平铺展现在用户面前，用户只需要一次点击选择充值金额即可进入付款页面，如下图所示。

（4）三级跳

在PC网络时代，Web页面间反复跳转是再正常不过的了。

从搜索页面到目标网站首页，首页再到详情，详情页再到推荐页面，推荐页再回到首页……但是，你敢在手机应用上试一试吗？

这么混乱的跳转关系，用户可能真的就进入了你为他设置的页面迷宫，不知道自己在什么地方，不知道返回到哪个页面，不知道怎么快速回到入口。

我们来看下图所示的某热门应用的页面跳转案例：首页→详情页→个人页→详情页→个人页……可以无限制地深入和循环。

当用户回过头来想要返回的时候就迷糊了。

左上角的返回是到哪里的？

如果是返回上一个页面，那回到首页要点击多少下？

在PC网页上因为有顶部全局导航和面包屑导航，这些跳转可能都不是问题。

但是在手机屏幕上是没有这些导航的，只有左上角的返回，这就完全交代不清楚了。所以，在手机应用页面之间的跳转不能太多。

标签栏、抽屉式、宫格式、列表式、轮播式、唤起式，移动设计里的导航模式就这几种，都是比较简单的结构和模式。

如果在移动设计里面设计了太深的信息架构，一会让用户迷惑，二会大大降低操作效率。所以，移动设计中常用的内容应该在3个层级以内看到。

手机上能不跳转就不跳转，下面的案例可以帮助我们减少页面的跳转，将用户带出“潘神的迷宫”。

模态窗口就是对当前页面的内容进行操作，用户不用离开当前页面，从而减少了页面的跳转。我们常见的模态对话框，常用来报错或者提醒用户。如下图所示。

3

人性的对话 

用户使用应用的过程其实就是一个人机对话的过程。

界面中展示的信息是系统向用户传递信息，用户的操作是在向系统传递信息，这一来一往就是对话。

打造一个人性化的App，需要哪些原则呢？

（1）适时反馈

与别人交流时，假设对方对自己说的话没有反应，那么我就会认为对方不尊重自己。

同样，对于人机交互，及时恰当的反馈能告诉用户下一步该做什么，帮助用户做出判断和决定，让用户知道系统运行良好稳定。所以适时反馈很有必要。

下面定义了几个最基本的原则，来保障支付宝对用户做到适时反馈：

● 为用户的操作提供必要、积极、即时的反馈。

● 根据内容的重要程度选择合适的反馈形式。

● 避免过渡反馈，以免给用户带来不必要的打扰。

● 不要打断用户的意识流，避免遮挡用户可能回去查看或操作的对象。

1）反馈方式

移动界面设计中反馈的方式大致有5种：对话框、小气泡、多态按钮、动画、声音或震动，如下图所示。所有的提示都应该在恰当的时候出现在恰当的位置，为用户提供必要、积极、即时的反馈。

● 对话框：

对话框带有一两句说明文字和两个操作按钮，用于确认和取消重要操作（比如，是否删除内容），通常会用明显的颜色，突出显示可能造成损失的操作项（比如，“删除”“不保存”）。

对话框的出现，强迫用户关注弹窗内容和操作，并屏蔽背景的所有内容不可操作，是对用户打扰最大的反馈提示，也是最强的反馈方式。

通常用户都想赶快关掉对话框，以便接着完成被打断的操作。所以，对话框中的文案要尽量言简意赅，帮助用户快速了解和做出决策，如图16所示。

● 小气泡：

气泡也可以叫“Toast”，这其实是一种弱化版的对话框。它就像气泡一样，在界面上展示短暂的时间（5秒以下），然后自动消失。

它不强制用户做任何操作和确认，所以对用户的打扰比对话框小很多。

气泡一般用来确认用户执行的任务状态或者操作结果，如下图所示。

● 多态按钮：

按钮是虚拟世界隐喻现实世界的产物，是对现实世界的按钮和开关的模拟。

而现实世界中的按钮会对用户的操作提供实实在在的物理反馈。所以，为了符合用户的心智模式，界面中的按钮也应该为用户的操作提供反馈，否则用户不知道发生了什么。

当用户在屏幕上按下一个按钮或链接时，也需要有状态的改变，让用户知道界面已经接收到他的操作了，如下图所示。

● 动画：

动画能给用户提供有意义的反馈，帮助用户直观了解操作的结果。

并且不打扰用户的操作，用户体验更流畅。而且精美有趣的动画，能给用户留下深刻印象，提升使用时的愉悦感。

手机淘宝将商品收入购物车时的动画，就是一种比较优雅的反馈方式，如下图所示。

● 声音或震动：

前面讲到的反馈方式都是虚拟界面模拟出来的，而声音或震动能带给用户更真实的物理反馈。声音或震动的反馈给用户的感觉也应该是最真实和自然的。

例如，手机虚拟键盘按下时的“啪啪”声，短信、邮件发送成功后“嗖”的一声，拍照时的“咔嚓”声，都是我们设计中在声音方面反馈比较好的。

恰当的声音反馈有画龙点睛的效果，但过多地使用可能会变成一种打扰。所以，我们不能将声音作为主要反馈，并且要给用户关闭提示音的权利（因为用户所处的环境多样，可能很吵而听不见声音，也可能不适合打开声音）。

震动是一种更强烈的触觉反馈，可以用来加强声音的反馈。） 

2）过度反馈

对话框和小气泡的视觉形式是悬浮在当前界面之上的，用户可以理解对话框与当前界面之间的关系，完成对话框的操作之后可以继续原有操作。

它的本意是减少页面的跳转，尽量让用户沉浸体验。但是有的设计师会滥用对话框，反而打扰了用户的体验流程，成为万恶的对话框。

试想一下，如果每想说一句话之前，你都要在脑子里面弹出一个对话框问自己“你是否真的要说这句话”，这是一种多么糟糕的体验。下面给大家举几个反例。

支付宝9.2版本之前，用户主动关闭收银台，会弹出对话框让用户确认是否退出，其实显得十分多余，如下图所示。

支付宝9.0版本以前的服务窗，在删除服务窗的时候会展示删除成功的小气泡，如下图所示。

其实完全可以用现在的删除动画代替。

在这里就要批评下微信的反馈方式了，每次长按要删除聊天记录，都会弹出这个对话框，烦烦烦！

今天上午还出现了bug，打开微信界面是

我的联系人，聊天记录去哪了？

难道要上演

由腾讯独家冠名的年度最佳综艺《联系人去哪儿》？

（2）情感关怀

情感是人对客观事物是否满足自己的需要而产生的态度体验。——《心理学大辞典》

人性和情感是紧密相连、不可分割的，我们在思考人性化的时候，一定不能忘了用户的情感需求。

用户的需求和期望得到满足时会产生愉快、喜爱的情感；反之，就会苦恼、厌恶。

所以，当用户在支付宝里受挫的时候，我们要及时地给予情感上的安抚和关怀；

当用户在支付宝里完成任务的时候，我们要及时地给予情感上的肯定和强化

1）安抚和关怀

等待、报错、系统繁忙等场景都会使用户产生挫败感。长时间的等待会让用户感到烦躁；犯错误让用户感到苦恼；系统繁忙甚至让用户感到厌恶。

如果我们能巧妙地处理好这些场景，降低用户的挫败感，就能体现设计在产品中的价值。

例如，支付宝在“双11”大促以及发春节红包的时候，用户可能会遇到系统繁忙的情况。

但是这个时候却是用户最着急付款的时候，因为大家都在抢货啊！这个时候我们怎么能通过情感的安抚降低用户的挫败感呢？

我们赋予系统人格特性，用通俗易懂的语言和虔诚的口吻，跟用户展开“人与人”之间的对话，如下图所示。

2）正向强化

在用户完成某个任务或者其他正向场景的时候，我们要强化这种正向的情感，加深用户的情感体验，如下图所示。

左图为用户进入余额宝页面时，我们通过金额数字的增长动画，加强用户在查看收益和本金时候的喜悦感，加深用户对余额宝这个产品乃至支付宝的正向情感。

右图为用户开启支付宝会员的时候，我们通过一个完整的页面和动画告知用户获得的排名与会员等级，强化用户获得会员身份和等级时的自我认同感。

（3）智能服务

智能手机要够智能。充分利用设备的硬件特性、系统的数据，与设计进行完美的融合，让用户感受到我们是懂他的，是聪明的。

手机的传感器赋予我们对外界的感知能力，海量的用户特征数据赋予我们渊博的知识，强大的后台计算服务器赋予我们超强的大脑，

我们的App完全可以像人一样去思考，思考如何为用户提供更好的服务，如下图所示。

左图为支付宝登录，用户在应用中填写过的信息都可以记录在系统中，免去用户二次输入的麻烦，提升用户的操作效率。

右图为新卡号输入，自动将卡号分隔为4个数字一段，方便用户阅读和核对，并且根据卡号自动识别所属银行，减少用户的输入操作。

本文又完得猝不及防。

设计之路永无止境，每周日21点，

摊主带你准时上车。

顺便关注一下我，也许车开得更稳。