帮助很大,看到了支付宝对于交互的很多细心的考虑,也是我之前没有察觉到的.掌握了很多的知识.感谢分享

支付宝体验设计精髓
支付宝AUX团队
104个笔记

前言

  • 一个产品和服务能获得成功,是因为它真正帮人们解决了某些问题。

  • 目标用户是谁?要在什么场景下解决这类用户的什么问题?

  • 我们时常会被经验和物理逻辑所迷惑,忽略了常识和习惯。

  • 不仅符合专业,也符合直觉。

  • 去考虑最好的用户体验,乐于接受他人的建议。讨论本身并不是为了赢,而是获得最佳结果。

01 行业设计“五步法”

  • 做行业调研主要是为了了解行业的现状与未来发展趋势

  • 桌面研究、问卷调查、用户访谈、田野调查、数据分析

  • 桌面研究能够让设计师对一个行业有一个粗浅、大致的认识,基于这些认识推动行业项目产生新的进展。

  • 田野调查指深入线下并观察用户使用场景,绘制体验地图,绘制用户体验曲线。

  • 严重阻碍用户行为流程并且反馈数量较多的问题

  • 梳理出真正能快速落地和执行的主要问题,并且提出解决方案

  • 人口学特征包括空间、年龄、性别、文化、职业、收入、生育率等指标,在项目设计前,必须明确核心用户群体的人口学特征。

  • 主要分析核心场景中用户在处理核心任务的行为方式。

  • 市场需求逐渐变得碎片化、长尾化、多元化和个性化,搭建场景能覆盖用户全量活动轨迹,让需求分析更精准,让产品功能更全面,让业务目标定位更清晰,让团队对产品的理解更一致。

长尾化是什么意思呢

  • 长尾化

  • 用户行为则可以从渠道、路径、痛点、用户方案等方面进行分析

  • 什么是核心需求?什么是次级需求?什么是伪需求?这就需要结合商业模式、产品发展目标、用户场景与用户行为来交叉判断

  • 需求的评估最重要的不是知道要做什么,而是知道什么不要做

  • 交互要协助产品从用户的体验角度来进行需求的裁减,只有进行整体的平衡和优先级的排布才能实现产品功能迭代价值的最大化。

  • ①以用户需求为主要导向;②兼顾用户的使用习惯;③流程尽量短;④每个操作页面仅有一个核心操作任务;⑤考虑交互实现的开发成本

  • 还应有极限状态下的说明,比如一个列表的最长和最短的显示,一行字段的长度限制,是否跳行,等等

  • 最后就是异常/出错情况的说明,如空页面、系统错误、错误反馈等情况,这时比较适合增加一些情感化的设计

  • 交互设计更像是一个有产品思想的需求翻译,在整个项目组中建立一座桥梁,在沟通与解决问题的过程中还要不断预见问题、定义问题,进行设计的前置,走到用户面前,倾听用户,观察用户,帮助用户,真正做到以“用户为中心”进行设计。

02 无规矩不成方圆——设计规范的建设

  • 在这样一个系统级的应用中,我们面临的设计挑战相当复杂:如何降低用户在复杂系统中的学习和认知成本?如何让用户在所有页面都有良好的体验?如何让用户在所有页面中获得一致的品牌认知?

  • 删除那些可有可无的功能、多余的选项、冗余的文字、花哨的修饰,可以减轻用户的负担,让用户专心做自己想做的事。

  • 确定主要任务和次要任务,并排定优先次序。专注解决用户优先级最高的需求,然后再考虑满足用户其他目标。

  • 许多研究都表明,用户能够忍受的等待时间为6~8秒

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

  • 在0.1秒内显示反馈结果用户是可以接受的。
    1秒是用户保持不间断的思维流的限定时间,用户会注意到这样的延迟。
    8秒是保持用户关注当前界面的极限时间,超出8秒用户会愤然离场。

  • RPC(Remote Procedure CaII ProtocoI)是指手机客户端需要调用网络服务端的资源时,进行的远程数据调用过程。

  • 交互设计师的天职就是将用户从繁重的交互操作中拯救出来,提升产品的可用性,让用户方便快捷地完成任务。在交互设计中,应尽可能地减少额外的点击,做到一键完成任务。

  • 移动设计中常用的内容应该在3个层级以内看到。

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

