文是笔者负责微众银行App设计规范时，引发的“反馈设计”相关思考。本文中，笔者具体介绍了什么是反馈设计以及反馈设计中要注意的要点。

这是负责微众银行App部分交互规范时写的，在这个过程中，思考了一些规范定义的问题……后来延伸至到“反馈设计”的思考，于是就有了这篇文章。

这里需要说明一点，以下所讲的反馈设计主要针对App渠道来说。在实际设计中，反馈的渠道不仅只有App，还包含短信、电话、邮件、微信公众号等渠道。

一、什么是反馈设计

用户在日常使用App操作各种流程中，会遇到各种信息反馈，如：进度条指示、购买确认信息、填写错误提示、购物车添加动效等，这些都属于信息反馈。而信息反馈的目的是告知用户自己操作的结果，以及系统发生的变化。换句话说，就是让用户明白发生了什么。

如果从交互类型来看，我们可以把反馈信息分为两种类型，一种是非模态反馈，另一种是模态反馈。

非模态反馈，是将信息反馈干扰度最小化地传达给用户。

模态反馈，则是强调反馈信息的重要性，一般带有可操作的选项。

这两种类型最大的差异在于“反馈信息是否会中断当前的操作流程”。

二、如何做好反馈设计

对于反馈设计来说，可以分为三个步骤：确定恰当的模式、设计清晰的内容、及时告知用户。它们相互作用影响反馈设计方案的体验，所以单独考虑其中一点是不合适的，需要做一个全局的权衡。

第一步：确定恰当的模式

在反馈设计中，反馈信息需要通过恰当的模式，传达给用户。让用户知道发生了什么。前面也简单介绍了非模态反馈和模特反馈这两种类型，而在实际运用中，还需要考虑场景来选择恰当的模式。

对于大多数反馈场景来说，在用户获知反馈信息时，要尽量减少对流程操作的影响，避免为了获取反馈信息，而出现中断操作流程的情况。因此采用非模态反馈，可以有效的引导用户正确完成流程；

如：在按钮的反馈设计中，当操作不被允许时，对按钮进行置灰处理，比使用模态对话框告知用户的反馈方案要更友善，因为模态对话框会打断当前用户的操作流程，还会挡住所出现的问题。

总的来说，非模态反馈的优点是不打断用户的操作。缺点则是用户容易忽略反馈内容，不够聚焦；同时有些情况存在异步校验数据，这种情况也无法用非模态反馈展示。

反之，模态反馈更多时候运用在需要强化告知内容的场景，比如一些重大公告的通知，常常会在首页自动弹出信息，一来是为了有效传达信息内容，二来有一些是行业规定限制。

在实际工作运用中，可以通过几个考虑方向，选择最合适的反馈模式：

a. 获取流程：是同步获取反馈信息，还是异步获取？

当反馈信息可以同步获取时，则考虑非模态反馈。特别是对于异常信息的反馈，能提前反馈给用户的信息，就不要等到用户操作完，最后才反馈异常情况给用户。

b. 反馈类型：是对流程中某个元素结果的反馈，还是对流程最终结果的反馈？

当反馈内容针对任务流程的某个元素时，则优先考虑非模态反馈。

如：反馈是针对表单中的输入框填写有误；因为这种反馈模式可以最大程度减少对用户的干扰。

当反馈内容针对任务流程的最终结果时，则优先考虑模态反馈。

如：反馈是针对表单提交后的状态；因为模态反馈可以聚焦用户的关注点，明确让用户知道流程的最终结果状态。

c. 重要程度：忽略这个反馈的后果，对当前主任务是否有重大影响？

当忽略反馈内容会对当前主任务造成重大影响时，则采用模态反馈。如：验证交易密码虽然是购买主任务中的一环，但是验证交易密码的重要性很高，同时决定着购买主任务后面的流程能否继续进行。因此采用模态反馈，可以让用户更聚焦于当前的反馈内容，明确当前流程遇到的问题。

d、行业规定：是否存在某些行业硬性规定，必须让用户看？

在某些行业中，确实存在一些硬性规定，如：金融行业有些公告信息，根据监管要求，必须让用户看。这种情况，只能采用模态反馈了。

e. 设计规范：是否有相关的设计规范？

这里要了解的主要有平台的规范和自家App的设计规范，主要出于一致性的考虑，避免同一类反馈，有些页面采用非模态反馈，有些页面采用模态反馈。

第二步：设计清晰的内容

（1）从认知方式出发

