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

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


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

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

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

相关推荐

  • iOS 9人机界面指南(一):UI设计基础

    译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。

    2017-06-02
  • 2019交互设计考研普通长期班招生简章

    “应部分报考交互设计方向考生特殊需求,我们在保证搭建一个完整交互知识框架体系及备考专业课复习完整性标准下,特开设交互设计长期普通班课程。该课程更强调考生的“主动学习”能力。”招生简章开设课程:交互设计长期普通班(线上课程)课程时间:2018年5月中旬——2018年12月初试前(每周3课时)课时       :110课时(每课时1小时)费用      :7500元招生人数:线上课程16人(超数不招生)课程总框架:Part 1▪交互知识学习...

    2018-04-06
  • 50个国外设计机构网站设计欣赏

    Web设计灵感总是帮助我们走在新趋势, 设计结构、颜色和总体设计过程。有很多灵感的网站列出的主题就是我想要这一个是不同的。所以在这个今天的帖子我收集了50个国外设计机构网站设计欣赏,为你找设计的灵感。

    2017-06-03
  • 交互设计师的60日计划之第五天

    你好,8月。7月份的尾巴喜欢上一个人,花了太多心思,8月份一来终于知道不会有结果,所以要赶紧忘记,把心思花回自己身上。 2015/08/01 职场其实很可怕 今天一整天都去帮同事搬家了,虽然没干什么大的体力活,但是…

    交互专题 2015-08-20
  • 多功能福彩APP用户体验调查问卷

    近日,湖南省福彩中心在全省7100多个彩站安装使用“智慧福彩APP”。该APP具有申领热敏纸、报修设备故障、发布活动公告、发布开奖公告、发布消息通知等功能,并服务于彩站具有各站点详情、销售目标、巡检劝人、评价管理员、问卷调查、意见反馈的功能,从而实现“福彩中心”、“市场管理员”、“彩站站主”、“彩民”、“社会公众”五者间的互通互联。彩站或彩民们有任何意见建议或技术方面的问题,均可通过该APP上报省中心,为中心机构与站主、彩民之间搭建了桥...

    2018-04-24
  • All You Need To Know About Customer Journey Mapping

    “Stories have defined our world. They have been with us since the dawn of communication, from cave walls to the tall tales recounted around fires. They have continued to evolve, with their purpose re…

    2015-01-16
  • Axure网页Banner大集合、Banner模板、京东Banner...完整版rp源文件下载

    网页Banner大集合,banner模板、天猫banner、拉勾banner、严选banner...已发布在产品大牛http://www.pmdaniu.com/rp/detail/54529只需完成以下2个任务,即可免费拿到完整版RP源文件:1、打开上方链接地址:在该页面中点赞、下载、转存、好评;2、长按下方二维码,并关注“亮亮原型”微信公众号;最后:将完成的任务截图,发送至QQ邮箱:653390398@qq.com邮件标题请使用“网...

    2018-04-02
  • 交互设计面试经验分享

    交互设计面试经验分享 2016年7月12日 星期二 下午2:49 今天去面试,问的问题给大家看下,刚出来面试场所,就记得这些了。 1.你有没有做过一个你认为特别复杂的项目,包括后台结构,它复杂在哪? 2.如果需求一直变更…

    交互设计 2016-07-14
  • 交互设计七大定律之Occam's Razor 奥卡姆剃刀原理(简单有效原理)

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    交互设计 2015-08-27
  • 从零开始学交互:经验分享之基础阶段一

    【对用户体验设计的理解】 对于我个人而言,喜欢以咬文嚼字的方式去理解一个新的词语,这正是汉字的艺术所在。用户体验设计=用户体验+设计。一说到设计,很多人会联想到绘画、创意、各种漂亮的手稿。这是对艺术和设…