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

2015/12/16 11407

app-feedback-method-use-case-1

给用户及时、恰当的反馈,是交互设计非常重要的一项原则。由搜狐新闻客户端团队撰写的《设计之下》一书中,对操作反馈从形式、内容、位置几个方面做了非常详细的总结,满满干货。今天@青溪Joanna 这篇读书笔记提取了书中的要点并配上实例,分享给大家。

一、为什么要反馈

1、以人与人的交流为例

1)人与人的交流中,无法忍受的一种情况是:对方对自己说的话没有反应,好像视而不见。
2)没有反馈或是不友好的反馈,就好像冷冰冰的人一样,会给用户带来无助或不悦的负面体验

2、及时恰当的反馈的用处是什么

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

二、反馈的形式

反馈的形式多样,所有的提示都应该在恰当的时候出现在恰当的位置, 用简短而清晰的文字提供有用的信息,不让用户产生迷惑。

1、气泡状提示

1)用处一

  • 通常是短暂出现在画面上,就像气泡一样过一会儿就会自己消失,并不需要对它进行任何操作
  • 通常用于告诉任务状态、操作结果

下图三个例子都属于操作结果的反馈提示,图1提示添加收藏成功,采用系统自带的toast吐司提示;图2是新微博加载成功的提示,在导航栏下方浮在内容区上方;图3是QQ空间添加到歌单的提示,显示在导航栏背景色与状态栏颜色一致,效果不错。尽管展示位置不同,但这些提示都是短暂的出现在画面上,1秒左右消失。

7jh20151216

2)用处二

用于引导,就像漫画中的对话框一样,带有一个指向具体位置的小尖,提示用户需要关注哪个位置。

与用处一不同,这类引导类提示通常不回很快消失。如下图,图1奇妙清单、图2知乎的例子,都提供了关闭按钮,用户既可以点击指引区域也可以点击关闭按钮,来让提示消失;图3来自图片社交App——in,用户点击指引区域才能让提示消失。

6jh20151216

3)不足之处

容易被用户忽略,所以不适合承载太多文字或重要信息

2、弹出框

1)用法

  • 一般会带有一两句说明文字和两个操作按钮,用于确认和取消重要操作(比如,是否删除内容)
  • 通常会用明显的颜色,突出显示可能造成哟过户损失的操作项(比如,“删除”、“不保存”)

2)特点

  • 弹出框的出现,会强迫用户关注弹窗内容和操作,并屏蔽背景的所有内容
  • 对用户打扰最大的一种提示

3)设计注意

  • 弹出框上的说明、按钮上的文字,最好言简意赅、一目了然,能帮助用户快速做出决策。 因为通常用户都想赶快关掉弹出框,以便接着完成被打断的操作。
  • 设计过程中要避免滥用弹出框提示,对于不太重要又要反馈的事可以用气泡提示表示。

3、按钮/图标/链接的按下状态

1)基于人在现实世界经验

  • 在现实中按一个按钮会立即有按下状态

2)人机交互

  • 当用户在屏幕上按下一个按钮或链接时,也需要有状态的改变,让用户知道界面已经接收到他的操作了。

如下图,图1是iPhone照片界面,点击按下右上角的“选择”,文字透明度变高、颜色变淡;图2是豆瓣App,点击某个区块时显示背景色表示按下的效果;图3、4是知乎App,点击按下按钮时,背景颜色加深,同时按钮尺寸动效缩小。

5jh20151216

4、声音

1)常见例子

  • 虚拟键盘在按下时的咔嚓声
  • 短信、邮件发送成功后的“嗖”一声
  • 微信摇一摇手机之后的咔嚓声
  • 拍照App按下按钮是的咔嚓声

2)设计注意

  • 恰当使用声音反馈有点睛效果,但过多的使用反而会变成一种打扰
  • 不能将声音作为主要反馈,且要给用户关闭提示音的权利(因为用户所处的环境多样,可能很吵而听不见声音,也可能不适合打开声音)

5、振动

1)用处

  • 一种比较强烈的触觉反馈,可用来代替或加强声音提示

2)例子

  • 在手机系统中应用广泛,比如来电、短信、已连接充电 在手机App中较少用到

3)设计注意

  • 不要乱用为好

6、动画

1)用处

  • 给用户提供有意义的反馈,帮助用户直观了解操作的结果
  • 精美有趣的动画,能给用户留下深刻印象、提升使用时的愉悦感,甚至成为产品吸引用户的一个因素

