阅读 146

移动端反馈样式

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

反馈的形式

一、气泡状提示

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

二、弹出框

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

三、按钮,图标,链接的按下状态

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

四、声音和振动

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

五、动画

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

六、页面

页面提示是指用系统的整个单独页面来对用户进行提示,通常包含图标、提示内容、处理方法等,出现最多的就是用户在相应功能页没有数据及连接不到网络时,一般还会加上功能按钮,通过该按钮,可引导用户解决当前页面出现的问题。

七、标签

多用于错误提示,告之用户哪些地方出现错误,该如何解决;很多标签会在用户重新聚焦选框时消失,但对于要求过多,用户无法一时记住的情况,相比于用户出错时的标签提示,在用户出错前就明确好要求会更好。

反馈的内容

  • 传达信息:反馈提示所带的文字信息应该简洁易懂,适当的使用图标可以吸引用户的注意,帮助用户判断提示的类型。 向用户传达系统升级、推荐、广告等信息,如点开豆瓣,提示你今天的内容已经为你准备好了;如最新版本增加了啥啥啥牛逼功能,问你要不要升级;如 提示你,我们要搞个大活动啦,你上去可以领取啥啥啥福利之类的等等。 传达信息的频次要适当,特别是一些非必要信息,否则容易引起用户反感。
  • 警告:警告框用于向用户展示对使用程序有重要影响的信息。 提示当前的用户操作将造成重大影响,如购买某理财产品有风险确定购买?删除这个APP将删除它保存的所有数据确定删除?关闭定位功能将不能准确为您服务等都属于警告提示,相较于确定提示,警告提示更多的突出当前操作将会造成的影响,一般包括标题(操作描述)、内容(操作将会造成的影响)、选择按钮。 因此,警告提示最好为疑问语气(最终还是要看场景的),且影响描述要简单直接,避免引起用户误解,按钮也要清晰明白,避免“是否”等说法。
  • 错误:错误是提示用户操作出现了问题或异常,无法继续执行。错误提示告知用户为什么操作被中断,以及出现了什么错误。错误信息要尽量准确,通俗易懂,有效的错误提示要解释发生的原因,并提供解决方案以使用户能够进行修复。 错误也是反馈提示中出现较多的一种,主要是提示用户的操作有什么问题,可以怎样解决。如提示你连接不到网络,你该怎么检查网络;如提示你填写的这个密码不对,我们要求的是8~16个字符的;如提示你余额不足以支付,要不要换卡支付等等。 对于错误提示,APP 和 网页存在较多区别,如APP 更多用弹窗提示错误,而网页更多用标签提示错误。大家需注意,这里就不多说了。
  • 确认:确认是用于询问用户是否要继续某个操作,让用户进一步对所做的操作进行确定和执行,为用户提供可反悔,可撤销的退路。让用户对一些执行结果较危险或不可逆的操作进行二次选择和确认,防止用户误操作。 确认是反馈提示当中出现频次最高的内容之一,包括让用户确定系统是否可获取一些用户权限,用户的当前操作是否是自己本意,用户选择分享等。

反馈出现的位置

反馈主要出现在“状态栏”,“导航栏”,内容区上方,屏幕中,标签栏上方和页面底部。

下反馈设计的规则

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

如何避免不必要的提示?

防错在先,容错在后,所以要避免不必要的提示,就要尽量少犯错,如果还是犯错了,那就通过优化,来提高用户解决问题的能力及解决问题过程中的体验。
1、输入提示 除了在选框附近提示,也可直接在选框中对用户进行提示,以防一进入页面就专心只填选框的人。
2、自动完成 一方面减少用户操作,另一方面减少用户输入错误,通过选择更快更好的确定目标。
3、根据舒适度安排控件位置 总有些手残党不小心点到按钮,导致不小心给人发信息呀,不小心删除了某文件呀,不小心点错进视频之类的,所以为了解决这类问题,最好把一些不重要或使用频次低的按钮,放在人手不方便操作的地方,PC网页一般放在边角,手机则放在如下的红色区域(据研究显示,49%的人单手操作手机,而单手操作手机时,有三个大的操作区域:方便操作到的,不是很方便操作到的,难操作到的,而红色区域就为难操作到的区域)。

4、只能选择可选项 总有人会在输入数字的界面会输入字母,也有人会在选择旅行时间时选择到已过去的时间,针对这些,在设计时应尽量引导用户选择可选项,过去的日期就勾选不上,在输入数字密码时只显示数字键盘等。
5、屏幕展架 屏幕展架是优化提示的一种方式,它指在展示页面时,如遇到网络不畅或加载缓慢等问题时,依次展现内容,而不是等到内容全部全部加载完才显示。这种方式能让用户知道系统是在运作的,减少用户焦虑。
6、简化提示 只提供重要信息是我们的宗旨,至于对不起呀,我们因为系统刚才崩了下导致啥啥啥了,需要你重新刷新一下啥啥啥的一堆废话,用户是不想知道也不需要知道的,我们只提供核心问题,影响及简短的解决方案。
7、优化操作步骤 减少不必要的操作从而减少提示也是一种优化提示的方式,如支付宝之前在支付时需要再点击确认付款,现在只要输入密码或指纹之后就直接支付了,减少了操作步骤的同时也减少了与用户的交互提示。
8、避免频繁,只在必要情况下出现 现在很多APP会频繁的推送通知或在用户进入界面后不断提示,很大程度上造成用户厌烦,所以尽量避免频繁给不必要的提示,对于部分有必要提示,还可告知用户在哪里可以关闭提示或当前窗口就可选择不再提示。
9、提示明确 明确的提示可让用户清晰的知道当前操作的结果,让用户按照自己需求选择合理选项,减少错误操作后造成的不良影响。

小结

反馈提示是产品设计中的重要一环,但切记不要滥用,不要复杂化,最好从场景中来到场景中去,根据不同场景选择适合的提示方式,当然也要遵守不同设计的规范。
不过规范是官方给的,我们是要活用的,就像在 iOS 里面是没 toast 提示,有HUD 提示,但两个是极其相似的,只是叫法不同而已,所以有时不同设计的规范之间互用也并不是不行的,只是要考虑到场景及系统适应性等等问题,总之我们的大目标是优化用户体验,提高产品转化率,只要能达到目的,借用下其他合理规范又有何不可呢。