如何将信息清晰高效的展示给操作者？想要实现这个目标，就需要我们先了解人的认知方式，从认知的过程中，寻找机会点去完善反馈内容设计。

从心理学角度，大体上可以将认知过程分为“精神活动引发”和“环境刺激引发”两种类型。

a. 精神活动引发

这种类型主要受到操作者精神活动内容的影响，这些精神活动包含了过往经验、期望结果、记忆唤醒等。

比如：用户进行一次理财产品的购买操作时，当用户点击提交按钮后，就会由过往经验引发期望看到订单提交的信息，而这时候的反馈信息展示的内容，就需要跟操作者心理的认知结果匹配。

b. 环境刺激引发

这种类型主要受到环境刺激的影响，相对于“精神活动引发”的认识结果类型，这种类型可以说是更被动的。当用户看到界面视觉时，就会通过自身感受阶段和知觉阶段，形成认知结果。

比如：当用户第一次看到Banner轮播模块时，会先通过视网膜像输入基本视觉元素；然后通过知觉组织处理接收到的感受信息，形成初步的辨认结果；最后才形成用户自己的认知结果。

当环境刺激多了，用户对该事物的认知熟悉后，就会积累成自身经验，也算是用户习惯之一，下次用户再接触该事物，就会通过“精神活动引发”渠道去感知。

（2）运用认知方式来设计清晰内容

反馈设计要遵循人的认知心理过程，反馈内容传达也要符合用户的认知结果。可以运用前面介绍的认知方式，来设计清晰的反馈内容。

如：在信息通知的“小红点”设计，因为早期通过微信、QQ已经让用户形成了认知经验，让用户对小红点的认知模式从“环境刺激”转变为“精神活动”，所以在信息通知的反馈形式上，直接采用小红点反馈形式，就比较符合用户的认知。

对于展示的反馈内容来说，应该是符合当前场景的。在什么流程，展示什么内容，而不是脱离场景，展示无关的内容。

如：在购买基金产品时，当购买成功后，将交易结果反馈给用户，同时将该基金未来的产生收益日反馈给用户，让用户心理对未来发现的事有预期准备，这种反馈信息内容是结合场景需求来优化。

我们除了需要结合实际场景来考虑反馈信息展现的内容，还可以通过视觉暗示、为异常流程提供出口等方法来优化反馈内容。

a. 视觉暗示

视觉是用户接触反馈内容最表面的一层，却相当重要。以“精神活动引发”的认知为原理，借助视觉暗示，可以让用户及时了解到清晰的反馈内容。

如：在按钮点击态的设计中，当用户按下按钮时，按钮将切换成预备动作（点击状态），当用户手指移开按钮时，按钮执行动作中断，将恢复原态，这种顺从响应暗示也属于反馈信息一种。

b. 为异常流程提供出口

不仅仅要将信息反馈给用户，还因为清晰明确的展示；如有必要，可提供额外子流程入口，避免用户无法卡在主流程，无法正常操作。

如：在金额输入框时，因为受到行业规则的限制，有些银行卡存在限额操作。当用户输入金额超过可用额度时，则及时将信息反馈给用户，并提供辅助解决方法的入口，将反馈信息内容与主操作流程进行优化展示。

总而言之，反馈信息内容要清晰，要符合用户心理的认知结果。基于场景思考是设计的前提，反馈信息内容的呈现可以通过视觉暗示、为异常流程提供出口等方法来优化。这也是反馈设计的重点。

第三步：及时告知用户

这个理解起来还是比较简单的，顾名思义是指反馈信息的及时性，这里包含不限于出现的时机、动效的时长。这方面也很大程度影响着反馈设计的成败。想象下，用户正在进行转账操作，在进行一系列必要的操作后，本以为最后的反馈信息是提醒转账成功，结果反馈信息告诉用户“今天系统维护，请明天再转账”，这样的体验是多糟糕啊。

就拿输入框的反馈设计来说，购买产品时，经常需要输入金额，在输入过程中，如果金额数据有误，则应该在当前页，及时给予用户提醒。而不是当用户点击“完成”关闭键盘后，才提醒用户金额有误。

反馈信息要及时，同时不能脱离用户操作场景，要让用户明白现在发生什么，未来结果可能会怎样发展。

三、总结

反馈设计目的在于告知用户发生了什么，让用户明白自己操作的结果，并知道系统发生的变化。

反馈设计可以分为三步，让反馈设计恰当、清晰、及时地传达给用户。

