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

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


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

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

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

相关推荐

  • [学生看过来]国外的大学交互设计学科的专业与相关分析!

    标签:交互设计专业 交互设计5个重要组成部分 Five Dimensions of Interaction Design。 交互设计Interaction Design 缩写为:IxD,也可以理解成Human-Computer Interaction 人与机器互动设计,旨在通过设计让电子…

    交互设计 2015-01-26
  • 动态与富态

    一、动态:动画表达的设计应用 ”动态“的设计常常能使页面的呈现更加动感,有活力,富有吸引力。具体来说,”动态”的设计在产品应用中常用于以下几种情形: 1.1. 丰富内涵 先试试为这段产品介绍做设计: Dropbox可让…

    2015-10-08
  • 【交互设计留学】作品集是怎么样的?

      美国交互专业作品集侧重点是一个方向很多的专业,如果学生偏重界面、视觉、解决方案方向,那么作品集要注重调研,以及数据分析,数据展示、解决方案等内容。如果学生是侧重多媒体,交互装置方向,那么作品集要…

    交互设计 2016-05-08
  • iOS 9 GUI PSD源文件下载&iOS 9 GUI Sketch 格式下载 (iPhone)

    iOS的9 GUI(iPhone) 在iOS中9的公开发行中GUI元素的Photoshop和Sketch模板。 [button type="success" text="PSD 格式下载" url="https://s3-us-west-1.amazonaws.com/facebookdesignresources/Facebook-iOS-9-Pho…

    2015-11-12
  • 怎么理解信息架构,什么是信息架构?

      之前一直有朋友(初学者)问我什么是信息架构,什么是流程图等等,一直没有很好的答案回答对方。后来举例以下的例子,她说终于明白大概是什么意思了,在这里将回答分享给大家(或许可以帮助妹子们更好的理解…

    2015-11-18
  • 无限滚屏、分页亦或加载更多,到底怎么选?【UXRen译#139】

    作者:Christian Holst(翻译:xiuxiu  审校:Gogi) 电商网站里展示商品的最佳交互形式是什么?是分页、“加载更多”按钮还是无限滚屏?我们在Baymard机构开展了几项持续整年的大规模可用性测试,研究了50多家主流电…

    2017-08-04
  • 智能场景设计:深入场景和意图的体验设计

    “hey各位!我们要开始做一件重要的事了!”陈老湿已经走到我们的工位前,兴致昂扬地说道,“竞对已经上线了类似的功能,我们得抓紧了。上海那边出了方案,看,在这里!”

    2017-05-23
  • 交互式网站UI设计指南

      Web开发社区有着大量的交互式设计轻松解决方案。虽然现在大多数网站都能够做到交互性了,但是我们需要不断向前、创新。我们很容易将注意力集中到编码方面,但是有时候不同屏幕尺寸的实际设计考虑却往往被忽视。 …

    2014-12-23
  • 表单设计:一页只做一件事

    一页只做一件事,并不是一定要在一个页面上只展示单一的元素或组件(虽然也可以这么做)。

    回想一下你第一次看到复杂代数式时的情景。这整个就是一团混乱的未知符号。但是当你将它分解,独立成各个部分,答案便水落石出。

    2017-04-29
  • 【专访】全美交互设计No.1:卡内基梅隆的实验性字体设计课程

    卡内基梅隆设计学院美国最Top交互设计专业辛向阳老师毕业于此此学校的毕业生大多会输出到硅谷顶级的互联网公司:google\facebook等今期为大家推荐一位学生的学习心得周于阡Bettina Chou过去4年在卡内基梅隆大学,给了我许多机会学习各种各样的设计,不管是UX/UI, 传媒设计或课外作品,我都希望作品能给观众带来欢乐。我认为任何经验都能发出灵感,所以总是在吸收新东西。现在我正在:念村上春树写的 “Absolutely On ...

    2018-03-28