什么是模态？

最近在工作中发现关于“模态”这个词的释义和其对应组件的使用场景有所混淆，对于其详细解释在网上的搜索结果也相当少。本着求实寻真的的原则，查阅相关文档，结合案例分析，汇总这篇文档。 此外，在不同学术领域中“模态”的概念和应用都有所区别，本篇中主要以用户界面设计为中心展开叙述。

一、定义 1. 模态(Modal) “模态（Modal）”是一个舶来词汇，词根为“模式（Mode）”。其相关组词“模态逻辑“、”真势耐码模态”…也多指的是物理计算机领域，引申到我们的软件设计领域可以简化理解为“模式”+“状态”，即“特定模式下的某种状态”。

“杰夫·拉斯金在《Humane Interface》对计算机科学的“模态”定义为：人机界面对于跟定的动作(gesture)是模态的(modal) 。”有许多地方解释模态引用了这句话，但是这一句解释的确实太抽象，相对来说iOS人机指南中解释更好理解一些：“模态是一种旅亩链设计技术，它以一种临时的模式呈现内容，需要一个明确的动作来退出。以模式呈现内容可以帮助人们专注于一个独立的任务或一组密切相关的选项确保人们收到关键的信息，并在必要时对其采取行动。” 以上对于模态的解释中有的抽象,有的具体,综合提炼关键的信息可以解释为:模态是人机交互过程中的一种状态,表现为用户相同的 *** 作在模态下可以产生不同的结果。例如在使用电脑时，直接点击和按住Ctrl再点击就会有触发不同的结果。

二、模态的应用 1. 人机交互 在人机交互中，人是主导者。模态主要的应用是“切换”的作用，根据切换状态的时间可分为“临时模态”、“长时模态”。 临时模态：需要一直控制某一按键才能进入另一系统状态进行 *** 作。例如默认英文小写输入法的情况下，一直按住“Shift“再键入就会切换成大写输入。 长时模态：仅需一次 *** 作，就可以一直处在切换的状态，直至再一次 *** 作取消。例如默认英文小写输入法的情况下，按一次”Caps Lock“就可以切换成大写输入。

2. 用户界面 在用户界面中，“系统”往往是模态的发起者。通常以对话框的形式强制要求用户回应，在未完成和对话框的交互前，不可以回到之前的主程序。这里分为“应用程序”的模态对话框和“ *** 作系统”的模态对话框也有所区分。二者的使用原则一致，最大区别在于，应用程序内的模态对话框仅在当前程序内触发，同时开启的多个程序之间互不影响。而 *** 作系统的模态对话框优先于所有应用程序。

3. 无模态对话框（Modeless） 无模态对话框并不属于“模态”相关组件应用上，实际使用中会以具体的功能作为组件命名，在此为了和模态对话框对照解释。 这是一种非强制回应的对话框，用于向用户请求非必须资料。即可以不理会这种对话框或不向其提供任何信息而继续进行当前工作，所以窗口均可打开并处于活动状态或是获得焦点（人机交互热点）。无模态对话框的权级要弱于模态对话框，可交互、不可交互的组件都有，因此使用范围较广。例如用于“详情查看”、“ *** 作通知”，还有应用和 *** 作系统中的一些小工具使用页会触发无模态对话框拆孙。

三、易混淆点 由于用户界面中涉及到的内容很广，就有很多看起来类似的实际不同功能组件，且各人的知识体系的不同，对于一些既有组件就会出现“起小名”的现象。再加上用户界面在国外的发展是早于国内的，对于许多组件命名在翻译过来就很容易造成差异。各大厂之间对于组件的命名也没有达到统一，大家在实际工作中尽量保证协作人员之间的命名是统一的。

1. d出框（Popover）&d窗（Pop-up window） 这里的首先指出“d出框”是具体一个组件名称，“d窗”是所有d出的窗口泛指一类名称。且d出框（Popover）在Ant Design和T Design叫“气泡卡片”，两者在范围上属于包含关系，混淆的原因应该是汉语译义接近再加上“框”和“窗”发音接近。 关于组件命名上，Element叫d出框，Ant Design叫气泡卡片。

2. 遮罩（Mask、Overlay）&蒙板（Matte、Mask） 在有模态的的场景中，经常会有一个黑色有透明属性的图层出现在当前任务页和对话框之间，这个就是遮罩（Mask）。而蒙板（Matte）是设计视频图像软件中将指定带有alpha通道图层的透明数据信息应用在目标图层上，目的在于控制目标图层的显示范围。在PS、AE一类图像视频编辑软件中，对于遮罩和蒙板的功能区分的很明确。而在Sketch、Figma这类的软件中其实只有Mask，功能是限制该图层上方所有图层的显示范围，就像是画了一个圈，其他图层就只能在这个圈的范围内显示。

Ant Design、Element都将这个黑色有透明属性的图层叫做Mask，这与设计软件中的Mask功能其实有所冲突。我觉得在Vant 3里将其称作Overlay更适合一些。 关于设计中是否需要使用遮罩，需要评估目前需求的优先级。

3. Modal 对话框 &Dialog 对话框 这两者的的实际指代功能组件是同一个，都是指上文提过的模态窗口，仅是命名不同。

四、小结 本文主要是为了解释模态的概念是什么，并列举了一些基本案例辅助理解。至于模态在平时设计中的具体实践，大家可以在各大厂组件库中找到对应案例，这里不在过多展示。 模态（窗口）本质上是是强制用户关注，并必须采取行动的，应减少模态窗口上的内容来降低用户记忆负担。 要注意的一点是，模态而在游戏领域的相关人机交互和用户界面设计中，是一种提升游戏性、帮助用户进入心流的常见方式。但在C、B端，模态常常是干扰用户心流的，请区分应用场景，谨慎使用。

窗口是电脑桌面上的一个矩形框，是应用程序运行的一个界面，也表示该程序正在运行中，窗口一般由标题栏、菜单栏、工具栏、状态栏、窗口边框、滚动条和工作区组成。一般 *** 作系统界面都是图形式的，我们打开IE浏览器就会出现一个窗口，这点应该比较容易理解。

对话框是一个独立的窗口，起到了与用户进行交互的作用，用户可以在对话框中输入信息、阅读提示、设置选项等 *** 作。对话带神框一般有文本框、下拉列表框、复选框、命令按钮、微调器、滑尺、选项卡、列表框等，也可以使用键盘进行对话框设置。键盘上的Tab键可以激活各组件，箭头、空格、回车等键也可以对组件设置。

有些窗口还具有自己的消息处理功能，还可以有自己的子窗口。分为模态对话框和非模态对话框两种。在模态对话框显示的时候，整个程序只有模态对话框窗口获得焦点，可以和用户交互蠢岩亏，也就是说你一定要处理它才可以用做其他的事，不然你鼠标点到哪都没用。非模态对话框就不一样，它你可以先不去管它做其他的事情。 在安装程序或者你 *** 作出错什么的时候经常可以看枣瞎到模态对话框。

Dialog窗口分为模态与非模态两种。所谓模态对话框，就是会阻塞同一应用程序中其它窗口的输入，与之相反的是非模态对话框。

设置模态对话框可以通过设置事件循环exec()来达到。

也有另外的解释：　所败锋谓的模态Dialog就是将当前线程放入阻塞队列，所谓的非模态Dialog就是再创建一个线程专门乎枯世用来显示对话框。

对于建立在堆上的Dialog，有两种释放方法，一种自己手动释放，另外一岁肢种通过setAttribute(Qt::Wa_DeleteOnClose)函数自动释放。

---