由于用户界面中涉及到的内容很广，就有很多看起来类似的实际不同功能组件，且各人的知识体系的不同，对于一些既有组件就会出现“起小名”的现象。再加上用户界面在国外的发展是早于国内的，对于许多组件命名在翻译过来就很容易造成差异。各大厂之间对于组件的命名也没有达到统一，大家在实际工作中尽量保证协作人员之间的命名是统一的。
1. 弹出框（Popover）& 弹窗（Pop-up window）
这里的首先指出“弹出框”是具体一个组件名称，“弹窗”是所有弹出的窗口泛指一类名称。且弹出框（Popover）在Ant Design和T Design叫“气泡卡片”，两者在范围上属于包含关系，混淆的原因应该是汉语译义接近再加上“框”和“窗”发音接近。
关于组件命名上，Element叫弹出框，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端，模态常常是干扰用户心流的，请区分应用场景，谨慎使用。
参考文章：
https://en.wikipedia.org/wiki/Mode_(user_interface)
https://zh.wikipedia.org/wiki/对话框
https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/
https://zhuanlan.zhihu.com/p/361575057
https://www.nngroup.com/articles/modal-nonmodal-dialog/
https://www.w3school.com.cn/bootstrap5/bootstrap_modal.asp
本文由 @YMOOOM 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
,
