在产品的设计中,“反馈”是很重要的一个交互特征,它是一种界面输出物,用以给用户正确的引导信息,帮助用户判断和决策。而反馈的形式也是多方面的,视觉、听觉、嗅觉、触觉、正面的、负面的,都是在为用户传递信息。而没有反馈或反馈很差的交互,只会让用户产生失效和无助的负面体验。
在煤气中加入硫和笨,为的是通过臭味提供危险信号的反馈。地铁里的门在关闭前会发出滴滴的报警声,是用来告知乘客车门将要关闭的信息。这都是生活中无处不在的反馈。
今天要和大家讨论的是在手机产品中,用户在信息交互过程中所得到的反馈形式。

1.反馈的必要性
在用户与产品进行交互的过程中, 产品对于用户的每一次行为都要有清晰的、及时的提示和反馈,从而使用户获得操作行为结果的信息。
如果产品不提供任何信息反馈, 那么用户就无法确定自己操作行为的的结果,反馈机制是产品设计中不可或缺的基本元素,它是用户前进道路的指向标。

2.反馈的形式
反馈的形式是多种多样的,在不同的场景不同操作中要选择适合的反馈类型。而在手机产品中更要考虑操作区太小被手指遮挡住的情况,反馈一定要明显,并呈现在可视范围内。下面尝试对手机产品中的反馈形式做一些总结。

2.1 气球状通知
气球状通知是一个小型的弹出窗口,用于通知用户出现非关键性问题或控件处于某种特殊情况。

上图中的信息提示是用来解释指向菜单的功能,即该菜单项是做什么的,属于说明类的反馈提示,说明文字应简洁、实用,避免提供用户显而易见的信息,需要设定合理的显示时间。

上图的气球状通知是当选中某一项功能(或方式)时,界面显示该功能对应的简要说明,用来告知用户选中此项功能将要执行的操作是什么,此类反馈通知一般触发后显示3秒钟就自动消失了。此类的反馈通常不会太重要,因为很容易被用户忽略。

2.2 对话框
对话框是最常见的反馈和提示形式,它存在的价值在于要引起用户的高度重视。

上图中的反馈提示是当用户触发某一项操作且需要用户进行再次确定及选择时显示的对话框,此类反馈的方式一般用在较为重要的提示信息上,需要用户进一步操作。操作按钮要尽量突出,确定不会出现死循环和重复操作,提示文字要简练易懂,以减少对文字的阅读压力。

上图的反馈属于过渡类的反馈提示,是通知用户当前界面所处的一种特殊状态,告知用户可以做什么及产品正在做什么。

2.3 按钮/图标/链接的按下状态
按钮/图标/链接的按下、选中的反馈效果,在手机产品中一样不能缺少。

上图的例子中当用户按下按钮或图标时,该按钮背景会增加一个按下的指纹,图标背景会变成高光,这种实时的反馈让用户即时直观地看到操作被响应了。

2.4 声音
声音同样能为用户提供有用的听觉反馈,但是它不应是唯一的或主要的反馈方式。因为用户的使用场景可能会迫使他们关掉声音。尤其手机的使用环境复杂多样,在地铁、商场等嘈杂的环境,声音的反馈就很容易被忽略。同时,过多的声音反馈也会造成听觉上的噪音,所以声音的反馈不应是主要的反馈方式,并要允许用户关掉声音。
比如iPhone发送短信发送成功后的提示音,按下手机键盘上的按键时的提示音,新浪微博的信息拉取成功后的提示音,后台推送消息的提示音等等,都巧妙的运用了声音反馈。

2.5 振动
振动为触觉反馈的一种表现形式,让用户通过触觉来感知产品的反馈及回应。

当我们将手机由声音调到振动时,声音的反馈提示就变成了振动提示。比如当有电话打进来时、接收到新消息时、接通电源充电时的反馈提示都变成了振动。
而有些产品中也可以设置新消息振动提示,打开此开关后,有新消息送达时的提示也就变成了振动提示。

2.6 动画
顺滑的动画会给用户提供有意义的反馈,帮助用户直观地了解到操作的结果。


上图的例子都是通过一个显著的动画过程让用户知道操作是如何执行的,把衣服丢进购物车,把照片扔进垃圾箱等等,这些形象的拟物化的动画能够帮助用户清晰地感知到整个操作执行的全过程。

上图中的例子适用在那些会持续很多秒的长流程里,将等待过程采用动画的进度形式显示,展示已完成的进度,并在可能的时候提供解释信息,以减少用户的焦虑。

2.7 灯光
灯光的提示,在一些特殊环境中有特殊的应用,比如在黑暗的地方或者是用户视线不在手机屏幕上时,灯光的反馈提示就以它独特的闪烁方式引起用户的注意。
手机指示灯大多是用在提示电量不足,即当手机快没电的时候,指示灯会按照一定的频率闪烁红光。还有充电的时候,红色指示灯常亮,充满电之后变成绿色。
还有一些手机的灯光应用在提醒功能里,比如有新消息、未接来电的时候,屏幕会自动亮起提示用户。

