交互基础科普！聊聊移动APP中反馈提示的设计方法与实例

给用户及时、适当的反馈是交互设计的一个非常重要的原则。在搜狐新闻客户团队撰写的《设计之下》一书中，操作反馈从形式、内容、位置等方面进行了非常详细的总结，充满了干货。今天的阅读笔记提取了书中的要点，并与您分享。

第一，为什么要反馈？

1、以人与人之间的交流为例

1）在人际交往中，一种难以忍受的情况是，对方对自己说的话没有反应，似乎视而不见。2）没有反馈或不友好的反馈，就像一个冷漠的人，会给用户带来无助或不愉快的负面体验

2、及时、适当的反馈有什么用？

1)可以告诉用户下一步该做什么2)帮助用户做出判断和决定

二、反馈形式

各种形式的反馈，所有的提示都应该在适当的时间出现在适当的位置， 用简短清晰的文字提供有用的信息，防止用户感到困惑。

1、气泡状提示

1）用处一

它通常短暂地出现在图片上，就像气泡一样，过一段时间就会消失，不需要操作它

通常用于告知任务状态、操作结果

下图中的三个例子都属于操作结果的反馈提示。图1提示成功添加收藏，使用系统自带的toast吐司提示；图2是新微博成功加载的提示，漂浮在导航栏下方的内容区域上方；图3是QQ空间添加到歌曲列表的提示，显示导航栏背景颜色与状态栏颜色一致，效果好。虽然显示位置不同，但这些提示在图片上短暂出现，大约1秒钟内消失。

2）用处二

用于引导，就像漫画中的对话框一样，有一个指向特定位置的小尖端，提示用户注意哪个位置。

与用途不同，这种指导提示通常不会很快消失。如下图所示，图1奇妙清单和图2知乎的例子都提供了关闭按钮。用户可以点击指南区域或关闭按钮，使提示消失；图3来自图片社交应用程序——in，只有用户点击指导区域，提示才能消失。

3）不足之处

1）用处

为用户提供有意义的反馈，帮助用户直观了解操作结果

精美有趣的动画能给用户留下深刻印象，增强使用时的愉悦感，甚至成为产品吸引用户的因素

2）例子

在删除电子邮件和照片时，iOS系统通过拟物化的动画效果让用户知道操作已经生效，即不需要的电子邮件或照片已经被扔进垃圾桶。 这种图像动画帮助用户清晰地感受到操作的执行过程，并增加乐趣。

在一些持续时间较长的操作中，如下载和删除大量文件，用动态进度条显示已完成的进度，并在可能的情况下提供解释信息，以减少用户的焦虑。

许多有趣的下拉刷新、上滑加载更多的例子，让等待不再枯燥

三、反馈内容

1、信息

1）设计注意

文字信息要简单易懂，避免使用倒装句，最好用一两句话把意思表达清楚

避免使用过于程序化的语言

页面已经详细说明了文本的操作，其反馈信息可以更简单，而无需重复页面上现有的文本。例如，当昵称在界面上有格式要求时，只需提示“昵称不符合要求”

适当使用图标可以吸引用户的注意力，帮助用户判断提示的类型。

2、警告

1）用处

警告框用于向用户显示对使用程序有重要影响的信息。

2）特点

它出现在程序的中心，覆盖在主程序上

它的到来是由于程序或设备状态的重要变化，不一定是用户最近的操作造成的

通常至少有一个按钮，用户点击后可以关闭窗口

通常会有标题，并显示额外的辅助信息

3、错误

1）用处

提示用户操作出现问题或异常，无法继续执行

2）设计注意

错误提示，告知用户为什么操作中断，出了什么问题。

尽可能准确、通俗易懂的错误信息。

有效的错误提示信息需要解释原因，并提供解决方案，以便用户能够从错误中恢复。

4、确认

1）用处

用于询问用户是否要继续某一操作，让用户进一步确认，为用户提供可反悔、可撤销的退路。

2）设计注意

当用户的操作结果危险或不可逆时，通过二次选择和确认，防止用户误操作

四、反馈出现的位置

1、状态栏

1）优点

利用好空间

2）缺点

位置不是很明显。建议只提示重要性不高或需要跨图片显示的提示

3）例子

如下图，图1、2是新浪微博App，点击写微博界面的“发送”，回到原界面，状态栏提示发送状态；图3是网易邮箱大师App。邮件发送后，离开邮件界面，右上角提示邮件发送进度。

通常，发送内容需要一定的时间。为了防止用户等待，做其他事情，有必要削弱等待过程。

2、导航栏

1）使用场景

一般来说，显示连接状态意味着产品正在努力连接网络和提取数据

更重要的提示信息适合临时显示

2）例子

如下图所示，图1是QQ音乐添加歌曲列表的提示，前面也提到过；图2为Appflow，加载内容时在导航栏提示，加载后回到原状态。这种方法也用于reeder。

3、内容区上方

1）使用场景

位于内容区上方，导航栏下方，通常是下拉刷新，是加载新内容的快捷方式。

默认提示信息是隐藏的，只有在向下拉界面时才能显示相应的提示信息，以引导用户操作。

4、屏幕中心

1）使用场景

信息提示通常是更重要的完整性

需要引起用户注意的系统提示可以显示在这个位置

2）设计注意

现在我们越来越追求产品风格，豪华易属于自己产品独特的反馈形式，定制固定位置显示提示也更受欢迎。

5、菜单栏上方

1）使用场景

可根据需要灵活使用，基本没有限制

它可以是应用程序的整体信息提示；也可以是界面底部内容的提示。 例如，加载更多内容或气泡提示表示图片上传 等等。

2）例子

如下图所示，豆瓣应用程序，加载主页内容，没有更新提示。它不仅通知用户结果，而且引导用户搜索更多的兴趣，使主页内容更加丰富。

6、底部(覆盖菜单栏)

1）使用场景

在这个位置显示提示并没有什么特别的好处，也许是对新形式的追求。

2）例子

如下图所示，Keep下载视频提示，进度条显示在底部，这个位置比较明显，不会影响用户浏览内容区域。

五、反馈设计原则

1、在每个阶段为用户提供必要、积极和即时的反馈、避免过渡反馈，以免给用户带来不必要的干扰3、能及时看到效果，操作简单，可省略反馈提示4、提供的反馈应该能够让用户以最方便的方式完成选择5、差异化设计6没有不同类型的反馈、不要打断用户的意识流，以免阻止用户返回查看或操作的对象。