编者按:我们在使用软件时，经常会遇到弹出窗口、指南弹出窗口、通知弹出窗口、广告弹出窗口等等；这类弹出窗口的设计和操作要特别注意，会给用户带来一些不好的体验；本文对操作弹出窗口进行了详细的分析和介绍。

一.描述

弹出窗口常用于中断用户当前操作进行补充，或者中断用户当前操作进行反馈；其价值在于提示关键内容，完成业务流程简单必要的操作或向用户提供实时反馈。

必须限制弹出窗口的使用，带来视觉中断，干扰用户完成业务流程；另外，弹出窗口可视区域小，信息有限，所以要尽量少用弹出窗口。

第二，例子

三、设计要点

1.注意一般原则

最小化使用:要想使用，必须控制频率和节点，控制弹出窗口的位置和大小；想想是否可以用底吸顶吸的形式使用snackbar，而不是堆叠多层弹出。

信息的有效获取:信息类型中有文字和插图，从信息的相关性、重要性和连续性等特征来组织；可以通过背景块、字体、字号、粗细来实现，有时甚至可以辅以局部微动效应。

尊重用户习惯:比如提供一个弹出的关窗按钮作为安全措施；同时提供了方便的交互手段，比如点击蒙版区域隐藏弹出，自动隐藏弹出。

注意氛围和体验:弹出窗口中有很多业务使用场景，针对具有营销性质的弹出窗口，如:应用欢迎弹出窗口、应用更新指导、重要事件通知、营销活动节点等。；需要通过插画、局部微动效应等手段营造身体感。

2.清除弹出窗口类型(根据业务功能)

1)欢迎弹出窗口

一般用于用户第一次进入应用时的友好提示。这种场景要求当前主流应用采用多屏教学模式。

与欢迎弹出相比，它可以携带更多的信息，但不可避免地阻碍了用户探索应用的动机，不符合每个系统的设计规范。

一般在应用大范围修改时使用。对于携带信息较少的欢迎场景，建议使用欢迎弹出窗口，更加简洁，简单，用户影响较小；只要营造氛围，就能取得好的效果。

欢迎弹出窗口一般只在用户第一次进入应用时出现一次，不宜与多屏教学一起使用。

2)通知弹出窗口

一般用于披露重要的系统公告和与用户密切相关的重要信息；比如证监会的重要通知、持股的重要风险警示等。

对于通知弹出窗口，设计师要做好心理准备:几乎没有用户会看完你在弹出窗口中列出的信息。

设计时，一方面需要运用信息组织和排版技巧，尽可能提高阅读体验；另一方面，需要巧妙地平衡业务风险和用户体验之间的矛盾，例如采用倒计时后按钮可用的交互方式来限制用户的停留时间，并进行合理的风险控制。

3)反馈弹出窗口

相比其他轻量级的反馈组件，如toast、hub、popover等。，弹出窗口对进程的中断作用要大得多。

所以首先要考虑其他轻量级的反馈组件，只有当反馈需要引起用户更多的情感共鸣或者反馈信息越来越重要的时候；当用户需要进行决策操作时，应该使用反馈弹出，比如破坏性操作的二次确认。

4)操作弹出窗口

当业务流程需要用户授权或决策，甚至输入简单必要的字段来辅助业务时，经常使用操作弹出窗口；比如业务需要系统授权调用位置信息，或者签订必要的豁免协议，完成抽奖等场景。

设计时首先要考虑业务场景的需求，整合流程节点和弹出窗口的信息承载能力，合理设计；避免弹出窗口携带过多信息导致操作困难，或者在不必要的节点上阻塞进程；同时，一定要提供退出操作选项，给用户足够的控制感。

关注用户在弹出窗口中输入信息时需要注意的事项:

要明确弹窗只能承载轻量的信息输入，多内容的建议用表单页面。考虑软键盘与弹窗一并出现，并使光标自动聚焦到第一个输入项。软键盘类型根据输入内容做匹配。考虑是否需要操作按钮，操作逻辑是否通过软键盘操作按钮实现。

这里有一个简单的例子。在用户输入手机号码获取登录短信之前，为了避免机器人恶意操作，需要输入验证码。验证码什么时候出现最合适？

还有一种准物化操作弹出，只设计弹出的皮肤，营造一定的氛围和身体感，这里不解释。

5)保留弹出窗口

