从一个弹窗的关闭按钮引发的讨论和思考
作者：李逍遥（UXRen翻译组管理员，UI设计师）
弹窗的右上角有个关闭按钮，功能好像跟下面的取消确定差不多，都是操作完成后弹窗关闭。咋的一看好像很多余，是不是多余呢，因为设计规范的时候碰巧遇到这个问题。开发也说在结果上看来好像很多余。
我自己作为一个界面设计人员，对于其后面说隐藏更深层的原因其实了解并不多，不过好在认识很多朋友，于是就在UXRen群里面问了下baozhu同学，作为资深的用研人员，果然给出了合理的答案。
发现问题
我先前觉得可能这只是一个习惯性的用法。见图。
点击取消跟确认的效果跟上面的关闭确实没啥区别。
摘录群里对话如下：
李福东@UXRen 10:53:1
其实本意还是有所不同的，上面的关闭是关闭窗口，下面的“取消”是取消操作。 只是从体验上讲，关闭窗口的同时也没有执行操作。
Baozhu 10:54:32
知乎这个弹窗里面，确认和取消2个操作是针对删除草稿这个命令的2个选择，用户也可以跳出这个框框，直接点击右上角的关闭按钮。
虽然点击右上角的关闭和点击取消的结果一样，但是用户的需求和心理体验是不同的。（baozhu同学露出了得意的微笑）
UX-Ying 10:56:15
苹果是左上角。而且下面没有关闭，为什么要做这种相反的？
（积极热心的ying同学随后登场）
Baozhu 10:59:22
回复李逍遥同学：窗口右上角的关闭，是指我中断这个弹窗，比如：我不想进行删除这个操作了，我是误操作点进来的，所以我关闭掉，终止这个行为。
回复Ying同学：win qq和mac qq的窗口关闭相反，是因为2个操作系统的历史沿袭的原因（windows右手操作更便捷，mac左手操作更便捷）；而mac qq之所以没有下面的关闭按钮，是因为当初做的时候就没有考虑设置。
之前win qq 的2个关闭，内部还有一个争论：为什么需要2个关闭入口呢？设计师觉得右上角那个就可以了，为什么下边还有一个？然后内部就做了一个后台数据的监测，发现2个关闭的使用好像差不多是5:5；因为右下角那个关闭，属于早期qq版本就做的，已经培养了用户习惯，很多人就习惯用这儿，操作也离文字输入更近。最后结果是：win qq保留了这2个入口。其实我们还可以用esc来关闭窗口的。
现在win qq的右上角x其实是关闭所有窗口，而下面那个关闭，只是关闭当前窗口的。
继续探索
告一段落，问题差不多有答案了，两个看似差不多的操作实际上却是隶属于不同的层级。
两种操作的用户动机是不同的，期望不同。可能误点进来，然后点击关闭，完成整个关闭操作。关闭窗口，取消操作行为。
不过回头看手机的弹窗，其实也差不多，但是是没有关闭这个按键的。
我们可以继续探究这个问题。于是我找来尘封已久的#about face 3。对应章节是一个叫做对话框的家伙。
对话框
对话框有两种，一种是模态对话框，一种是非模态。
- 模态对话框（Modal Dialogue Box，又叫做模式对话框）
是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。 - 非模态(Modeless)对话框
又叫做无模式对话框，当用户打开非模态对话框时，依然可以操作其他窗口。例如，Windows提供的记事本程序中的【查找】对话框。【查找】对话框不会垄断用户的输入，打开【查找】对话框后，仍可与其他用户界面对象进行交互。用户可以一边查找，一边修改文章，这样就大大方便了使用
这种模态和非模态的翻译过于的学术话，一点都不好理解。简单说模态对话框出现会打断中止你当前的操作，直到你做出选择才能继续之前的行为。非模态就是不干扰当下的行为。
下面列举一下对话框的类型：
- 功能对话框，属性对话框，进度对话框，公告对话框
- 标签对话框，扩展对话框，级联对话框
- 错误对话框，警告对话框，确认对话框
- 一般用的比较多的是功能对话框和下面的错误警告确认对话框。
对话框的组成：
- 标题，说明文字，操作按钮、确认、取消、关闭。
这次先到这里，后面会继续分享。
文章由作者李逍遥授权发布在UXRen社区官网。