弹弹弹,弹出好多框框

我们有一个设计师吃货群,聚集了两岸三地海内外的华人吃货话唠设计师,设计师和吃货都是关键词。因为人员背景复杂,经常会出现常用名词都互相不了解的情况,曾经因为“意面”一个词热烈讨论了一个多小时,大抵结论就是台湾的意面并不像内地这样特指意大利面(当然也不是Pasta),是另外一种做法的鸡蛋面(虽然他们当地人也一直说不清2333)。光中文就搞成这样,英文就更不用说,之前群里聊起来 dialog 和 modal 到底哪里不同要怎么用的问题…虽然我觉得用弹出窗口、对话框、气泡提示之类的中文可能更好理解,但是群里很多人表示还是讲英语省得搞不清(虽然我觉得在这里中文反而讲得清…),所以我过来理理清~

Dialog(对话框)

很有年头的老大哥,windows最早的弹出式消息提示窗口就被称为“对话框”,现在 jQuery UI 还有 Android 里都还保留这个组件名称,在不同的文档里,对话框都有不同的功能定义(看了jQuery UI、,Android文档还有MSDN文档就给我出了4种说法…)。综合而论,对话框的主要的应用范畴是展示信息、请求确认或请求输入,也因此被分为无模式(modeless)和有模式(modal)两种,无模式就是所谓的弹出消息框,有模式则是指的带有交互操作、情景的,也就是所谓的模态框了。

dialog

上图从左到右分别来自jQueryUIandroid文档wikipedia

对话框的显示特点是非全屏可乱拖。这玩意儿会打断用户当前的操作进程,虽然通常用作重要确认使用,但是很多用户已经学会了习惯性忽略 ╮(╯_╰)╭ 这样不但起不到应有的效果,还有可能导致无法避免的危险操作(不过话又说回来,如果想要避免危险操作导致的风险,打断用户可能是最有效的方式?(配合声光电闪瞎眼的警告))。当然这种对话框也分为两种,一种是在完成当前交互之前禁止其他操作(这种被称为阻塞式,比如电脑关机),还有一种则不做限制(这种则被称为非阻塞式,比如以前windows的崩溃警告,不点确定还可以继续使用,点了就强制结束进程神马的!!)。

在HTML5.1的草案中也提出了新的 Dialog 元素及其对应的一系列方法,当然现在支持这个元素的浏览器还很少,所以也就是拭目以待一下就OK啦。人家老大哥就是老大哥,说白了接下来讲的几位根本都是他儿子(甚至孙子)而已(…

Modal(模态框)

我一直觉得把这玩意儿单独拿出来说的始作俑者是 bootstrap,结果顺着 wiki 的历史记录往回扒拉,发现这玩意儿的源头还挺早的(至少能追溯到07年),不管怎么说,这玩意儿本质还是,有模式的对话框。除了 Bootstrap 和一大票 UI Kit,iOS 也是 modal 的使用者(嗯哼哼)。

modal

上图从左到右分别来自BootstrapmaterializeiOS 人机交互文档

modal 的显示比较有特点,通常都会配有一张半透明遮罩(在MDN中就提到这样一个伪元素——::backdrop,不过支持性不好而且使用环境受限所以暂不要考虑使用),然后弹出一个对话框(…),并附带有一些交互操作的组件,原界面下的所有 UI 组件都无法点击,必须完成当前模态框中的交互操作(也许只是一个确定或者取消)才可以回到原来的操作进程中。

Pop-up(弹出气泡)

pop-up的原意是弹出,在早年间打开页面噼里啪啦铺面而来胡乱弹的烦人新窗口都可以叫 Pop-up,现在大部分浏览器都禁止弹出新窗口或对其有所限制,传统意义上的 Pop-up 已经不多见了(如果你硬要把所有“在新窗口打开”的窗口都算作 Pop-up 我也没意见)。在 Android 开发文档中,有 dialog 和 popupwindow 这两种不同的对象,具体区别主要在API分类及其代码编写上,这里就不多扯了。

另外还有一种 Pop-up 提示框,乒~弹出来过一会自己就默默消失,有些地方也叫作气球提示框(balloon notifications)、提示气泡(notification bubbles)或者吐司(toast)…主要用于非用户主动触发的通知信息。Pop-up的共通点就是,弹多了非!常!惹!人!厌!

Popover(弹出框)

其实如果你用wiki搜popover的话,出来的结果是这个(写到这里我饿了…)

popover

其实这个玩意儿最常用的中文名字应该是气泡提示框(不是上面这张图,是下面这张…),反正在我见过的 demo 里,它都会带着一个小尾巴指向其来源。而它究竟是来自于谁就不可考了 ╮(╯_╰)╭ Bootstrap 和 iOS都有以此为名的组件:

popover

上图从左到右分别来自BootstrapiOS 人机交互文档

Bootstrap 对 popover 的定义是展示一些非主要的信息,如同重要程度不高的非阻塞无模式对话框。而 iOS 人机界面指南则指出,popover 可以包括信息内容甚至操作选项。

异同与设计原则

上面说了那么多,这些框的主要区别还是在于——用途。当你觉得你可能需要一个弹出框的时候,你可以通过这个流程图简单地判断你需要的是哪种:

如何选择流程图

重点在于,这些层层框框会不会影响到你用户原本想要进行的操作?有没有必要影响用户原本想要进行的操作?至于有没有半透明黑色背景,是不是全屏,能不能到处乱拖,有没有小尾巴这些事,也只是为了满足一些基本需要而存在的(黑色背景可以减少原来界面中的元素对用户的干扰,并且提示用户目前操作所在与之前页面的层级关系;全屏也可以减少干扰并容纳更多交互操作的选项;能不能到处乱拖完全就是因为 windows 的报错太智障!!小尾巴用于指明其来源…看需求)。

其实只要知道自己想要什么样的层层框框,名字什么的,what ever let it go…

……话又说回来在跟 RD 或者 F2E 交流的时候,可能还是需要明确一下用语。经过我的一番调查(=。=),Android 用的是 dialog、tooltip(toast),iOS 用的是 modal 和 popover(完全没重复……)……在二者中,dialog 和 modal 是内容组件级别的,而 popup 和 popover 基本上是属于插件级的,也就是说程序员们通常情况下应该还是会选择前者。具体的请认真和你们的程序撕比啦~

参考:

  1. Google Material 设计指南——对话框
  2. Google Material 设计指南——Tooltips
  3. iOS 人际交互指南——popover
  4. iOS 人机交互指南——modal
  5. iOS 人机交互指南——popover和Modal使用细则
  6. Bootstrap3 中文文档——modal 有可点击demo
  7. Materialize CSS——tooltip和toast 有可点击demo
本部落格采用DISQUS评论系统,如果您无法见到留言框,可前往我的GitHub微博提Issue(留言)。
为您带来了不便我也很尴尬╮(╯_╰)╭