弹窗页面交互_正确使用弹窗!

摘要：以网页端的交互场景为例，讨论与分析弹窗与跳转页面的使用场景！

1. 弹窗的类型

弹窗，作为用户处理“即时任务”，连接产品交互与用户操作的重要载体，按交互形式，可划分为模态框与非模态框，以弹窗出现时用户是否必须对其做出响应为区分点；常用于信息提示(操作反馈，信息说明)，操作确认与高频操作快速完成。

图1.1 操作反馈

                  图1.2 信息说明               图1.3 操作确认

图1.4 高频操作

模态框

用户必须对弹窗的内容进行响应，否则不可对包含该弹窗的应用程序进行操作；通常为了突出弹窗内容，还会伴随着半透明黑色遮罩。如图1.4。

模态框常以对话框的形式出现，会打断用户行为，而且具有较高的视觉层级，因此常用于广告运营，提示重大信息，或进行表单提交。

非模态框

弹窗打开的时候，依旧可以操作包含该弹窗的应用程序，弹窗上的内容对接下来的操作没有影响。如图1.2。

非模态框常见的有提示框，浮出层。提示框常用于操作结果反馈，信息提示。

浮出层作为用户点击某一功能控件后的临时性视图，常以非模态形式承载功能入口或轻量操作，也会像图1.2一样作为名词解释说明的提示信息使用。

图1.5 功能入口

图1.5 轻量操作

2. 为什么使用弹窗

01.更流畅的操作体验

弹窗是覆盖在当前场景之上，所以具有更加连贯的操作体验，而且易于关闭，能在完成一个分支流程后快速回到主流程。

图2.1 神策-创建渠道链接

02.更快捷的加载时间

相比于新开窗口需要转场，加载新的页面资源，弹窗的加载时间更短，操作体验上更便捷。

03.更低的认知成本

弹窗通常带有强目的性，与页面空间隔绝，具有更高的视觉层级，重点突出，操作步骤明确，上下文环境连贯，具有更低的认知成本。

3. 使用弹窗的注意事项

01.尽量规避弹窗与弹窗的叠加使用

02.杜绝高频弹窗

03.尽量避免在一整套流程中弹窗与转场交替使用

4. 转场替代弹窗的优势

01.更大的操作区域与内容展示区域

弹窗通常小于页面空间，受空间限制，除去必要的弹窗标题、弹窗按钮后，用户的操作区与内容展示区非常有限。

02.更少的信息干扰

弹窗虽然是位于当前页面的最高层，但是由于依旧停留在当前页面，即便加上了黑色遮罩来与页面空间进行隔绝，但是透出来的部分页面信息依旧会在一定程度上吸引用户的注意力。

03.更进一步的信息提示

多层级的弹窗提示容易造成页面层级混乱，不方便进行更进一步的信息提示，但是新开窗口则没有这样的困扰，可以做到更小粒度的信息提示。

04.更多的扩展性，可以承载比当前信息更多的下一步信息

在多步骤弹窗中，经常会出现某一步内容多，某一步内容少的情况，这个时候就很难界定弹窗的大小，如果遇到多内容的步骤，受空间限制，会出现展示内容不全，需要压缩的情况，而且某些时候如果要进行信息扩展，会变得很难展示。

5. 总结

弹窗虽然在信息展示，使用环境与扩展性上有着诸多的局限性，但不可否认它在操作体验上比转场更具有连贯性与流畅性，因此在产品设计中，需要结合使用场景考虑是使用弹窗，还是新开窗口；通常在完整的操作流程中，使用新开窗口，操作分支，如新增，修改，使用弹窗，对于弹窗与弹窗的叠加使用需要尽量避免，可以考虑使用上下文更紧密的流程或提示，如当前弹窗追加，或轻量级浮层，如下图所示。

图5.1 神策-新建预警-添加触发规则

图5.2 神策-添加指标-前

图5.3 神策-添加指标-后