图17 模态窗口

  • 要营造和谐的人机对话环境,我们必须做到适时地反馈

  • ● 为用户的操作提供必要、积极、即时的反馈。
    ● 根据内容的重要程度选择合适的反馈形式。
    ● 避免过渡反馈,以免给用户带来不必要的打扰。
    ● 不要打断用户的意识流,避免遮挡用户可能回去查看或操作的对象。

  • 移动界面设计中反馈的方式大致有5种:对话框、小气泡、多态按钮、动画、声音或震动

  • 对话框和小气泡的视觉形式是悬浮在当前界面之上的,用户可以理解对话框与当前界面之间的关系,完成对话框的操作之后可以继续原有操作。它的本意是减少页面的跳转,尽量让用户沉浸体验

03 设计走查表

  • 比如统一的表单操作、选项卡、浮层提示、加载、刷新等,这些组控件的统一,可以有效地提高产品优化的效率,降低开发成本,同时能保证用户体验的一致性。

  • 除了用抽象的流程图来确保流程的完整性,设计师还可以通过快速回到首页/主要页面、让用户始终知道自己在哪儿、返回到原来的浏览位置、任务完成后跳转这几项设计原则来确保完整性上的体验。

  • 比较通用的细节有:点击状态、发送状态、输入、反馈、音效。

  • 应用音效需要考虑其大小,配合操作使用时是否有延迟。特别需要考虑用户当前的使用场景出现声音是否合适

  • 规范数量规则时,需考虑以下问题:
    ● 是否为零,为零时应该显示还是隐藏?
    ● 刷新是否影响数字变化?
    ● 数字是否会减少,当数字减少为零时是否有反馈或界面变化?

04 图标设计与验证

  • 扁平化利于突出重点,把不必要的东西都弱化,只保留最重要的

  • 设计师平时工作中的图标设计流程:需求分析→图标设计→内部评审→输出规范→上线。

  • 知道用户是怎么理解图标的唯一办法就是做图标可用性测试

  • 影响图形符号认知的因素包含视觉复杂性、熟悉性、语义距离、具体性等

05 敏捷开发模式下的设计协作

  • 可能有时候产品经理的需求会显得很不合理,这时候设计师不要急于反驳,而是应深入思考产品经理的需求背后的商业目的,是否有更好的方式来达到此商业目标。设计师需要深入地了解业务,开阔自己的视野,才可以提出有说服力的论据和产品经理PK,所以进入项目越早越好,这样你才能更清晰地了解原始的产品诉求。

  • 设计时应注意两点:一是输出设计稿时一定要做设计宣讲,将业务逻辑、设计原型和设计原则向开发人员解释清楚,避免有理解不一致的地方;二是设计有变更及时同步到相关人员。

06 行业服务设计的思考与实践

  • 当前可以覆盖的互联网人群增量已经进入平台期,人口红利消失殆尽,只能通过服务升级的方式在增量场景中获得价值转化

  • 服务设计最常用的两个思考工具,分别是服务蓝图和体验地图。

  • 首先,我们需要了解行业生态状况。我们的学习渠道可以是行业现状报道、竞品分析、行业从业者走访以及真实用户随访

