弹窗

以功能和用途为维度，弹窗分为三种类型：信息展示、任务、反馈

一、信息展示

1、解释或说明

典型场景有：欢迎界面、操作说明、帮助、功能引导、取数说明、查看详情、预览或查看大图......

类似这种页面的补充说明，使用悬停浮层体验会更好。

2、内容扩展

典型场景：查看详情、预览图片、数据透视、历史记录......

一般来说，如果是内容较少，并不会占用较大的屏幕面积，使用非模态的会更合适，因为用户只需要扫一眼内容就行，模态的可能会给用户一种“被打断”的感觉。

3、弹窗的扩展样式——侧滑面板

4、渐进式的展示

二、任务

1、复杂任务

这种弹窗在B端产品中也非常常见。当用户浏览当前页面时，有一些很常见的场景：登录、审核、申请、编辑......这些相对复杂的任务和操作，他除了标题和文字、说明、操作按钮之外，通常还有一些复杂的可编辑表单，以及点击、选择、拖动等操作。在移动端，因为屏幕的控件限制，设计师更喜欢用新的页面内容来容纳这些内容。但咋PC上，更常见的是用模态弹窗来设计这种基于当前页面的、承载用户明确目标的任务。因为弹窗会让用户明确感知到所进行的任务是基于当前语境的，且在“提交”或“取消”后可以很自然的的自动返回到主页面。

此外，对于一些任务来说，虽然信息量大，但大多数场景下用户并不需要去编辑所有的字段，而只是修改其中的一两个。因此，从用户感知来说，相比二级页面，使用弹窗会让他们感觉更快捷、简单。

大多数情况下，用户只需要编辑或修改一两个字段。

其中比较特殊的弹窗——登录/注册页面。虽然以弹窗的形式来呈现目前仍然很常见，但已经有越来越多的产品在用户点击“登录”时会跳转到新的页面，这样做的好处是可以有更大的空间，用来增加产品slogan和场景图，以达到向用户介绍产品核心功能、烘托产品氛围、宣传品牌理念的目的。

2、简单任务

如选择器、输入验证码、高级搜索、分享、操作权限确认、用户反馈等一些单一、简单的操作。多数情况下，这些弹窗更多的知识整个任务的一个过度操作、前提设置，或者你可以把它看做仅仅是一个选择器。

3、用悬停浮层来代替

有一些过渡操作，并不一定要使用传统的模态弹窗，比如下面这种场景：用户点击“打印”时，需要用户选择打印样式（横向和纵向），最开始我们的设计是让用户点击“打印”后，显示弹窗让用户选择打印样式，用户需要选择并确认（或直接确认默认选项），才能进入打印预览界面。这样看起来符合逻辑和用户心理模型；但结果发现，对那些使用打印功能频繁的用户，每次这样的弹窗“确认”让人觉得“多余”和“愚蠢”：我基本都是“横向（或纵向）”打印，为什么每次都要让我选择？正因为这样，我们最终放弃了弹窗，而改用了这种浮层的设计：用户悬停按钮时，就即时显示可选择的选项，如果用户不需要切换选项，直接点击打印就好（这就对于绝大多数用户来说如此）。同时也允许用户快速切换到其他选项。通过与真实用户的沟通和观察，我们发现他们明显更喜欢这种交互。

三、反馈

1、重要操作确认

2、告知操作结果

3、页面异常

4、下线通知

5、其他反馈类弹窗