app及网页中对话框的使用

发布时间:2019-01-02

一、提示框的作用

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

1. 提醒用户

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

2. 选择权

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

3. 知情权

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

二、提示框的种类

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

1. 模态对话框 —— Dialogs

关于Dialogs“Dialogs (提示框)用于提示用户作一些决定,或者是完成某个任务时需要的一些其它额外的信息。 Dialog可以是用一种 取消/确定 的简单应答模式,也可以是自定义布局的复杂模式,比如说一些文本设置或者是文本输入 ”。 Dialog 主要是去提示用户当前页面需要去做选择,而用户必须对提示框的内容进行响应,才能进行其他的操作。Dialog 一般包含标题、内容区域、操作区域操作区域一般是有两个功能按钮,通常是一个肯定的事件和否定(与肯定的事件对立)的按钮组成。一般积极的、肯定的、或者说产品希望用户做的选择,会放在右边。肯定的事件也可以是具有破坏性的,比如“删除、放弃”等。

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

延展 —— 自定义提示框

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

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

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

特殊情况

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

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

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

2. 非模态对话框 —— Snackbar

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

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

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

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

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

延展 —— 引导浮层

由于 Snackbar 太受限制,不能有图标,只能以文本形式存在。在现在的 APP 里用的越来越少,少到都找不到什么例子。而现实中又需要一种介于 Toast 和 Dialog 之间的一种轻量级的操作提示。所以就延伸出了另外一种样式,暂且将它归为“引导浮层”吧。 引导浮层和 Snackbar 最大的区别是,它可以有图标、图片,甚至还可以引导用户去新的页面,这也是它更有欢迎的原因所在。

3. 非模态对话框 —— Toast

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

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

三、特别说明

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

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

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

四、总结

1. 提示框的三个作用

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

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

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

2. 提示框类型以及区别

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

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

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

3. 不要滥用提示框

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

4.视觉统一

同一个 APP 内的不同提示框需要在视觉上保持统一