2)例子

  • iOS系统在删除邮件、照片时,通过拟物化的动画效果,让用户知道操作已经生效,即——不要的邮件或照片已经被丢入了垃圾桶。 这种形象的动画,帮助用户清晰感受到操作的执行过程,并增添了乐趣。
  • 在一些会持续比较久的操作里,比如下载、删除大量文件,用动态的进度条展示已完成的进度,并在可能的时候提供解释信息,能够减少用户的焦虑。
  • 很多有趣的下拉刷新、上滑加载更多的例子,让等待不再枯燥

三、反馈的内容

1、信息

1)设计注意

  • 文字信息应该简洁易懂,避免使用倒装句,最好一两句就能将意思表达清楚
  • 避免使用过于程序化的语言
  • 页面已有详细说明文字的操作,其反馈信息可以简单一些,不必重复页面已有文字。比如昵称,界面上已有格式要求时,反馈错误时只需提示“昵称不符合要求”
  • 适当使用图标,可以吸引用户注意,帮助用户判断提示的类型。

2、警告

1)用处

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

2)特点

  • 浮现在程序中央,覆盖在主程序之上
  • 它的到来,是由于程序或设备的状态发生了重要变动,并不一定是用户最近的操作导致的
  • 通常至少有一个按钮,用户点击后即可关闭窗口
  • 一般会有标题,并展示额外的辅助信息

3、错误

1)用处

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

2)设计注意

  • 错误提示,告知用户为什么操作被中断,以及出现了什么错误。
  • 错误信息要尽量准确、通俗易懂。
  • 有效的错误提示信息要解释发生的原因,并提供解决方案,以使用户能够从错误中恢复。

4、确认

1)用处

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

2)设计注意

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

四、反馈出现的位置

1、状态栏

1)优点

  • 很好的利用空间

2)缺点

  • 位置不是很明显,建议只提示重要程度不高、或有跨画面显示需求的提示

3)例子

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

通常发送内容时,需要一定的时间,为了不让用户空等、还能去做点别的事儿,将等待过程弱化是很有必要的。

4jh20151216

2、导航栏

1)使用场景

  • 一般是连接状态的展示,表示产品正在努力连接网络、拉取数据中
  • 适合显示临时的较重要的提示类信息

2)例子

如下图,图1是QQ音乐添加歌单的提示,前文也有提到;图2是AppFlow,加载内容时在导航栏提示,加载完成后再回到原状态,这种方式在Reeder中也有用到。

3jh20151216

3、内容区上方

1)使用场景

  • 位置在内容区上方、导航栏下方,通常为下拉刷新,是加载新内容的一种快捷方式。
  • 默认的提示信息是隐藏的,向下拉界面时才显示对应的提示信息,以引导用户操作。

4、屏幕中心

1)使用场景

  • 通常为整体性的比较重要的信息提示
  • 需要引起用户重视的、系统提示均可以显示在此位置

2)设计注意

  • 现在大家越来越追求产品风格,奢易属于自己产品的独特反馈形式、并自定义某个固定的位置显示提示也较为流行。

5、菜单栏上方

1)使用场景

  • 可根据需要灵活的使用,基本没什么限制
  • 可以是应用的整体信息的提示;也可以是与界面底部内容相关的提示。 比如,加载更多内容、或气泡提示表示图片上传中 等等。

2)例子

如下图,豆瓣App,加载首页内容,暂无更新的提示。既告知了用户结果,又引导用户去搜索更多兴趣,让首页内容变得更加丰富。

2jh20151216

6、底部(覆盖菜单栏)

1)使用场景

  • 在此位置显示提示,并没有什么特别的好处,或许是对于新形式的一种追求。

2)例子

如下图,Keep下载视频的提示,进度条显示在底部,此位置较为明显也不会影响用户浏览内容区。

1jh20151216

五、反馈的设计原则

1、为用户在各个阶段的反馈提供必要、积极、即时的反馈
2、避免过渡反馈,以免给用户带来不必要的打扰
3、能够及时看到效果的、简单的操作,可以省略反馈提示
4、所提供的反馈,要能让用户用最便捷的方式完成选择
5、未不同类型的反馈做差异化设计
6、不要打断用户的意识流,避免遮挡用户可能回去查看或操作的对象。

如果感兴趣,推荐大家也读一读这本书《设计之下:搜狐新闻客户端的用户体验设计》

欢迎关注妹子的微信公众号:

qxqr

【为了这8个指南也得存书签!】

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

作者:@青溪Joanna

uisdc-tuweia-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量106万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/app-feedback-method-use-case

界面设计 交互设计师 HTML5 素材 用户体验设计 好文 UI 转场动效 设计师专访 设计师 设计规范 排版布局 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里