支付宝体验设计精髓
支付宝AUX团队 著
吴明 主编
图书在版编目（CIP）数据
支付宝体验设计精髓/支付宝AUX团队著. —北京：机械工业出版社，2016.9
ISBN 978-7-111-54888-1
I. 支… II. 支… III. 电子商务―支付方式―研究 IV. F713.361.3
中国版本图书馆CIP数据核字（2016）第226108号
支付宝体验设计精髓
出版发行：机械工业出版社（北京市西城区百万庄大街22号 邮政编码：100037）
责任编辑：孙海亮 责任校对：董纪丽
印 刷：中国电影出版社印刷厂 版 次：2016年10月第1版第1次印刷
开 本：170mm×230mm 1/16 印 张：19
书 号：ISBN 978-7-111-54888-1 定 价：79.00元
凡购本书，如有缺页、倒页、脱页，由本社发行部调换
客服热线：（010）88379426 88361066 投稿热线：（010）88379604
购书热线：（010）68326294 88379649 68995259 读者信箱：hzit@hzbook.com
版权所有侵权必究
封底无防伪标均为盗版
本书法律顾问：北京大成律师事务所 韩光 / 邹晓东
推荐序1
此书凝聚了支付宝从工具产品走向生活服务平台的设计实战精华，推荐阅读！
——樊治铭 蚂蚁金服支付事业群总裁
推荐序2
特别喜欢书中的一段话：“设计就是设计生活，设计人生，需要用感性的右脑加理性的左脑去分析问题、解决问题，让设计、生活、人生变得更加美好。”
支付宝一直希望能通过这个平台给人们的生活带去美好而充满微笑的改变。AUX团队在多年的专业积累和实践沉淀的基础上，带着对用户、对产品的热爱与感情，全心投入在这个平台的设计上。 团队有分工，设计无边界，学习无止境。欣赏AUX团队在工作中不断总结、思考和沉淀的习惯，也期待读者朋友们从他们的实践和思考中有所收获。
——陶莹 蚂蚁金服集团人力资源部资深总监
推荐序3
小学时我有一个关系很好的同学，他的父亲在民航局工作，家里有一些过期的航机杂志。我无意中在他家发现了这些杂志，便如获至宝，因为这些杂志上有上世纪八十年代非常少见的很多国外品牌的广告。那些经过精心设计、印刷在铜版纸上的精美画面到现在还深深印在我的脑海里，尤其是在那个电视里充斥着中华鳖精和燕舞收录机的年代，YSL的鸦片香水、Marlboro的牛仔以及人头马的X.O广告，让我淳朴的心灵受到了巨大的冲击—原来世界可以这样美。
二十多年过去了，今天我穿着淘宝上一个叫“国棉壹厂”的店铺出品的Vintage风格的全棉T恤，上面印刷着上个世纪八十年代早期的画面，穿在身上觉得舒服体贴。我在一个叫“南食召”的店铺买土面，用牛皮纸包裹着送到家里，沸水煮开，加一点猪油和生抽，鲜美无比—原来我曾经所摒弃的东西也这么美。
美，未必出尘不染，柴米油盐也是美。今天我们面临的产品设计领域，又何尝不是如此？有人追求“逼格”，有人追求实用，但其实无论哪种，适合自己的才是最好的。
从来没有一个产品如支付宝这样广受争议。尽管三年的时间里，它从一个日活百万级的产品成长为一个日活近亿级的产品。
也从来没有一个团队如支付宝的设计团队一样承受着巨大的压力。尽管他们没有任何成熟的经验可以模仿和借鉴，只能独自在这个星球上摸索前行。
但是，我相信，这个团队追求美的步伐从未停止，也不会停止。
从PC时代到移动互联网时代，支付宝面对的挑战、要甩掉的历史包袱太多太多，更何况，伴随着时代的变迁，原本的支付工具已经逐渐成为一种生活方式，它需要承载的东西也越来越多。在几亿用户面前做这些改变，无异于为一辆高速行驶的列车换车轮。
我们欣喜地看到，支付宝的设计团队完成了这一高难度动作，同时还总结出了积累的经验，并愿意与世界分享这些经验。也许这些经验并不那么完美，但贵在真实，而真实就是最美的东西。
吴明邀请我给这本书写个序言，我觉得我作为一个文科生似乎没有资格写什么，但在抽了七根烟之后，还是决定试一试，就当我为这个团队所做的一切道一声感谢，谢谢你们让支付宝成为我生活的一部分。
—陈亮
蚂蚁金服集团用户体验设计委员会主席
蚂蚁金服集团品牌和公众沟通部总经理
推荐序4
对于逐渐成熟的互联网用户体验行业，很多曾经摸着石头过河的团队和设计师已经身经百战、经验丰富。然而他们更热衷于将自己的经验总结成可复制的专业方法，并毫无保留地分享出来，这就是互联网精神之所在—开放与分享。
支付宝UED就是这样的一个经验丰富、乐于分享的团队。这里的设计师有着敏锐的用户洞察，同时也具备良好的产品意识。他们在互联网金融用户体验领域积累了大量的经验，本书通过大量的实践、不同设计师的视角、多维度地诠释了支付宝产品的体验设计思路与方法，实实在在的干货，值得一读。
—杨光
阿里巴巴集团UED委员会委员长
阿里巴巴集团消费者事业群UED资深总监
推荐序5
用户体验这一概念肇始于计算机领域，苹果公司原副总裁唐·诺曼博士在上世纪九十年代中期就提出了“用户体验”（User Experience，简称UX）最早的定义。经过业者不断丰富其内涵，延伸其外延，今天我们谈论的“用户体验”实际上已经成为了驱动产品与服务创新的重要抓手。用户体验从最初阶段符合好用、易用、易学、防止出错的基本可用性原则，到今天满足包括美感、社会身份表达在内的多维度多层次的“整体体验”，完成了自身的阶段性进化。离开产品与服务及其应用场景，空谈“情怀”、妄谈“体验”必然会被市场淘汰，被用户抛弃。大浪淘沙，不破不立，在行业跨越式发展的过程中，既涌现出了众多可喜的创新闪光点，渐次丰富充实了用户体验的大概念；也无疑或多或少杂糅进一些以偏概全的想法、曲解的理念，甚至是有违用户友好基本原则的“暗黑实践”。
同时，用户体验的具体工作，并非无源之水、无本之木。从理论到实践，国内外各行业都已经有了非常完整的体系。可以说，中国企业的用户体验工作实践，从诞生之日起就可与国际同行一争高下。换言之，多数情况下，我们不必“重新发明轮子”，依照一定之规即可释放出用户体验工作对产品与服务再造的巨大影响力。
但是，当今市场对“用户体验”概念的理解还有很多不同的看法，甚至还存在部分“庸俗化”的理解。片面且简单地将孤立的“主观感受”理解成整体的“用户体验”，将提升用户满意度异化为就是提升“用户体验”。在行业内谈提升用户体验，已经到了必须“书同文，车同轨”的阶段。只有厘清概念，才能在正确的方向上探讨如何提升用户体验，最终提升产品与服务的整体水平。
十余年来，作为行业的引领者，UXPA中国始终屹立于用户体验发展的潮头。以促进用户体验事业在中国乃至全球的发展为己任，不断传播正确的用户体验理念，探索有效的用户体验方法，推广高效的用户体验实践。在这个过程中，我们深刻体会到，要完善用户体验，单靠用户体验的从业者是远远不够的。真正的用户体验之道在于融合，不断与其他行业和领域碰撞、互动、包容，甚至浴火重生，才能使用户体验之树长青。
阿里巴巴在历史上就有高度重视用户体验设计的传统，与马云一起创业的十八罗汉中就有两位是设计师—盛一飞（James）和麻长炜（二当家）。在阿里工作期间，我和本书的主编吴明曾共事过。今天，支付宝AUX团队能毫无保留地将用户体验设计实践与大家分享，真是善莫大焉。这里面，既有生动活泼的案例，又有对UX设计经验的总结和升华。用本书中提到的一句话来讲，即“设计赋能商业”。相信这本书对行业同仁有一定的启发和借鉴意义。
—陶嵘 博士
中国用户体验专业协会（UXPA）主席
浙商银行总行个人银行部总经理
推荐序6
“打开钱包之后，除了安全，还必须有熟悉的、惊喜的体验。”
支付宝的产品体验挑战与集团内部电商体系的产品链路构建截然不同。
拜读小伙伴的精华总结之后，收获何其多。作为集团UED大学的负责人，乐见这样的总结分享，能够抛砖引玉，拉动行业内生活金融产品的体验更上一层楼。用生活的经验来比喻和解释支付宝的产品体系，每一个场景接入就如同用户在一个地铁系统内行走，让一个城市生活链路串接的信息框架整合在一个产品内。在此系统内的每一个入口/出口可以是餐厅、购物商城、政府机关、小区场景等。
小入口可以是电影，也可以是生活缴费；大入口可以是个人金融、外卖、线下餐饮。而电影院、餐厅、商城等则是用户路线下的场景实现点。而过程中的数据积累，最终由每个支付闭环的终端获取整个路线上的最大化数据。最终形成由用户实际生活路线构建的用户个人数据生态与习惯，也就是带有安全感的产品使用惯性。
本书从以用户为中心的视角，剖析了用户的体验旅程与产品链路不断优化的深度。在一个产品体验框架下，让使用者有共同的标准和依据来进行探索，帮助用户在版本变换的过程中，不同生活场景的变化中，以及碎片式决策的过程中，仍然能够做出符合期望的决定。
从支付宝的产品体验设计案例中，我个人也收获了许多产品体验的最佳实践原则：
通过平衡、对称和阶层来形成信任和完整感，像是格线设计对应主、辅助指标图标的配置。
以通用度高的扁平视觉显性指示，让不同年龄层的用户都可以理解，包括有部分前期障碍（跨文化理解、场域熟悉性）的使用者。通过系统实时反馈使用者的行为，为接续的互动做好准备，预防并减少错误。
以直觉式的经验互动回馈，激发使用者的操作自信。并通过高相关度的任务衔接，任务相关性的就近原则，让使用者在寻路过程中保持愉悦。
让使用者连接他们过去熟悉的共同脉络，从而在低学习成本的成就感中继续探索。
——善牧/萧健兴 阿里巴巴集团UED大学负责人
前言
在企业，设计为商业服务，因此设计和商业服务一样，对象也是用户。众所周知，用户体验是一个系统性的问题，好的体验不仅仅是一个界面好看不好看，也不仅仅是动效是否酷炫，而是用户使用服务整个阶段的感受。因此，设计时一定不能重形忘因。
一个产品和服务能获得成功，是因为它真正帮人们解决了某些问题。这听上去很简单、很基础，但是在产品和设计的过程中很容易被忽视。这里面有两个关键要素，一是用户，二是场景。
在进行体验设计以前，先想明白目标用户是谁？要在什么场景下解决这类用户的什么问题？不要用自我喜好和偏见去替代真实用户需求，认为自己就是用户，自己的习惯就是用户的习惯。学会观察和了解真实的用户场景非常重要。
走出办公室，到地铁站、超市、餐饮店、商场等真实的用户场景中去看看，去观察真实的使用场景和习惯，看他们怎么使用我们的服务，如何完成产品的每个环节与步骤，然后绘制用户体验地图。只有理解和感知真实的需求场景才能直达问题的根本，做出解决问题的设计方案。
学设计的意识：在验证产品的时候要保持一颗普通用户的心，同时，方法要专业。我们时常会被经验和物理逻辑所迷惑，忽略了常识和习惯。
好的东西都是简单的，不仅符合专业，也符合直觉。简单，就是可以用几句话就能很快说清楚，并能让目标用户产生共鸣，而且学习成本低。如果达不到这样的效果，那么一定是设计方案出了问题。
做设计的方式：体验设计是一个系统性工程，因此合作非常重要。不要只站在设计师的角度去思考，如果只是站在设计师的角度思考，将会束缚你的能力和想象力。
“工作中，你所面临的所有人和事都是你工作的一部分。”细想在你所服务和工作的环境里，设计师可以扮演什么样的角色？如何帮助把事情做得更好？为了帮助业务和团队成功，自己还可以做什么？这样的合作意识有助于我们解决很多边界问题，同时可以让我们对解决体验问题有更全局的把握。
而我们特别容易犯的错误就是：在讨论或者争论一个问题的时候，很容易从对哪种方式体验更好一些的争论，变成谁对谁错的争论，进而使争论演变成捍卫自己的所谓尊严而贬低他人的人格。我们应该从事情本身出发，从用户角度出发，去考虑最好的用户体验，乐于接受他人的建议。讨论本身并不是为了赢，而是获得最佳结果。
看设计的演变：支付宝、余额宝的横空出世，微信在移动IM领域快速发展，滴滴和快的、美团和点评之间的O2O战争，这一切都说明，近几年中国移动互联网发展飞快。
3年前很幸运能够加入支付宝无线设计团队。这3年，也是支付宝飞速发展的3年，从一个移动支付工具成长到今天数亿用户的生活服务平台，这是一个非常了不起的成绩。3年里，支付宝无线设计团队也在不断壮大，这期间，我们的产品、设计策略也发生了很多变化。团队的设计理念和方法越来越成熟，于是，我们想对这几年来团队在专业上的一些收获和成果做一次总结，将我们的一些经验分享给在无线体验设计行业奋斗的年轻人，希望他们能通过我们的经验分享能够在成长的道路上少走弯路。
玩设计之初心：我们一直坚持“设计赋能商业”的原则，从场景和产品的角度去整体思考设计，思考怎样为业务带来一脉相承的设计价值。设计师们在各自的专业特点和对不同问题解决思路的基础上进行经验与专业沉淀。
本书的编排就是围绕“学设计、做设计、看设计、玩设计”的思路进行串联混排的。
成书的过程，特别感谢我的老板和伙伴们，有了你们的支持和鼓励，团队才能在繁忙的工作中挤出时间，克难竟事。特别感谢团队中的蒋黛炜同学的无私尽责，还有出版社同人，有你们的帮助和指导，我们才能汇流成河。
需要说明的是，书中的很多观点和产出都源于团队里每一个设计师在工作实践中的所思所得，故难免会有局限性，希望各位读者谅解。书中如有不当之处还请各位同行、专家提出、斧正。
支付宝用户体验部（AUX）
目录
推荐序1
推荐序2
推荐序3
推荐序4
推荐序5
推荐序6
前言
学 · 设计
01 行业设计“五步法” 王宇航 // 2
02 无规矩不成方圆—设计规范的建设 周建波、朱兰民 // 21
03 设计走查表 王向红 // 70
04 图标设计与验证 杨波、方芳 // 89
05 敏捷开发模式下的设计协作 马颖男 // 100
做 · 设计
06 行业服务设计的思考与实践 邹烨 // 110
07 产品设计中的模块化思维 顾文君 // 128
08 走进服务设计：让预约挂号变得精准与简单 徐良佺 // 139
09 信息可视化设计 王蓉琦 // 151
10线下物料设计 林猛 // 162
看 · 设计
11 业务探索期，设计可以做些什么 丁明宇 // 172
12 设计师如何从0到1快速了解一个行业 王昆鹏 // 180
13 敏捷设计研究 肖瑶 // 196
14 设计十则 李玲 // 205
15 像设计师一样思考 汤静静、李慧 // 218
玩 · 设计
16 讲故事的力量 李涵、周晓双 // 226
17 移动搜索设计探索 李君、孟飞 // 234
18 在移动支付设计中构建安全感 汪通 // 253
19 一切都是为了打动你—产品中的情感化设计
宋晓婷、王蓉琦、芮琳 // 266
后记 为事，以遣有涯之生 蒋黛炜 // 281
学·设计
01 行业设计“五步法”
文/王宇航
随着“互联网＋”的火热，越来越多的线下服务“搬”到线上，支付宝也提出了“连接3600行”的口号。设计师要在业务的快速推动与迭代中，快速接手新的行业线设计，必须理解产品背后的逻辑，对其所处的行业背景、商业模式和发展方向的研究保持足够的重视。但是往往一个项目设计的时间又是有限的，对于一个行业的理解也是需要时间沉淀与积累的，这就会产生一定的矛盾。所以动态并快速地使用一些设计策略是行之有效的。
我们将在工作中形成的设计思路与方法进行归纳，总结出行业设计“五步法”，希望对一些新晋的设计师有所帮助，使他们能够通过这些通用的、标准化的设计方法快速上手项目，快速跟着项目跑起来。“五步法”中的每一步都不是唯一的设计方法，只是我们在工作中常用的方法。为了能让读者有更强的代入感，我们将以移动医疗产品设计为例，进行详细说明。
第1节 充分的行业调研
为什么要做行业调研？行业调研的目的是什么？
做行业调研主要是为了了解行业的现状与未来发展趋势，对行业项目背景能有深刻的认识，在过程中寻找产品目标，挖掘用户痛点。在行业调研初始阶段，先拟定行业调研提纲，比如：
行业的发展历史、现状、前景和特点；
行业的价值链；
行业的竞争态势；
产业政策，监管体制；
市场容量、市场细分结构以及未来增长趋势；
行业供需结构与盈利方式；
相关利益方分析；
行业痛点、关键成功要素和自身优势。
通过这些指导性的提纲进行有针对性的深入调研，根据自己的时间与资源，选择适合自己的方法，包括桌面研究、问卷调查、用户访谈、田野调查、数据分析等来发现问题。我们主要采取的方法倾向于桌面研究与田野调查两者相结合。这两种方法是在有限时间里产出最大化的调研方法。
1.桌面研究
桌面研究指不进行一手资料的实地调研和采集，而直接通过电脑、杂志、书籍、文档、互联网搜索等现有二手资料进行分析和研究的方案，也称为案面研究，也有业内人士称之为二手资料研究。研究内容包括国家政策走向、行业限制、行业所处的发展阶段、行业痛点、国内外行业对比等。桌面研究能够让设计师对一个行业有一个粗浅、大致的认识，基于这些认识推动行业项目产生新的进展。
首先，确立研究目标，即宏观地认识医疗行业现状，从中发现机会，为后期实地调研提供方向。其次，通过不同渠道收集资料，包括但不限于：
通过媒体等渠道收集国内医疗体制体系，国家政策；
网络调研医疗体系中可见问题；
查询整理已有团队历史研究资料；
归类分析医疗体系中的不同场景，为之后调研明确方向及内容。
在做了这些基本的桌面研究后，产出一份研究报告，包括研究内容陈述、研究发现以及报告结论,然后将有价值的内容进行组内分享，从设计角度表达对于行业思考的观点。
2.田野调查
田野调查指深入线下并观察用户使用场景，绘制体验地图，绘制用户体验曲线。田野调查主要分为3个阶段：准备阶段、调查阶段、整理阶段。
在准备阶段，要选定好被调查地点和被调查人群，进行必要的物资准备，包括录音设备、照相设备、录像设备、笔、笔记本等。在选择被调查地点时要进行甄选，全科、三甲、门诊量较大的医院是我们的首要考察方向，其能提供更完整的服务流程，覆盖更全的患者群体，据此得到的解决方案具有普适性。
在调查阶段，最好2～3人组成一个团队，针对不同的服务场景，如大厅、候诊厅、缴费窗口处等进行布点，主要采用参与观察和拦访两种形式。参与观察除了要观察深入、注意细节外，还要透过现象看本质，透过用户的现场行为去思考背后的真实需求。拦访分为结构性访谈和非结构性访谈。结构性访谈一般是事先准备好访谈提纲或者问卷提纲，寻找目标用户进行拦访；非结构性访谈主要是寻找目标用户就某些问题进行自由交流，非结构性访谈对访谈者的要求较高，需要把握访谈的尺度和技巧，并且要学会启发用户，多问几个为什么，深挖背后用户的需求。田野调查实景分析如图1所示。
在整理阶段，会发现在调研过程中回收了非常多的问题，这些问题杂且乱。因此，首先就要进行问题的归纳和总结，梳理出在体验节点中用户遇到的主要问题，即严重阻碍用户行为流程并且反馈数量较多的问题。其次，撰写一份调研总结大纲，把主要问题列出并快速同步给团队和业务方。还有一点非常关键，就是需和产品经理配合好，根据项目进程和开发资源，梳理出真正能快速落地和执行的主要问题，并且提出解决方案。
图1 田野调查实景分析
图1所示中我们选定当地某著名三甲医院为调查地点，选定就医患者为调查人群。从进入医院查看大厅的出诊列表确定科室开始，到患者的初步就诊中，拆分了5个关键就医节点进行观察和分析，而每一个节点都存在一些线下体验烦琐或体验不佳的情况。比如在观察中我们发现患者从一进入医院就遇到麻烦，大多数初诊患者无法自判科室，需到就诊台咨询。即使有出诊列表，患者筛选信息也比较困难，出诊列表的展示设计有时还存在问题，部分患者在确定科室后还会反复犹豫。而这些细节就是我们的机会，但如果不到线下，很多设计师是无法想到这些细微场景的。只有不断地改善这些细节性的痛点，才能让用户感到温暖，才能让产品温度永存。
第2节 圈定目标人群，明确用户分类与行为特征
在基础调研后会发现，在对就医相关利益者（包括提供医疗服务者、就医患者、医疗行政人员等）的考虑中，使用挂号服务的主要目标人群还是就医患者。针对就医患者可以从以下几个方面来解构目标用户。
1.人口学特征
人口学特征包括空间、年龄、性别、文化、职业、收入、生育率等指标，在项目设计前，必须明确核心用户群体的人口学特征。比如医疗行业中就有明显的人口学特征，18～34岁人群使用占比最高，在线挂号用户群呈现年轻化趋势，女性用户占比远高于男性（基于公司的行业用研数据），如图2所示。
图2 在线挂号用户属性及行为属性（数据来源于调研）
2.用户分层
对用户从不同纬度进行拆解与分析会发现，不同的用户群体产生的行为特征具有明显的差异化。可以从用户自然特征（性别、年龄、地域、学历或教育水平等）进行划分，也可以从用户社会特征（婚姻状况、家庭情况、社交渠道、职业等）进行划分，又可以从用户行为进行划分，根据不同的业务形态采取不一样的用户分层。在医疗场景中，比较突出的用户分层是从用户行为上进行划分，如名院型、名医型、专病型、名医名院型，见表1。不同的行为特征其后期产品方案中用户路径设计也会截然不同，这样的分层有利于在产品设计中覆盖大部分用户的行为路径。分层也是用于比较的，比较是为了反映不同用户层的核心需求，进而指导产品方向，所以分层最终还是为了指导产品决策，这才是进行用户分析的价值体现。
表1 用户分层
用 户 类 型 核 心 特 征
名医型 注重医生资质，医生职称高或经验丰富即可
名院型 注重医院资质，只要是三甲医院即可
专病型 针对专病门诊，提供有针对性的治疗和辅导
名院名医型 既注重医院，又注重医生资质
3.行为特征
进行用户分层后，找出核心用户的行为特点，主要分析核心场景中用户在处理核心任务的行为方式。这样可以让设计师更加详细、清楚地了解用户的行为习惯，从而找出存在的问题，有助于产品设计更加精准、有效，提高产品业务转化率。比如调研与观察发现用户对三甲医院和专家门诊需求度强，挂号行为频率偏低，用户行为呈现明显低频、刚需、优资源导向等特点。这些都是围绕用户进行就医挂号场景的分析，跟目标用户群年龄特征和就医习惯紧密相关。
第3节 仿真分析，搭建用户场景
在进行完整的行业调研与目标用户圈定分析后，需要针对调研结果进行整理，将内容结构化。对用户核心的线下场景、用户行为轨迹、获取目标任务的渠道与核心路径、在过程中用户的痛点和障碍等进行提炼，并针对目标用户建立有代表性的用户画像，待这些重点的“原材料”准备完整后，就可以开始烹饪一道完美的“场景”大餐了。
1.场景是什么
场景原指电影拍摄的场地和布景。其实做产品就像拍电影，你要把自己当导演：挑选场地和布景，考虑演员的状态，如何走位，台词有哪些，对戏该如何进行，电影的核心主题如何表达，等等。而用户的核心痛点与产品的核心功能很有可能是由多个使用场景组成的。基于目标与任务进行构建，让设计师能深入“剧情”，在细节中推敲用户的每一个想法和举动，真正做到从用户角度出发，将产品与用户场景融合起来。
2.为什么要搭建场景
搭建场景与实现产品目标是相辅相成、相互印证的。解决用户痛点是场景构建的主要目的之一，市场需求逐渐变得碎片化、长尾化、多元化和个性化，搭建场景能覆盖用户全量活动轨迹，让需求分析更精准，让产品功能更全面，让业务目标定位更清晰，让团队对产品的理解更一致。
3.场景该如何搭建
仿真分析即仿照真实线下流程构建线上虚拟场景的方法。现实的情况是用户因为线下业务流程的复杂性会呈现出各种各样的状态，仿真分析能从成本、时间、行为、路径等多个角度验证流程，评估流程的体验优劣，对流程的模拟执行生成结构化的结果，从而帮助用户找到流程中的“瓶颈”并加以分析与优化。针对流程的缺陷提出改进方案，得出一个可期望和可实现的模型。
针对模型的展现，方式可以不同。如果是全量场景的结构化展示建议用表格形式，内容也要精练，这样利于阅读和团队内沟通；如果是细分场景的用户行为分析，可以用更敏捷的方式，以简单文本描述故事即可。以挂号场景下的用户全链路行为分析为例，可以大致分为挂号前、挂号中、挂号后3个主要阶段，从场景描述与用户行为出发，用户行为则可以从渠道、路径、痛点、用户方案等方面进行分析。从前期的调研中会发现就诊患者在挂号前的第一场景一般是先对病情进行预估：用户根据病症寻找病症原因、治疗方法等信息，从4个维度评估病情（what/why/how/where）。获取病情信息的线上渠道有搜索引擎、医疗网站或论坛、电话等；线下渠道则向同／父辈或医生咨询。在这些行为分析中会发现用户的一些使用痛点，包括：①疾病信息质量差且规范不统一；②信息碎片化现象严重；③信息口碑缺失；④信息权威性缺失。这背后就会产生针对痛点的用户需求，主要包括疾病信息（症状、原因、治疗方法、推荐医院、推荐医生等）、就诊决策、权威、口碑、症状评估等，见表2。
再如挂号后对用户场景的分析，挂号后患者的场景一般就是去医院候诊，为就诊做准备，他可能使用的线上渠道包括挂号平台、百度搜索、地图等。 线下渠道就是到院内取号，如图3所示。
图3 就医流程路径图
表2 场景分析
挂号前 挂号中 挂号后
场景 病情预估：
用户根据病症寻找病症、原因、治疗方法等信息， 从4个维度评估病情（what/why/how/where) 医院/科室/医生评估：
用户根据病症严重程度，确定就诊相关信息，以确定医院和科室为主 医院/医生评估：
确定医院/医生 填写预约单：
完成线上填写预约单流程 预约等待：
用户挂号后，去医院就诊前在家中，会面临自身和医院间信息沟通断层 医院候诊：
用户挂号后，前往医院，进行取号、候诊等，为就诊做准备
用户行为 渠道 线上渠道：大多采用搜索引擎渠道、医疗网站或论坛、电话等；线下渠道：向同/父辈或医生咨询 线上渠道：大多采用搜索引擎、医疗网站或论坛、电话等；线下渠道：向同/父辈或医生咨询 线上渠道：产品内医院和医生号源 线上渠道：产品内预约下单流程 线上渠道：挂号平台、电话、短信 线上渠道：挂号平台、百度搜索、地图等
线下渠道：院内取号
路径 主路径：搜索（检索词：是什么；怎么办等）—浏览（跳跃式和专注式）—行为决策（去医院、自行处理等） 主路径：搜索（检索词：哪家好；有哪些等）—浏览—对比（专业性、从医经验、社会口碑）—行为决策（哪家医院） 主路径：搜索（医院名或别名）—浏览—对比（职称、擅长、口碑） —行为决策（哪家医院） 主路径：选择就诊时间—填写个人 信息（身份证号、病情描述等）—完成预约 1.挂号平台：医院导航—院内导航—取号—候诊—评价
2.挂号平台：地图导航—院内取号—候诊—线上评价
用户
行为 痛点 1.疾病信息质量差且规范不统一
2.信息碎片化现象严重
3.信息口碑缺失
4.信息权威性缺失 1.医院/科室/医生等信息质量差且规范不统一
2.信息碎片化现象严重
3.信息口碑缺失
4.信息权威性缺失 1.医院/医生号源不足
2.医院/医生号源信息单一且规范不统一
3.医院医生号源可控性弱 1.预约流程冗余
2.输入成本高 1.提醒不足：取号就诊时间/流程/停诊等提醒不足或不及时
2.操作不便：突发情况如取消操作不便 1.就诊指导缺失
2.候诊状态缺失
3.流程烦琐
4.过号
用户
方案 1.交叉验证：多个信息渠道
2.口碑路径：线上或线下口碑 1.交叉验证：多个信息渠道
2.口碑路径：线上或线下口碑 1.多模式：排序、职称、擅长、口碑
2.抢号模式：天使挂号
3.其他路径：电话或线下
4.多次重复下单 1.忽视：只填关键信息或应付填写
2.演练：仅仅为熟悉界面而下订单 被动等待 1.尽早到医院准备和候诊
2.过号重新排队或与医护人员协商
用户
需求 二级
需求 疾病信息（症状、原因、治疗方法、推荐医院、推荐医生等）、就诊决策、权威、口碑、症状评估等 医院/科室/医生信息（专业性、从业经验、社会口碑等）、权威、口碑等 号源、号源信息（医院、医生）、号源口碑、号源获得性（预期、成本等）、匹配度 快速、简单、易上手等 及时提醒、突发应对等 就诊指导-候诊提醒-流程简便
一级
需求 信息 资源 便捷
在图3中发现的痛点包括就诊指导的缺失、候诊状态的缺失、流程烦琐、过号现象的存在等。而患者大多在线下采取的方案有两种：一即尽早到医院准备和候诊，二即过号后重新排队或与医院人员协商。所以在构建场景的过程中，就可以不断发现患者就医过程中的障碍，发现问题后则将问题提炼转移至线上产品的设计中，这就是所说的设计，其目的是解决问题。
场景构建完毕后，并不是固定不变的。随着业务场景的发展与设计师理解的加深，场景是有可能不断变化与发展的，它是动态的。在过程中分析用户行为的变化与发生，行为往往跟随功能，产品的体验触点与用户行为的发生高度重合。
第4节 筛选核心需求，建立需求管理
用户需求是线性产生的，也是交叉产生的，其需要设计师敏锐的判断能力与鉴别能力，什么是核心需求？什么是次级需求？什么是伪需求？这就需要结合商业模式、产品发展目标、用户场景与用户行为来交叉判断。而对于需求的理解，最后往往还需聚焦用户。用户需求在每一个发展阶段是会产生变化的，所以需要不断地验证与完善，而敏捷设计、敏捷开发、不断快速迭代就是对其的补充。
需求的定位也可能是动态的，方法有很多，而个人更倾向于通过场景的构建来挖掘用户的核心需求，例如，图3中在对挂号后场景的构建分析后发现用户的二级需求就是就诊指导、候诊提醒、流程简便等关键因素，针对这些需求点进行产品功能的导出与设计，而其需求背后核心还是“便捷”，产品设计的落地必须真正实现挂号后就医便捷这一目标。
当然，若时间允许也可以组建焦点小组进行深度访谈，前提是项目留给你的时间很充裕。下面重点介绍对需求的管理，这是容易被忽视，却是异常重要的。
1.评估需求
需求的评估最重要的不是知道要做什么，而是知道什么不要做。当产品给出一份需求表单和功能列表的时候，一般已经产品经理筛选过了，但设计师要有自己的判断，这也是主动参与到产品设计中的重要一环，在这里你可以与产品经理一起探讨需求对于用户的重要程度，以及实现顺序。
2.排序需求
需求的优先级可能比需求本身更加重要。我们每次的产品迭代都会列出一连串的需求列表，每个功能都像是重点，每个功能似乎对于用户都是不可或缺的。但在推进时会发现开发的时间根本安排不过来，产品上线是有时间表的，交互要协助产品从用户的体验角度来进行需求的裁减，只有进行整体的平衡和优先级的排布才能实现产品功能迭代价值的最大化。
3.需求变更管理
在敏捷的管理体系下，理性的需求变更是可以接受的，但是所有的需求变更都需要进行很好的控制。对于简单的需求变更，在对项目进度没有影响、对开发成本没有造成负担的情况下，是可以快速完成的。对于一些较为复杂的需求变更，如果会增加项目开发成本，影响项目上线时间，影响用户操作体验，设计师就一定要严格把控，该拒绝的当机立断地拒绝，并给出利弊的分析，或者进行延后处理，可以在下一版本的迭代中再进行设计。
第5节 建立交互框架，输出交互方案
1.信息架构设计
信息架构是一个很大的范畴。但不论是特定的场景或者给定目标的信息架构项目，我们经常考虑的是建立更有效的沟通结构。—Jessie James Garrett
信息架构的建立是交互设计师在项目推进过程中非常核心的环节，这个阶段的产出质量直接影响到业务目标、转化率、用户体验。如果框架清晰，用户就能快速完成任务目标，提升效率，它是产品与用户交互的隐性环节。信息架构如图4所示。
广而浅的架构用户可以用较少的点击完成相应的目标任务，但信息分类标准过多，会增加用户层级分类寻找的成本。窄而深的架构则使用户增加了操作步骤，但减少了用户操作选项。
图4 信息架构
2.流程图
在使用产品中用户所能操作的界面以及页面上下游之间的跳转关系和组织的表达，称为流程图。通过流程图的绘制，可以清晰表达用户在使用产品中的操作与交互关系，以及对于整体交互动作和流程的把控。流程设计中要遵循以下原则：①以用户需求为主要导向；②兼顾用户的使用习惯；③流程尽量短；④每个操作页面仅有一个核心操作任务；⑤考虑交互实现的开发成本。设计师在设计页面时，应该在页面上建立许多视觉层次，引导用户的视觉焦点。先把用户的注意力吸引到最重要的元素上，然后才把用户视线引导到其他重要程度次要的信息上。这样便于用户快捷、迅速地找到自己所需，更好地完成阅读、浏览任务。挂号平台核心流程如图5所示。
图5 挂号平台核心流程
3.页面交互细节设计
对于制作交互说明，每个人习惯都有所不同，最好是有数字或者字母的清晰的对应标注，便于阅读和理解。每一步的页面跳转说明，细节和动作需要描述清楚。还应有极限状态下的说明，比如一个列表的最长和最短的显示，一行字段的长度限制，是否跳行，等等。最后就是异常／出错情况的说明，如空页面、系统错误、错误反馈等情况，这时比较适合增加一些情感化的设计，比如很多空页面的俏皮风、温暖系等，尽量避免用户对于异常／出错情况产生低落情绪。交互说明如图6所示。
图6 交互说明
在产出正式线框图之前，要鼓励交互设计师拿起纸和笔通过草图来交流与表达产品思路，草图也是一种结论产出，是很好的沟通信息载体，并且成本很低，可通过快速产出、快速交流、快速更改，在不断调研和迭代中验证想法。
总结
设计师在做行业需求时需要不断加强自身链路设计的能力，不是仅仅承接产品经理或者老板的需求即可，交互设计更像是一个有产品思想的需求翻译，在整个项目组中建立一座桥梁，在沟通与解决问题的过程中还要不断预见问题、定义问题，进行设计的前置，走到用户面前，倾听用户，观察用户，帮助用户，真正做到以“用户为中心”进行设计。
02 无规矩不成方圆
—设计规范的建设
文/ 周建波、朱兰民
第1节 规矩成就方圆
孟子曰：离娄之明，公输子之巧，不以规矩，不能成方圆。—《孟子》
设计规范是用户体验的最低标准！—吴明
支付宝作为一个大型的“生活服务类平台”，既有官方自营应用，也有第三方接入应用，数十个应用共计数百个页面，并且还在不断发展壮大。我们将支付宝定义为一个系统级的应用一点儿都不夸张，其复杂度已经逼近一个完整的“生态系统”。
在这样一个系统级的应用中，我们面临的设计挑战相当复杂：如何降低用户在复杂系统中的学习和认知成本？如何让用户在所有页面都有良好的体验？如何让用户在所有页面中获得一致的品牌认知？
为应对系统级的设计挑战，我们必须建立系统级的设计规范。你可能会问：什么叫“系统级的规范”？其实一开始我们也没有“系统级的规范”这样的概念。但经过长时间的实践，我们发现简单的设计规范并不能很好地应对支付宝这样复杂的产品。于是，我们不断对设计规范进行补充和完善，最后自上而下地建立了一套设计规范系统。
1.规范1.0
我们最早的设计规范只是各种控件的视觉设计源文件。这样的规范保证了页面基础元素以及框架的一致。但是，这些视觉源文件并没有定义任何的交互规则，实际工作中还是会出现各种不一样的产品体验。例如，某些页面的弹框出现方式不一样；什么时候应该用小气泡，什么时候该用弹框。规范1.0—样式库如图1所示。
图1 规范1.0—样式库
2.规范2.0
我们的产品越来越复杂和庞大，用户面临的学习和认知成本成倍上升。我们必须对页面中通用交互规则进行定义，打造一致的操作体验，降低用户的学习成本。为了最大限度地降低用户学习成本，我们最大限度地复用系统原生的交互规则。这套规范进一步保障了重要元素的交互行为和视觉样式的一致性。但是，当遇到一个规范里没有的东西时要怎样设计，设计师才能既可以发挥自己的创意，又不会和整体的体验风格相背离？交互规范文档如图2所示，视觉规范文档如图3所示。
图2 交互规范文档
3.规范3.0
交互规范和视觉规范都是死的，设计是活的。要想进一步提升内部的设计一致性和整体的设计质量，团队要有一致的设计价值观。大家都知道什么样的设计是好的，什么样的设计是不好的。一个代表团队设计价值观的东西—设计原则应运而生。至此，我们自上而下建立了一套设计规范体系：设计原则、基础规范、单元控件、标准组件，然后落地到开发控件库，如图4所示。从设计思维到最后实现的每个环节，对设计的一致性和可用性进行整体把控。
图4 规范3.0自上而下的设计规划体系
第2节 设 计 原 则
设计原则是做设计时必须遵循的标准，可用于指导设计和衡量设计方案的优劣。我们要什么样的设计，我们不能接受什么样的设计，设计原则让团队成员形成一致的认知。
大家可能都看过很多类似于“移动设计N原则”“可用性原则”之类的教程、文章，但是这些设计原则都是别人通过自己的经验总结出来的，是适合别人的原则。如果你直接照搬过来当作真理，那就不合适了。所以，我们在建立自己的设计原则的时候，应该结合自己产品的特点和实际的案例，制定适合自身的设计指导原则。
1.简单的力量
2013年6月13日，支付宝正式推出“余额宝”。它凭借“傻瓜式”的理财方式，让没有任何理财专业知识和技能的人都能理财。以此在中国掀起了一股互联网金融狂潮。余额宝宣传广告如图5所示。
图5 余额宝宣传广告
余额宝的成功让我们看到简单对于支付宝来说多么重要。简单不仅能提升用户体验，还能实实在在地创造价值。因为简单，更多的用户接受你的产品，并且使用你的产品；因为简单，你的转化率也会更高，会产生更多的价值。
像余额宝、微信这些简单的产品，对市场产生了深远的影响。它们简单易用，所以被大众接受；它们值得信赖，所以赢得用户。现在智能设备普及率越来越广，上自几十岁的大爷大妈，下至几岁的小孩，都已经成为App的用户群。所以，我们的简单原则不仅能使界面看起来简洁，还能使交互流程简化，使整个产品轻量化。
为了让产品能够更简单，我们在设计上制定了以下两个原则：
一个页面只做一件事情，突出两个重点。
删除不必要的内容，隐藏次要的内容。
（1）一个页面一件事情
与PC相比，移动终端的屏幕小了很多。App的一个页面能展示的信息本来就非常有限，不可能像PC一样堆满各种不同的信息。况且，App的使用环境还非常不稳定，如走路、坐车、单手、双手等，这些进一步限制了一个App页面只能做一件事情。
支付宝里很多产品都是以任务为导向的，帮助用户实现某个确定的任务目标，如转账、缴费等，如图6所示。在任务导向类的页面中，这个原则显得尤为重要，因为我们希望用户可以专注且快速完成当前任务。
图6 一个页面一件事情
（2）删除&隐藏
人在处理信息、学习规程和记忆细节方面的能力是有限的。现实中，人可能还面临各种中断和打扰，这些都进一步限制了人的能力。界面中过多的小细节会增加用户的认知负担，就像路障会降低人们的行走速度一样，过多的小细节会降低用户的使用效率。
删除那些可有可无的功能、多余的选项、冗余的文字、花哨的修饰，可以减轻用户的负担，让用户专心做自己想做的事。界面清清爽爽、简简单单，不去分散用户的注意力。
1）删除
我们带着“删除不必要功能”的目的，重新来审视支付宝的生活缴费，看看哪些不必要的功能可以删除。
确定主要任务和次要任务，并排定优先次序。专注解决用户优先级最高的需求，然后再考虑满足用户其他目标。
用户使用生活缴费，主要目的就是完成缴费；然后是新增缴费；最后是辅助功能—账户分组。
要知道能够满足主流用户的“足够好”的生活缴费与“完美”生活缴费有什么区别。如9.2版的支付宝生活缴费（图7中左图），要求补全家庭地址、芝麻信用、家庭成员，这么多的附加元素，在绝大多数情况下，没人使用。这些功能就是不必要的，可以删除，如图7中的右图所示。
图7 删除不必要功能
2）隐藏
有些功能用户很少使用，但又是必需的。例如，自定义、删除、设置等，隐藏这些不常用但不能少的功能（因为可以少的功能我们已经删除了），可以为移动界面节约很多空间，让界面简单。用户也不会因为它们而分散过多的注意力，更聚焦主要任务，如图8所示。
隐藏的功能在用户需要的时候会出现在合适的位置。例如支付宝转账到卡，默认隐藏了到账时间，以简化页面。当用户填好卡号等信息的时候会自动出现到账时间，如图9所示。
图8 隐藏不常用功能
图9 适时出现
2.高效的执行
生活的节奏越来越快，高效是一款产品必备的素质。减少等待、稳定快捷，才能留住用户。外面的世界很精彩，用户不想等待，用户不想填写没完没了的表单，用户不想总要跳转才能看到想看的内容，用户不想不停地点击……
关于高效的问题，我们应该着眼全局，并且思考“怎么样让我们的应用更快、更好用”。所以高效问题不仅仅是关于设计的问题。有跟技术和性能相关的时间问题，“1秒钟等待”可以让你的应用迅捷如奔豹；有跟行为流程设计相关的点击问题，“1次点击”可以让你的应用飞起来；有跟移动设备输入相关的人机工程问题，“1根手指”可以让你的应用连小孩都能使用；还有可能跟信息结构相关的产品问题，“潘神的迷宫”带你的用户走出页面的迷障。
（1）1秒钟等待
不知道大家有没有这样的经历：风和日丽的下午，慵懒的阳光洒在身上，你漫步在一条商业街上。闲逛中发现一个店铺在搞活动，于是掏出手机扫描二维码，无奈网速太慢，手机一直在安全扫描，你只好耐心地等。漫长的等待过后，终于打开一个页面，但那是空白页面！而且，这个页面还没有任何提示。为了5折的优惠，你决定再等等。1秒、2秒、3秒，终于页面再次跳转，进到一个全新的页面，而且显示了加载的进度。5秒、6秒、7秒，页面终于刷出了大部分内容，无奈活动按钮还是犹抱琵琶半遮面，不肯出现。于是你一遍一遍地刷新，loading，刷新，loading……
许多研究都表明，用户能够忍受的等待时间为6～8秒，如图10所示。也就是说，8秒是一个临界值，如果你的页面打开速度过慢，等待8秒以上，大部分用户会离你而去。
图10 用户等待时长
在0.1秒内显示反馈结果用户是可以接受的。
1秒是用户保持不间断的思维流的限定时间，用户会注意到这样的延迟。
8秒是保持用户关注当前界面的极限时间，超出8秒用户会愤然离场。
没人愿意等待。“1秒钟等待”是一种比喻，表示用户对速度和高效的期盼与要求。其实，等待的时间主要取决于服务器、设备的性能以及网络的速度。用户是否需要等待主要取决于RPC的策略。
RPC（Remote Procedure Call Protocol）是指手机客户端需要调用网络服务端的资源时，进行的远程数据调用过程。我们用“RPC”泛指客户端需要和服务端发生数据交换的场景。
虽然设计师不能决定服务器和设备的性能，也不能提升网速，但是我们可以优化RPC策略，减少等待的次数，也可以优化加载效果，减少用户的等待时间。虽然某种程度上这只是“障眼法”，但却能够获得用户的认同，改善用户的体验。
除去服务器、设备性能、网速这些不可控因素，用户的等待主要由一次次RPC请求造成。如果我们在做设计的时候考虑到RPC请求的逻辑和策略，并且适当地优化，做到用户的一次操作只触发一次RPC请求，尽量减少RPC次数，就可以减少用户的等待次数。
一次用户操作不允许有多次RPC（指和这条操作主流程相关）。
以用户使用支付宝扫描二维码的体验为例，用户要经历3次RPC请求才能正式进入页面加载，如图11所示。
图11 扫码RPC策略及页面流程
从图11中我们可以看到一个简简单单的扫码，用户经历了3次等待、2次跳转，真是千辛万苦啊！我们可以优化一下这个RPC请求的逻辑，合并识别二维码和打开哪个页面的RPC请求，如图12所示。
图12 优化的RPC策略及页面流程
在图12中，我们看到这样的RPC策略让用户少等待了一次，少了一次页面的跳转，给用户的体验就比之前要高效一些。
（2）转移注意力
转移注意力是减轻等待的负面影响的常用手段。其实，在现实生活中，我们常常使用转移注意力这一方法。比如，一些服务较好的饭店，在客人排队等待就餐的时候提供各种小吃和休闲游戏。客人有好吃的、好玩的就会忘记等待的烦恼。这种方式在应用的设计中也同样管用。
支付宝的明星产品“余额宝”，当用户进入页面的时候会从服务端获取金额信息。在这一过程中伴随着金额数字随机变换以吸引用户注意，使用户不会有等待之苦。如图13所示。
（3）一次点击
懒，是人的天性。交互设计师的天职就是将用户从繁重的交互操作中拯救出来，提升产品的可用性，让用户方便快捷地完成任务。在交互设计中，应尽可能地减少额外的点击，做到一键完成任务。一次点击意在减少用户操作次数，提高操作效率，成全人类“懒”的天性。
交互产品经常包括一些不必要的额外点击，对于用户而言，这些不必要的操作都是附加工作。附加工作消耗用户的精力，又不能直接实现用户的目标。消除附加工作，可以提升操作效率，改善产品的可用性。交互设计师只有对产品中附加工作高度敏感，才能把产品设计得更高效。
支付宝9.2版本以前的手机充值从选择金额到付款需要4次点击：①点击金额唤起选择picker；②滑动选择金额；③点击完成关闭picker；④点击“立即充值”进入付款页面，如图14所示。
9.2版本改版以后将充值金额平铺展现在用户面前，用户只需要一次点击选择充值金额即可进入付款页面，如图15所示。
图15 手机充值交互优化
（4）三级跳
在PC网络时代，Web页面间反复跳转是再正常不过的了。从搜索页面到目标网站首页，首页再到详情，详情页再到推荐页面，推荐页再回到首页……但是，你敢在手机应用上试一试吗？这么混乱的跳转关系，用户可能真的就进入了你为他设置的页面迷宫，不知道自己在什么地方，不知道返回到哪个页面，不知道怎么快速回到入口。
我们来看图16所示的某热门应用的页面跳转案例：首页→详情页→个人页→详情页→个人页……可以无限制地深入和循环。当用户回过头来想要返回的时候就迷糊了。左上角的返回是到哪里的？如果是返回上一个页面，那回到首页要点击多少下？
在PC网页上因为有顶部全局导航和面包屑导航，这些跳转可能都不是问题。但是在手机屏幕上是没有这些导航的，只有左上角的返回，这就完全交代不清楚了。所以，在手机应用页面之间的跳转不能太多。
图16 某热门应用
标签栏、抽屉式、宫格式、列表式、轮播式、唤起式，移动设计里的导航模式就这几种，都是比较简单的结构和模式。如果在移动设计里面设计了太深的信息架构，一会让用户迷惑，二会大大降低操作效率。所以，移动设计中常用的内容应该在3个层级以内看到。
手机上能不跳转就不跳转，下面的案例可以帮助我们减少页面的跳转，将用户带出“潘神的迷宫”。
模态窗口就是对当前页面的内容进行操作，用户不用离开当前页面，从而减少了页面的跳转。我们常见的模态对话框，常用来报错或者提醒用户。如图17所示。
3.人性的对话
用户使用我们的应用过程其实就是一个人机对话的过程。界面中展示的信息是系统向用户传递信息，用户的操作是在向系统传递信息，这一来一往就是对话。打造一个有人性的App，营造和谐的人机对话，是我们提出人性化原则的目的。我们希望用户可以把我们当成生活中一个可以对话的助手。
（1）适时反馈
人与人的交流中，我们无法忍受的一种情况是：对方对自己说的话没有反应，对自己的行动视而不见。这是一种极其不尊重人的行为，我们会在内心鄙视这种人，甚至抓狂！及时恰当的反馈能告诉用户下一步该做什么，帮助用户做出判断和决定，让用户知道系统运行良好稳定。所以要营造和谐的人机对话环境，我们必须做到适时地反馈。下面定义了几个最基本的原则，来保障支付宝对用户做到适时反馈：
为用户的操作提供必要、积极、即时的反馈。
根据内容的重要程度选择合适的反馈形式。
避免过渡反馈，以免给用户带来不必要的打扰。
不要打断用户的意识流，避免遮挡用户可能回去查看或操作的对象。
1）反馈方式
移动界面设计中反馈的方式大致有5种：对话框、小气泡、多态按钮、动画、声音或震动，如图18所示。所有的提示都应该在恰当的时候出现在恰当的位置，为用户提供必要、积极、即时的反馈。
图18 反馈方式
对话框：对话框带有一两句说明文字和两个操作按钮，用于确认和取消重要操作（比如，是否删除内容），通常会用明显的颜色，突出显示可能造成损失的操作项（比如，“删除”“不保存”）。对话框的出现，强迫用户关注弹窗内容和操作，并屏蔽背景的所有内容不可操作，是对用户打扰最大的反馈提示，也是最强的反馈方式。通常用户都想赶快关掉对话框，以便接着完成被打断的操作。所以，对话框中的文案要尽量言简意赅，帮助用户快速了解和做出决策，如图19所示。
图19 对话框
小气泡：气泡也可以叫“Toast”，这其实是一种弱化版的对话框。它就像气泡一样，在界面上展示短暂的时间（5秒以下），然后自动消失。它不强制用户做任何操作和确认，所以对用户的打扰比对话框小很多。气泡一般用来确认用户执行的任务状态或者操作结果,如图20所示。
图20 小气泡
多态按钮：按钮是虚拟世界隐喻现实世界的产物，是对现实世界的按钮和开关的模拟。而现实世界中的按钮会对用户的操作提供实实在在的物理反馈。所以，为了符合用户的心智模式，界面中的按钮也应该为用户的操作提供反馈，否则用户不知道发生了什么。当用户在屏幕上按下一个按钮或链接时，也需要有状态的改变，让用户知道界面已经接收到他的操作了，如图21所示。
动画：动画能给用户提供有意义的反馈，帮助用户直观了解操作的结果。并且不打扰用户的操作，用户体验更流畅。而且精美有趣的动画，能给用户留下深刻印象，提升使用时的愉悦感。
图21 多态按钮
手机淘宝将商品收入购物车时的动画，就是一种比较优雅的反馈方式，如图22所示。
图22 动画
声音或震动：前面讲到的反馈方式都是虚拟界面模拟出来的，而声音或震动能带给用户更真实的物理反馈。声音或震动的反馈给用户的感觉也应该是最真实和自然的。例如，手机虚拟键盘按下时的“啪啪”声，短信、邮件发送成功后“嗖”的一声，拍照时的“咔嚓”声，都是我们设计中在声音方面反馈比较好的。
恰当的声音反馈有画龙点睛的效果，但过多地使用可能会变成一种打扰。所以，我们不能将声音作为主要反馈，并且要给用户关闭提示音的权利（因为用户所处的环境多样，可能很吵而听不见声音，也可能不适合打开声音）。
震动是一种更强烈的触觉反馈，可以用来加强声音的反馈。
2）过度反馈
对话框和小气泡的视觉形式是悬浮在当前界面之上的，用户可以理解对话框与当前界面之间的关系，完成对话框的操作之后可以继续原有操作。它的本意是减少页面的跳转，尽量让用户沉浸体验。但是有的设计师会滥用对话框，反而打扰了用户的体验流程，成为万恶的对话框。试想一下，如果每想说一句话之前，你都要在脑子里面弹出一个对话框问自己“你是否真的要说这句话”，这是一种多么糟糕的体验。下面给大家举几个反例。
支付宝9.2版本之前，用户主动关闭收银台，会弹出对话框让用户确认是否退出，其实显得十分多余，如图23所示。
图23 过度反馈1
支付宝9.0版本以前的服务窗，在删除服务窗的时候会展示删除成功的小气泡，如图24所示。其实完全可以用现在的删除动画代替。
图24 过度反馈2
（2）情感关怀
情感是人对客观事物是否满足自己的需要而产生的态度体验。—《心理学大辞典》
人性和情感是紧密相连、不可分割的，我们在思考人性化的时候，一定不能忘了用户的情感需求。用户的需求和期望得到满足时会产生愉快、喜爱的情感；反之，就会苦恼、厌恶。 所以，当用户在支付宝里受挫的时候，我们要及时地给予情感上的安抚和关怀；当用户在支付宝里完成任务的时候，我们要及时地给予情感上的肯定和强化。
1）安抚和关怀
等待、报错、系统繁忙等场景都会使用户产生挫败感。长时间的等待会让用户感到烦躁；犯错误让用户感到苦恼；系统繁忙甚至让用户感到厌恶。如果我们能巧妙地处理好这些场景，降低用户的挫败感，就能体现设计在产品中的价值。
例如，支付宝在“双11”大促以及发春节红包的时候，用户可能会遇到系统繁忙的情况。但是这个时候却是用户最着急付款的时候，因为大家都在抢货啊！这个时候我们怎么能通过情感的安抚降低用户的挫败感呢？我们赋予系统人格特性，用通俗易懂的语言和虔诚的口吻，跟用户展开“人与人”之间的对话，如图25所示。
2）正向强化
在用户完成某个任务或者其他正向场景的时候，我们要强化这种正向的情感，加深用户的情感体验，如图26所示。
图25 安抚和关怀
图26 正向情感强化
图26左图为用户进入余额宝页面时，我们通过金额数字的增长动画，加强用户在查看收益和本金时候的喜悦感，加深用户对余额宝这个产品乃至支付宝的正向情感。
图26右图为用户开启支付宝会员的时候，我们通过一个完整的页面和动画告知用户获得的排名与会员等级，强化用户获得会员身份和等级时的自我认同感。
（3）智能服务
智能手机要够智能。充分利用设备的硬件特性、系统的数据，与设计进行完美的融合，让用户感受到我们是懂他的，是聪明的。手机的传感器赋予我们对外界的感知能力，海量的用户特征数据赋予我们渊博的知识，强大的后台计算服务器赋予我们超强的大脑，我们的App完全可以像人一样去思考，思考如何为用户提供更好的服务，如图27所示。
图27 智能服务
图27左图为支付宝登录，用户在应用中填写过的信息都可以记录在系统中，免去用户二次输入的麻烦，提升用户的操作效率。
图27右图为新卡号输入，自动将卡号分隔为4个数字一段，方便用户阅读和核对，并且根据卡号自动识别所属银行，减少用户的输入操作。
第3节 基 础 规 范
设计原则在思维层面指导我们做出符合整体体验价值观的设计决策。根据简单、高效、人性化的设计原则，我们要对页面的基本组成元素进行一致性的定义和规范化的建设。文字、图片、线条、颜色是构成页面的最基本元素，统一这些基本元素对于整个产品的视觉风格和品牌传达的一致性起着至关重要的作用。它们就像建筑的基本材料，决定建筑最终的风格和特点，正如用木材建造中国及东方建筑，用石材建造西方建筑。
1.设计风格
设计风格是整合品牌传播的一种表现，它能理性地反映品牌个性与共性，从而建立品牌知名度、美誉度、忠诚度及品牌联想度。
支付宝给用户传达简单、高效、人性化的理念。而极简主义（Minimalism）指设计从功能出发，形式以满足功能而存在，没有功能性的修饰全部去掉。这种设计风格，感官上简约整洁，品位和思想上更为优雅。
极简主义设计时，只有图片、颜色、字体及大小、线条、icon风格、留白的处理等设计元素之间完美配合，才能达到理想的效果。
2.色彩
品牌色在界面设计中的使用应同时具备品牌识别性以及界面设计功能性，色彩的运用应达到信息传递、动作指引、交互反馈，或是强化和凸显某一个元素的目的。支付宝品牌色如图28所示。
图28 支付宝品牌色
人们的大脑记忆过程主要分为3个阶段：识记、保存、重现。在实际设计中，我们可以利用这一特点，更好地传达品牌的视觉感知。支付宝移动端通过视觉感官来增强品牌色的引用主要有3种途径，如图29所示。
当前选中项（图29中的左图）；
主操作按钮（图29中的中图）；
操作类文案信息（图29中的右图）。
图29 品牌色引用
3.字体
很多设计师在产出App时，都会遇到字体选择的问题，手机系统的不同，所使用的字体也是不同的。有些个性的App，若字体也做个性设计，会产生3个方面的影响：
增加了App的安装包的大小。
用户在使用该App时，增加额外的学习和适用成本。
个性字体与系统字体没有统一性。
建议大家采用系统字体做设计方案的产出。下面介绍一下大家经常接触的两大系统字体及属性。
（1）字体集
1）iOS系统
在WWDC 2015大会上，苹果公司专门在OS X El Capitan中为中国用户打造了全新字体—苹方字体，其字体具有现代感的外观、清晰易读的屏幕显示效果，并同时支持简体中文（PingFang SC）、繁体中文（PingFang TC）、香港中文（PingFang HK），看来苹果公司还是很注重中国人的用户体验。iOS默认字体如图30所示。
图30 iOS默认字体
2）Android系统
谷歌公司就没有这么人性化了，中文字体至今尚未更新，依然沿用Droid Sans Fallback字体，或许是字体库对手机厂商开放，可以自行定义。
自从Ice Cream Sandwich 发布以来，Roboto就是Android系统的默认英文及数字体。宽度和圆度都轻微提高，从而提升了清晰度，并且看起来让人更加愉悦。Android默认字体如图31所示。
图31 Android默认字体
（2）行高
1）iOS系统
可能很多设计师都遇到这样的问题。在设计过程中，采用默认的字行高产出设计稿，但在视觉验收阶段，却发现技术开发的页面与设计稿不一致。例如：文字与图片的间距、文字与文字间距、文字与边框间距等都不同。
解决此类问题其实很简单，文字行高采用与技术开发对等的参数产出设计稿即可，图32列举了一些常用的文字行高。
图32 常用的文字行高
从图32中可以总结出一个公式：
Y＝2×ceil（X/10）＋X
式中：X为字号（sketch里的字号）；Y为行高；ceil()为向上取整数。
此公式方便我们在产出设计稿时，按照文字大小，对应地设置文字行高，便可以确保设计稿与技术开发的页面中的文字行高一致了。
2）Android系统
Android由于各机型的字体不同，字体库对手机厂商的开放，文字行高就很难找统一的规则。在实际产出设计稿时，采用字体Droid Sans Fallback、Roboto，文字行高为系统默认，不做设置，如图33所示。
图33 中文、英文、数字行高
（3）标点
中文字在国际GB 2312—1980（汉字国际码）中采用全角字符，输入中文时，所使用标点同时应采用全角字符。这样就与中文字占的字节数保持一致 ，展示出来的中文字与标点所占的间距保持统一。
同样地，英文、数字、特殊字符采用半角输入模式，其内容所使用的标点也采用半角标点。
（4）空格
“空格”估计大家并不陌生，它是键盘里最大的一个按键。如何把“空格”应用到实际的设计中，总结以下3点经验：
中英文混排时中文与英文之间加半角空格，方便用户在阅读时进行区分。
数字与单位之间需要增加空格，方便用户精确查阅数字（支付宝用户对数字非常关注，数字等同于金额）。 但度、百分比与数字之间无须增加空格。
中文之间链接文字需增加空格。在技术上实现链接时，可增大可点区域，同时给用户传递可点击感。
（5）对齐
人们的阅读习惯一般是从左到右，人的两眼是横着排列的，眼睛视线横看比竖看要宽，横看时眼和头部转动较小，自然省力，不易疲劳。
在实际的文字排版中，中文或英文均可以采用左对齐的方式，如图34所示。
图34 文字对齐
数字通常采用右对齐或小数点对齐，便于对个、十、百、千位上的数字进行对比。3个数字以上，使用千分符作为分隔，便于用户识别，如图35所示。
图35 数字/小数点对齐
4.图标
（1）图标网格
使用图标网格可确保图标设计的一致性，从而建立一套明确的图形元素定位规则，如图36所示。
图36 图标网格
（2）关键线的形状
关键线的形状是网格的基础。利用这些核心形状作为向导，即可使整个相关产品的图标保持一致的视觉比例，如图37所示。
a）方形、圆形
b）竖直矩形、水平矩形
图37 关键线的形状
（3）产品图标
产品图标是传达品牌内涵的一个重要载体，是一个品牌下产品、服务和工具的一种视觉表现，通过对每个功能属性的调用，确定用4种色彩区分各功能，能够以简洁的外形、鲜明的颜色友好地传递产品的核心理念与内涵，如图38所示。
图38 产品图标
5.适配
（1）iOS适配
iOS机型总览如图39所示。
图39 iOS机型总览
（2）Android适配
Android主流机型概览如图40所示。
图40 Android主流机型概览
App设计开发必须考虑适配各种屏幕。如何做到交付一套设计稿就可解决适配大、中、小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路如下：
选择一种尺寸作为设计和开发基准。
定义一套适配规则，自动适配剩下尺寸。
特殊适配效果给出设计效果。
第一步：视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。
第二步：输出两个交付物给开发工程师：一个是程序用到的@3X切图资源，另一个是宽度750px的设计标注图。
第三步：开发工程师拿到750px标注图和@3X切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其他尺寸。
第四步：适配调试阶段，基于iPhone 6的界面效果，分别向上、向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大、中、小三屏适配。
iOS设计适配流程如图41所示。
第一步：视觉设计阶段，设计师按宽度1080px做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在1080px的设计稿上做标注，输出标注图。同时等比放大4/3倍生成宽度1440px的设计稿，在1440px的稿子里切图。
第二步：输出两个交付物给开发工程师：一个是程序用到的@4X切图资源，另一个是宽度1080px的设计标注图。
图41 iOS设计适配流程
第三步：开发工程师拿到1080px标注图和@4X切图资源，完成1080px的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其他宽度尺寸。
第四步：适配调试阶段，基于1080px的界面效果，分别向上、向下调试1440px和720px及以下的界面效果。由此完成大、中、小三屏适配。
Android设计适配流程如图42所示。
只交付一套设计稿，默认用什么规则来适配？
前文提到适配策略是先选择一种尺寸作为基准设计尺寸，然后通过一套适配规则自动适配到其他尺寸。这套适配规则总结起来就是：文字流式，控件弹性，图片等比缩放，适配系数。
图42 Android设计适配流程
文字流式：在不同的设备上，文字大小不变，文字显示的区域产生变化。通常iOS5的文字显示区域更长，一行可以展示更多的文字，如图43所示。
图43 文字流式
控件弹性：navigation、cell、bar等适配过程中垂直方向上高度不变、水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示越多的内容，发挥大屏幕的优势，如图44所示。
图44 控件弹性
图片等比缩放：当涉及插图、banner等位图时，这些图片在不同设备中根据屏幕大小等比缩放，保证不变形，如图45所示。
图45 图片等比缩放
适配系数：同屏幕密度的适配，如6、5、4s，用到前面3个规则就可以了；跨屏幕密度的适配，如6+、6、3gs，需要用一个适配系数进行换算以后再用前面3个规则，如图46所示。
图46 适配系数实例
特殊适配：有些界面通过以上规则进行适配以后，可能并不能达到设计师理想的效果。这时候需要对这个页面做各个屏幕的设计稿，进行特殊适配。为了更好地展示效果，工作量无疑会成倍地增长。
以支付宝首页为例，90×90dp(1080px设备上像素为270× 270px)的应用宫格，在1080px设备上显示一行4个，刚好充满屏幕宽。同样的宫格，放在480px设备上(480px设备上像素为135× 135px)，4个应用占据屏幕宽度135×4=540px已经超过屏幕尺寸，放在1440px屏幕上(1440px屏上像素为315×315px)，4个应用占宽315×4=1260px，比1440px的屏幕宽度还小一些。
这种情况下就要单独考虑屏幕适配方案了，例如：480px屏幕缩小应用尺寸，改为80×80dp；或者单独提供适合480px的切片；等等，如图47所示。
第4节 控件&组件
一致性的原则要求，系统中同样功能的元素、控件、界面应该在样式、交互行为上都保持一致。前面我们建设了设计原则和基础规范，从思维方式和基本元素的层面为一致性打下了基础。如果只有这两部分，对于产品整体的标准化来说还不完整。因为在同样的设计原则和基础规范下，设计出来的导航栏可能不一样。所以，我们还要建立控件以及组件的标准，整个规范才能完整地发挥作用。
那么问题来了，到底页面中哪些控件应该是标准化的？哪些组件应该是统一调用的？哪些东西是固定不变的？哪些东西是可以变化的？如果什么都固定死了，设计师还有发挥的空间吗？
所以，定义好控件、组件的范围，才能把握好标准化和创新之间的微妙平衡。
哪些元素可以定义为控件，哪些页面可以统一成组件？如何界定标准化和设计创新的边界？我们对支付宝内各种类型页面进行了拆分，以是否需要一致作为标准进行归类和整理。图48所示为典型的页面拆分案例。
图48 典型的页面拆分案例
通过对支付宝数百个页面的拆解和分析，我们根据页面元素的稳定性，将所有的页面元素归纳为不同的5个层级，并且分别定义每个层级的设计自由度。如图49所示。
图49 层级定义
1.系统层
系统层—完全调用系统原生的控件和组件，不做任何额外的定义和设计。所有产品和页面都应该是一致的，最大限度符合系统特性，随着系统更新变化而变化。系统层包括状态栏、系统通知、控制控件、系统键盘、手势，如图50所示。
2.框架层
框架层—用于组织页面信息，并且起到导航作用的控件。这部分控件在符合系统体验原则的基础上，应该反映支付宝的品牌特点。所以框架层需要根据支付宝自身的特点定制和开发，但是它在支付宝内部应该是一致的。这部分控件包括导航栏、Tab栏、分段控件、工具栏，如图51所示。
图50 系统层定义示例
图51 框架层定义示例
3.临时层
临时层—页面中临时出现的浮层和内容，在调整符合系统交互特性的基础上，样式根据支付宝特点定制和开发。支付宝内部需要保持体验的一致性。临时层包括活动视图、活动菜单、POP菜单、弹框、Toast、选择器、临时公告等。如图52所示。
图52 临时层定义示例
4.内容层
内容层—页面中剩下的内容，跟页面内容的特点相关，每个页面可能都不同，是设计师发挥空间最大的部分。但是一些具有共性的控件，如列表项、按钮、输入框等可以抽离出来，做成标准化，如图53所示。
图53 内容层定义示例
第5节 输 出 规 范
世上本没有路，走的人多了，也便成了路。—鲁迅
规范如果没有人使用，那就是一堆文档。当然，为了保障产品整体的体验，我们可以采用行政手段，强制要求团队成员阅读并且遵守规范文档。这全靠每个人的记忆力和自觉性，并不能很好地达到我们想要的效果。因为每个人对同一个东西的理解和执行度都是不一样的。
强制的方法不好，我们就得换一个角度，从每个人的利益出发，让大家都乐意使用规范。这个利益点就是“效率”，我们要让规范帮助大家提升工作效率、沟通效率。
1.规范文档&UIKit
怎样的规范能提升设计师的工作效率，而不让他们觉得这只是一种约束呢？
考虑到设计师的工作特点，我们将设计规范分为规范文档和UIKit两部分输出。规范文档是最全的文档，里面详细阐述了设计原则、基础规范，以及每个控件的样式和使用规则。这部分文档需要设计师阅读并且理解里面的规则。UIKit则是控件样式的集合，我们提供和维护最新的样式源文件。设计师在工作中只需要复制和拖动，不必重复绘制和单独设计，节省了大家的时间。
2.开发基础控件库
设计规范仅仅在设计师团队中推广是不够的，因为设计最后的实施是在开发环节。我们以效率和成本作为突破口，在开发团队中推广和执行我们的标准化。开发人员每天加班写代码，所以他们是最喜欢标准化的了。所以，建立开发的基础控件库，让各个产品的开发都可以直接调用和配置参数，这是规范和标准化执行的终极环节。
总结
规范是死的，设计是活的。设计文档和标准控件是死的，设计思想是活的。标准化建设的过程中一定要把握好这个平衡，不能让规范制约了创新。建立团队统一的设计价值观，界定一个好的设计框架，让设计师在一致的范围里创造是设计规范的价值所在。所以，设计原则、规范理论基础等的提炼和建设在规范体系里应该得到我们的重视。“戴着镣铐跳舞”讲的正是这个道理。
03 设计走查表
文/王向红
在新项目的设计过程中，交互往往是非常重要的一环，任何细节的偏差都有可能造成产品体验的缺陷。为规避设计缺陷，设计师在项目过程中可以逐步建立设计走查表。
设计走查表应该从什么维度开始建立？建立的具体内容是什么？
一般我们描述一个产品时，一定是将其放在一个场景中去描述的，用户在场景中和产品产生互动，互相影响。场景可能包含了移动App使用的软件系统、硬件载体、移动环境下的网络状态以及App实现的技术框架、版本兼容、使用时间、地点等内容。这些场景中遇到的问题是我们设计走查表里的核心骨架。如图1所示，App在各种场景下都有交互行为发生，而我们则保证它能够完善地运行，使用户产生信任和安全感。
下面我们将从用户使用移动设备的硬件特性、软件特性、网络特性，以及具体的用户界面内页面状态、页面流程完整性及消息通知，及涉及设计细节、与时间/数字相关性问题来阐述如何建立设计走查表。
图1 设计走查表相关因素
第1节 硬 件 特 性
硬件特性从制定适配原则、账户在设备上的切换、横竖屏显示效果等方面来描述，看看在设计前期我们需要注意哪些问题。
1.制定适配原则
任何产品都会涉及适配问题。首先是制订native适配方案，如显示的文字或图片的适配。
1）数量不变进行同比放大适配，如图2所示，支付宝首页适配的时候就是进行同比放大，一行数量不变。
2）同行数量增多，图片字号大小不变。
3）避免不规则背景。在图片的适配过程中，若图片底部有不规则花纹，如图3所示，因为要切一张大图，则可能会使红包增大，用户打开加载时也会增加流量的耗费。
4）不同设备适配时遮挡。通常，操作时的适配问题容易被忽略。页面显示的内容在唤起键盘时是否有遮挡的问题，怎样解决遮挡问题？如图4所示，在iPhone4/4s上，无论怎样进行适配，由于页面承载的信息过多，下面的支付渠道（用黄色框框住的地方）仍然显示不全。但在iPhone5/5s、iphone6/6plus上则可以通过调整间距使内容显示完整。
2.账户在设备上的切换
（1）同一设备，不同账户切换
切换的新账户若曾经在本设备上登录过，则帮助用户加载展示客户端存储的本地内容，并且标记用户未处理的新信息。在加载的过程中给出明确的加载状态、内容展示。
（2）不同设备，同一账户iOS切换
同一个账户在不同设备上登录时，先确定该账户是否支持多设备同时登录（多点登录）；如只支持单点登录，则在登录B设备时，A设备的账户自动被挤下线（单点登录的安全限制），并提示用户，设备是在何时何地登录的，所以退出了当前的登录状态，图5所示为支付宝账户在其他设备上登录时出现的提示。
若支持多点登录，则注意内容的同步，且内容被操作后的状态也需要同步到各个设备上。特别是同时登录时push通知下发及同步，不能让用户操作重复阅读的工作。
如果设计的产品与优惠、红包等相关，则要判断设备ID，避免用户刷优惠或红包，对产品或活动造成影响。
3.横竖屏显示效果
应用是否支持横竖屏显示先确定，如果不支持则锁定竖向或横向的单一方向。如果支持则要在设计的过程中考虑竖屏和横屏两种模式下的显示效果。图6所示为下厨房的横竖屏切换，做得比较出色。
图6 下厨房的横竖屏切换
第2节 软 件 特 性
软件系统本身是很复杂的，设计师需要掌握一些与设计相关的软件特性来帮助设计，如操作系统特性、制定多平台的设计规范、版本兼容。
1.操作系统特性
在进行新产品规划初期，需要确定新产品覆盖的系统及系统版本号。如iOS系统支持很多手势操作，故iPhone的用户更容易接受手势操作。而Android因为硬件设备的差异比较大，对手势的支持也有较大的差异，因此较为隐藏的手势操作不适合使用。
2.制定多平台的设计规范
系统是不断更新和进步的，一个产品如果是多平台设计，需要制定平台规范。比如统一的表单操作、选项卡、浮层提示、加载、刷新等，这些组控件的统一，可以有效地提高产品优化的效率，降低开发成本，同时能保证用户体验的一致性。图7所示为支付宝制定的标签统一规范。
3.版本兼容
（1）版本覆盖时间
新版本上线后要确认一下版本在多久的时间范围内可以覆盖80%以上的用户。当新版本的某些功能要配合H5活动时，这个时间显得尤为重要。如果版本没有发布，而活动的时间已经迫在眉睫，那这个活动可能将会面临失败。在跨部门合作过程中，可能因为沟通不到位产生这样的结果。因此当有大型活动进行时，需要全力去配合。
（2）更新提示强弱
一般来说，用户可以选择不去更新版本继续使用，但是当App产生较大BUG或存在安全隐患时，可通过不可取消更新进行强制升级。
（3）兼容性展示
新版本的内容是可以展示在旧版本上的。图8所示的支付宝9.0版本，用户不更新就不能使用支付宝2016年新春红包功能，但是用户在低版本客户端的会话页面仍然能收到会话消息提示，点击此消息，可以有效地引导用户更新App。更新后可查看来往的具体会话内容。
图8 内容兼容展示
第3节 网 络 特 性
网络环境对移动应用设计有较大的影响，如快速启动、合理缓存、弱网环境、中断/超时，都与网络状态密不可分。通过设计策略可以避免网络环境的各种状态对用户体验造成的影响。
1.快速启动
应用在启动时需要一个加载时间，为避免用户在等待时间感到枯燥、乏味，可采用以下3种方式。
（1）让用户感知到应用的启动速度比较快
使用一张与应用相同的图片，在用户点击应用时，这张图片就显示出来，用户会认为这个时候应用已启动，虽然用户会在启动页面停留几秒，但是会觉得应用加载速度比较快。
（2）作为一个产品品牌展示区
启动页面展示的是产品的广告语，如支付宝的“我有我的方式”或者如犀牛的故事“犀牛故事，在故事里相遇”。
（3）作为一个广告展示区
启动页面可以是产品代言人或者某个时间段的活动。如手机淘宝就经常会有这样的启动页面。
2.合理缓存
页面合理缓存可以让用户感受到应用的速度更快，不浪费流量。但是缓存不能过量，不能任何页面内容都做缓存，那哪些页面需要做缓存呢？一般应用首页有比较固定的内容时需要做缓存或已有内容的页面不需要全页面加载，可以先展示较旧的内容然后加载出较新的内容。相比每次进入都重新加载，缓存会让用户有更好的体验。
3.弱网环境
（1）弱网环境下加载失败
网络环境不稳定容易导致加载失败，加载时间控制在8秒内（8秒是用户最长的等待时间，用户在等待8秒左右时开始感到不耐烦并且想离开当前页面），并且尽可能地采用有趣的加载来降低用户的等待时间，加载失败后，要给予用户重试的机会，并且告知加载失败的原因。
（2）弱网环境下内容展示不全
弱网环境下可能只能显示部分内容，经常遇到的情况是文字内容显示，而图片无法加载出来，只出现占位图或者是空白图片，图9所示为2016年新春红包出现的占位图。
（3）弱网无网状态下数据传输／设置生效机制
如果网络环境不稳定或者断网，但用户需要将内容发布出去，可以支持用户本地发出去，本地可见。当有网络请求时，再将内容上传到服务端，并且让其他用户可见。这样可以有效提升用户体验，让用户不受网络环境的限制。如美拍可以在断网的环境下缓存视频，当有网络时可以手动将视频上传上去。图10所示为Facebook自动检测网络，有网络后立即上传失败内容的设计。
图10 Facebook上传失败内容
4.中断、超时
在网络中断时，帮助用户保存当前的输入内容或者浏览内容，当重新连接到网络时用户可以继续当前的任务。若超时则给用户提示，让用户停止等待，重新请求网络或退出。
第4节 页 面 状 态
可以用生命周期来描述一个页面的状态。用户进入这个页面，首先会看到页面的初始化；阅读内容的过程中会涉及页面的刷新、加载；当同时访问页面的用户数量过多时，页面内容会被限流，用户会在不同的时间进入页面查看内容；当前页面内容可能过了某个时间节点会失效，用户不能再访问；当一个新用户进入这个页面，可能当前的页面内容为空。页面的这些状态需要设计师提前考虑并提出解决方案。
1.页面初始化
启动应用进入首页时，可以在启动过程中预加载首页内容，让用户快速进入且有内容可预览。页面初始化需要配合加载策略进行。
2.页面刷新
通过刷新可以更新当前页面的数据。一般情况下采用用户手动下拉刷新，下拉刷新不需要对整体页面进行刷新，只需要拉取最新的状态，显示出来即可。但是如果当前页面涉及一些数字的提醒或通知，则不需要刷新也可以展示给用户，当用户点击查看时触发刷新，则将页面内容更新到最新的状态。
3.页面加载
（1）分步加载
分步加载是全页面加载的一种方式，为了尽快地显示页面内容，可先加载文字内容，再加载图片等内容。让用户在网速不够快的情况下可以尽快预览到内容。这种加载方式通常应用在用户首次进入页面时。
（2）懒加载
懒加载也称为延迟加载，即在需要的时候才加载，这种加载效率低，但占用内存小。一般在页面浏览过程中加载新内容时采用这种方式进行加载。
（3）智能加载
第一种策略是在产品中增加网络判断的机制，如果在弱网环境下，提前压缩图片并显示小图片，使其能尽量展示预览出的内容，点击小图，可查看大图。最好是可以让用户点击未加载的内容后继续加载，不需要重新刷新页面（只针对客户端页面）。第二种策略是降低图片视频质量，点击后可以加载高清图片或者点击播放视频选择高清模式。而在网络环境不佳的情况下，则默认帮助用户降低质量，减少流量的耗损。
4.页面内容被限流
一般产品页面是不会遇到限流的问题的，只有在活动页面可能因为访问量太大而遇到限流。如在支付宝的春晚发红包过程中，预测到活动中人流量会比较大，我们提前设计了限流页面，让用户有较好的体验。
5.页面内容为空
一般与用户相关的页面可能为空，如我的动态、评论等。这些页面为空时不能不显示，但可以在显示上用调皮一点的文案避免空页面显得过于枯燥。
6.页面内容失效
一般固定入口不会有页面失效的状态。非固定入口的页面失效后，可以将入口下掉或者在用户进入后重新刷新出可用内容。页面内也需要考虑信息的时效性、延时、过期等问题。
第5节 页面流程完整性
除了用抽象的流程图来确保流程的完整性，设计师还可以通过快速回到首页/主要页面、让用户始终知道自己在哪儿、返回到原来的浏览位置、任务完成后跳转这几项设计原则来确保完整性上的体验。
（1）快速回到首页/主要页面
用户不管在应用的什么地方，都可以快速返回到首页/主要页面。这要求我们在搭建整体信息架构的时候，结构足够扁平。并且所有的页面流程都必须形成一个有效的闭环。
（2）让用户始终知道自己在哪儿
通过页面标题来让用户确认当前的位置。
通过页面之间跳转的转场动效让用户确认当前的位置。
用户可以沿原路返回。
（3）返回到原来的浏览位置
明确任何一个可点击的去向，且去向是可返回的。返回问题连带定位，从哪里去返回到哪里。特殊路径需要定制，可能会出现连跳几个页面的情况，在验收过程中需要重点注意。
（4）任务完成后跳转
任务成功后，页面跳转后可返回到来源页面。
任务失败后，需提示当前状态，并引导用户如何查看最新的状态。在有新结果时，通知用户。
第6节 消 息 通 知
根据消息的强弱进行消息通知的设计。
强消息通知，可以使用客户端推送，用户可以在手机屏幕或者手机的通知栏预览到内容。用户可以通过通知的新消息直达到详情页面或通知列表。用户未读的信息可以标记出未读数字，如图11中的消息push通知。
弱消息通知，可以在用户打开应用后，在内容层上统一提示，告诉共有××条新消息。点击后可查看所有消息内容，如图12中的页面消息通知。
第7节 细 节
设计细节有非常多的点，比较通用的细节有：点击状态、发送状态、输入、反馈、音效。设计师可以根据自己的需求来制定细节的走查。
1.点击状态
按钮点击状态包括开始、结束、不可点、失效、已领完、已过期等。
2.发送状态
发送状态分两种：一是发送后需要较长时间返回结果的，此时发送后直接到结果页面，结果页面上显示当前进度和最终结果及其时间；二是发送后较短时间就返回结果的，此时发送后到过渡页面，有几秒的等待时间，然后跳转到最终结果页面。
3.输入
（1）减少输入
在移动端输入的成本比较高，设计师可以通过表单、选项卡、默认填入值来减少输入。在社交会话中则可以通过更多的语音、图片、视频来减少输入，让用户沟通得更轻松。
（2）输入限制
在内容不确定多寡的输入框内，可以采用暗文或数字的方式来帮助用户确认当前的输入内容有没有超过限制。输入的内容一定要做长度限制，因为不只是在输入过程中会遇到显示的问题，在发布后也会有显示问题。
（3）中断时保存内容
移动环境不稳定，经常会出现中断退出的情况。当遇到异常情况时，可以保存用户在中断前输入的内容，待环境稳定后用户可以继续操作。
4.反馈
（1）即时反馈
当用户操作后，若有需要反馈的信息，在操作后立刻给出，反馈的区域不能距用户的操作区域太远，否则就会被忽略。如果是非阻塞式的反馈，那反馈的方式要轻，不要因反馈而干扰用户当前的任务，对用户造成困扰。
（2）反馈效果
所有的点击都要有明确的反馈状态，点击后会出现一系列的状态变化。如有的按钮只可以被点击一次，用户点击后首先按钮状态会改变，其次会产生一个与点击相关的操作结果反馈。
5.音效
应用音效需要考虑其大小，配合操作使用时是否有延迟。特别需要考虑用户当前的使用场景出现声音是否合适。
第8节 与时间、数字相关性问题
1.时间
（1）制定时间规范
根据产品设计需求，在前期根据场景规划时间显示规则，如格式是“2016-3-16”还是“2016/03/16”等。用在列表页面、详情页面还是会话页面都要提前规范好。
（2）不同场景下时间格式的选择
用户对于时间的感知根据场景的不同会有很大的差异。从我们的对话中就可以感受到，平时问“什么时候开周会”，会回答“周三”。但是如果问“什么时候提交报告”，会回答“3月20日”。从对话的场景中可以看出我们对时间维度的区分。因此在对时间进行设计时，一定是根据使用场景来进行时间的设计。图13所示为时间规则。
图13 时间规则
（3）有效／失效时间
消息、卡券、红包等都会有时效性，有的时效对用户来说是有生效期的，与生效期相对的是失效期。内容失效后需要处理，可能由清除或者其他功能来支持。有的内容是没有生效期的，但是它会变成历史内容，历史内容与现有的内容需要进行一定的区分。
2.数量
规范数量规则时，需考虑以下问题：
是否为零，为零时应该显示还是隐藏？
刷新是否影响数字变化？
数字是否会减少，当数字减少为零时是否有反馈或界面变化？
总结
本章总结的只是部分内容，在设计过程中还有很多的细节需要设计师考虑，并纳入设计走查表中。设计走查表不仅能帮助设计师本身，还可以帮助与设计师一起工作的项目伙伴，在项目进行前期，交互设计师在参与需求策划讨论时就可以与项目组的同事一起阅读设计走查表，并制定项目在执行层面的规范，可以保证多项目并行时调用相同组件的一致性；在项目结束后，设计走查表可以有效地进行设计验收。
图14～图16是3个案例，表内的内容不仅可以帮助开发梳理各种状态，还可以在后期给大家提供验收的依据，不会遗漏任何细节和状态。
图14 框架案例
图15 页面状态案例
图16 消息通知案例
