恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
移动互联网的设计模式-提示类
0.0°
2019-01-25 原创文章 经验/观点 举报 1798 7 2 0

友好的产品应该能够预估用户的行为及后果,在适当的时候给予相应的引导与提示,告诉用户操作的后果并给予及时的反馈。这次文章我们就来聊一聊那些用于提示的交互控件。

Image title

大家应该早已习惯了在执行“删除”任务时,进行二次确认的操作,这是计算机为了防止用户的误操作,给予用户的操作提示。友好的产品应该能够预估用户的行为及后果,在适当的时候给予相应的引导与提示,告诉用户操作的后果并给予及时的反馈。根据提示控件作用的不同,文章将移动互联网产品的提示控件主要分为三类:分别是对话框(Dialog)、吐司提示(Toast)、以及消息提示框(Notice Bar)。接下来我们就来认识并了解一下他们在交互过程中发挥的作用吧!



• 对话框(Dialog) •


对话框是一种模态形式的弹出框,用户必须完成相应的操作,弹框才会消失。


它虽然打断了用户的操作,但是在用户进行“危险”操作时,会提醒用户操作的严重性,并给出足够的反应时间,有效降低了用户误操作的频率;而且当用户的操作有误时,对话框的提示,使用户能够对目前的操作做出慎重的判断。


下图1是我们常见的进行删除操作的对话框,大部分情况下“删除”是个危险的动作,还记不记得我们在《移动互联网的设计模式——按钮》那篇文章中提到的“确定/取消”按钮的位置问题呢?在这里我们就有了明确的方向——提高用户“确定”的难度,防止误操作。这样我们就可以把“删除”放远点,使用户不方便点击,那么这个对话框的目的便达到了。图2是用户操作不当时,产品给出的建议提示,用来帮助用户可以更加顺利地实现产品的功能。还有一种情况会出现对话框形式的提示,那就是用户在进行比较重要的操作时,完成后产品会给出相应的反馈提示,并要求用户进行确认操作,这样可以使用户对自己的操作动作更确定。如下图3中,在用户取消订单后,点击“知道了”,确认自己操作的有效性。

Image title


以上三种情况下对话框的作用,其实都是围绕用户的操作给出的提示,我们可以称其为功能型的提示。还有一种对话框形式的提示,是产品以营销为目的的提示,我们可以称其为引导类的提示。比如你一定见过下图样式的对话框,它们不会自己消失,除非用户点击产品想要其点击的按钮或是关闭按钮,而关闭按钮的视觉重量又是如此弱,当你找到并点击“关闭”按钮时,心里是否还有些得意呢?是的,因为对话框的特点,用户必须要执行相应的操作才能将其关闭,当面对一些无用的信息时用户就会感到厌烦,甚至放弃使用产品。所以,作为引导提示的对话框最好不要滥用,除非你提示的信息对用户有用。

Image title



• 吐司提示(Toast) •


与对话框对应,Toast是一种非模态形式的弹出框,它不需要用户进行操作,也不会打断用户的操作,一般1/2秒后会自动消失,当产品无法给出直接反馈时,是一种轻量级的短时反馈提示。Toast的概念最早来源于Android的规范,但其实在Windows和iOS系统中也有相似的控件,只是名称不一样罢了。因为现在Toast的概念早已被泛化,所以在这里我们不纠结它的来源,而是着重介绍一下现在的Toast,以及现在的Toast在交互中所起的作用。


下图中红色线框标注的部分即为产品中的Toast,我们可以发现,Toast不再像Android或iOS的规范中描述的那样只出现在屏幕的底部和中间,更多的是出现在屏幕的顶部,目的是尽量减少对内容的遮挡,也有一些Toast出现在操作触发的相应位置,这样会使反馈更自然。甚至有些Toast隐藏了弹出框的形式,直接用文字向用户提供反馈。

Image title


列举了这么多Toast的形式,其实他们的作用都是在用户操作后,给予相应的反馈提示,使用户确认自己操作的有效性;然而Toast还有另外一种作用就是作为操作提示,来引导用户的行为。比如下图美柚APP中出现的弹出框,它也属于Toast,不过它的作用不是反馈,而是一种操作提示,引导用户的使用。

Image title


再比如我们在预定酒店选择日期时出现的Toast,也是为了引导用户下一步的操作而设置的。随着用户体验的观念一步步深入人心,Toast不再是之前的黑色弹框加文字的单一形式,而是越来越多地加入情感化元素,使人眼前一亮。比如微博中点赞后的反馈提示,以及美柚中的情感化提示。



• 消息提示框(Notice Bar) •


消息提示框是产品在关闭状态,或是后台运行状态下,向用户主动推送的信息弹出框。根据产品的属性不同,推送内容也会发生变化,比如微信弹出的消息提示框,主要是聊天消息的提示,而淘宝或京东等电商类的产品弹出的消息提示框则多是一些商家的营销信息。


对于我们经常使用的产品来说,打开消息通知,会方便我们及时处理有用的信息;而对于我们不常使用的产品,消息提示框则可以唤醒用户,提高用户的使用频率。那么问题来了,你手机中的应用有多少是允许消息通知的呢?而你在下载一个新的应用时,面对是否允许消息通知这个问题,你习惯的选择又是什么呢?某产品的消息提示框是唤醒了你,还是惹怒了你呢?我们来看一个例子,微博是我经常使用的APP,但是我是不允许它通知的,因为打开它的通知后是这样的(如下图)。

Image title


在一个小时的时间里,微博推送了5条消息,因为我是有点轻度强迫症的人,所以我选择关掉它。那对于习惯打开应用通知的人来说,我想这样的消息密度,用户也会麻木了吧,所以消息提示框就失去了它的存在意义。而且消息提示框是伴随声音的,这像不像一个踩雷的过程,一旦你碰到用户哪天心情不好,就会直接选择卸载。


所以,消息提示框更是一个不能滥用的提示控件。设计师可以通过后台数据分析将用户分类,推送用户感兴趣或是对用户真正有用的东西;并且降低推送频率,让消息提示框发挥它应有的提示价值,而不是让用户产生厌烦,放弃对产品的使用。



• 结语 •


提示控件原本是出于为用户考虑的目的而设置的,但是有的提示却使用户麻木,甚至产生厌烦的情绪。所以,我们在使用提示控件时,一定要谨慎,不要将友好的提示,变成一个干扰用户的雷区,希望以上的内容会对你有所帮助。

更新:2019-01-25

收藏

7人已收藏

  • 25

    作品

  • 172

    粉丝

  • 0

    关注

  • 世界水日,那些让人眼前一亮的公益广告
  • 盘点那些令人绝望的设计
  • 浅谈简约交互设计四策略
  • 2019网页设计趋势了解一下?

    猜你喜欢

      2019-01-25 原创文章 经验/观点 举报 1798 7 2 0

      移动互联网的设计模式-提示类

      0.0°

      你确定要举报移动互联网的设计模式-提示类

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年01月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      7
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录