关于提示框的那些事儿

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
3198 3 25 2018-11-15


在日常工作中我们经常会看到各种类型的提示框,在官方的规范里,它们都有各自的叫法以及用法,什么场景下用什么样的提示框,也早已有了定义。只是有些提示框类型极其相似,难免有人会在工作中将其归错类别。长此以往,反而会忘记它原本的样子。


一、提示框的作用


在细分提示框的种类之前,我想先说一下它的作用,提示框作为一个界面中的一个必不可少的组件,肯定是有它存在的独特的意义,独一无二,无法取代。提示框主要的作用有三个:


提醒用户

在用户操作时,给予提醒,特别是一些操作会影响到用户的利益的时候,去提醒他们,做二次确认,减少因为误操作而带来的损失。


选择权

进行重要的操作,比如删除所有订单,且删除后不可复原等时,把选择权给用户自己,让他们自己决定当前的操作是否进行下去。


知情权

告知用户当前所发生的事情,让他们对当前状态有一个预估,知道发生什么事情,有知情权。


二、 提示框的种类 


提示框的种类按照不同的纬度划分的话,特别多。所以我以一个最简单的纬度,模态和非模态,模态框指的是,当它出现的时候,用户必须对其进行操作,确定或者取消,才能关闭它,进行下一步。而非模态框则指的是不需要用户进行操作,它自己会在设定的时间内,自动消失,用户只能等待它自己默默的消失。


 1. 模态对话框 —— Dialogs

关于Dialogs,Material Design 是这样说的:“Dialogs (提示框)用于提示用户作一些决定,或者是完成某个任务时需要的一些其它额外的信息。 Dialog可以是用一种 取消/确定 的简单应答模式,也可以是自定义布局的复杂模式,比如说一些文本设置或者是文本输入 ”。


简单来说,就是 Dialog 主要是去提示用户当前页面需要去做选择,而用户必须对提示框的内容进行响应,才能进行其他的操作。

Image title


Dialog 一般包含标题、内容区域、操作区域

Image title


操作区域一般是有两个功能按钮,通常是一个肯定的事件和否定(与肯定的事件对立)的按钮组成。一般积极的、肯定的、或者说产品希望用户做的选择,会放在右边。肯定的事件也可以是具有破坏性的,比如“删除、放弃”等。


肯定事件和否定事件除了可以使用"确认"/"取消"外,也可以是其它一些动词或者是动词短语来代替,比如“升级、点错了”等。

Image title


延展 —— 自定义提示框

当然也有只包含一个功能按钮的情况,这个时候需要注意的是弹出的消息是否重要到非要用户点击确认,如果是,那就用 Dialog,如下图微信,就是默认的只有一个功能按钮的 Dialog,如果不是,可以考虑用其他的,比如 Toast。

Image title


由于 Dialog 的强制要求用户进行操作,多少会让用户在体验上有所不适,所以就在 Dialog 的基础上延展出了其他的样式。这种提示框和也有操作按钮,它和 Dialog 最大的区别就是点击操作按钮,或者提示框外的任何位置,都可以关闭该提示框,降低了关闭提示框的难度。但它不算严格意义上的 Dialog。


现在比较多的用在自定义的提示框上,比如一些运营活动之类的,自定义的提示框能更好的传达内容,从而吸引用户点击。

Image title


特殊情况

如果 Dialog 出现三个或以上的功能框,会增加用户的选择负担,而且横向显示的话在视觉上也显得拥挤,所以就有了一个由 Dialog 延伸出来的 Actionbar,它比 Dialog 拥有更多的功能按钮,能够给用户提供更多的功能选择。

Image title


Acionbar 一般都有一个默认的“取消”功能按钮,当然也可以没有,点击该按钮后关闭弹框,用户点击弹窗以外的区域时相当于点击了“取消”按钮,也会关闭弹框。


当功能按钮数量过多时,文字列表的形式不适合展示,可以用图形加文字的形式来展示。