07 产品设计中的模块化思维

  • 广义上的模块化设计是指在对一定范围内的不同功能或相同功能不同性能、不同规格的产品进行功能分析的基础上,划分并设计出一系列功能模块,通过模块的选择和组合构成不同产品的设计方法。

  • (1)模块划分标准
    1)单一性
    模块粒度需要尽可能小,一个模块以解决用户的一个需求为主。
    2)完整性
    单一模块应该具备完整性,内部流程上应当是一个闭环,信息流上提供足够支撑用户达到目标所需。
    3)独立性
    模块之间应该维持一种弱耦合关系,将模块对其他模块的依存关系降到最低,以便与不同模块组合时具备良好的适配能力,扩大模块通用性和复用能力。

  • 图3 信用卡还款模块划分

  • 图4 下厨房App模块划分

  • 模块的复用性是提高产品设计效率最重要的特性。

  • 每一个页面中都需要有一个,且仅有一个主要模块,它是用户在当前页面最迫切需要解决的问题,也是页面信息的重心所在。

08 走进服务设计:让预约挂号变得精准与简单

  • 据视觉研究报告的数据可知,人类对事物的辨认首先是色彩感觉,其次才是对形的辨认。比如在最初接触的20秒内,对色彩的感受度为80%左右,形体感受度仅为20%;在20秒至3分钟内,色彩感递减为60%,形体感递增为40%,由此可见色彩的感知力是非常强的。

  • 少年儿童喜爱纯色、明度反差强烈的色彩,而讨厌灰色调的浊色或暗色调;青年人较喜欢纯色、明度反差较大的色彩,但又不讨厌灰色调;成年人一般喜欢明度反差较小的、色调较灰的色彩,排斥纯色、对比色、明度反差极大的色彩。

09 信息可视化设计

  • 受众鲜少有耐心去深度阅读一堆冗杂的信息,因此需要借助图形化的表达方式形象生动地展现信息结构,起到四两拨千斤的效果。

  • 图1 信息可视化设计流程图

  • 图2 信息可视化设计要求

10 线下物料设计

  • 与线上灵活的代码修改不同,线下设计输出犯错成本更高,严格的校对工作等同于线上产品的验收流程,设计小样输出后,字体、字号、色值、比例是否正确,是线下校对的关键。

11 业务探索期,设计可以做些什么

  • 几点建议:
    1)和业务方一起探讨业务目标,注意他们直接表达的未必就是真实的目标,设计师需要向需求层深挖,最终确定他们实际想要达到怎样的目标;这个时期需求方的需求可能是带着方案一起提的,要甄别来看哪儿是真正的需求,避免陷入方案里。
    2)确定目标人群,目标人群有哪些特征属性,用户的痛点是什么,目标人群会在怎样的场景下与业务目标产生联系。
    3)结合1)2)去确定用户体验目标是什么,即用户通过使用产品可以得到什么。
    4)弄清楚影响达到体验目标的要素有哪些。
    5)围绕这些要素去转化设计目标。

  • 设计本就是综合商业目标、体验目标、技术能力的平衡解决方案

  • ● 项目伊始时充分沟通项目背景、业务目标、产品及运营策略,保障目标一致。
    ● 理解运营、营销方案中的阶段目标,将其融入设计策略中。
    ● 抛出项目中设计职能可能面临哪些方面的约束,与团队达成共识。

12 设计师如何从0到1快速了解一个行业

  • 图1 行业基本信息结构

  • 图2 基于产品生命周期的行业知识选择

  • 最简单的方法:上网搜索(基本手段)
    行业权威网站、相关论坛、行业分析报告、相关新闻都是我们探索行业知识的好去处。

  • 但书本知识有一定的滞后性,无法获取最新的信息。

  • 表1 在线违章缴罚行业知识简表

13 敏捷设计研究

  • 表1 以新版本发布为周期的设计研究流程
  • 表2 定量和定性的区别
  • 图1 设计研究方法

  • 图2 疑问列表

  • 图4 细化及用户假设

  • 图5 目标内容总结

  • 图6 小需求池操作流程

  • 如果用户想要表达的内容很多,甚至可以让他们把问题抛开,将自己遇到的场景画下来(图7),从中也能得到很多意想不到的思路。

图7 用户画图

