一款成熟的APP是需要一套系统的弹窗设计体系，它能够使设计师、PM以及开发小伙伴之间实现更有效的沟通，在保证产品设计统一性的同时，也提升了彼此之间的工作效率。因此，学会如何思考总结弹窗设计体系，个人觉得是非常有必要的。

了解什么是弹窗

弹窗，始终位于当前页面的最顶层，大致分为模态弹窗和非模态弹窗两大类。

模态弹窗，也可称阻断式弹窗，这类弹窗会打断用户正在进行操作，强制用户必须对其进行回应才可消失，否则不能继续其它操作；非模态弹窗，也可称非阻断式弹窗，这类弹窗则不会影响用户正在进行的操作，用户可以不对其进行回应，出现一段时间后就会自动消失。

结合蜻蜓FM的弹窗相关设计，以及个人对弹窗的理解，整理出了一套该适用于该app的弹窗设计体系，如下：

如何定义弹窗设计样式

接下来根据上面的分类，进行逐一举例说明。

1.1  活动类弹窗

活动类弹窗的主要是体现活动的趣味性，吸引用户参与活动。目前app内此类弹窗样式有两种表现形式，其使用场景也不一样。一种是首页弹窗设计，只会出现在精选首页上，视觉效果较强。如下图：

还有一种是非首页弹窗，一般出现在专辑页等其他二级页面，依然保留插图的趣味性设计，但相比首页弹窗视觉效果弱一些，适合展示在二级页面，为了避免对用户有可能造成的干扰。如下图：

1.2  系统提示类弹窗

系统提示类弹窗即系统自动弹出的提醒框。其中有一类较为常见的就是IOS AppStore评分类弹窗，如下图：

其他的系统提示弹框包括流量提醒弹框、版本更新提醒、收藏提醒、相机访问提醒弹窗等，如下图：

1.3  操作导引类弹窗

操作导引类弹窗设计主要是帮助用户快速做出选择，顺利完成流程操作。所以界面设计上就是简单明了，如下图：

还有一种操作导引类弹窗设计形式比较特殊，但也是属于弹窗，如下图：

1.4  动作列表类弹窗

动作列表类弹窗，比较常见的是文字列表框，它出现在页面底部，以简洁的功能描述性文字展示功能按钮。此类设计IOS和安卓会有一个区分，如下图：

当功能按钮数量很多的时候，文字列表的形式不适合显示，此时可以用图形加文字描述排列的形式来进行展示。这种样式下需要注意弹窗内各功能按钮的UI设计和排列布局。如下图：

1.5  下拉弹窗

点击某按钮后，从顶部弹出的弹窗叫做下拉弹窗。用户必须要触发弹窗上的某个功能或者点击弹窗外的空白处才能消除弹窗。

2.1  Toast文字弹窗

 Toast文字弹窗是给用户反馈信息，最常见的Toast提示框为一句简短的描述性文字。这种样式的弹窗可以出现在页面的任何位置，app内多数是设置成在页面中部，少数在底部出现（但一般都是出现在页面的中轴线），具体的显示位置根据页面的整体设计进行设置。如下图：

2.2  广告悬浮弹窗

广告悬浮弹窗，出现一段时间后会自动消失，同时也可以点击消失，不会影响用户正常操作。设计样式如下图：

2.3  Snackbar弹窗

Snackbar弹窗一般从底部弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作结果，另外也可以提供一个功能按钮给用户选择使用。

后记

以上就是我个人在一些弹窗分析理解的基础上，对蜻蜓FM弹窗设计规范的一些简单总结，可能还有很多不全之处，也希望大家可以指正。

有的时候不能只专注于设计技术的提升，偶尔的小总结或许更让你收获一些系统的知识体系~~