Image title


 2. 非模态对话框 —— Snackbar

关于Snackbar Material Design是这样说的:“Snackbar 是一种针对操作的轻量级反馈机制,常以一个小的弹出框的形式,出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方,包括浮动操作按钮。


它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时,不会阻碍用户在屏幕上的输入,并且也不支持输入。屏幕上同时最多只能显示一个 Snackbar”。


简单来说 Snackbar 是介于 Dialog 和 Toast 两者之间的一种轻量级反馈机制,以文本形式存在,可以包含0-1个操作,不能是取消按钮 。

Image title


当只有文本形式出现的时候,形式和 Toast 一样,不需要用户进行操作,等默认时长结束后会自动消失;不过它比 Toast 多的一点是,用户可以在屏幕上滑动将它关闭。

需要注意的是 Snackbar 不应该持续存在或相互堆叠,也不要阻挡了浮动操作按钮。

Image title


 延展 —— 引导浮层

由于 Snackbar 太受限制,不能有图标,只能以文本形式存在。在现在的 APP 里用的越来越少,少到都找不到什么例子。而现实中又需要一种介于 Toast 和 Dialog 之间的一种轻量级的操作提示。所以就延伸出了另外一种样式,暂且将它归为“引导浮层”吧。

Image title


引导浮层和 Snackbar 最大的区别是,它可以有图标、图片,甚至还可以引导用户去新的页面,这也是它更有欢迎的原因所在。


 3. 非模态对话框 —— Toast

关于 Toast  Material Design 是这样说的:“Toast 同 Snackbar 非常相似,但是 Toast 并不包含操作也不能从屏幕上滑动关闭”。


简单来说 Toast 主要的作用是对用户当前的操作给予反馈,用户不需要对弹框的内容进行响应,相对的也无法对它们做出控制,只能等它设置的默认时长结束,自动消失。它可以出现在页面的任何位置,可以是纯文本的,也可以是图形带文本的。

Image title


三、特别说明


提示框的作用是用来提示信息的,但不是所有的提示信息都需要用到提示框的,因为提示框怎么的都会 “打扰” 到用户的操作,所以能有别的解决方式的时候,优先考虑别的方式。


提示框存在的有一个原因就是在用户犯错之前及时制止他,所以如果有其他的方式能够在提示框出现之前就规避错误,优先使用。比如密码那一行有一个小眼睛的icon,点击之后显示密码,当用户认为自己没有输错密码,但却提醒密码错误时,多次尝试来找到错误所在不如直接点击显示密码的 icon 体验来的好。

Image title


再比如像支付宝的这种,把提示信息放置在按钮上,这样就避免提示框的出现打扰到用户的操作,而且放置在按钮上更加明显,也不会被用户忽略。

Image title


四、总结


 1. 提示框的三个作用

提醒用户,在他们犯错之前及时制止;

给用户选择权,让他们自己决定当前的操作是否进行;

告知用户当前所发生的事情,让他们对当前状态有一个预估,知道发生什么事情,有知情权;


 2. 提示框的类型以及区别

Dialog —— 模态对话框,需要用户对当前内容进行操作,不会自动消失,会打断用户的之前的操作流程;

Snackbar——非模态对话框,用户可以对当前内容进行操作,也可以等它自动消失,不会打断用户的当前操作;

Toast —— 非模态对话框,用户无法对当前内容进行操作,只能等它自动消失;


 3. 不要滥用提示框

提示框出现的时候怎么都会打扰到用户的当前操作,所以能有别的方法时候,优先使用其他的提示方式;


 4.视觉统一

同一个 APP 内的不同提示框需要在视觉上保持统一,要有章法可循。



参考链接:

https://wiki.jikexueyuan.com/project/material-design/components/snackbars-and-toasts.html Snackbars 与 Toasts


https://wiki.jikexueyuan.com/project/material-design/components/dialogs.html 提示框(Dialogs)



Powered by Froala Editor

全部评论:3

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票