今天聊的这个话题是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方案总体看起来更简洁，其中【取消】按钮的功能可以用点按遮罩来达成。但文案写错了+破坏性操作没有标红，还有提升空间。

声明：* 本站所提供的资源均来源于互联网，站内所有文字、图片内容由网站会员上传而来，UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷，本站不负任何责任。如果有侵犯到您的权益，请联系本站删除，谢谢合作！联系邮箱：Uishe#qq.com (请将[#]换成@)