1. 确定恰当的模式：选择非模态反馈还是模态反馈。
2. 设计清晰的内容：内容符合认知原理，展示可通过视觉语言，流程引导，结合场景等方式，告知用户现在发生什么。
3. 及时告知用户：选择恰当时机出现和消失。

作者：mufly

来源：https://www.ui.cn/detail/439769.html

本文由 @mufly 授权发布于人人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议

TML 5虽然只是一个技术标准，但是眼下更多承载着颠覆苹果与谷歌移动生态的理想。我并不想单纯从技术角度谈论HTML5的现实处境，因为技术从来不会成为发展的绝对瓶颈，尤其是HTML 5本身就不存在任何重大的技术难题。反而“商业”成了HTML 5发展无法逾越的鸿沟。只可惜“商业”从来都掺杂大量的投机成分，当然也有商业政治的成分。

HTML5所谓的“标准定稿”在我看来只是一场公众秀。HTML 5标准自始至终就不是W3C组织一家的自留地，更不是唯一的代言人。原本W3C组织对外宣传“要到2022年才会完成HTML 5正式标准的颁布”，现在为何又如此匆忙的定稿？这种定稿真的会对移动开发产生多大影响？

最纠结的10%

真正一直关心HTML 5的人会记得2012年7月的一个重大新闻，HTML5的两个标准组织W3C和WHATWG因为“理念不合”决定分道扬镳，这被看成一场IT界的商业政治事件。二者的根本理念差异是WHATWG认为HTML 5应该成为一个动态的标准既Living Standard，而W3C则认为应该形成一个固定的标准。导致这场事件升级的真正原因并不是“理念”这么简单，而是二者各自代表的利益集团背后的推手。WHATWG向W3C叫板的底气，正是来自Mozilla、苹果和Opera的支持。W3C则选择了微软。

HTML5标准本身涉及的技术并无任何障碍，但是之前迟迟无法定案的原因则是错综复杂，缓慢的进度除了再一次证明这些组织是超级低效机构之外，所谓的利益和政治博弈才是直接导致了进度缓慢的真正原因。实际上截止2013年90%以上的HTML 5的标准早已完成，剩下的部分恰恰是各大利益集团博弈的重点，此次W3C代为发声，明显生米煮成熟饭的意味，这真的会奏效么？答案是完全否定的！因为各大金主不会因为一场PR活动就放弃自己的利益。

那么对开发者和技术用户而言，W3C所谓的标准定案到底意味着什么？是否可以从中获益？到底该如何看待这一“进步”？

这一切还要从W3C与WHATWG的分歧开始，动态标准还是固定的标准更适合开发者？我想，答案或许是WHATWG的Living Standard！因为没有动态的标准，就不会有HTML 5的未来。未来HTML5想得到真正的发展，核心问题并不是标准哪天定稿亦或是浏览器性能不足，关键在于两点，一是持续改进，二是生态。

龟速迭代

如果没有一个持续改进的标准和为此而不断努力的组织，HTML 5就只能把颠覆App生态当成一句口号，永远充当配角。因为生态革新速度要远大于开发者的行动速度。

IT world已经完全不是10年前的样子，Cloud/Client“云与端”快速蚕食着传统B/S架构（浏览器到服务器）的空间。端不特指“手机端”而是更广泛的包含“pad端”“PC端”甚至“手表端”“汽车端”“家电端”等等。而相比PC时代，更多端的出现，代表着更多的硬件组合以及更多业务场景和功能。我们一直诟病W3C等标准组织行动缓慢，这次标准的公布很明显没有解决任何“云与端”复杂性的解决方案。我们设想一下：

• 场景A：以iphone的touchID为代笔的生物识别功能在各种端上兴起，继而产生了大量新的API，甚至可能今后带有硬解的虹膜识别、声纹识别等终端能力，在一个固定的HTML5标准下如何解决？HTML5附带的device API甚至只涵盖了feature phone时代的基础通讯录、摄像头等功能，今天出现的touchID均无法有效调动，更何况2、3年后我们无法认知的新功能的标准配套实现。这种情况下不发展的HTML 5标准代表着“弱功能”

