反馈设计的七种形式,有助于向用户传递信息

反馈是交互设计中最前线的一环,它的好坏直接影响产品体验。


反馈是交互设计中最前线的一环,它的好坏直接影响产品体验。

反馈设计的七种形式,有助于向用户传递信息

前段时间看到一个有趣的例子,这是某个应用中添加银行卡的页面。伴随着用户的输入,系统会自动判断银行卡的类型,银行卡的默认图标会变为正在输入的卡号对应的卡片类型。这种方式帮助用户省掉了一个选择卡片类型的步骤。另外,当用户正确的完成了16位卡号的填写,文本框会自动改变显示模式,之前输入的卡号只会显示出最后的4位,节省出的3个字段就分配给了有效期、CVV码和邮编。这里有一个很棒的细节,当用户在输入CVV码时,左侧的图标会发生变化(如图1),提示用户所谓的CVV码就是卡片背后的3位数字,非常贴心。这是一种很积极的信息回馈方式,让用户能够感受到系统对他们的操作产生了响应。

反馈设计的七种形式,有助于向用户传递信息

(图1)

这个例子只是“反馈”的一种形式,无论哪种形式的反馈都是在向用户传递信息。能告诉用户当前的状态,下一步该做什么,帮助用户做出判断和决定。这里整理了一些更多的反馈形式。

第一种:气泡状提示

气泡状提示通常是短暂出现在画面上的,就像气泡一样过一会就会自己消失,并不需要对它进行任何操作。这种提示通常用于告知人物状态和操作结果。例如:发送成功,加载中,已删除等。不过由于气泡提示的特性,它容易被用户忽略,所以并不适合承载太多文字或重要信息。

反馈设计的七种形式,有助于向用户传递信息

(图2)

第二种:弹出框

弹出框一般会带有一两句说明文字和两个操作按钮,用于确认和取消重要的操作。例如:是否删除内容?是否要在无wifi的情况下看视频等。通常会用颜色突出显示可能造成用户损失的操作项,如:删除,不保存等。弹出框出现的时候会强迫用户进行操作并屏蔽背景的所有内容,算是对用户打扰最大的一种提示。通常用户都想赶快关掉弹出框以便接着进行操作,所以弹出框上的说明和按钮上的文字最好言简意赅,一目了然,能够帮助用户快速作出决策。作为设计师,我们要避免滥用弹出框提示,不太重要但又需要反馈的事就默默飘个气泡好了,以免用户常常被惊吓。

反馈设计的七种形式,有助于向用户传递信息

(图3)

第四种:按钮,图标,链接的按下状态

这类反馈是基于人在现实世界的经验。在现实中按一个按钮,它会立即有按下状态,例如陷进平面中或变色发光。在无触感的2d的屏幕上,更应该有状态的改变,让用户看到他的操作已经被界面接收到了。iOS安卓系统平台上的开关控件就是一个例子。它模拟了现实中的开关,在拨动的过程中非常直观地给用户反馈并告诉用户当前所处的状态。iOS系统中的手电筒,打开的时候是高亮状态,告知用户它已经被打开了。

反馈设计的七种形式,有助于向用户传递信息

(图4)

第五种:声音和振动

声音能在一定程度上给用户提供有用的反馈。比如虚拟键盘在按下时的咔哒声,短信成功发送后的嗖声,微信摇一摇手机之后的咔嚓声。不过声音反馈属于点睛之比,而且受环境影响,如果过多地使用会变成一种打扰。震动是一种比较强烈的触觉反馈,可以用来代替或加强声音提示。在手机系统中应用的非常广泛:如来电,短信等。在第三方应用上很少用到,除非是游戏里面挂掉时会震你一下,可见震动还是过于猛烈了。

反馈设计的七种形式,有助于向用户传递信息

(图5)

第六种:动画

