对话框：用形态区分一下常见的几种模态弹窗居中展示

一些业务在做项目的过程中模态对话框是什么时候实例的对话框，经常会提出使用弹窗承载XX内容的要求，从而减少因页面跳转造成的业务流程丢失；但是，作为一个弹出信息承载控件，弹出窗口不可避免地会打断用户。过程模态对话框是什么时候实例的对话框，所以适度使用是设计中需要注意的一点。

首先，让我们看一下弹出窗口。交互形式的弹窗有两种形式：【模态】和【非模态】：

[模态]这个词是振动力学中的一个概念。当应用于交互时，模态是一种中断主要目标流程/穿插在主要目标流程中以做出决策或完成任务的方式。模态弹出窗口是当用户专注于任务时我们需要弹出窗口。当一个模态弹窗出现在用户的视野中时，所有背景内容都被禁用，需要用户对弹窗做出响应/判断，所以禁用父内容和强制交互是模态弹窗的特点窗户。模态弹窗具有吸引注意力的优势，一般用于承载高层次的信息，但是对焦能力强也带来了强中断的不好体验，所以要结合场景慎重使用.

【非模态】在特征上与模态相反。非模态弹窗一般不需要用户操作，具有时间敏感性，出现并停留一定时间后可以自主消失。无模式弹窗对用户的侵入性较小，因此常用于轻量级的反馈机制中，通过获得用户的短暂关注来提供反馈和提醒。常见的类型是 Hud/Toast、Tooltip 和 Snackbar。

业务需求中经常提到的弹窗是指从“减少弹窗，完成某项任务”的业务目标出发的模态弹窗，所以本文主要分析模态弹窗的种类和哪些场景适用于他们。我们用形状来区分几种常见的模态弹窗：

居中显示：Dialog/Alter

Dialog 弹出窗口（在 iOS 中称为 Alert）通常带有需要决策/反馈的交互行为。由信息区和操作区组成，显示在页面中央。常见的显示内容可分为：纯文本、带图片、带输入、纯图片四种。

其中，纯文本中的Dialog信息速度较快，表达较为严肃；多适用于提示、通知等有警告需求的场景，如中断提示、用户协议（免责声明）、活动规则、授权弹窗等。示例如下：

带文本框的对话框记录信息速度快，多适用于信息录入/设置、验证码录入等需要快速创建、收集、验证信息的场景。示例如下：

带图对话比纯文字信息更有气氛，打断也相对减少。更适用于提示信息弱化干扰、强调氛围的场景，如故障反馈、留存弹窗、评分弹窗、功能引导等。示例如下：

纯图Dialog主要强调氛围，多适用于运营推广场景，如：红包分发、事件引流弹窗等。示例如下：

可以看出，大部分Dialog（Alert）弹窗都携带了简单临时的单一决策信息，适用于引导用户进行选择/操作的场景。当业务需要携带一组任务行时，不适合使用Dialog(Alert)来展示。居中的显示形式提示性强，不断弹出，增加用户体验过程中的焦虑感；位置和面积也限制了内容承载量和交互形式，内容过多，操作难读，容易误触。此时，内容和任务线较多的信息，可以认为是由另一个模态弹窗携带。

边缘扩展显示：活动面板（Activity 视图、Action Sheets、DrawerLayout…）

活动面板是我对某些屏幕上的模态弹出框的总称，指的是一种模态弹出窗口，其中常见的显示形式从页面底部/侧面延伸出来；一般用于呈现与父页面内容相关的一组选项或任务，主要内容也是由信息区和操作区组成，但承载的内容较多，可操作的区域较多，可以跳转到下一步。

底部弹出面板卡高限制范围广，面板区域灵活度高，可承载范围广泛的内容维度。一般需要立即处理的功能是通过点击上级页面触发的，可以是单个/多个功能链接，也可以是一组任务流程设置，如内容共享、地址选择、时间选择、任务列表等，示例如下：

侧边弹出面板一般用作功能的扩展或更深层次的导航功能，如抽屉式导航、详细过滤等。示例如下：

综上所述，对比Dialog（Alert）和Active Panel，Dialog（Alert）常用于传达重要信息，对用户行为的干扰更大；Active Panel 常用于选择更多功能或处理轻量级流程，以满足当前场景下用户的需求。快速完成流程任务。

随处显示：Popover/Popup

在模态弹窗中还有一种更灵活、更轻量级的弹窗形式——气泡弹窗Popover/Popup，当用户点击某个控件或某个区域时，弹出的描述或显示折叠信息通常用于主页演示。常用操作快速入口、新功能操作按钮说明、导航折叠信息显示/细分信息显示等。

一张图总结了几种模态弹窗的使用和选择规则。使用规则不是绝对的。在选择弹窗之前，还是需要根据业务目标和具体使用场景做出合理判断：

此图来自网络翻译——%3A//medium.com/%40_kolodziejczyk/ios-custom-modality-a193c293d4d6%23.q6y32cs2f