• 场景B：智能硬件的发展对蓝牙和wifi使用以及驱动的需求迅猛增长，而HTML 5配套的对蓝牙3.0驱动的支持标准何在？可以遵照标准的HTML 5亦或是配套的标准以及协议在浏览器内连接大部分的智能硬件么？答案当然也是全然否定的。这种未来最常见的常见之一都无法实现，那些大谈HTML 5将会取代APP的人恐怕又会说“这些不是HTML 5擅长的，这种举例毫无疑义”。那请问HTML 5擅长的只是排版布局和阅读类亦或者一些低价游戏的APP么？更不要说对于NFC等很快可能成为终端标配的系统新能力，所以定稿后不发展的HTML 5标准代表着“弱扩展”

其实，这一切基于HTML 5的论点并非没有明确的解决方案，简单来说所谓的HTML 5定稿只是闹剧和PR，如果真正期盼HTML 5挑战App生态，一定要出现一个不停发展的动态标准，才能够具备上场参赛的基础。只是这倚重的是标准背后的“推手”和“金主”，那些想打造自己生态王国的大玩家。作为WHATWG的重要支柱，苹果公司一直在低调中快速发展着自身的Web App技术，到今天为止，在iOS中已经有比Android和其他操作系统更成熟和完美的围绕HTML 5和Web App的支持，只是遗憾的是苹果公司只是把HTML 5当成技术，而没有为打造HTML 5的生态做出任何其他的努力。

推不动的生态

2013年是HTML 5最低调的一年，因为在此前一年，众多打击接踵而至，除了用户对HTML 5普遍负面的反馈之外，最严重的一次事件就是Facebook的彻底反水！

扎克伯格：我们过去最大的错误就是在HTML 5上面赌太大！

曾几何时，面对HTML5扎克伯格野心勃勃的推动着“复制Facebook在PC端生态和霸权计划”。众所周知，苹果的生态系统是相当封闭的，Android虽然开放但是也全面复制着苹果的玩法iOS－>Developer－>APP－>Appstore－>User。所以Facebook全面推进HTML 5，妄图跳开移动操作系统的掌控，拥抱HTML5和www的开放流量体系。

但是即便是Facebook如此重量级的玩家，最后也认栽了。无独有偶，Linkedin作为又一风向标，在2013年也同样放弃了HTML 5重新拥抱APP。到今天，难道短短的一年多，世界就发生了彻底的改变，HTML 5又重新具备了王者的气质？当然是不可能的，世界上各个IT王国都没有改变，改变的只是时间。

根据Flurry的报告，相比去年，2014年用户在移动端的使用APP的份额进一步上升突破80%，而手机网站的使用情况进一步被挤压。这说明用户市场没有将APP升级和下载当成多大的困难（至少没你想像的那么困难），并且随着App store更加人性和智能化的帮助用户在wifi环境下自动升级等机制的普及，APP在使用上对用户来说门槛越来越低，反而基于HTML5的Web App的使用和获取倒是成了用户的障碍。手机浏览器的用户留存和使用情况越来越不乐观，这个最重要的HTML 5的载体正在失去活力，反而大家寄望于超级APP，微信在中国眼下成了一根救命稻草。

当然想基于超级APP的形式打造自身闭环生态的厂商不止Facebook一家，反观国内试水的大公司也很多，但均以鸣金收兵结尾。从UC的web app商店到百度的轻应用，构建基于移动web流量的生态系统无一成功。目前造成这种局面原因众多，例如浏览器性能不足、HTML 5标准未定稿、无有效的web app发行渠道等等，但是正如我3年前说的，最核心的问题是移动开放流量体系和原生生态系统的对抗。

目前用户从App store去搜索和下载app，在桌面存留app入口点击使用，这已经成了iOS与Android生态系统下的固定模式。反而让用户进入超级APP，再通过搜索或连接的方式进入一个第三方web app，无论是从操作流程还是用户最终体验都无法和操作系统层级的体验抗衡。而HTML 5标准定稿没有为这种生态的困难带来任何一点的改变，所以说HTML 5在W3C操纵下的所谓标准定稿，只是一场PR的闹剧，虽然搅动了市场，但是也刺激了一批从业者充当炮灰。

期待新玩家

打造移动开放平台和生态系统，微信是佼佼者，并且成功将部分App的流量转化成了Web app的流量。微信也一路创新了导流手段，没有选择用户网址输入、也没有选择用户搜索进入web app，而是把账号变成网址并且直接收藏的方式，形成了一个特殊的“web app浏览器”。在打通了流量后又恰当的加入了支付手段，不但盘活了流量也让流量变得更加有价值。