3.反馈的内容
3.1 信息
反馈提示的信息应简洁、实用。避免不带格式的大段文本,避免提供用户显而易见的信息或只是重复屏幕上的文字。

上图中的例子可以看到用户完成操作后给出的清晰的提示信息,告知用户操作的结果。

3.2 警告
警告框用于向用户展示对使用程序有重要影响的信息。
警告框浮现在程序中央,覆盖在主程序之上。警告框的外观强调了这样一个事实,它的到来是由于程序或设备的状态发生了重要变动,并不一定是由用户最近的操作导致。

上图中的警告是告知用户当前产品的状态,需要用户引起重视。警告框通常至少有一个按钮,用户点击后即可关闭窗口。警告框上也总会有标题,并展示额外的辅助信息。

3.3 错误
错误是提示用户操作出现了问题或异常,无法继续执行。


上图中的例子为输入的信息有误,界面给出了相应的错误提示,告知用户为什么操作被中断,以及出现了什么错误。错误信息要尽量准确、通俗易懂,有效的错误提示信息要解释发生的原因,并提供解决方案以使用户能够进行修复。

3.4 确认
确认是用于询问用户是否要继续某个操作,让用户进一步对所作的操作进行确定和执行,为用户提供可反悔的可撤销的退路。

上图中的例子是让用户对一些执行结果较危险或不可逆的操作进行二次选择和确认,用户防止用户误操作。

4.反馈的位置
4.1 状态栏
反馈的提示信息在状态栏,因为手机屏幕较小,可利用的空间有限,而放在状态栏则是一种很好的空间利用,但此位置不是很明显,建议只显示重要程度不高的信息提示,如好友消息提示,操作结果提示等次要信息。

4.2 导航栏
反馈的提示信息在导航栏,此类提示一般为连接状态的展示,临时将导航栏的内容代替为连接状态,表示当前产品正在努力连接网络拉取数据中。此位置适合显示临时的较重要的提示类信息。


4.3 内容区上方
反馈提示在内容区上方,导航栏下方,通常为拉取新内容,加载新信息的一种快捷方式,默认的提示信息是隐藏的,向下拉界面时才显示对应的提示信息,以引导用户进行操作。此位置的提示需要和内容进行紧密的关联结合。


4.4 屏幕中心
反馈信息在屏幕中心,通常为整体性的较重要的信息提示,需要引起用户重视的、系统的提示均可以显示在此位置。

4.5 菜单栏上方
反馈提示在菜单栏上方,此位置基本没有限制,可根据需要灵活使用,可以是产品的整体信息的提示,也可以是界面底部相关内容的提示。


4.6 菜单栏
反馈信息在菜单栏上,在此位置的显示提示信息的产品较少,因为通常菜单栏都会被菜单占满,不会有位置显示提示信息,可在一些菜单项较少的产品中进行应用。


4.7 跟随手势随机出现
反馈提示位置随机出现,根据手势或操作的位置临近出现,要注意尽量避免提示文字被遮挡。


5.反馈的时间

参考网页中的响应时间规律,一般而言,在0.1秒内显示反馈结果用户是可以接受的。1秒是用户保持不间断的思维流的限定时间,如果是超过了0.1秒而少于1秒内没有特别的信息反馈时,用户是会产生疑惑的。
对于长时间的延迟,用户会想在等待完成期间去处理其他事务。所以需要显示将要完成的时间(通常选择进度条或百分比来表示),不然会大大降低用户的期待值。

6.反馈的设计原则
为用户交互行为的各个阶段提供积极、即时的反馈予以响应。
要避免过度的反馈,以免给用户带来不必要的干扰。
能够及时看到效果,操作简单的成功型提示不需要反馈。
对提供的反馈要允许用户以最方便快捷的方式完成选择。
将状态分类(对/错/提/警等)并进行差异化设计。
不打断用户的意识流,给出的反馈提示要避免遮挡用户可能会去查看或者操作的对象。

7.总结
反馈需要引起用户注意,快速明确地传递操作的结果,不让用户产生迷惑,尤其在手机的操作中,产品需要即时响应用户的手势动作,手势操作虽快速轻便,但没有鼠标按下时嗒嗒声的安全感,也十分受限于设备屏幕的灵敏度,所以即时的、有效的操作反馈是非常重要的。
总结划分的如有不当,还请大家一起来斧正。

【本文首发于:百度MUX】http://mux.baidu.com/?p=2182

【 关注百度技术沙龙】

本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/779525,如需转载请自行联系原作者

