bootstrap 模态窗口按钮位置_产品篇01——弹窗关闭按钮

弹窗的右上角有个关闭按钮，功能好像跟下面的取消确定差不多，都是操作完成后弹窗关闭。咋的一看好像很多余，是不是多余呢，因为设计规范的时候碰巧遇到这个问题。开发也说在结果上看来好像很多余。我自己作为一个界面设计人员，对于其后面说隐藏更深层的原因其实了解并不多，不过好在认识很多朋友，于是就在uxren群里面问了下baozhu同学，作为资深的用研人员，果然给出了合理的答案。

发现问题

我先前觉得可能这只是一个习惯性的用法。见图。

点击取消跟确认的效果跟上面的关闭确实没啥区别。摘录群里对话如下：

李福东@UXRen 10:53:1

其实本意还是有所不同的，上面的关闭是关闭窗口，下面的“取消”是取消操作。 只是从体验上讲，关闭窗口的同时也没有执行操作。

牛Baozhu 10:54:32

知乎这个弹窗里面，确认和取消2个操作是针对删除草稿这个命令的2个选择，用户也可以跳出这个框框，直接点击右上角的关闭按钮。

虽然点击右上角的关闭和点击取消的结果一样，但是用户的需求和心理体验是不同的 [表情]

（baozhu同学露出了得意的微笑）

UX-Ying 10:56:15

苹果是左上角。而且下面没有关闭，为什么要做这种相反的？

（积极热心的ying同学随后登场）

牛Baozhu 10:59:22

窗口右上角的关闭，是指我中断这个弹窗，比如：我不想进行删除这个操作了，我是误操作点进来的，所以我关闭掉，终止这个行为。

（baozhu继续说到）

win qq和mac qq的窗口关闭相反，是因为2个操作系统的历史沿袭的原因；而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提供的记事本程序中的【查找】对话框。【查找】对话框不会垄断用户的输入，打开【查找】对话框后，仍可与其他用户界面对象进行交互。用户可以一边查找，一边修改文章，这样就大大方便了使用

这种模态和非模态的翻译过于的学术话，一点都不好理解。简单说模态对话框出现会打断中止你当前的操作，直到你做出选择才能继续之前的行为。非模态就是不干扰当下的行为。

下面列举一下对话框的类型：

功能对话框，属性对话框，进度对话框，公告对话框

标签对话框，扩展对话框，级联对话框

错误对话框，警告对话框，确认对话框

一般用的比较多的是功能对话框和下面的错误警告确认对话框。

对话框的组成：

标题，说明文字，操作按钮、确认、取消、关闭。

---

这次先到这里，后面会继续分享。