14 设计十则

  • UX设计师需要考虑到多元因素的交互设计和架构,合理高效的流程、友好体贴的语言、操作容易理解、按键出现及时、界面舒适、不要太多无关内容影响(界面有效性)等。

  • 设计多套方案时应注意方案之间的互动与关联,这能够更好地了解和掌握客户的要求与审美倾向,为找准设计目标奠定基础。

  • 衡量一个设计的好坏,并不是看它好不好看,而是要能解决问题,并且好用。

  • 设计的主要目的是沟通,你的设计中的可读性和易读性是重中之重。

  • 在做设计时,可能我们能顺利读懂内容,但对于大部分的用户来说却是很困难的事情。所以设计测试也是很重要的一个环节。

  • 很多情况都是这样的:它看起来不错,并不意味着它能很好地传达信息。

15 像设计师一样思考

  • 在互联网这个行业里,发展迭代特别快,设计是要紧跟市场与公司的商业策略的。

  • 像设计师一样思考,是将观察结果转化成设计思考,再将设计思考转化成能改善人们生活的产品和服务。

16 讲故事的力量

  • 一个故事的好与坏最重要的衡量标准就是代入感,能不能引人入胜,

17 移动搜索设计探索

  • ● 搜索主界面的点击PV、UV。
    ● 搜索请求的PV、UV。
    ● 用户平均使用搜索的次数。
    ● 用户使用客户端次数和搜索次数对比。
    ● 更换关键词的次数。
    ● 最短关键词长度、最长关键词长度、平均关键词长度。
    ● 每日的TOP20关键词。
    ● 每一个类别结果点UV、PV与点击占比。
    ● 每一个类别TOP10关键词。
    ● 同一个结果页面,结果点击的次数。

  • 界面的使用流程相对简单,需要设计师了解搜索背后算法规则,以减少用户输入,降低成本,最快时间找到相应结果为目标,从搜索入口—输入中—结果展现几个关键环节,找到合理的解决方案。需要思考每个细分流程中要展现的内容有哪些,背后需要什么算法规则支持。

18 在移动支付设计中构建安全感

  • Davis的“计算机技术接受模型”是认知科学与现代信息技术领域最权威的安全感评价模型。

  • 使用传统模型,可以避免打破心理预期,减少认知负担,显著体现了记忆唤醒对安全感保护的作用

  • 喧嚣、艳丽的色彩会提高用户的兴奋感,同时也影响了严谨的支付氛围,增加了支付体验中的不确定感。

  • 主观掌控意味着用户对产品有信任感,认为自己在移动支付的流程中占主导地位,能实时了解业务进度,客观掌控意味着用户在实际操作中对产品进度有绝对的控制力,可以随时打断、继续、返回、终止。提高用户对产品的掌控度,意味着需要确保信息对等,提供实时进度反馈,关键操作可逆。

  • 进度反馈意味着:内容可接受、位置可感知、结果可期待。

  • ● 提高支付体验与记忆模型的匹配度。
    ● 利用感性元素传达安全体验。
    ● 提高用户对产品的掌控度。
    ● 在场景中减少用户不安情绪。
    ● 集中隐私控制。

19 一切都是为了打动你——产品中的情感化设计

  • 在唐纳德·诺曼的《情感化设计》[1]一书中从知觉心理学的角度揭示了人的本性3个特征层次,即“本能的、行为的、反思的”。

  • 动效是情感化设计中的重要组成。产品中的动效很容易抓住用户的注意力,引发其情绪反应。因为其可以加强用户体验的舒适度,减弱不可避免的不适感,给用户带来惊喜感。

  • 当付款人扫码后,收款人的界面上会跳出付款人的信息,实时反馈付款人的状态。而不需要收款人一直猜测,对方是否已经扫了二维码?是否正在付款?付款是否成功?动效的使用大大降低了用户等待的不适感。

  • 你的产品能实现的功能,别人的产品往往也能实现,而能否准确抓住用户心理、能否打动人心才是人性需求中最注重的。