弹窗发展简史(五):移动端弹窗的几种表现形式
弹窗,或者严格意义上来说,模态弹窗,在前面按照功能定义分为Alert、Confirm、Prompt三种,这是在PC端和移动端都适用的一种功能性分类方法,在移动端,可以依据它们的表现形式不同而分为如下几种,当然其中有些依据不同的分类方法可以归入蒙版、浮层等不同的分类,但也可以作为弹窗的表现形式:
1. 引导弹窗(引导浮层/引导蒙版)
引导弹窗(Coach Marks)是弹窗的一种特殊应用形式,其主要目标是引导新用户快速了解和掌握应用的新功能和操作方式,所以部分蒙板遮罩位置会镂空把要描述的元素露出,同时配合文字描述和操作按钮,以达到帮助用户快速上手的目标。

引导弹窗是唯一的把当前场景(Context)结合到弹窗里合并显示但仍保持模态交互方式的弹窗形式。
2. 全屏弹窗
全屏弹窗是指浮层从下方滑入并覆盖整个屏幕的浮层样式,一般这种弹窗比较容易同切换页面相混淆,用户处于当前界面的分支流程而非下一步流程时较多使用,用户会有一种还停留在当前页面的心理认知,一般使用关闭或取消按钮解散弹窗而非返回以暗示用户此时仍处于当前场景中。

3. 侧边弹窗
此类弹窗一般由屏幕上端或下端切入并覆盖部分屏幕,主要用来作为选择、输入项的辅助展示界面,因被覆盖的界面部分只有局部且此浮层主要由用户主动触发,所以用户并无明显的被打断和跳出的感觉。用户点击蒙板区域或选择操作项后解散弹窗。

操作按钮列表是iOS系统的原生控件,也是此浮层的一种特殊表现形式。

4. 居中弹窗
居中弹窗是平台使用较多的一种表现形式,弹窗中心点位于屏幕正中,既是视觉焦点,也便于用户操作。各种消息框、信息简介都属于这种形式。用户点击关闭按钮或蒙板区域解散弹窗。

5. 运营弹窗
运营弹窗是以营销活动展示为目的,浮层以竖向中心点为基点居中对齐,内容区域主背景可以设计为异形,即图片以PNG格式保存,透明的部分镂空。以增加设计自由度。有操作按钮和关闭按钮便于用户查看活动详情或解散按钮。

因为用户习惯于在看到运营弹窗时视线向右上方寻找关闭按钮,所以有些App为了增加点击率而把关闭按钮放在其他位置。

以上就是弹窗的几种不同表现形式,一般来说每种表现形式都有自己擅长表现的使用场景如全屏弹窗适合于表单较多的分支任务或图片、文件选择,侧边弹窗适合于筛选和排序定义等,重要的是,用合适的载体来应用于合适的场景中,才能发挥最佳效果。