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

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


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

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

前段时间看到一个有趣的例子,这是某个应用中添加银行卡的页面。伴随着用户的输入,系统会自动判断银行卡的类型,银行卡的默认图标会变为正在输入的卡号对应的卡片类型。这种方式帮助用户省掉了一个选择卡片类型的步骤。另外,当用户正确的完成了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

相关推荐

  • seeds对话未来丨“用户交互设计天才”Kaveh Shirdel

    对话未来丨seeds系列分享会seeds, 由蔚来原创打造,是一个分享有趣观点、新知与灵感的讲堂,它寓意着每一个思想的火花都像一颗种子,被灵感浇灌后,汇成大树。2015年3月seeds诞生,从一个面向蔚来全球员工的内部讲演平台,发展到不断吸引各行各业的主讲人,并且在蔚来App公开直播的产品。到目前为止,seeds 已举办了13场演讲。今年,seeds会走进我们各个城市的蔚来中心,成为常设活动。我们也欢迎各位用户成为seeds的主讲人。人...

    2018-04-29
  • 「抖音」用户体验分析

    和大部分人想的不一样,我是抖音和快手的忠实用户,每天都会在上面花不少时间。在玩抖音几个月后,我开始思考和分析这两款APP的设计和技术,发现其实其中充满了很多“精巧”的设置。抛开APP的针对群体和社会影响不谈,只想说作为一个普通用户的感受。抖音的交互设计是沉浸式的。在推荐页面,你每次只能看到一个视频,系统默认自动播放。因为没有给你反应时间,我们会不由自主的盯着屏幕看,而人的注意力很容易就被当前的视频(视觉和听觉)吸引。这样的交互好处是人的...

    2018-04-02
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16
  • 让你的设计拥有高转化率的配色知识简明指南

    互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩,构成的配色 方案令双眼觉得和谐。最常见的互补配色有两种,三元配色和复合配色,我们将稍后探讨。
    对比则可以将不同的元素区分开来,从而降低视觉疲劳,构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别,引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题,我们会随后聊到。
    色彩对于用户的情绪上的感染也是一个重要因素。

    较小的文本应当确保至少和背景之间有4.5:1的对比度比率
    较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1

    2017-05-22
  • 跟着电台动起来:如何设计跑步的垂直场景

    没想到吧,你竟然可以通过企鹅FM来跑步?为什么在电台App要深度挖掘一个运动场景,交互设计师又是如何将痛点和需求转化为市场蓝海,在设计的过程中怎样将场景垂直的特色表现出来······关于这些,我有一些想法与大家分享。

    2017-05-12
  • 超实用的格式塔原理小科普

    在界面排版,网页广告设计等视觉传达设计工作中,视觉上的画面琐碎,零散,信息混乱无序总是视觉设计师无可避免的问题。

    2017-06-02
  • Fitbit:一份用户体验案例研究

    当谈论到锻炼时,这个世界上有三类人:每时每刻都在健身的健康达人;那些一天中全部锻炼内容就是从前门走到车里,每天在沙发看电视的人们;在这两者之间,想变的健康强壮但缺少一些动力去健身房的人(又称在屁股上踢一脚才行动的人)。 我,和我知道的大多数人一样,都是第三种类型的人。我们被称为是

    微信热点 2018-03-31
  • 阿西JsutinMind日记 之 幻灯片自动播放与左右滑动

    新项目为了给客户演示高保真的移动设备交互原型,故采用JustinMind工具。 国内资料很少,好在阿西使用过多款交互设计工具,大体都差不多,摸索着前行吧。。。   1.认识一下JsutinMind里的,这个动态面板理论上…

    2015-03-23
  • 聊聊蒙版引导的应用场景以及设计建议

    蒙版引导一直是一个十分热门的话题,对于很多用户来讲经常会不彻底阅读甚至快速关闭来结束引导,这样便起不到很好的教育作用。甚至还有“在界面上添加这些并不会让你的产品变得更易用”的说法(观点引自文章“Misused mobile UX patterns”)。但我认为这种说法过于片面,对于一些流程复杂或者功能个性的产品应用,添加蒙版引导进行说明,是十分有必要的。

    2017-05-11
  • 【设计】UI设计、UE设计、交互设计分别是什么?

    这些概念在传统行业和传统工业中其实已经发展的很成熟,近几年随着互联网的发展又重新流行起来。UI即User Interface ,字面意思是用户界面,业界一般指的是界面视觉设计UE即User Experience,字面意思是用户体验,这个范围就很广了,不仅仅包含视觉与交互交互设计又称互动设计 ,是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。UE范围最大,他研究的对象是用户使用这个产品过程中所有的感受,比如听觉视觉触...

    2018-05-08