动画会给用户提供有意义的反馈,帮助用户直观地了解到操作的结果。提升使用时的愉悦感。比如拟物动画,这种形象的动画帮助用户清晰地感受到操作执行的整个过程,并且增添了乐趣。例如在执行删除操作时,被删除的东西一下碎掉;还有一些会持续比较久的操作(如下载或删除大量文件),用动态的进度条展示已完成的进度,能够减少用户的焦虑;还有一些有趣的下拉刷新动画,不但反馈了下拉刷新的过程,还让加载的等待变的有趣。也有些动画通过形变来暗示用户状态的改变(如图6),点击“按钮形状”开关后,返回按钮的形状发生了改变。

反馈设计的七种形式,有助于向用户传递信息

(图6)

第七种:情感化设计

在mac系统中有一些很好的例子。例如,当用户在“系统偏好设置”中进行搜索时,与搜索关键词相关的项目会高亮显示,相关度越高,高亮聚焦的亮度越高配置了触屏鼠标和没用配置触屏鼠标的”Finder”窗口也不尽相同,前者没有后者的拖动滚动条。(图7)

反馈设计的七种形式,有助于向用户传递信息

(图7)

上面讲到了反馈的形式,下面我们来整理一下反馈的内容:

  1. 信息:反馈提示所带的文字信息应该简洁易懂,适当的使用图标可以吸引用户的注意,帮助用户判断提示的类型。
  2. 警告:警告框用于向用户展示对使用程序有重要影响的信息。
  3. 错误:错误是提示用户操作出现了问题或异常,无法继续执行。错误提示告知用户为什么操作被中断,以及出现了什么错误。错误信息要尽量准确,通俗易懂,有效的错误提示要解释发生的原因,并提供解决方案以使用户能够进行修复。
  4. 确认:确认是用于询问用户是否要继续某个操作,让用户进一步对所做的操作进行确定和执行,为用户提供可反悔,可撤销的退路。让用户对一些执行结果较危险或不可逆的操作进行二次选择和确认,防止用户误操作。

接下来说一下反馈出现的位置。反馈主要出现在“状态栏”,“导航栏”,内容区上方,屏幕中,标签栏上方和页面底部。

最后简单总结一下反馈设计的规则:

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

反馈是交互设计中最前线的一环,它的好坏直接影响产品体验。实际设计中,由于项目时间紧张,往往没有给这块应有的关注,特写此文时刻提醒自己。

 

作者: 微微风

来源:微信公众号【ME网易移动设计】

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22931/

(0)
CatherineCatherine
上一篇 2017-05-03 10:10
下一篇 2017-05-03 12:24

