设计

谈论弹窗时我们在谈论什么

. 4 min read . Written by seki

弹窗是什么

“加一个弹窗吧”是界面设计工作中很常见的需求,这类需求往往在需要补充一些次级信息,又不希望用户离开当前界面就能阅读的场景下产生。

https://docs.microsoft.com/zh-cn/windows/uwp/design/controls-and-patterns/images/dialogs/dialog_rs2_delete_file.png

模态对话框是最常见的弹窗,它实际上由模态界面 (modal) 和对话框 (dialog)两个元素构成。

先说说模态,它实际上只干了两件事情:

  1. 禁用当前界面,有时会加上一层遮罩
  2. 弹出子界面,用户只能在子界面中交互

交互书籍常告诫设计师“避免使用模态”,因为“它会阻断用户的心流”,以至于一些设计师对模态唯恐避之不及,事实上模态本身并无过错,苹果的人机交互手册中这样描述模态:“通过建立无干扰的场景以帮助用户聚焦关键任务。”可见,模态的本质在于聚焦而非阻断。

并且,随着对用户体验的重视,现在很多界面中可以点击遮罩来关闭模态,对用户心流的影响进一步减少。

对话框则是一个简洁的询问窗口,往往只包含一句提问及选项。对话框并不一定要配合模态界面使用。

https://s1.ax1x.com/2020/04/19/JKY681.png

「页面」与「窗口」

严格来说,Web端界面中几乎不存在窗口,窗口的概念源于遵循WIMP典范的桌面端UI,例如微软的Windows和苹果的MacOS,而浏览器本身是一个独立的窗口,仅在其viewport中以页面的形式承载不同网站,并通过标签页进行区分。

https://docs.microsoft.com/zh-cn/windows/uwp/design/layout/images/hello-app-window-multi.png

以MacOS为例。模态对话框被称为Dialogs,它们可以依附于某一固定的窗口,并且只阻断该窗口的操作。

此外,MacOS中还有一类专门用于辅助展示的Panel窗口,Panel隶属于某一应用程序,但交互及样式与窗口基本一致。Panel往往可以在窗口与View之间互相转换。

窗口赋予了桌面系统极高的自由度,它可以阻断、可以覆盖、还可以自由拖拽及拉伸,而这是Web端所不具备的。如果在浏览器中打开新窗口(实际上等于打开新标签页),那么两者分将分属于不同页面,在用户心理模型中,它们的操作是不应互通的,因此,类似Panel的交互在Web端往往改为通过浮层实现,以保证用户心流不受阻断。

https://s1.ax1x.com/2020/04/19/JKWPrF.png

窗口的交互

作为WIMP时代的经典,窗口有着巨大的Affordance:

  • 窗口是「桌面」上的「纸张」,因此可以自由拖拽
  • 窗口使用「菜单」管理常用选项
  • 不同窗口间的内容相对独立

窗口有这些优势:

  • 顶部可拖拽,符合纸张隐喻
  • 全局交互高度一致(最小化、全屏、顶部Menu)

而问题同样存在:

  • 过于自由,这点在《Aboutface》就被吐槽过
  • 人是单线程动物,往往只关注一个窗口
  • 未来属于移动端UI,窗口交互对Z世代不再是黄金法则

「界面」是一种虚拟概念,它通过「窗口」和「页面」这两种物理容器承载,容器的不同决定了Web端和桌面原生系统——也就是所谓B/S架构与C/S架构间的不同,可以说,Web端交互范式就是缺失了W的WIMP范式。