对话框是我们在产品设计过程中，常常要用到的一种组件。在网页产品设计中，对话框可以用以用来承载较为简单的页面内容，比如当我们查看某些页面元素的详情内容时，常常通过使用对话框来完成。这种类型的对话框，交互属性比较弱，页面内除了文字或者图片内容外，可交互的按键通常只有关闭窗口按钮。

还有一些网页产品则为用户执行某些操作，提供确认或是选择操作方式的选项，比如在lyft的注册页面，会为用户提供两种验证码接收方式，一种为电话验证码，一种为短信验证码，用户可以依照自己的喜好，在对话框中做出选择。

在网页产品设计中，经常会用到较为复杂的对话窗口形态，比如很多产品的登录窗口，需要用户输入用户名和密码，然后点击提交按钮，执行登录操作。还有一些产品，会将表单填写页，设计成对话窗口形态，这类页面通常会包含复杂的交互组件，还有用户可执行提交任务的动作按钮。户需要在这个弹出窗口内，完成一些列的操作。所以窗口设置的友好度，非常影响用户的体验。

在移动产品设计中，我们也会经常使用对到话框，这类对话框，多用于为用户执行操作，提供选择，比如在IOS系统中，应用想要获取用户的位置数据，需要用户给予相应的授权。

当我们想要删除某些桌面应用时，会问询我们是否执行这类操作等。

由于移动产品的设备屏幕较小，所以类似于表单填写这类复杂的操作方式，一般不会像网页产品设计的那样，采用有明显窗口“痕迹”的设计方案。取而代之的是使用一个全屏的模态窗口。

模态和非模态

讲到对话框，就绕不开模态和非模态的话题。无论是在移动端还是网页端进行设计，无论设计的载体是在手机设备，还是PC，亦或是TV设，只要有界面交互的系统，都会存在模态和非模态窗口。那么什么是模态，什么又是非模态呢？

一个简单的判断依据就是，在对话窗口之下的界面元素，是否处于“冻结状态”。而使用模态窗口的重要意义，就是为用户提供了一个可以专注于当下任务的操作环境。

使用模态窗口出现时，用户必须被明确告知，窗口之下的界面元素已经不可用，所以当模态窗口被激活时，我们会习惯性的使用一个黑色的半透明遮罩层。用户可以从这种明确的视觉变化中，得出不可用的结论。

但并非所有的设计者，都深谙此道，在有些网页产品的设计中，即便设计者是以模态窗口向用户展示内容，但确并没有使用半透明的遮罩层。用户往往很难判定当前的窗口状态，从而会在窗口之外，与其他的界面元素进行交互，并且会错误的认为当前程序已失去响应。

还有一类设计方案，选择在非模态窗口中，使用了半透明遮罩层，这会用户错误的理解为这是一个模态窗口，但当用户滚动鼠标时，遮罩层下方的网页确能随之发生移动。这种极其矛盾的视觉传表现形式，往往会让用户不知所措。

窗口还是页面

使用对话窗口进行产品设计的目的之一，就是让用户更加聚焦任务本身。但如果完成任务需要用到即为复杂的交互，那么使用对话窗口可能未必是一个正确的选择。

比如我们在当前的页面中，新起一个表单窗口。但是用户在完成这个表单时，需要反复启动新起对话框。那么窗口上方叠加窗口，并不会给用户带来很好的使用体验。如下方案例所示。当用户选择类型时，需要打开一个新的窗口。

如果想要优化上述的设计方案，我们不妨从两个方向去优化。我们可以假定窗口叠加窗口问题的出现，是设计者组件使用不当而导致的，那么我们可以使用下拉菜单来替代新的弹出窗口。

另外一个优化的方法是对表单内容做出界定，如果表单内容较多，且交互复杂，那么使用弹窗来做进行方案设计，显然就非常不当。这时，我们需要变更设计方案，为用户提供单独的表单页面。

事实上，在移动设备中，无论是iOS还是安卓系统，但凡是内容复杂的表单页面，都会为用户提供全屏窗口。

减少干扰

对话框，尤其是模态对话框，可以让用户更加聚焦窗口信息。但在很多产品设计中，经常出现窗口滥用的现象。很多设计者会将强调量级并不是特别高的通知信息，也以对话框的形式呈现给用户。并且需要用户做出特别处理，这就无形中给用户正常使用产品带来干扰。

比如在一些APP中，会将系统推送给用户的通知信息，长时间驻留于页面的某个位置，尽管没有使用模态窗口的设计方案，但是也会对界面可视区域造成遮挡。用户需要执行关闭操作，才可以退出这类窗口状态。

在移动产品设计中，如果想要使用非模态窗口向用户传递通知内容，一个比较好的参照案例是安卓系统下的snackbar组件。使用这个组件时，安卓官方有很多规定，其中之一就是驻留时长的限制，当snackbar驻留页面达到一定时间后，必须要自动消失，而无需用户与之交互。尽管snackbar只是一种通知类型的组件，但其背后所蕴含的设计思想，无疑对我们进行对话窗口设计，充满借鉴意义。