交互设计里的对话框

对话框是一种重要的交互方式，主要用于完成信息传递。对话框很常见，但并不见得每一个设计师都可以百分百地弄明白对话框这个概念。这篇文章是对「对话框」的一个简单梳理和总结，希望可以解决大家心中的一些疑惑。

一、了解对话框

1. 对话框定义

对话框是叠加在应用主窗口上的弹出式的窗口。对话框以对话的方式让用户参与进来，在对话中它给出消息或要求输入。

当用户完成消息的阅读或者作出选择后，可以取消或者接受该对话框，之后，这个对话框便消失了，把应用的主窗口交还给用户。

关于对话框的概念，以下是百度百科的解释：

对话框越来越广泛地被应用于软件、网页、以及移动设备中。它可以保留用户当前进程的情况下，指引用户完成一个特定的操作 。

2. 对话框分类

按照对话框的交互方式，可将其分为「模态对话框」和「非模态对话框」。我们可以把他们看作是两个小家族，模态家族的人比较强硬，而非模态家族的人相对温柔一点。两个家族的主要区别：是否强制用户对其进行回应。

模态对话框：是位于浏览器的主页面核心区域，需要用户对它做出相应交互，模态才会消失。而对话框会因为自身的吸引程度、停留时间、信息量承载多少被划分为多种对话框类型进行区分，常见的对话框分别为：普通对话框、内嵌表单对话框、分步表单对话框、文件选择对话框、复杂信息展示对话框。

① 何时使用模态对话框

在重要的警告时使用，避免出现严重问题、或修正已出现的问题。

例如：用户录入信息后未保存就要关闭时，弹出模态对话框提示用户保存。

在需要用户输入信息或进行某操作，才能继续当前流程的时候使用。

例如：在使用 Canva 资源网站时，点击“上传”会弹出模态化的登录/注册窗口，引导登录/注册后使用。