手机产品设计中的反馈提示相关推荐

  1. UI设计中的错误提示

    一个合格的错误提示应该有以下两个基本功能: 1 向用户报告错误状态: 2 解释错误发生原因以及如何更正. 错误提示的种类 1 弹出框 目前来说,弹出框可以说是最常见的错误提示形式.因为弹出框的空间比较 ...

  2. 移动应用交互设计中合理使用动态

    一个优秀的交互师可以轻松地解释每一个动作逻辑背后的设计概念,包括信息框架,页面内容的继承,每一个点击动作对于页面跳转的影响等. 不久的将来,动效将被广泛的引入到原型的概念设计当中,然而随之带来的是交互 ...

  3. 大话PM|产品设计中常被忽视的业务异常

    本文为PMCAFF作者 iamxiarui 于社区发布 由于疫情影响,在延长的假期中抽空回顾了近一年多来的产品工作.收获之于发现了一个比较明显且出现率很高的问题:产品部署上线后,经常会出现未曾预见但又 ...

  4. 【干货】实用案例|产品设计中的恰到好处

    之前写过一篇文章<像做发布会那样做产品>,文中主要写通过有意利用产品中的魅力需求来提高用户满意度,达到口碑宣传的效果.而今天写的文章与之类似,主要来写产品设计中的通过对用户使用场景的理解, ...

  5. 动效设计中的隐喻-2

    这次我们再看一些别的有关隐喻(或曰明示)的设计. 示意关系 所谓示意关系,就是通过特定的动作来表明界面中控件之间的某些关系,包括包含关系.前后关系和位置关系.其实就是我们以前讨论过的连接的一种.有一些 ...

  6. 视觉感知_产品设计中的视觉感知

    视觉感知 The role of the UX designer has evolved immensely over time, but at its core, it remains the sa ...

  7. qq空间网页设计_网页设计中负空间的有效利用

    qq空间网页设计 Written by Alan Smith 由艾伦·史密斯 ( Alan Smith)撰写 Negative space is a key design element that y ...

  8. 信息设计中的“父子关系”

    交互设计工作核心在于信息架构和交互细节设计.信息架构包括信息分类以及信息展示逻辑设计:交互细节则多表现为控件的选择,交互效果的定义等.在信息设计中,遇到最棘手的问题就是信息量太多而显得设计结果不尽人意 ...

  9. android recycleview长按多选_UI设计中Android和IOS设计差异总结

    由于设计师.产品经理使用的移动设备大部分是iPhone,所以在做设计时,容易忽略Android和iOS的差异,按照iOS的规范进行设计,两端只做一套. 只做一套的会存在两个问题: 1.安卓用户的使用习 ...

  10. 15个著名的设计心理学原理以及在设计中的应用

    你是否有在听别人说某某原理法则时一脸懵B的时候?明明知道这个原理却说不出它的名字?不要紧,本文就来介绍与人机交互设计相关的15个常见的设计心理学原理,帮助你了解产品的定位,需求目的和交互逻辑,洞悉用户 ...

最新文章

  1. [翻译]Scott Mitchell 的ASP.NET 2.0数据教程之十三:在DetailsView控件中使用TemplateField...
  2. contOS crontab 定时执行python脚本
  3. 如何基于Dataphin实现敏感数据保护
  4. Kafka集群安装Version1.0.1(自带Zookeeper)
  5. Redis存储结构体信息,选hash还是string?
  6. 汇编3-返回以及优化
  7. Pyotorch自定义损失函数
  8. linux shutdown 命令
  9. Fiddler Everywhere 3.2.1 Crack
  10. css美化table的方法
  11. Ubuntu20.04 vscode + opencv4教程(2021.10.27完成)
  12. 基于GDAL库读取GRD数据文件的C++代码
  13. mybatis删除成功返回0_【出租/转租】2020.08.08亦庄周边信息汇总。增1个,删0个。(转租成功后私信我删除你的信息)...
  14. 2020 CM-BERT: Cross-Modal BERT for Text-Audio Sentiment Analysis
  15. STM32之ADC的理解及运用
  16. SpringBoot 在main或者普通类中条用service接口
  17. N-ary 题型总结
  18. python egg_Python的egg包
  19. Android手机QQ的UI自动化实践,音视频服务器开发难点
  20. Xilinx-7系列 CLB逻辑资源

热门文章

  1. 第11周阅读程序(5-1)
  2. 知识图谱 | (5) 实体链接综述
  3. uniapp若依移动端如何去除左上角返回按钮
  4. authorization server client resource 使用1
  5. socket聊天室java_java socket实现聊天室 java实现多人聊天功能
  6. 论文阅读《RAFT-Stereo: Multilevel Recurrent Field Transforms for Stereo Matching》
  7. 问题复盘:Kibana did not load properly. Check the server output for more information
  8. 支持对接鸿蒙系统的无线模块及其常见应用介绍
  9. SketchUp模型组件【iMod · 精选241 —— 北欧卧室SU模型】
  10. 印出生活小确幸丨极印·立可印N1新品体验会在京举办