一般用于在用户离开某些业务流程时提示风险，留住用户；例如，在离开表单输入页面时，通常会使用弹出窗口来提示用户保存，并期望用户完成输入。

这种设计打破了用户退出业务流程的路径预期，用户很容易体验到不可控的产品，使用时需要克制。

特别是，不要在保留弹出窗口中设置其他流程触发按钮。用户点击后唤起一个莫名其妙的过程，被骗被戏弄的感觉会很强烈。不要为短期数据带来用户损失。

6)教学弹出窗口

教学弹出窗口一般用于用户教育。比如系统修改后，提示用户新增功能；或者当用户离开某项服务时，提示该服务的固定入口位置。

设计时，首先根据需要灵活安排文案、插画等信息，在弹出窗口左右滑动；其次，注意弹出窗口的时机。

7)营销弹出窗口

营销弹出窗口的使用场景具有明显的营销特征，如引导用户发现新功能，引导用户评价应用，或者对用户的某项操作(订阅)有重要的新反馈。

设计时要注重策略，只有对用户具有高度关联性和重要性的内容才能引导用户进入营销的业务功能；而且弹出窗口出现的时候要有一定的设计。比如用户在看某支股票并谈论它的时候，使用弹出窗口可以提高直播的转化率。

在周期性的营销活动中，比如大奖结果的公布，也可以在全局应用中以弹出窗口的形式通知和召回用户。

四.构成要素分析

1.弹出式标签

弹出标签可以识别弹出的业务实体，常用于APP全局显示独立业务场景的弹出窗口，说明弹出窗口来自哪个相关业务。

标签也有利于品牌教学和氛围营造，根据场景需要设计。

常见的是文本标签或图标图标。

2.标题和副标题:主副本、副副本和装饰副本

弹出窗口剥夺了用户对现状的掌控感，导致拒绝。面积的限制也导致阅读体验差。设计师应该做好心理准备——几乎没有用户会看完你的列表。

因此，简洁笼统的标题文案，简洁明了，内容有序，可以让用户快速获取信息，关闭弹出窗口，继续操作，最大限度地降低业务跳跃率。

根据阅读心理学，有几个原则需要注意:

使用直白表意的语句，不要人为制造词汇；理解需要知识储备，人借助心智模型识别内容；人们偏好短行信息；电子屏幕更难阅读，高对比度、大字体能提供帮助。

3.面具

弹出窗口是一个模态组件，在用户和弹出窗口进行显式交互之前，不能触摸页面上的其他内容。

蒙版提高了弹出的页面层次，蒙版背景透明度的选择与弹出需要用户付出的专注程度有关。用户需要关注的越多，面膜越黑。

4.操作按钮

根据弹出的场景，操作按钮可以由主按钮、辅助按钮、安全关闭图标等使用。单独或组合，在某些营销场景中，也可能出现要具体化的按钮。

操作按钮要足够大和清晰，颜色选择要突出品牌颜色，区分主从按钮。

按钮文案应清晰易懂或“煽动性”。比如弹出的“取消自动定投”操作文案，主按钮“确定”，辅助按钮“取消”，容易产生歧义；考虑到主按钮“确认取消”，可以避免复制辅助按钮“关闭”。

安全关闭图标一般放在弹出窗口下方，符合拇指法则，容易够到。

5 .其他组件

可选择在弹出窗口中添加其他辅助组件，如订阅提醒、操作等，默认可以勾选，教学内容、品牌推广、氛围元素等。

第五，优化体验

1.自动折叠

为了减少用户的操作，可以自动关闭弹出窗口，比如“3s自动关闭”，但必须有倒计时提示，提供足够的可视性，保证控制感。

2.弹出多层次内容演示

在一些营销场景中，可以在一个弹出窗口中集成多个内容；像班纳一样，这些内容卡可以自动切换和手动查看。

注意后面的内容非常有限，只能给人很多同级别的形象。滑动视图的概率很小，最好有一个固定位置的入口来承接。

3.弹出窗口关闭后的指南

弹出窗口是不可追踪的，大概率用户不会仔细研究弹出窗口的内容，只想尽快关闭弹出窗口，进行自己的业务操作。

此时对于一些场景，比如应用升级，可以设计一个固定位置的通知栏，在完成操作后继承用户的应用升级指导；或者可以在页面固定位置设置一个浮动图层按钮，关闭弹出时用动态效果提示映射关系，方便用户再次查看。