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