相关推荐

  • 2018年用户体验设计趋势

    作者| Anthony Miller译者| 耳洞审校| 郑几块编辑| Ella全文共 5963 字 31 图,阅读需要 14 分钟———— / BEGIN / ————2017年就要过去了,让我们预测一下2018年的用户体验演变趋势。本文将回顾2017年数字世界中的显著变化,并将展望2018年在设计和开发领域让我们继续保持领先的那些趋势。一、更简单的导航导航体验是2017年设计师中的热门话题。设计师殚精竭虑,拿出熬秃少年头的精神,就是为...

    2018-02-02
  • 4款视频app交互设计浅析

    作者对腾讯视频、爱奇艺、搜狐视频和芒果TV进行界面的整体对比,希望能给各位带来一些收获和启发。

    2017-05-10
  • 译文|一个好故事在用户体验设计中的力量

    “细心的观众/听众会很有可能会与这个故事中的人物的情感产生共鸣,并在故事结束后模仿这些人物的感情和行为。这也就解释了为什么你看了詹姆斯邦德拯救世界之后而产生的支配感觉,看了斯巴达300勇士之后就有了外出工作打算。”
    ——保罗J.扎克,经济学家“故事是激活部分大脑的唯一的方式,使听者把经验变成他们自己的东西
    一个单一的故事可以让我们的整个大脑工作。比较这个层级的参与,只阅读要点或无关的文本只能让我们大脑的某些区域工作。然后我们很快就忘记了这些信息,因为对于这些信息来说,我们没能联系到我们自己的经验,也没有积累任何情绪的连接”“精心设计的东西也不足以单独取得成功。整个生态系统及其相关交互点也必须如同产品本身一般被设计过,这也是可持续设计的要求”
    ——罗伯特布鲁纳,Ammunition Group创始人“许多商家其实已经发现在实际意义上讲故事的力量,他们已经观察到了一个精心构造的叙事是可以多么的令人信服。并且最近的科学研究也很好的阐释故事是如何在某些方面影响我们的态度、信念和行为。”

    2017-05-29
  • 移动视觉与交互设计10项法则自查表

    转自:设计夹(ID:sezign)英文:medium译者:孙怡娜Photo by Medium近年来,移动手机风靡全球。用户们也已经习惯依照一定的法则在移动端获取信息。在这个微渺的事物就可以定胜负的世里,开发者们需要去了解并迎合…

    2017-08-01
  • 2016年最值得关注的16个网页设计趋势

    设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流。作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都…

    2015-12-23
  • 阿里巴巴技术架构首次曝光 | 站在双11的肩膀上看阿里云企业级互联网架构

    2015天猫双11全球狂欢节以912.17亿元的答卷完美收官。 双11当天14万笔/秒的交易创建峰值和8.6万笔/秒的支付峰值双双刷新了世界纪录,相比首届双11,订单创建峰值增长了350倍,支付峰值增长了430倍。 天量数字的背后…

    2015-11-18
  • 用Axure水平菜单做导航菜单原型

    哈喽,"梯子"们好,这么多天都没有更新过Axure的教程了,理由如果是"沉迷吃鸡,无心做教程"未免也太勉强了,额......这个理由好像并不勉强啊,其实就是休息了一段时间。 好了,下面就来介绍一下这几天收集的比较多的"A技",额......Axure的技巧在浏览网页的时候,我们会经常性的点击或者鼠标悬停在"总有一款适合你"的顶部选项,这个就是顶部导航菜单。有的"梯子"就直接从元件库中拖拽一个"矩形"或者"文本标签"直接使用,如下图:其实...

    2018-03-16
  • 交互设计 — 专业四大方向解读

    随着大众对设计概念的认知不断提升,互联网行业和智能科技的发展,以及社会创新、生态环境、跨界实验、用户体验发展问题的突出显现,交互设计专业已然成为了出国留学的热门选择。无论是否为设计背景出身,是否掌握了对应的技术软件,是否对交互的原理有明确的概念,是否在产品运营和商业分析的行业中有一定的工作经验,大众都觉得自己已经熟知了交互设计专业。但实际上,尽管检索了不少学校的官网,查看了交互设计以及跨界行业运用的专业介绍,浏览了知乎网站和各类信息资源...

    2018-03-19
  • 改善电商网站用户体验的6个技巧

    电子商务是一个复杂的系统,作为电子商务的典型模式之一,B2C网上零售网站要考虑的因素很多,甚至一些看似不起眼的因素都可能决定一个用户最终是否在该网站完成购物。 在消费者注意力越来越分散的今天。如果您希望潜在客户更多的停留在自己的网页上,进而产生购买行为,就需要牢牢吸引他们的注意力,并且提供简便愉快的购物体验。做到以下这6点,相信没有用户会拒绝从你的网站购买商品,甚至会带来更多的返购和忠实用户。1.提升网站的加载速度落地网页的速度通常是转...

    2018-05-08
  • 绘制用户体验

    在今年的UX Weeks大会上,Jim Kalbach组织了一场Mapping Experience的工作坊,提出在产品和服务之间关系日益密切的今天,如何形成一个服务生态系统,是商业竞争中的重点。其实阿里巴巴集团在早前就提出了“商业生态”这个概念,但是到底应该如何做?Jim提出:想要在竞争中胜出,其中非常重要的,就是必须清楚的了解自己提供的各种产品和服务是如何相互作用的,以及是怎样在用户的生活中发生影响的。

    2017-05-16