前言
产品经理：我觉得这里要加个弹窗，你去设计吧。
设计师：emmm...。
究竟是否应该设置弹窗？如何设置？以何种形式呈现？其真正的功能又是什么？这一切是否真的完全由产品经理来决定？
优质的产品往往在适宜的时刻、恰当的地点提供恰当的反馈，其中弹窗作为反馈手段不可或缺；若缺乏反馈、反馈延迟或反馈不当，均可能造成不良的用户体验，严重时甚至可能误导消费者，进而导致客户流失。在众多情况下，产品经理往往从商业考量、公司运营状况以及资源约束等角度出发来思考问题，然而这些考量并不一定符合用户的需求。设计师在执行设计任务时，不应盲目遵从产品需求，否则将沦为仅能复制产品原型的“美工”。我们必须以用户需求为出发点，将产品需求转化为设计目标，通过不断的深思熟虑和细致分析，才能精心打造出真正满足用户需求的弹窗设计。因此，决定是否添加弹窗以及如何添加，成为了设计师义不容辞的责任和肩负的使命。
本文将聚焦于弹窗的种类、应用场合、转换效果以及常见问题，旨在与大家分享我对弹窗的见解和设计心得，以期大家能对弹窗模块有更为透彻的理解，并为今后设计出更优的弹窗方案打下坚实基础。
本期大纲
一、弹窗的基本介绍
二、弹窗体系分类
三、弹窗的使用场景
四、如何设计有效的弹窗
五、需关注的问题点
六、总结
一、弹窗的基本介绍
1 弹窗的定义
与应用程序发生主动或被动互动之际，页面表层会显示出一个个容器，这些容器能够容纳文本、按钮、选项、标签或表单等多种元素，并将它们组合起来，从而实现信息的传递、状态的反馈以及用户的引导等功能，此类交互方式即称为弹窗。
弹窗的主要功能在于响应用户的需求或引导用户作出反馈，它充当着用户与产品之间沟通的桥梁，在众多网络情境中频繁出现，就如同产品的线上助手。不同种类的弹窗各司其职，但共同目标都是为了实现与用户间的和谐互动。
2 弹窗组件的构成
弹窗组件的样式种类繁多，包括浮层、对话框、下拉菜单以及toast等。iOS和Android官方平台各自依据其规范对这类组件进行了命名。不论称作何名，这些弹窗组件普遍由以下几个基本元素构成：
容器，它是承载弹窗中文字、图像等信息的必需品，扮演着至关重要的角色。有些弹窗直接将蒙层用作容器，例如toast弹窗。
在界面设计时，为了确保上层内容与底层信息清晰区分，减少信息间的相互干扰，我们通常会在容器下方设置一层蒙层，其不透明度一般保持在20%至60%之间。
该界面覆盖了一层全黑的遮罩。然而，并非所有的小型弹窗都配备此遮罩，它们会为各自的容器添加阴影效果，比如筛选器的展开操作和下拉菜单等。
文本作为弹窗信息传达的核心要素，包括标题、按钮等，即便将其嵌入图像之中，亦能迅速辨识。
图片是运营弹窗中传达额外信息内容的手段之一，为了增强对用户的吸引力，它还可以被设计成具有动态效果的展示形式。
为了顺利过渡至后续环节，需完成如输入密码等前置操作（这在iOS设备上下载应用之前是不可或缺的）。此外，这同样可能涉及当前页面流程中的不同路径，比如输入优惠券等。
对于条件较少的选项，可以采用弹窗形式进行选择，当选项数量不超过六个时，无论是单选还是复选，均可适用。
图标设计上，一般会弱化非主要操作，将关闭弹窗的按钮以图标形式置于屏幕右上角或弹窗底部，这样做旨在强调主要操作，并激励用户继续进行后续步骤。同时，还包括单选、复选以及提示等不同功能的按钮。
按钮，作为进入下一阶段或返回前一步的交互途径（无需弹出窗口），在部分应用中，用户甚至可以通过点击弹窗之外的空白区域来关闭弹窗。尽管如此，这些应用依然会配备按钮，以便用户能够更便捷地进行操作。至于那些短暂出现后自动消失的提示信息（如toast），则无需设置按钮。
二、弹窗体系分类
1 模态弹窗
在用户执行任务时，屏幕上会弹出对话框，干扰用户的操作流程，用户需主动点击确认后才能继续后续步骤，此类对话框即称为模态弹窗。
模态弹窗往往能有效吸引用户的视线，借助所承载的信息和按钮的层级设计，指导用户满足自身需求。此类弹窗的样式会因用户和产品的侧重点各异而有所区别，其中常见的包括对话框、操作栏、悬浮层等。
1.1 对话框Dialog/Alert
对话框作为一种普遍的弹出窗口，主要功能是在打扰用户的同时提供操作选项，其干扰性相对较强。这类对话框通常配备1至3个操作按钮，并且会将用户最期望点击的或产品最希望用户点击的按钮进行特别突出显示。
弹窗对话框主要存在主动和被动两种触发方式，其中主动弹窗通常涉及信息的再次核实、输入内容的确认、前置条件的挑选以及风险警告等方面；而被动弹窗则包括版本升级、运营推广、消息提醒以及系统功能权限的授权等。
1.2 动作栏Actionbar
动作栏系用户主动触发而显现的信息区域，通常自屏幕底部展开，其占据屏幕的份额会依据所展示内容的多寡而有所差异，从细微的局部到半屏，乃至整个屏幕，各种尺寸的展示形式均有出现。
动作栏相较于对话框，能够展示更多以及更为丰富的功能信息；同时，在用户能够明确感知到当前操作及其反馈的前提下，相较于跳转至新页面，动作栏的使用更加让人感到安心。
1.3 浮层Popover/Popup
用户在执行特定功能或浏览特定内容时，系统会在其周边自动弹出一种具备视觉指引作用的界面，这种界面即所谓的浮层。其中，下拉菜单和弹出窗口是最为常见的浮层形式，它们悬浮于屏幕最上层，并指向用户所执行操作的具体位置。
众多社交娱乐软件在界面右上角设有“+”图标，点击后可进入包含部分常用功能的区域。部分弹出层在底部并未添加不透明度的遮罩，为了与页面内容更清晰地区分开来，设计上会在浮层容器周围添加阴影效果，以此防止与下方信息产生混淆。
2 非模态弹窗
非模态弹窗相较于模态弹窗来说，其重量更轻，激活后以不干扰用户当前行为的方式显现，不会干扰用户正在进行的活动。其主要功能是提供即时的信息反馈，确保用户能够明确了解应用当前的交互状态。这种弹窗不会强迫用户进行操作，根据反馈信息的紧急程度和用户的意愿，可以在指定时间内自行消失，或者等待用户进行相应操作后才会消失。常见的非模态弹窗类型包括：
2.1 提示框Toast/Hud
用于向用户展示操作结果、提醒或错误等实时状态信息，这些信息可能出现在界面的底部、中部或顶部。各等级的信息模块在显示时，应保持统一的位置和风格。用户无需进行任何操作，这些信息会在大约两秒后自动消失。
Toast仅提供纯文字形式的提示信息，诸如格式有误、刷新操作完成、删除操作完成等；而Hud则会采用文字结合图标的展示方式，比如商品加入购物车、关注操作成功等。
2.2 提示对话框Snackbar
Snackbar起初是Android系统下的一种弹出式界面组件，随后在iOS及Web前端技术中也得到了应用，它相当于toast功能的升级版。通常位于屏幕下方，持续显示的时间较toast更长，具备0至1个操作按钮，能够自动消失，亦能在与用户互动后自行消失或引导用户至新的页面。
在用户界面反馈中，snackbar的优先级高于toast。比如，当一款应用在今日需要向用户传达关键信息，但又不想干扰其正常操作时，它会在用户首次打开应用时显示该提醒，并附上便捷的关闭选项。用户可选择手动关闭（或部分自动关闭），以此加深对信息的印象。
2.3 通知Notice
最具代表性的包括信息提醒和系统公告，这些内容在设备未锁定屏幕时，通常会在屏幕顶部显现，停留数秒后便会自动隐去；而当设备锁定时，不同设备上这些信息的弹出位置也会有所区别。要接收通知，用户需要在应用的设置里激活消息提醒功能，而对于那些支持应用外推送功能的应用，用户还需在设备的系统设置中激活相应的通知权限。
2.4 透明指示层HUD
HUD技术是一种在透明界面元素上实现的指示层，它能够通过填充和反馈来展示用户当前的交互操作，并且这些变化会立即生效。比如，在视频产品中，它可以用来调整音量、调节亮度和控制播放进度条等。
三、弹窗的使用场景
在深入理解弹窗机制之后，我们必须明确哪些情境下需要设计弹窗，以及应当采用何种类型的弹窗。毕竟，产品设计的初衷是服务于用户。若仅依据个人主观看法随意添加，使得界面变得繁复花哨，弹窗便会转变为干扰因素，严重损害用户体验。针对不同情境，适宜使用何种弹窗类型，以下几方面可以为我们提供解答。
1 打断用户的操作
风险提示：若用户的某项操作可能涉及风险，系统将自动弹出提示框，中断用户操作，并对潜在风险进行详细说明，以引起用户重视。此举旨在确保用户在充分了解风险后，有充足的时间决定是否继续执行后续步骤，例如：执行删除操作、放弃福利权益、或退出登录等，系统都会显示可能产生的后果供用户参考。
在执行某些任务的过程中，会设定一些必须先满足的前置要求，只有达到这些要求，才能继续进行后续的操作。这类条件通常依据任务内容的多少和重要性，以对话框或操作栏的形式显现出来，比如在购物时挑选优惠券和确定支付手段。
在用户达成任务的基本要求之后，必须执行一个至关重要的环节以实现任务完成，此时系统将自动弹出一个对话框，提示用户完成剩余的最终操作，诸如确认订单、填写表格、输入支付密码等。
2 定制化弹窗
此类弹窗主要着眼于产品层面，对用户是否需要或可能产生反感并不十分关心，无论用户意愿如何，都会引导或强制其进行操作。
当产品推出新版时，会强制要求用户进行更新，若不这么做，用户将无法正常使用。此外，众多电商平台的应用程序在用户打开首页时，会弹出大量的红包和优惠券，故意将取消或关闭的选项设置得不够明显，使得用户在尝试返回时遇到一定的阻碍。通过强调视觉和动态效果来凸显主题，以此增强吸引力，目的在于促使用户进行转化。
3 二次确认
二次确认行为虽同样中断了用户的操作流程，却相较于前述直接打断用户的方式，其影响更为显著；它通常发生在用户已完成选择之后，通过再次提出确认，旨在防止操作后果导致用户在认知上产生误差。尽管从用户感受的角度来看，力求以最简便的操作和流程来满足用户需求是产品开发的重要目标，然而在权衡利弊后，引入二次确认机制实际上是一种无奈的折中策略。这一机制不仅能给用户提供额外思考的机会，以避免误操作，还能以不同的方式重新表述相同的内容，以及增强用户对重要信息的二次记忆。
二次确认若使用恰当，能有效减少用户和产品的潜在风险，然而若盲目过度使用，则可能对用户造成不良干扰，影响其使用体验，进而可能引发因操作步骤增多而导致的任务完成难度加大、转化率降低、产品形象受损等问题。因此，我们必须从业务实际出发，综合考虑用户和产品两端的影响，权衡利弊，谨慎考虑是否真的需要增加二次确认弹窗。
若用户的某项行为可能导致无法挽回的后果，且错误程度较大，比如丧失唯一的一次优质福利、进行手机系统恢复、或者取消应用账户等，系统便会实施二次确认流程。在用户对潜在认知偏差有所降低之后，这样做的目的是确保用户在经过深思熟虑后作出决定。即便用户因此遭受损失，也能在一定程度上减轻对产品的指责，从而使产品在道德上显得无懈可击。
4 简单提示
用户操作后常出现的状态提示，即便用户未留意，也不会引发重大损失；或结果既定，此类反馈成本相对较低。它们多见于任务执行中的提示信息（可多次出现）及结果展示，旨在让用户明确当前所处的环节。
非模态的toas弹窗样式较为常见，诸如正在加载、操作已成功、刷新数据结果、清除缓存等，这类弹窗可以跟其他类型的弹窗先后出现，或者与它们并存。
四、如何设计有效的弹窗
1 前提条件
出色的弹窗设计需在视觉呈现与用户互动上综合考虑，视觉元素应简洁明了，交互过程则需具备操作便捷性与用户可控性。
在视觉设计上，首要任务是确保内容易于理解，因此文案的清晰度和按钮的层级关系变得尤为重要；弹出的信息必须直指核心，让用户能够迅速把握关键信息；同时，鉴于弹窗本身是一种干扰，设计时需力求简约，并考虑到其出现是否会过度干扰用户的正常操作（干扰不可避免，关键在于如何有效减少）。设想我们正沉浸在游戏中，忽然电话铃声响起，屏幕被来电信息全面占据（这是传统的来电方式），我们便会迅速挂断电话，重返游戏。然而，当我们回过神来，却发现已错过了重要的游戏环节，即所谓的“领盒饭”。尽管来电可能是情理之中的事情，但内心难免会感到不悦。那么，若来电以弹窗形式出现，且仅占据屏幕的一小部分区域（这是现代的来电方式），是否就能为用户提供足够的反应和缓冲时间呢？
在交互环节，弹出的内容和操作界面必须明确且易于操作。尽管在满足特定业务需求时，产品可能更倾向于引导用户继续前进而非返回前一步，但即便如此，我们仍需通过降低次要操作的显眼度来强调主要操作。用户应当享有自由进出的权利，若次要操作被弱化到用户难以辨认甚至无法找到的程度，即便提供了操作入口，也可能产生反效果。此外，还需关注用户对产品的掌控感。无论产品期望用户如何进行下一步转化，都不应强迫，必须确保用户有返回的途径（强制更新版本的情况除外）。否则，任性的用户可能会选择退出应用，甚至因为产品过于强势而选择卸载。
2 设计目的
设计师在着手设计之前，需充分领会产品的具体需求。这包括从用户角度出发，思考产品能为用户带来何种益处、满足哪些需求、避免哪些潜在损失；同时，还需从产品角度考量，分析产品将获得哪些利益、产品的期望目标是否合理、预期结果会是怎样。对弹窗加入的必要性进行深入剖析，并将此分析成果转化为具体的设计目标，从而保证弹窗能够根据具体需求，在合适的时间点、以适宜的样式，合理地展示给用户。
接着，在明确了设计目标之后，我们还需从设计角度和技术层面来考虑弹窗组件的统一性。在设计层面，团队成员必须对该组件形成明确且一致的看法，掌握其应用场合，从而避免误用或过度使用。若团队新增或替换设计师，他们能够迅速掌握并运用该组件，从而提高工作效率；从技术视角来看，统一化的常用弹窗组件有助于开发人员对其进行封装和后续的重复利用，减少了不必要的重复劳动，显著提升了开发效率。
3 设计思路
在用户界面设计领域，各个组件的设计理念大体一致，其核心目标在于确保产品的实用性和视觉效果的协调一致，具体实施时主要遵循以下原则：
基础定义要求，采用简洁明了的文字，对弹窗组件的功能和意图进行简要阐述。
明确分类及组成：具体指出弹窗的种类，比如是模态还是非模态，并对各个组成部分进行拆分，详细描述每个元素的具体细节。
规定使用方式涉及弹窗的具体展示位置、内容构成以及信息呈现的具体准则，还包括哪些情境下可进行复用。
交互流程的每一个环节都应逻辑分明，我们需预先规划产品在交互前、交互过程中以及交互结束后的反馈机制，同时也要考虑到用户在交互过程中可能遇到的各种问题。
五、需关注的问题点
1 信息的层级关系
在弹窗设计过程中，必须重视信息的层次结构，首先应突出用户所需或产品希望用户了解的内容，从而保障关键信息能在第一时间内传递给用户。
2 展现形式
弹窗的使用应结合具体情境，做到适度，既不应过于精简以致信息缺失，也不应添加不必要的元素。比如，对于操作流程或系统状况的提示，可以采用简洁的回应方式，而对于可能给用户带来损失的风险提示，则应主动中断用户操作，提供更为清晰的指引，必要时还需进行二次确认。
若需移除内容，务必通过模态弹窗形式对用户进行明确提示，否则若采用非模态方式，用户极有可能忽视，进而可能造成无法挽回的损失。
3 文案表述
弹窗所展示的内容存在一定的限制，因此文案必须简练且准确，力求以简洁的语言阐明要点，避免冗长。考虑到弹窗的空间有限，以及用户耐心有限，我们必须在有限的空间和时间内，清晰有效地传达核心信息。
4 弹出的时机及频率
对于运营中的弹窗，若其出现的时间不适宜或过于密集，往往会导致用户产生不满情绪，因此，我们必须精准控制弹窗的显示时间和出现频率。
若用户手中持有未消费的优惠券，且每次打开应用时均遭遇弹出提示，而用户并无购买商品的想法，频繁的弹窗无疑会干扰使用体验，造成困扰。在这种情况下，可以将弹窗提醒设定为仅在每日首次使用应用时出现、累计使用5次后出现、临近过期时出现，或者在用户有购买意愿且优惠券适用范围允许更改品类时出现。总之，应确保这种提醒方式不会超出大多数用户的承受范围。
六、总结
本文对弹窗组件的类型及其应用领域进行了系统性的探讨，尽管总结并不详尽，却能让众多初学者对弹出组件的概念和操作方法有更清晰的认识。此外，不论弹窗的设计如何，都应经历一个持续优化的阶段，需结合产品的具体状况进行深思熟虑和精心雕琢，通过头脑风暴或解决已知问题来不断提升其质量。
清晰辨识、掌握并运用弹窗设计元素是成为一名成熟的用户界面设计师不可或缺的能力，然而，这并非是衡量设计师是否卓越的唯一标准。在此基础上，设计师还需不断深化学习，拓展技能，以不断提升自己的专业素养。
Powered by Froala Editor