这给HTML 5开发者带来了希望，不过很快又很失望，因为开发者发现微信对流量的管控超乎预期。这让我想到了SNS时代开放平台玩死众多social game厂商的过去。中国有大的互联网开放平台，曾经的腾讯、人人甚至淘宝。但是总结规则无一不是“貔貅原则”流量只进不出，所谓的盘活流量只是为自身生态服务，虽然这样无可厚非，只是对于开发者来说把自己的梦想嫁接在“中国版的开放平台上”无异于“与虎谋皮”。因此HTML 5生态的建立或许可以借助开放平台，但是真正可以对抗原生生态的HTML 5需要的是类似于WebOS这种更彻底的变革。

开发者对于HTML5的定稿，心态大可保持平和，短期内不会带来任何的实质性改变。浏览器特别是操作系统厂商也不会因为W3C标准的定稿而放弃一直维护的自身利益，该支持的早已经支持，不该支持的也不会遵照标准去支持。只是HTML 5作为进步的一代标准，抛开利益和政治的博弈，还是会给开发者带来更多的价值。只要不盲从，以学习的心态积极对待，仍会从中获益。

HTML 5和配套的web开发技术具有跨平台、低门槛的特性，目前大量的APP中广泛使用了HTML5配合native development原生开发，极大的降低了APP整体的开发成本，更有一些移动应用引擎使用Javascript和HTML 5开发跨平台native app，在不触碰iOS与Android生态利益的前提下，发挥实用的价值。因此只要回归到技术本身，把HTML 5技术应用到可以使用的场景中充分发挥价值，就可以逐步迎接更光明的未来。

2年前，移动开发领域掀起过一次行业大辩论“web app和native app谁死谁活”的问题。今天这个问题依然是一个有价值的问题。所以下一篇是，HTML 5盛宴（二）：再论Web app和Native app的未来。

本文作者刘鑫，移动云服务APICloud创始人兼CEO，从SP梦网时代就开始持续关注移动Web开发，个人邮箱hi.seanliu@yahoo.com

除非注明，本站文章均为原创或编译，转载请注明： 文章来自 36氪

36氪官方iOS应用正式上线，支持『一键下载36氪报道的移动App』和『离线阅读』立即下载！

到这封信，千万别上当！近日，上海一市民收到了一封信件，打着“全面落实数字乡村实现全面脱贫”的旗号，号称可以发放福利，进行代购、邮寄实物黄金就可“双倍返还本金”。民警调查发现，确系市民遭遇投资理财类诈骗，经劝阻，帮助受害人避免损失85000元。

7月24日16时30分许，在上海崇明区，一家快递站的快递员报警称，一男子十天前刚寄了价值3万余元的金条，这次又要寄价值85000元的金条，怀疑其操作与民警之前宣传过的诈骗案例有关。根据邮寄信息，民警很快找到寄件人章先生，但其反复声称既没有被骗，也没有从事诈骗，这两次寄的黄金是他帮朋友代购的，根据朋友嘱托寄去不同的地方。见章先生有抵触情绪，于是民警请家属一起配合调查，并对该批金条做了暂缓寄出的处理。

据章先生妻子王女士反映，十天前章先生曾从她手里拿过30000元，章先生儿子也反馈父亲前几天因要还房贷，向他借了85000元，这笔钱与第二次购买黄金的钱相吻合。因此判断章先生极有可能用家里人的钱购买了黄金，并寄去陌生地方。民警据此确信，章先生遭遇了电信网络诈骗。经过家属劝说，章先生幡然醒悟，据他回忆，7月初他收到一个快递，除了一包洗衣粉之外，还有一张印有二维码的信件，信件内容以红头文件的形式，打着“全面落实数字乡村实现全面脱贫”的旗号，表示“可以代做理财投资”。抱着瞎玩玩的心理，章先生扫描添加了对方微信，随后被引导下载了一款聊天软件，并被拉进一“投资群”。

看到了有这样的投资机会，章先生不加思索立即行动。7月13日去银行买了20克一条的黄金3条，按对方要求选择快递公司，投了700多元保费寄到外省某地。几天后，章先生不见自己的工资卡账号有钱打进来，继续询问对方，对方让章先生耐心等待，时间不会太长，又称，如果投资两笔，回报率会更大。章先生仍选择相信，于是问儿子借了85000元，又购买了黄金，准备寄出时被快递员发现异常。确信对方就是骗子后，章先生懊悔不已，不过庆幸第二次买的黄金还在。

目前，该起诈骗案件上海警方正在进一步侦办中。

（总台记者 俞翔）

来源： 央视新闻客户端