在移动端应用的世界里，弹窗不仅是信息传递的桥梁，也是用户体验的微妙触点。一个精心设计的弹窗能够在正确的时刻捕捉用户的注意力，以一种既美观又功能性强的方式提供必要信息或引导用户操作。从视觉清晰度到操作简便性，再到出现的时机和频率，每一个细节都关乎着用户对应用的整体感受和满意度。让我们一起探索如何通过细致入微的设计思考，打造既符合业务目标又让用户感到愉快的移动端弹窗，提升体验，创造细节之美。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
弹窗关闭交互设计在用户体验中占据重要地位，如何为弹窗关闭添加仪式感，能够增强用户的满意度和情感连接。下面将介绍几种方法，帮助您打造仪式感丰富的弹窗关闭交互设计。
1.设置过渡效果:
弹窗的突然关闭可能让用户感到突兀，为了缓解这种感觉，可以使用过渡效果来增添仪式感。通过逐渐淡出或缩小的动画效果，让弹窗平滑地消失，给用户一种逐渐结束的感觉。同时，可以结合合适的音效来强化过渡效果，让用户感受到一种仪式的完成与结束。
2.提供反馈提示:
在关闭弹窗的过程中，给予用户清晰的反馈提示也是增加仪式感的方式之一。例如，在用户点击关闭按钮后，可以在按钮上显示点击效果或者给予按钮稍微的变化，以表明用户的操作已被接收。此外，可以在弹窗关闭后，在界面上弹出短暂的提示信息，告知用户弹窗已成功关闭，从而让用户充分体验到整个仪式的完整性。
3.设计精美的关闭按钮:
关闭按钮是用户与弹窗交互的关键元素之一，在设计上应注重其可视性和吸引力。选
用合适的按钮形状和颜色，使其在整个弹窗中显著突出。此外，可以加入一些细微的
动画效果，如微妙的光影变化或呼吸效果，以提升按钮的吸引力和用户的点击欲望。
这样，用户在点击关闭按钮时会感受到仪式感的高潮，并且对整个交互过程印象深
刻。
4.提供选择关机的方式:
为了增添仪式感，可以给用户提供多种方式关闭弹窗。除了常见的关闭按钮外，还可以考虑设计其他选择，如滑动、拖拽或手势等方式。通过提供多样化的关闭方式，用户可以选择最适合自己操作习惯或心情的方式，从而增加用户参与感和仪式感。
弹窗到底该不该加？怎么加？用什么形态展示？真正的作用是什么？这些真的是产品经理说了算吗？
好的产品通常会在恰当的时间、合适的位置给出合理的反馈，弹窗也是必不可少的反馈方式，不反馈、反馈不及时或反馈不合理都会带来不好的使用体验，甚至误导用户，从而导致用户流失。很多时候，产品经理会从商业角度、公司业务、资源限制等方面考虑问题，但这些未必是用户所需要的，设计师不应该完全按照产品需求做设计，否则就成了只会照搬产品原型的“美工”。需要做的是从用户角度出发，把产品需求转化成设计目标，只有经过反复的推敲、认真分析，最终才能打磨出服务于用户的弹窗设计，所以弹窗该不该加、如何加就成了设计师不可推卸的责任和使命。
本篇文章将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点，将自己对弹窗的理解、设计经验分享给大家，帮助大家对弹窗组件有更清晰的认识，为后续避坑设计出更好的弹窗做准备。
一、弹窗的基本介绍
二、弹窗体系分类
三、弹窗的使用场景
四、如何设计有效的弹窗
五、需关注的问题点
六、总结
当我们与应用产生主动或被动交互时，页面上层会弹出容器，将可承载的文本、按钮、选项、标签或表单等任一内容与之组合，就可以用来传递信息、状态反馈、引导用户等操作，这就是弹窗。
弹窗的目的主要是为回应用户或让用户回应，是用户与产品间对话的一种方式，在线上各种场景中都有可能碰到，相当于产品的线上小助理。不同类型的弹窗其作用不同，但最终都是为了满足跟用户之间的友好交流。
弹窗组件的样式很多，如浮层、对话框、下拉菜单、toast等，且iOS、Android官方平台也都根据自身的规范对组件进行命名，不管如何称呼，其常见的弹窗组件绝大多数都是由以下元素组成：
◇ 容器：作为承载弹窗的文本、图片等内容，容器必不可少，有的弹窗直接以蒙层作为容器，如toast；
◇ 蒙层：为了和底层内容分离，避免信息混淆，通常会在界面上层（容器下层）设置一个不透明度为20%~60%
的纯黑色蒙层。部分小型弹窗不设蒙层，但会为容器设置投影，例如筛选器的展开、下拉菜单等；
◇ 文本：文本是弹窗传达信息主体的必要条件，如标题、按钮等，即便把文本融入图片，也能一目了然；
◇ 图片：用于运营弹窗传达更多信息内容的方式之一，为了对用户产生更强的吸引力，还可设计成动态效果；
◇ 表单：为成功进入下一步做准备，如输入密码（iOS设备下载应用前的必要步骤）。也可以是当前页面流程的分支，例如输入优惠券等；
◇ 选项：条件较少的选项可使用弹窗完成，单选、复选在选项不超过6个的情况下都可使用；
◇ 图标：在弱化次要操作的情况下，通常会将关闭弹窗按钮设计成图标放在右上角或弹窗下方，目的是突出主操作，鼓励用户从弹窗中进入下一步，另外还有单选、复选、提示等按钮；
◇ 按钮：是进入下一步或回到上一步（去掉弹窗）的操作入口，部分应用也可以点击弹窗以外的空白区域让弹窗消失，但同样会提供按钮以方便用户更容易操作。toast等短时间自动消失的弹窗无需设置按钮。
用户在完成任务的过程中，界面会出现弹窗打断用户的操作行为，用户必须通过主动点击才可以进行下一步操作，这即是模态弹窗。
模态弹窗通常能较好的获取用户的视觉焦点，并通过承载的内容、按钮主次层级来引导用户完成他们的需求，这也会根据用户、产品侧重点的不同，弹出样式也有所不同，常见的模态弹窗有对话框、动作栏、浮层...等。
1.1 对话框Dialog/Alert
对话框是很常见的弹窗，主要在打断用户后并提供选项操作，对用户的干扰较大，通常会配备1~3个操作按钮，而且会把用户最期待的或产品最期待用户操作的按钮突出显示。
对话框类型的弹窗主要分为主动、被动两种触发类型，主动弹窗：信息的二次确认、输入内容、前置条件选择、风险警示等；被动弹窗：版本更新、运营宣传、消息通知、系统功能授权等。
1.2 动作栏Actionbar
动作栏是通过用户主动操作后弹出的内容信息，基本都是从底部弹出，屏幕占用比例根据内容量的多少比较随意，从小区域、半屏、再到全屏随处可见。
动作栏相比对话框则能承载更多、更丰富的功能信息，在用户清晰感知当前操作及反馈的情况下，比跳转到新的页面更有安全感。
1.3 浮层Popover/Popup
浮层是指用户操作某个功能/内容后，会在附近出现一个带有视觉引导性质的弹窗，最常见的浮层就是下拉菜单/弹窗等，浮动于顶层窗口并指向触发操作的位置。
例如很多社交娱乐类型的应用右上角有一个“+”入口，里面会放置部分常用功能。部分浮层底部没有设置不透明度的蒙层，为了与页面信息更好的区分，会给浮层容器加上投影，避免与底部信息混淆。
相比模态弹窗，非模态弹窗属较为轻量，触发后以一种非阻碍的的方式呈现，不会打断用户的当前操作，主要是给予用户即时反馈，让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作，根据反馈信息的重要程度及意愿，可在一定的时间内自动消失，也可等待用户操作后消失，常见的有以下几种：
2.1 提示框Toast/Hud
用于反馈用户操作成功、警告、错误等当前状态信息，可能出现在任何位置（底部/中间/顶部），在呈现样式上，相同等级的模块统一位置、风格即可，无需用户有任何操作，出现2s左右自动消失。
Toast只有纯文字提示，例如格式错误、刷新成功、删除成功等；Hud会使用文字+图标样式，例如添加到购物车、关注成功等。
2.2 提示对话框Snackbar
Snackbar早期只是Android系统的一种弹窗控件，后在iOS、Web前端都会使用到，可以看作是toast的加强版。一般只出现在屏幕底部，存在的时间比toast长，提供0~1个操作入口，可自动消失，也可与用户产生交互后消失或者跳转至其他页面。
Snackbar反馈的重要程度强于toast，例如，某个应用今天有重要提醒，同时又不想影响用户的其他操作，会在用户首次进入时弹出提醒，并提供关闭操作入口，等待用户通过手动关闭（部分自动关闭），加强用户记忆。
2.3 通知Notice
最有代表性的就是消息通知、系统推送，在设备未锁屏的情况下，通常从顶部弹出，停留几秒后自动消失，锁屏后，不同设备弹出的位置也有所不同。Notice的前提是需要在应用设置中打开消息通知开关，具备应用外推送功能的，需在设备系统设置中开启通知权限。
2.4 透明指示层HUD
HUD是一种在透明元素上通过填充、反馈用户当前交互操作的指示层，实时生效，例如视频类产品中的调整音量、亮度、控制进度条等。
当我们对弹窗体系有了一定了解后，就需要清楚什么场景需要设计弹窗？用什么类型的弹窗？产品最终都是服务于用户，如果仅凭自己的主观意见乱加一通，整的花里胡哨，弹窗就成了干扰元素，很大程度上会影响用户体验。什么样的场景适合什么类型的弹窗，我们可以从以下几点来说明。
风险警示：当用户的某种操作可能存在风险，为避免操作失误，会弹出对话框打断用户，并给予一定的风险提示引起用户的注意，让其有足够的时间确认是否真的需要进行下一步操作，如：删除、放弃福利机会、退出登录等，会弹出对话框提示操作后可能引起的后果。
前置条件：部分任务在流程中设有一定的前置条件，需要满足条件才能进入下一步操作，通常这种情况会根据内容量的多少、重要程度以对话框或动作栏的样式弹出，例如下单时选择优惠券、支付方式。
任务关键节点：用户在满足任务的基本条件后，需要操作一个关键步骤才能成功，则会弹出对话框让用户完成最后一步操作，例如提交订单、表单、输入支付密码等。
这类弹窗主要从产品角度出发，不会过于在乎用户是否需要、会不会反感，都会引导或强制用户操作。
例如产品发布新版本，会强制用户更新，否则将无法使用。还有各大电商APP，在进入首页时会弹出一堆红包、优惠券，刻意将取消/关闭入口弱化，给用户返回造成一定的难度，利用突出的视觉、动态效果突出主题增加吸引力，以达到转化用户的目的。
二次确认也是一种打断用户的操作行为，但跟上面纯粹的打断用户相比其作用更大，主要是在用户已做好选择的情况下再次弹出确认，以免操作结果造成用户认知上的偏差。虽然从用户体验角度出发，用最少的操作、最简单的流程满足用户所需是产品追求的目标之一，但通过权和利弊之后，二次确认的出现实属迫不得已的折中方案，它能够起到给用户多一次思考避免误操作、同样的含义换种方式表达、重要的内容加深二次记忆等作用。
二次确认使用得当，可以避免用户、产品的潜在风险，但若是从主观角度一味的滥用，就成了对用户的恶意干扰、影响使用体验，导致出现因多步骤操作增加任务完成难度、降低转化率、损害产品形象等问题，所以需要从业务（用户侧、产品侧）实际角度出发，两相其害（加-影响使用体验；不加-造成一定损失）取其轻的考虑是否需要增加二次确认弹窗。
当用户的某个操作可能带来不可逆转、错误严重程度较高时，例如：放弃仅有一次机会的较好福利、手机系统还原、应用账号注销等，系统都会给予二次确认，降低用户认知偏差后，以确保用户是经过多次思考才做出的决定，即便后续给用户造成损失也不会过于降罪产品，产品也算是“问心无愧”了。
常见于用户操作之后的状态反馈，即便用户没有注意到，也不会造成较大的损失、或结果已经注定，相对来说成本较低，大部分出现在任务过程中的提示（可重复）和结果反馈，以确保用户知晓当前所处状态。
非模态弹窗toas样式居多，例如加载中、操作成功、刷新结果、清除缓存等，可出现在其他类型的弹窗之后或同时存在。
优秀的弹窗需要从视觉、交互两方面思考，视觉上简洁、易懂，交互上可操作且可控。
视觉层面：首先需要做到的是易懂，这时候就非常注重文案清晰程度及按钮层级关系了，弹出的信息需能直击要害，用户看了能一目了然才是关键；其次，弹窗属于一种干扰信息的存在，设计必须简洁，在弹出时需要考虑是否会过度影响（影响是一定会有的、且看如何降低）用户的其他操作。假想我们正在玩游戏、突然来了电话全屏幕覆盖（传统来电），自己会以最快的速度挂掉电话，回到游戏中后发现自己已领“盒饭”，即便来电是多么的理所当然，但心里必定是非常不痛快的，那么，如果来电以弹窗的形式且占据屏幕很小区域（如今的来电方式）是不是就给了用户足够反应时间及缓冲时间呢？
交互层面：弹出的内容及操作入口需清晰可操作，虽然有时基于业务需求，产品更希望用户能进行下一步操作而并非回到上一步，即便如此，我们也只能通过弱化次要操作以突出主要操作，用户有来去自由的权利，如果弱化至用户看不清、甚至找不到的程度，即便提供了次要操作入口，也会存在反面作用；另外需注意用户对产品的可控性，不管产品如何期望用户进入下一步转化，但不能强制，一定要给用户提供回去的路（强制版本更新除外），否则，任性的用户可能会直接结束应用，甚至因产品过于霸道直接卸载。
首先，设计师应该理解产品需求，分别从用户侧（能给用户带来什么？满足什么样的需求？避免什么损失?...）、产品侧（能给产品带来什么？产品如何期望？是否合理？能得到什么样的结果？...）分析为什么要加弹窗，然后将分析的结果转化为设计目标，以确保弹窗根据不同的需求，在恰当的时间、适合的样式合理的呈现给用户。
其次，在得到设计目标后，同样需要从设计侧、技术侧思考弹窗组件的一致性。从设计角度，团队所有成员需要对该组件有清晰且统一的认知，了解组件的使用场景，以确保不会错用、滥用，如果增加或更换新人设计师，很容易学习和上手，提升效率；站在技术角度，一致性的常用弹窗组件，便于开发做组件封装后续复用，减少不必要的重复工作，大大提高开发效率。
在UI设计中，组件的设计思路基本相通，旨在满足产品的实用性、视觉的统一性，主要围绕着以下几点进行：
◇ 基础定义：利用清晰易懂且简短的文案描述弹窗组件的内容及目的。
◇ 类型及构成：明确弹窗的类型，如模态/非模态，将其拆分并注明每个小元素的具体信息。
◇ 规则用法：弹窗出现的位置、包含的具体内容及信息的展示规则，比如哪些场景可复用。
◇ 交互状态：交互流程逻辑清晰，拟请产品交互前、交互中、交互后如何反馈以及用户随时可能碰到的问题。
设计弹窗时需要注意信息的主次层级关系，优先传达用户想要的或产品想要让用户知道的，以确保重要的信息在第一时间传达给用户。
弹窗需要根据实际的场景合理使用，不能为了简洁而过分删减内容、更不能画蛇添足。例如一些偏向于操作状态、系统报告类的提示可以使用简单的反馈，而可能造成用户损失的提醒就需要刻意打断用户，给予更明确的提示甚至二次确认。
△ 例如删除内容就需要使用模态弹窗明确提醒用户，如果用非模态很可能被用户忽略从而带来不可逆的损失。
因弹窗本身承载内容有一定的局限性，固文案一定要简洁且精确，能用一句话说清楚的就不要过于啰嗦，不仅容器的空间有限且用户的耐性也有限，需要在有限的空间、有效的时间内清晰的表达出核心内容。
针对运营弹窗，如果弹出的时间不对或过于频繁，可能会造成用户反感，所以需要把握好弹出时机及频率。
例如用户有一张未使用的优惠券，如果用户每次进入应用都看到弹出提醒，确实又没有购买商品的意愿，总是被弹窗打断真的就很烦，那么可以将提醒弹窗设置为每日首次进入应用时提示、每累计进入应用5次后提示、即将到期提示或者用户有购买意愿且优惠券支持改品类时提示等，总之，需要控制在大部分用户的可接受范围内。
本篇文章主要系统的分析了弹窗组件分类及使用场景，总结的虽然不是很全面，但能让很多新手设计师清楚认知弹出组件的定义及用法。另外，弹窗不管如何设计，都需要有一个不断优化的过程，要根据产品的实际情况不断思考与打磨，通过脑暴或已知问题作出更好的改善。
能清楚认知、理解、使用弹窗组件是一个成熟UI设计师必备的条件，当然，并不能以此定义设计师是否优秀，在此基础上，还需通过持续的学习探索，挖掘出更多技巧，不断提高自身的专业能力。
文章来源：站酷 作者：大漠飞鹰JYSJ
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设
弹窗作为应用的辅助窗口之一，在B端产品中占据重要作用，很多产品甚至大部分功能都需要在弹窗中完成。有些弹窗会被用来承担复杂的设置、有些弹窗会被频繁调用、有些弹窗需要提供更详细和更结构化的信息，如何处理好弹窗在整个任务流中的交互对UI来说非常重要，因此本文主要探讨B端产品中的弹窗设计和规范。文末会提供可供调研学习的B端网站。
如果你想了解B端系统图标的设计方法，可以浏览上一篇《小白适用：如何快速掌握系统图标的设计方法》，欢迎讨论指正。
不知道你们有没有思考过“对话框”和“弹窗”的区别，我们平常所称呼的“弹窗”主要着眼于动作，意思就是弹出来的窗口，是泛指，在GUI（Graphical User Interface）屏幕中几乎所有弹出来的对象都可以称之为“弹窗”。
在常用的两个前端网页开发组件Ant Design和ElementUI中，没有单独命名为“弹窗”的组件，都是细分在各个功能分类中。比如Ant Design中相关的细分就有警告提示、全局提示、对话框、通知提醒框、气泡确认框等，而ElementUI中则又是不一样的细分法，除了分类方法和命名不一样，归根结底达到的目的是一样的，以上我们都可称之为“弹窗”，当然在工作中用细分的称呼会更专业更明确。
这里的“窗口”对标“对话框”和“弹窗”的概念，窗口是承载应用程序的区域，应用程序的窗口被打开，则表示该应用程序正在运行中。窗口可以移动、可以放大缩小，主要有二种姿态，一种是“独占式”，一种是“暂时式”。顾名思义，“独占式”就是需要占据大部分屏幕的应用，ps、ai的窗口就是“独占式”窗口，而“暂时式”则大部分时间在后台运行，比如音乐播放器、杀毒软件等，只需在必要时打开即可。
一个应用通常由一个主窗口和若干辅助窗口构成，弹窗就是典型的辅助窗口之一。
对话框强调了用户与计算机进行对话的过程，是叠加在应用主窗口上的弹出框，一般在对话中它会给出消息或要求输入。当对话完成后，即可关闭对话框。说人话就是，对话框一般需要用户进行操作，当用户输入或者点击“确认”、“取消”等按钮时，计算机会根据指令进行工作，这是一个人机“对话”的过程，因此称之为“对话框”。
无论在现实中还是界面交互中，我们都不希望对话被打断，所以对话框通常是模态的（下文会解释模态和非模态的定义）。
梳理完三个容易混淆的概念之后，接下来主要从弹窗的二个角度展开讨论：弹窗的分类和应用场景；弹窗的设计细节和技巧。
弹窗可分为两大类型：“模态弹窗”和“非模态弹窗”。
模态弹窗：用户必须给予弹窗反馈，除非点击关闭或者操作完成，否则弹窗会一直在。形式上来说就是给当前页面添加蒙层，使用户将注意力集中在弹窗上。上文提到，无论在现实中还是界面交互中，我们都不希望对话被打断，模态弹窗不会轻易被打断，所以对话框通常也都是模态弹窗。
模态弹窗的常见场景：你打开了一个应用的模态弹窗后没有管它，然后切换到其他应用程序中去，等你忙完回到原来的应用时，那个当初的模态弹窗仍旧在那儿等你。这就是模态弹窗，虽然看起来僵硬死板，但是它的目的和使用范围通常是非常清晰的。
非模态弹窗：不需要给出反馈，不影响用户的其他操作，主要有属性配置弹窗、Tooltips、消息通知、气泡框等类型。
下图红框中就是典型的非模态弹窗，它们可以同时开启且互不影响，不会影响主程序的进程。
非模态弹窗的另一个特点就是：实时生效。点开非模态弹窗的同时仍然可以看见主界面，主界面会根据你的操作实时变化，你可以随心所欲地不断选择、改变、选择、改变，而模态弹窗则无法在你点击其中一个表单的当下立即做出改变。
下图例子就是非模态的属性配置弹窗。
出于营销目的，这类弹窗都会第一时间出现在你面前，直到手动关闭，它的特点就是不用登录也会出现，提高曝光率，便于拉新和转化。
主要是为了将一些重要信息通知给用户，这些信息要么来自一些被触发的事件，要么来自应用开发者的信息，一般在用户登录后第一时间弹出，确保用户不会错过。需要注意的是，在应用的通知中心一般也需要保留这类重要或者高级别的通知，以便用户可以随时查看回顾。
提示类弹窗是由应用程序主动弹出的消息，主要有三种状态：错误、警告、确认。通常是用户进行某项操作后给出的反馈信息，会中断当前工作流，属于阻塞型提示。
以上都属于通知公告类的“模态弹窗”，特点就是一般不需要用户具体操作，用户将其关闭或者点击“确认”等按钮即代表用户已经接收到该消息，弹窗就完成了它的任务。
“简单”意义上的弹窗可以理解为只有平铺的表单让你选择或输入，交互清晰明了。比如创建项目、分享链接、更改名称等操作。
有些应用的功能配置中有很多复杂的属性，简单平铺的弹窗无法满足需求，需要分层分类归纳，于是从20世纪90年代开始出现了选项卡/标签页弹窗。它的优点是合理利用了空间，也能让用户更好的理解信息层级。
mac os 8.5系统的弹窗（发布于1998年10月）
monday.com的配置弹窗（简洁的标签页）
标签页弹窗的设计必须合理且适度，找到信息之间的因果关系，仔细斟酌并加以连接整理。同时，单个弹窗中的标签页不宜过多，一般不超过五个（动态可增减的标签页除外）。
如果你的标签页过度堆叠，你需要尝试改变交互方式，重新整理信息。一种办法是增加标签页的深度，将能够归纳在一起的内容尽量整合，放置在单个标签页中；另一种办法是拆分信息，分成多个简单的弹窗。
下图中的例子就是第一种办法，整个弹窗有三个标签页，但是单个标签页中又划分了更详细的结构化信息，是一个典型的标签页少但信息量大的弹窗。
流程步骤弹窗与标签页弹窗接近，区别就是步骤弹窗需按顺序进行，一般上一步未完成之前无法进入下一步，用户注册常用这种方式。
属性配置弹窗主要为了让用户改变某一对象的属性，可以是局部属性也可以是全局属性。
属性配置也可以用模态弹窗，如何选择用“模态”还是“非模态”？当你需要让用户实时看到界面的变化或者表单项简单的时候可以选择“非模态”，如果操作复杂或者信息加载比较耗时，则采用“模态”更合理。
下图为实时生效的日期选择弹窗
下拉菜单几乎都是非模态，它的优势明显，没有复杂操作和各种表单，只需要鼠标划过点击即可，快速。
上文中应用级的消息提示通常是模态弹窗，而非模态的消息提示弹窗则通常从页面的顶部或者右侧弹出，这类弹窗可以长时间驻留在屏幕边缘，也可以一段时间后自动消失。
点击按钮时，弹出气泡式的弹窗就是气泡框，气泡框可以针对元素进行简单的操作，尺寸也会根据内容大小不一。
Tooltips跟上图的气泡框很类似，区别在于Tooltips更轻量，属于页面中最小的弹窗类型，用于功能的提示说明，通常都是文字，背景用深色来与主界面拉开层次。
一般来说，如果是明确的属性配置弹窗都应该有一个标题来说明用途或功能，以及关联的动词来方便理解。比如“创建列表”、“删除列表”、“修改配置”、“配置参数”等，不同标题对应不同的功能场景，前提是方便理解。另外，动词在名词前面或者后面都可以，注意统一规范即可，不要一会儿在前一会儿在后。
标题字号一般比默认文本字号大2px或4px，也有应用为了突出标题，选择使用更大的字号，但大的字号也应该符合文字规范，而不是随意使用。
模态弹窗应至少包含一个以上的关闭方式，常见的弹窗关闭方式有4种：（1）、右上角的关闭按钮；（2）、弹窗底部的“取消”按钮；（3）、弹窗外的任意区域；（4）、一段时间后自动消失。
“关闭”按钮在弹窗外：常见于营销弹窗，一方面按钮远离弹窗，比较隐蔽，拖延用户关闭弹窗的时间，提高信息的曝光率。
“关闭”按钮在弹窗上：版式设计中有一个“破型”的概念，是一种打破规矩的设计技巧，能让画面快速吸引眼球，所以营销类弹窗经常采用这种设计方法。这种概念可以理解为，我们希望用户关注于被强调的部分，常见的场景就是ios系统批量删除App的时候，应用图标左上角会出现“移除”按钮。这种方式强调了“关闭”按钮，视觉上增加层次外，用户的关闭体验也更佳，减轻干扰性弹窗对用户的负面情绪。
“关闭”按钮在弹窗内：这是应用最广泛最不容易出错的方式，对用户来说，固定在弹窗右上角的“关闭”按钮代表了安全感，在误操作或者想中断操作时我们会自然而然地去右上角点击“关闭”。
弹窗底部的按钮一般有2种功能:（1）、取消或者确认；（2）、进入下一步流程。基于大多数用户右手掌握鼠标的习惯，一般按钮居右下角的设计方式更广泛。这些按钮上的文字大不相同，代表了对计算机的不同指令，但相同的结果都是关闭了当前弹窗。
有些应用也会采取按钮居左的设计，这种方式有一个优点就是减少误操作，让按钮远离鼠标点击热区。
这种方式一般用于模态弹窗，除了弹窗中的关闭按钮外，点击弹窗外的任意区域关闭体验更佳。操作配置类弹窗不建议采用这种方式，容易误操作导致正在配置中的弹窗被关闭。
B端弹窗的标题字号通常比内容文本大2px或4px，常用字号为12px、14px、16px，14px为默认文本字号，12px为辅助说明字号，也有紧凑型页面将12px作为常规字号。无论选用何种字号，都应跟主界面的字体规范保持一致。
左对齐：弹窗中应用最多的对齐方式，适合表单较多的配置类弹窗。
居中对齐：常见于消息提示类弹窗，适合图文结合或者信息较少时的排版方式。
两边对齐：两边对齐的方式让弹窗看起来更规整，适用于平铺的配置类弹窗。一般表单较多的情况下不建议使用两边对齐的方式，一方面左对齐比两边对齐看起来更有层次，另一方面多表单时两边对齐会使弹窗看起来冗长。
除了对齐方式，表单的排列是B端弹窗中最令人头疼的一块内容了，在一些复杂的操作弹窗中，常常包含各种类型的表单，例如下拉框、输入框、日期框、穿梭框以及各种组合模式的表单项，很容易让表单看起来凌乱，也影响了交互操作。
单行一个表单项：常见的表单排列，适用于表单较少的排版方式。
单行多表单并排：在复杂场景中，单行只排列一个表单项会让弹窗超长，因此会采用多个表单并列分布的方式。这种方式存在2个问题：（1）、如果表单的标题长短不一，看起来参差不齐，下图中的表单标题一样长是最理想的场景；（2）、横向距离长，导致弹窗过大。
标题与表单分行排列：越来越多的应用采用这种表单排版方法，这种方法可以兼顾更多场景，可拓展性也更高。这种方法会增加纵向空间的占用，不过眼睛焦点的纵向浏览比横向浏览获取信息效率更高，所以在表单复杂的情况下，相比于上一种方法也是一种更优解。
表单的排版不只局限于一种，我们需要根据表单内容来设计。但是需要注意3点：
(1)、当表单标题长短不一，上下无法等距排列时，我们要尽量将标题和表单分行排列；
(2)、一行不要出现太多的表单项，一般来说弹窗中最多一行排列三个；
(3)、表单的灵活性很强，哪些需要宽度固定，哪些需要根据内容可扩展可换行，我们都要在设计中加以规范说明，多考虑可能会出现的样式问题，提前规避。
弹窗是一个容器，容器的大小取决于放置其中的内容物。这里主要讨论场景复杂的对话框的尺寸规范，其他例如Tooltips之类可作为单独的组件在需要的场景直接调用即可。
对话框的大小主要根据内容而定，B端应用中，一个尺寸无法满足所有类型的弹窗需求，所以我们要设定几种常规尺寸，一般可设定为4种：S（通知提示类）、M（配置简单）、L（配置复杂或者扩展详情）、特殊（根据实际情况而定）。pc的小屏幕分辨率为1024*768，所以高度尽量控制在600px以内（除去导航栏、工具栏高度），宽度控制在1000px以内，如果你所设计的B端产品在某个固定的场景中使用，也可以根据使用场景而定，原则就是要让弹窗能够一屏展示完全。
这里主要分享一个小技巧，对于弹窗来说很实用。sketch右侧属性面板有一个“调整尺寸“功能，非常适合各种组件化的应用。不同场景下我们会需要不同尺寸的弹窗，有了这个功能，我们不需要每个弹窗都画一遍，只需要创建一组基本的弹窗规范，其他尺寸可以根据所需场景调整。
未调整过的组件不能随意更改尺寸，否则将变形不可用。
创建弹窗组件时，把弹窗里需要固定不便的尺寸参数设置好。（设置方法：靠左的左边固定，靠右的右边固定，对角的靠两个边固定，分割线高度固定，文字图标宽高都固定）。
设置好后的弹窗组件即可在设计稿中随意调整大小，固定参数不会发生变化，因此我们在设计规范中只需要做一种或二三种常见的弹窗样式即可，不需要把设计稿中的每种尺寸都放到设计规范中。
表单同理，在组件中设置好参数后，调用时可以根据情况替换图标、文字和宽高，非常方便。
在B端设计中，随着数据量的增加和业务线的扩大，设计师在设计时，常常需要考虑到交互的可扩展性，我们设计的交互至少要满足未来半年到一年的产品应用。因此作为使用频率很高的弹窗，我们在设计时尤其需要考虑全面，不只为了满足当前的场景，也要考虑未来可能应用的场景。
最后碎碎念一下，这是一篇从2020年跨越到2021年的文章，加上拖延症，写了很久...原本只打算简单的分享和总结，结果越写越多，越写越扩展。其中很多内容是自己在实际工作中遇到的坑中摸索出来的，做个总结也便于自己的成长，欢迎各位大佬们批评指正。
文章来源：站酷 作者：time不休
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这几天在工作中处理了一个历史遗留问题：弹窗适配，几经折腾终于落定发包。于是我也趁着这个机会把弹窗体系梳理研究了一遍。
我们常见的弹窗有对话框，提示框，有时候在需求沟通中经常会听到产品同学说，给这里加个弹窗，那里加个提示框吧。实际上，这个弹窗到底该不该加？这个弹窗承载的是提示说明文字内容，还是需要引导用户下一步操作？接下来我们从弹窗的属性来聊聊我们的弹窗到底在什么时候加比较合适？用什么形态展示体验会更好？
常见的模态弹窗有这几种：对话框、动作栏、浮层。
对话框：对话框主要是给用户提供选项、相关的操作。另外，在一些对话框中，也可以展现图片、头像、步骤图、其它输入项等。
动作栏：常见的动作栏一般会出现屏幕下方，比如选择某个内容时候，出现的选择。
浮层：弹出窗口，浮动于顶层窗口，气泡。
非模态弹窗：是指不强制用户操作，他的作用相当于内容信息提示，他的出现不打扰用户的当前操作，并且有时间限制，在一定时间里能自动消失。比如「xxx 功能已更新哦」，这种提示是不需要用户点击操作，让用户看到就可以了。
常见的非模态弹窗有这几种：toast/hud、snackbar、notice（通知）
toast/hud：iOS 用户更习惯于在中间感知反馈信息，通常在信息提示完 3 秒左右后会消失，安卓通常会出现在屏幕顶部或者下部，不会遮挡主体内容。需要注意的是 toast 只有文字，hud 是可以带有图标的。
snackbar；可以理解为加强版的 Toast
notice：系统消息、通知推送，也是不干扰用户行为，有消失时间，是非模态的弹窗。
了解完弹窗体系后，我们就可以针对具体场景来看产品同学说加个弹窗到底合适不合适？我们可以从下面的几个使用场景来看用什么样的弹窗合适。
1. 重要打断用户操作
在一些重要操作，避免用户操作失误。不过目前很多人都觉得这类弹框有利有弊，有的地方出现得不合时宜，打断了用户的使用状态。所以在设计这类弹框时要非常谨慎，得通过多研究确认是否有必要出现。
对话框相对来说比动作栏更重要，因为在视觉中心，更能强烈引起用户的重视，对于十分重要的内容需要打断用户上一步任务的，采用对话框的弹窗，对于不是特别重要信息露出又需要终止用户上一步动作的情况下，一般采用动作栏弹框。
2. 定制化广告弹窗
如功能更新、升级、优惠券弹窗。这一类一般是强制用户看到的，要展示出与众不同的特色，在视觉上比较突出，会使用模态的弹窗浮层形式。
3. 给予一定提示
比如提示用户状态、信息、反馈，确保用户知晓自己所处的状态，并可以做出相应的措施。一般使用非模态的弹窗。
出现在用户操作完之后的反馈，比如提醒用户页面正在加载中、保存成功、已删除、已刷新等等。
可以不用弹窗的反馈例子：完成页
比如已支付成功、下载完毕、签到成功，这一类是告诉你上个动作结束了，下一步不需要进行引导了，这种反馈大多数都不采用弹窗形式展现了。
1. 层级关系
弹框是内容和导航的补充，用于通知、操作菜单、成功或加载状态的 toast，他是写在蒙层上面的一层内容。
2. 适配方式
下面我们需要了解的是这几种弹窗在开发那的实现形式。我们可以理解为 2 种形式：
一种是开发直接用系统的接口，缺点是具有不可定制，形式美观度不够好。
另一种是开发用代码会单独写出一个模态弹框系统，这套系统与整体设计语言具有一致性，可以复用在各个任务中，可以定制化设计。
需要注意的是，代码写出来的模态样式要考虑在不同机型的适配情况，考虑不同机型的边界。这个适配也有两种实现形式，一种是固定宽高尺寸，展示在不同机型尺寸中，另一种是常用的等比例缩放。这个就需要开发与设计进行密切的沟通，能尽量合理地在不同机型展现更加合适，避免出现极限的情况。
我们是这样操作的，为了避免尺寸比例混乱的情况，会设计一个弹窗的宽高尺寸范围，开发同学代码写出的这套弹窗的适配在各个机型中，是在一定缩放比例下，适用各个不同情况下的视觉展示。这套弹窗可以调用在首页引导、升级等各个页面的弹窗设计中。
文章来源：优设 作者：咏舍
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
弹窗在设计中运用的非常广泛，基本上每个应用都会涉及到。恰好这段时间我也在整理公司设计组件这一块，所以就想总结分享一下。设计师都会使用弹窗，但对于弹窗背后的分类及运用可能还不是特别了解，在写这篇文章之前，我查看了很多应用及资料，所以下面会有大量的案例，相信大家看完可以对弹窗的认识更明确，做设计规范的时候也能有自己的想法。
现在的弹窗分为两种，一种是模态弹窗（重提示），一种是非模态弹窗（轻提示）。
常见的模态弹窗：Dialog/Alert、Actionbar、Popover/Popup
常见的非模态弹窗：Toast/Hud、Tips、Snackbar
一、模态弹窗
Dialog/Alert 对话框
对话框是我们常用的弹窗，安卓开发语言是Dialog，iOS开发语言Alert，它通常出现在页面的中间，对话框/警示框的类别非常多，对用户的干扰比较大。前面之所以说模态弹窗是一种重提示，是因为它需要用户主动触发选择才可以继续当前的操作。
① 信息-选择确定
特点：这类弹窗通常是一些系统功能的授权、版本更新、消息通知、重要提示等，通常只有1～3个主按钮，只需要用户进行简单的选择。
下图举例分析：
iOS询问是否删除APP，就属于重要提示弹窗，它一般会用在像删除、确认提交...一些比较重要的功能操作中。
小红书的这个是否允许使用网络弹窗，大家一定在许多APP中都见过，这属于一个系统自带的授权弹窗。
马蜂窝与天猫的消息提醒弹窗，一个属于初次使用APP时，系统自带的弹窗，一个属于使用后期APP为了推送消息，主动提示你开启消息通知。
有钱花和爱奇艺的版本升级弹窗，都属于偏运营类的弹窗，这一类的弹窗通常会弱化暂不升级的按钮，突出升级主按钮。
② 信息-输入勾选
特点：这类弹窗通常是输入一些比较少的信息或者勾选信息，常用于备注输入、规格选择、分组选择等，通常只有确定和取消两个按钮。
下图举例分析：
微博对于已关注人的分组及备注，都属于信息输入及勾选类弹窗，操作通常都比较简单。
③ 信息-传达展示
特点：这类弹窗通常是一些广告、红包优惠、节日活动等一些运营类弹窗，主要是吸引用户点击及参加活动，这类运营弹窗通常会设计的比较吸引人，造型各异，会突出领取、查看等大按钮，弱化关闭按钮。
下图举例分析：
拼多多和饿了么这类的红包优惠弹窗，就不多说了，大家都懂，它们最主要的目的就是吸引用户点击，提升购买率。
美团的变黄送好礼弹窗，属于一次比较大的品牌升级，它主要目的是让用户更好的了解并接受品牌色升级。整体的元素及动效设计都非常清晰，视觉感很强。
支付宝的这个猜世界杯赢蚂蚁积分的弹窗，属于活动弹窗，它的整体设计非常贴合主题。
Actionbar操作栏
Actionbar主要分为Action Views和Action Sheets。它们通常是由底部弹出，它的操作及信息会比对话框类型的弹窗更多更复杂。这种当前页面的下拉弹窗好处就是，可以让用户清楚的感知当前的操作，比跳转到新页面更加有安全感。还有一个特殊的抽屉式弹窗也顺便说一下。
① Action Views操作视图
特点：这类视图弹窗通常占屏比较多，以文字、图标等形式展示各种功能，也可以说这类的弹窗是一个小型的页面。它一般从底部弹出，不太强调归属，大多出现在购买、支付、分享等场景。
下图举例分析：
百度云盘的这个+号扩展弹窗比较特殊，它也可以说是浮层，占满整个屏幕，它最吸引人的还是它的小动效。
京东购买时的弹窗和支付宝付款时的弹窗，都是比较典型的，在各种电商产品及付款页面用的非常多。
转转这个的键盘与输入为一体的弹窗，设计的非常人性化，让用户一次就可以输入多个价格。大大提高了用户的操作效率。
网易云音乐的分享弹窗就是典型的以文字与图标来展示功能的。
微信读书的底部阅读设置弹窗，比较特殊，为了使用户沉浸阅读，它是比较隐藏的，而且非常轻量化。
② Action Sheets 操作列表
特点：操作列表相对于操作视图，它更单一。主要是以文字展示功能按钮，重要敏感的功能操作一般会用主题颜色或红色显示，主要运用在一些日常控件、功能选择、删除、保存等场景。
下图举例分析：
Keep的选择日期，属于iOS原生控件，非常常见。
淘宝的选择地址弹窗，整个展示的非常清晰全面，而且用户每选择一项，就会有相应的显示。
支付宝和天猫超市的两种列表弹窗，就不多说了，简单的功能选择都会采用这种。
③ 抽屉式弹窗
特点：这种抽屉式弹窗一般从左右两边弹出，经常运用在一些导航扩展和目录展示中，它能承载比较多的信息，基本上都是用来放一些不太常用的功能。
下图举例分析：
微信读书及一些其他阅读类产品，由于目录很长，而且一般是从上到下浏览的，所以基本都采用了这种抽屉式弹窗。
小红书的这个抽屉式弹窗，以图标和文字的形式展示了一些不是很常用的功能，为我的页面节约了不少空间。
Popover/Popup 浮层
Popover是ios的开发语言，popup是安卓的开发语言，浮层是指，用户点击某个功能后浮出一个临时气泡对其作出补充，它通常会伴随着半透明的遮罩或者投影衬底，用户需要点击功能区域操作，或者点击空白处取消，才能进入下一步操作。它与上面操作栏的最大区别就在于，它更强调归属，可以出现在页面的任何地方，而操作栏一般只出现在底部，不强调归属。
① 指向浮层
特点：这类的浮层一般伴随有小三角指向，强调归属。气泡里面的功能通常以单一的文字或文字与图标结合的形式来展示，主要运用在顶部加号补充、复制、分享转发等场景。
下图举例分析：
支付宝和美团的顶部加号补充浮层，展示形式是差不多的，只是UI样式不一样，一个是白色气泡黑色半透明遮罩，一个是深灰色气泡。
微信读书和微信的选择文字气泡，在文字复制中很常见，通常会与其他转发收藏小功能一起出现。
② 导航筛选浮层
特点：所谓导航筛选，自然是与导航分不开的，再加上浮层是比较强调归属的，所以它通常会与导航连在一起，一般出现在顶部。
下图举例分析：
美团的导航筛选，因为选项及开关很多，所以它的底部会有两个主按钮，一个完成，一个重置。
饿了么的这个只有一个功能选项，所以它一般是直接选择就收起浮层了。
③ 引导浮层
特点：引导浮层的作用就是引导用户更好的使用产品及交互，降低用户的学习成本。它通常会出现在用户首次进入APP的时候，一般只会出现一次，点击空白位置或我知道了浮层就会消失。
下图举例分析：
QQ音乐与微医的引导浮层都是用户首次进入应用时，给出的功能搬家提醒浮层。
二、非模态弹窗
Toast/Hud 提示框
Hud是ios的控件名词，Toast是安卓的控件名词，它们都属于一种轻提示，给予用户及时反馈，让用户知道自己当前所处的状态。
Hud一般只出现在屏幕的中央，以毛玻璃的样式表现，内容展示比较富丰富。
Toast可以出现在屏幕任意位置，通常以黑色半透明的小框来表现，内容一般是纯文字提示或者文字与图标结合提示。
① 状态提示
特点：状态提示的Toast，它们一般都是反馈用户当前操作的状态，只出现1到2秒就会自动消失，场景一般是关注成功、密码错误、音量提示、静音、清除缓存等。
下图举例分析：
移动的属于操作遇阻提示。
京东的属于操作成功反馈。
iOS的音量控制属于毛玻璃Hud。
微信的清除缓存属于正在操作状态。
② 按键提示
特点：按键Toast提示与状态提示不同，它们一般自动出现或者点击触发才会出现，用于对功能点的补充说明，让用户对功能有更深的了解。
下图举例分析：
蚂蚁森林里点击树木就会出现相关信息，当然它也会自动出现，点击其他区域也会自动消失。
知乎的消息标签不仅有小红点提示，还会在上方自动出现数字提示。
Snackbar
Snackbar是Android中的一个控件。它一般会在超时自动关闭或者在屏幕上滑动关闭，它没有Toast那么轻量，设置出现的时间会比Toast长，而且可以点击按钮进行交互。
下图举例分析：
UC浏览器的Snackbar，是在提示用户上滑，来查看更多内容，它需要滑动或者超时才能关闭。
京东的Snackbar，是在为用户推荐商品，提示用户点击箭头来查看喜欢的商品，它比UC浏览器多了一个关闭的按钮。
Tips提示
Tips与Snackbar最主要的区别就是：Tips它是内嵌在页面上的，而Snackbar则是浮在页面上的。Tips一般要让用户主动触发关闭按钮或点击进入下级页面才会消失，一般用于需要用户感知到的通知信息，或者植入广告。
下图举例分析：
百度云盘在下载视频时，就会出现一个Tips的提示，让用户观看广告来得到加速下载。这种提示虽说是广告，但它抓住了用户的场景及心理，观看广告的几率大大提升。
爱奇艺的Tips提示就属于重要通知提示了，提示用户VIP即将到期，续费可优惠，它们都有一个主按钮及关闭按钮，需要用户主动触发提示才会消失。
规范总结
目前的弹窗样式非常多，你能想到的，你想不到的基本都可以技术实现。但这同时也带来一个问题，那就是“不规范”。以上提到的弹窗种类，你只需要选择符合你产品要求的几个类型，最好不要在一个产品中运用多个同种类型的弹窗，否则后期会很难规范及组件化，当然运营广告类弹窗可以另当别论。
差不多就写完了...大家觉得有帮助的话，记得点在看和转发～
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝 http://www.lanlanwork.com
