今天聊的这个话题是PC端设计初学者经常问的一个问题。

 

一些比较细心的人可能能观察到,在用PC的时候有些弹窗只有一个【取消】按钮来表示关闭弹窗,并且不做出任何操作;而有些弹窗除了【取消】按钮以外,在顶部左上角或者右上角还有一个【x】icon,功能和点击【取消】一样。但是在移动端弹窗中,好像又很少见到这种既有【取消】又有【x】的设计

因此产生如下疑问:

 

 本文要点 

  • PC端弹窗的关闭操作,有设计规范吗?

  • 弹窗需要两个关闭按钮吗?

  • 移动端的关闭操作和PC端有什么不一样?

 

接下来我们会就这三个问题细聊一下。

PC端的弹窗关闭操作

PC端交互很难入门,因为它规矩很多。从80年代到今天,PC交互经历了数次主流系统迭代,沉淀了非常多的约定俗成的规则。而且相对移动端来说,PC更适合被用来处理复杂场景和需求,因此在面对这些问题时,PC的交互设计形成了更系统性的规范。

 

因此,要解答PC端弹窗【该】怎么做,我们需要做这两步事情:

1-参考主流设计系统(windows,mac)为什么要做这样的设计

2-观察设计规范在真实场景下的应用

 

首先从windows来看,同时带两种关闭按钮的弹窗设计至少可以追溯到1995年。当时的windows规范将弹窗(dialog box)归属于次级窗体(secondary window)。而一个次级窗体主要包含两部分:标题栏(tittle bar)和窗体框架(frame)。

从层级上来说,标题栏的层级高于框架和框架中的内容。除了展示当前窗口的名字以外,标题栏还是移动窗口的控制点。标题栏上的关闭/最大化/最小化等操作按钮(Title Bar Buttons)被定位为对窗体的快捷操作(右键点击窗体时展示的窗体菜单则是对窗体的主操作)。虽然说明的比较模糊,但在95年windows并没有规定窗体标题栏必须有关闭操作。

从应用上来说,95年windows给的弹窗示例可以看出,【取消】和【x】两个关闭操作在1个弹窗上并存事没有问题的,其中【x】是关闭窗体的快捷按钮(甚至双击标题栏也是一种快捷关闭操作);而【取消】则是在窗体框架下、比较语境化的操作按钮,这套规则从Win95一直沿用到了Win7。

从Win8开始Windows开始尝试多终端应用,直到Window10以后一个应用可以在PC/平板/手机等等应用上使用,PC设计也就很大的受到这些不同终端的风格影响。Win8时期应用在微软商店的Metro design系统首先做出了很多新尝试:

  • 定义了更多的窗体类型,包括传统弹窗(dialog)、文件选择器、飞出窗(flyout)等等
  • 首次定义了点击弹窗遮罩,关闭弹窗的交互形式
  • 出现了不带标题栏的弹窗

     

 

虽然最后metro design被弃用了,但可以看出它对现在的win10/11设计产生了很大影响,目前win11和web端设计也都保留了这种不带【x】的操作弹窗(但是web端设计允许加【x】)

从Mac OS来看,苹果一直以来都不鼓励给弹窗一个以上的关闭方式。在2003年以前,Mac OS定义了3种不同的弹窗,除了非模态弹窗可以加【x】以外,模态弹窗都“大多没有标题栏(关闭、最小化、缩放) ; 用户可以单击一个按钮(比如 OK 或 Cancel)来关闭这些弹窗”。2004~2009苹果修改了弹窗的示例样式,但并没有修改规范规范。

 

基于苹果当前的规范,只有应用在再确认、警告等场景下的文档模态弹窗(Document modal)明确没有【x】,其它模态弹窗倾向于不使用【x】,非模态弹窗一般有【x】。

但在实际使用中,可以发现偶尔苹果自己也对这个问题也没太想清楚,比如Pages的【打开】弹窗,根据苹果规范属于也不应该加【x】,但它也还是加了。

 

 

说到这里大家可以看出来,其实主流规范对于弹窗是否应该有两个操作并没有一个定论,反而根据情景/时代变化,规范也会产生变化。那从体验的角度上来看,一个弹窗到底需要几个关闭操作更好呢?

 

弹窗需要两个关闭按钮吗?

 

根据上面对规范的解读我们可知,弹窗左上角或右上角的【x】,最初是对窗体操作的快捷方式。它的作用是在不做出任何修改的情况下关闭弹窗。但现实场景下,弹窗,特别是模态弹窗的一大作用就是阻断用户的任务路径,要求用户去处理一些高优先级的事情。比如要求用户同意新的用户协议,否则就不再给用户提供服务。这种情况下,【x】就显得非常模棱两可,并没有让用户做出表态。因此我们可以得出第一个结论:当要求用户明确表态时,添加【x】不合适。而应该只提供带文案的操作按钮(比如不同意协议)。

 

那么,对于操作型的弹窗,是否应该加【x】呢?我的理解是需要。纵观PC的特性,不难发现它屏幕大、操作距离长,这些特性也就造就了特别多的操作捷径。光是【关闭弹窗】,就(曾经)可以用双击窗口、右键点击窗口呼出窗口菜单、键盘esc、点击遮罩等等方式来完成。

 

虽然在做功能设计时特别是B端功能设计时,我们往往会基于核心场景做最重要的功能,而倾向于忽略边缘场景。但在设计控件规范时,需要重点考虑规范的扩展性。作为一个非常底层的控件,弹窗(或者说窗体)应该兼顾大部分用户的不同习惯,来保持整个系统有比较好的可用性。因此,保留“x”做为关闭操作性弹窗的最短路径,是不错的选择。

 

移动端的关闭操作

 

简单来讲,移动端屏幕小、信息聚焦,而且并不存在窗体(window)的概念。所以并不需要【x】作为最短路径去关闭一个弹窗。在这种以短平快为特征的平台做设计时,基于用户诉求删减操作体验更佳,以PC/移动端都常见的退出保存为例:

A方案虽然也没有错,但在移动端上三个操作肯定比两个操作反应时间长。B方案总体看起来更简洁,其中【取消】按钮的功能可以用点按遮罩来达成。但文案写错了+破坏性操作没有标红,还有提升空间。