编辑指南：弹窗不仅是一把“弹出广告”，更是一把双刃剑，使用得当可以聚焦用户，使用不当可能会让用户不快，甚至打击潜在用户。 那么，弹匣怎么设计呢？ 本文对弹坑进行了详细分析，一起来看看吧。
说到弹珠，很多人对弹珠的印象还只是“弹出式广告”。 网站为了获利，广告主打算提高点击率。 那时的广告就像枪林弹雨，用户无处可躲，恼羞成怒，甚至想毁了电脑。
广告弹匣在2010年曾被《时代》杂志选为最差的发明之一。
我们现在熟悉的淘宝曾经为了在电子商务领域生存，不得已使用了大量的“流氓广告”。 这确实惹怒了用户，但淘宝也频繁露面，不得不说对大家更熟悉。
弹窗是一把双刃剑，如果使用得好，会更加聚焦用户，但如果使用不当，可能会让用户不快，甚至打击潜在的用户。 设计弹匣时，遇到过以下混乱情况吗？
什么时候用弹匣，什么时候用网页，弹匣的标题如何能重叠多少个弹匣？ 弹匣设计的好在很大程度上体现了设计师的基本功不扎实。 小弹匣的设计看起来可能非常简单，但面对各种用户场景和业务背景，弹匣背后的思考并没有停止。 今天，让我们全面了解弹坑。
01弹窗的定义正式识别了弹窗的前面。 我在家里做点什么，这个时候电话铃响了，我得放下手里的事情接电话。 但在智能家居环境下，人工智能可以自动接听电话，但手中的事情还在继续。
如果把前者比作跳跃的页面，那么后者就是弹坑，可以在不脱离当前场景的情况下吸引现在的注意力。
目前，设计界对弹匣的定义多种多样，从外观布局来看，弹匣是一个跃出页面上层的容器，容器上有文本、按钮、选项、标签或表单等组合内容； 从设计的目的看，弹匣是用户与产品之间的一种交互方式，是对用户注意力的引导形式，根据用户注意力的抓取量，有Dialogue、Actionbar、Popover、Toast、Snackbar等
广义上说，弹窗实际上并不像其定义那样死于框，有时弹窗上也不一定有容器。 例如，追剧时常见的弹幕，也是新型的弹窗。 即使初学者引导，也是一种弹匣。 但我们在这里谈的是狭义的大家在规范中常见的弹窗，不典型的弹窗不在今天的讨论范围之内。
02弹窗的构成弹窗的基本构成如下。
屏蔽弹匣主体(容器、标题、内容、动作按钮)关闭入口(没有不需要/模态弹匣) )。
1 .口罩在弹匣容器下的页面上方戴口罩，以便用户聚焦弹匣。 通常，这个口罩是半透明的黑色，口罩的颜色越深，用户就越能集中精力在当前页面上； 口罩的颜色越浅，用户的弹出感越小，产品也越容易亲近。
如果页面上有多个弹坑，则意味着多个遮罩层。 在这种情况下，应该如何确定遮罩层的颜色呢
根据各规范，不建议弹窗重叠超过3个，弹窗超过3个时口罩颜色不变。 这里再补充一点，弹坑数量太多，一个个叠起来，用户很容易迷失方向，这种情况下可以采用错位的方法。
2 .弹窗主体弹窗主体可以分解为标题、内容、动作按钮。
弹窗标题和内容的书写规则在后面的句子中有详细说明，在此不再赘述。
弹窗的动作按钮通常不超过3个：
一个按钮：那一定是可以关闭弹匣的操作，如信息公告类弹匣的“知道了”。
两个按钮：这是最常见的情况。 一个是推进任务进程的动作，一个是取消。
3个按钮：“了解更多”等罕见情况，但由于用户离开弹匣，弹匣任务无法完成，不推荐。 需要向用户展示更多内容时，可以嵌入信息扩展功能，点击图标在弹匣下展示更多信息，这样可以了解更多信息，同时也不需要离开弹匣。
关于弹窗按钮的位置配置，有两个一般的配置规则。 等分配置在中央和配置在任一侧，根据平台的不同配置方法也不同。 下面举例说明。
1 )在材料设计中右对齐
2 )在IOS中分居
3 )在Fiori规格中，手机侧的按钮等分地配置在中央，但电脑侧采用右对齐
3 .弹匣的关闭方式在模式和非模式下有着根本的不同。
对于模态弹窗，其关闭方式仅在选择了包含“取消”选项的选项后消失。 非模态弹窗的关闭方法有很多。 总结起来有四种方法。
1 )关闭按钮(叉) ) ) ) ) ) )。
通常在右上角。 在少数规格中，将关闭按钮放在左上角，一致即可。
2 )取消按钮
它通常与“确认”或其他推进任务已完成的操作按钮成对出现。
3 ) ESC密钥
按ESC键还可以取消非模态弹窗。 Esc密钥是英文escape的缩写，由IBM程序员于1960年创建。 其功能是“取消”、“结束”。
目前，使用鼠标进行交互的人占绝大多数，但出于无障碍设计(一体性设计)的需求，使用键盘完成交互是必不可少的，ESC按钮也是必要的。
此外，这种快捷键的优化大大提高了用户的使用效率，降低了用户的操作成本。
特别是在B端产品中，调用键盘优化操作对不可忽视的用户来说是一个爽快的点。
4 )点击屏蔽区域
遮罩区域是弹坑后面的内容区域，通常会被蒙上较暗的遮罩以使用户更好地聚焦。 当用户单击遮罩区域时，非模态弹匣会自动消失，但为了避免用户意外触摸，如果弹匣是需要用户输入的内容(如表单)，则会自动保存这些内容。
我想再详细说明一下“取消”和“关闭”按钮。 首先，举一个生活中常见的例子。 有10万个孩子问理由，津津有味地追剧，他就来问你问题了。 他还没开口，却掩耳不听。 这相当于弹坑右上角的关闭按钮(叉子)。 但是，关闭按钮只存在于非模态弹坑中
然后孩子问你是下蛋还是下蛋，你问这个问题也不知道该怎么解释，只能对孩子说。 这个问题我也不知道该怎么回答，这相当于弹匣上的“取消”按钮。
“取消”按钮和“关闭”按钮(叉子)最终会关闭弹匣，但逻辑上是不同的。
03弹窗类型1 .模式amp； 非模态弹窗可以分为模态弹窗和非模态弹窗两种类型。 这两个概念来源于开发者的术语。
打开模态弹窗会中断其所属页面的进程，用户必须处理模态弹窗，然后返回到刚才正在进行的页面。
例如，如果尝试删除重要文件，系统将显示一个弹出窗口，询问是否删除。 此时，必须执行以下明确的命令，选择删除还是不删除。 然后，可以离开当前界面。 模态弹窗可以简单理解为用户必须做出的选择。
让我们看看非模态弹坑。 非模态弹匣允许用户在不中断当前页面的情况下处理其他任务。 例如，在设计师们最熟悉的PS上，可以同时调用多个弹匣来更改屏幕参数。 因为图稿是多线程的过程，艺术家可以通过任何参数更改任何参数。
模态和非模态是比较概括的概念，根据规格的不同，对类似类型的弹匣的称呼可能完全不同或略有不同。 接下来根据Microsoft-Fluent UI、Google- Material Design、IOS的规格详细说明几种代表性的弹匣类型。
2 .典型弹匣1 )动作表
类型：模态弹匣
参考范围： IOs设计
基本信息( profile ):Action sheet一次显示两个或多个与当前上下文相关的操作。 您不需要显示许多动作选项，也不需要在动作列表中使用滚动条。
关键点：
动作按钮：将危险性选择(清空、删除等)放在顶部，取消按钮放在底部。 防止滚动条显示在操作按钮太多的操作工作表列表中。 毁灭性的操作需要视觉突出。 2 )模型
类型：模态弹匣
参考范围： Microsoft-fluent UI
简介： Modals还是一个模态弹匣，需要将注意力从当前页面暂时转移到弹匣上，需要用户的交互动作。 与Dialog不同，Modal适用于要求用户进行隐私条款、知情同意等长文本内容或页面设置更改等复杂操作行为的情况。
3 )诊断日志
类型：模态弹匣
参考范围： Microsoft-fluent UI
简介： Dialog是一个模态弹坑，需要人们将注意力从当前页面暂时转移到弹坑上，需要用户的交互动作。 基本用于信息确认、文档删除、选择等比较简单的场景。
分类：
Alert Dialogue :紧急信息、详细展示或动作会中断用户，用户必须做出选择才能关闭弹匣。 Simple Dialogue :展会立即生效的列表选项。 不需要动作按钮。 Confirmation Dialogue :需要用户确认当前的选择。 如果用户反感，可以在此步骤进行修改。 全屏弹匣充满整个屏幕，包括需要完成一系列任务的动作，仅适用于手机端。 使用场景：
如果出现阻止程序运行的错误，则必须向用户提供完成特定任务的重要信息。 例如，需要确定和声明需要最大限度地抓住用户注意力的关键点。
保存按钮将一直呈灰色，直到当前强制要求输入的区域完成。 全屏弹窗的上层允许有几个简单的弹窗。 简化标题，不超过两行，如果长度不确定或大于，则将其放在内容区，而不是标题区。 请将Dialogue的使用限制在最小限度。 由于没有征兆，用户进程将被中断。 大多数弹坑的内容都必须尽量避免使用滚动条，如果必须使用(例如选择日期和时间)，则必须固定标题和下部的动作按钮区域，屏蔽区域的背景也必须保持不动。 4 ) Drawer
类型：模态弹匣
参考范围：材料设计
简介： Drawer是一种性质与生活抽屉相似的容器，通常用于放置与特定窗口相关的信息和选项。 默认情况下，Drawer是隐藏的。 它通常由按钮或菜单触发，并从父界面的一侧出来，因此不能单独存在于父界面之外。
重点：不要使用drawer。 现在流行的软件很少使用drawer。 另外，我不提倡使用。 如果想展示补充内容，请尝试panel、popover、sidebars和split views。
5 )电源
类型：模式，非模式
参考范围： IOs设计
简介：点击某个区域时，power bar会暂时出现在其他内容的上层。 通常，动力栏包含箭头，指向弹出的位置。 单击屏幕上的其他区域或电源切换按钮可取消显示非模态电源切换。 模式的popover只需单击其上面的cancel或其他按钮就可以取消显示。
Popover非常适合大屏幕设备，可以容纳导航栏、工具栏、选项卡栏、表格、图像、地图和传统视图等许多元素。 如果显示Popover，则在它消失之前，无法与当前页面进行其他交互。
关键点：
避免在iPhone上使用popover:popover一般在ipad上使用。 在iphone上，通常不使用Popover，而是通过在全屏模式视图中显示信息来优化屏幕空间。 使用关闭按钮进行确认。 关闭按钮之一是“取消”或“完成”等，值得添加。 当然，如果空间不太拥挤，也可以添加“保存并结束”“不保存并结束”选项。 一般来说，如果不需要再展示的话，Popover应该可以自动退出。 大多数情况下，在用户单击该区域外的范围后，或者在对Popover进行了某些选择后，会将其关闭。 如果需要在Popover中选择多个选项，则必须显示Popover，直到用户采取明确的关闭行为。 如果自动关闭非模态Popover，它将始终自动保存。 用户容易不小心触摸到某个区域，关掉非模态的Popover。 除非用户单击了明确的“取消”按钮，否则在这种情况下不保存工作。 在画面上恰当地放置Popover。 能量播放器的箭头必须直接指向触发它的位置。 power播放器无法在画面上拖动来移动位置，因此无法隐藏画面上用户的重要内容。 当然，也不能隐藏触发它的组件。 一次只展示一个Popover。 同时展示很多能量场会增加画面的噪声，让用户感到困惑。 请不要使用瀑布或阶梯状的Popover。 一个接一个地跳出来。 如果你想给我看新弹匣，请先关掉开着的。 不要让Popover上层看到其他弹匣。 除了Alert。 如果可能的话，请用户单击，为了避免额外的单击步骤，可以打开新的Popover。 请不要让Popover看起来太大。 一个人的力量不应该占整个画面，只要做成适合其中的内容，指向弹出的方向就可以了。 确保Popover看起来像Popover。 用户可以根据个人不同改变超级用户的视觉外观，但不要设计用户无法识别的超级用户。 如果Popover包含标准控件和视图，大多数情况下用户体验是最佳的。 6 ) Snackbar amp； Toast
类型：非模态
参考范围：材料设计
简介：这里一起说明Snackbar和Toast。 因为两者很相似，但有区别。
Toast是一种轻量级的反馈，比Snack bar提示更轻，经常以小弹坑的形式出现，一般在1秒到2秒内自动消失，但为了保持一致，相同的产品尽量使用相同的位置。 与Snack bar的不同之处在于，Toast常用作系统提示消息，它不包含动作按钮，可以出现在屏幕上的任何地方，只有安卓拥有Toast。
Snack bar用于通知用户程序正在或即将发生的进程。 这意味着Snack bar的内容一定与用户当前的操作有关，但Toast弹出的内容与当前操作没有任何关系，只是“收到消息”之类的系统提示。
Snack bar同样暂时出现在屏幕的底部，不中断用户体验，也不需要用户的操作，自己就会消失。 它继承了Toast的所有基本属性，但不同之处在于：
屏幕底部显示0-1个操作按钮(“取消”按钮除外)，单击Snack bar以外的区域时，此处的关注点将消失。 虽然Material design建议使用Snack bar而不是Toast，但Toast仍然广泛用于安卓APP。
重点介绍Snack bar。
使用场景：希望在展示信息的同时将用户的注意力降到最低。
关键点：
副本的内容与当前程序的进程直接相关。 空格键不能包含图标。 您也可以尽量使用不透明的单色背景，增加一点透明度，让副本清晰可见。 为了与副本区分开来，动作按钮以不同的颜色突出显示。 使用最低优先级的按钮样式。 通常是文本按钮。 动作按钮不是必需的。 因为即使什么都不做，snack bar也会自己消失。 添加一个动作按钮通常是“取消”。 最快4秒，最慢10秒，Snack bar会自动消失。 如果需要同时出现多个snack bar，它们将逐个出现，直到上一个snack bar消失后，才会出现下一个snack bar。 它通常显示在界面的底部，不隐藏重要的UI元素，如导航和常用交互。 仅当导航元素(如底部选项卡栏)不位于界面底部时，snack bar才能以与屏幕相同的宽度显示。 如果界面上有浮动行为按钮( FAB )，snack bar不能与FAB重叠，位于FAB之上，底部有常驻导航元素的情况也是如此。 7 ) Tooltip
类型：非模态
参考范围：材料设计
简介：用鼠标悬停、聚焦或触摸Tooltip时，Tooltip会识别相应的元素，并在该元素附近显示一个简短而描述性的副本。 通常说明该要素的功能。 如果停留很短时间，Tooltip就会自行消失。
关键点：
通常，为了避免歧义和补充说明，Tooltip用于说明图像、图标和类似的要素，而不是用于说明本来意思明显的文字。 副本只能包含字符，请勿添加富文本信息，如图标或图像。 完全显示Tooltip的整个组件，避免因为靠近边缘而被修剪。 只要用户的鼠标停留在目标元素内部，Tooltip就不会自己消失，用户离开目标元素后，Tooltip停留在1。 5秒后消失。 8 ) andr iod通知
类型：非模态
参考范围：材料设计
简介：在软件不使用期间，通知会提供有关软件的简短、偶尔的信息。 这样的信息可以提供来自其他用户的交流信息和任务提醒。
通知如何提醒用户：
状态栏图标显示在锁定画面界面上，发出声音或振动，当前画面上临时出现的设备画面闪烁9 )消息栏
类型：非模态
参考范围： Microsoft Fluent UI react 8.65.1
基本信息：显示软件或文件的错误、警告和重要信息。 例如，如果一个文档上载失败，则会出现错误的messabe bar。
关键点：
消息栏通常显示在软件的顶部，主操作栏下方。 例如，office的消息栏位于功能区下方，文档画布上方。 可以同时显示多条信息，但一个场景或一组相关的场景只能显示一个消息栏。 消息栏提供有关用户应该理解的软件或文档的总体信息，而不是操作的直接反馈。 使用图标暗示消息的类型。 例如，信息图表表示咨询类的消息； 盾牌图标表示安全消息，警告图标表示非阻塞错误警告。 10 ) Coachmark amp； 技术可行性
类型：非模态
参考范围： Microsoft Fluent UI react 8.65.1
简介： Coachmark是为了引起用户的注意，增加用户使用自己的机会，当鼠标悬停或选择Coachmark时，会显示Teaching bubble。
关键点：
一次只能将一个Coachmark与一个Teaching bubble组合。 Coachmark可以是单一的也可以是连续的。 需要减少连续的coachmark的使用。 它只用于复杂的多阶段交互。 连续的coachmark优选不超过3个步骤。 Coachmark只是被设计为放置Teaching bubble。 不能更改Coachmark的大小、颜色和动画。 打开弹出窗口时，此操作会减少用户。
04弹窗的设计原则1 .什么时候用弹窗弹窗作为容器？ 使用的时候经常和抽屉和页面一起比较。 那么，给定某个内容的时候，我们应该根据什么来选择使用什么类型的容器呢
首先，让我澄清一下这三个容器的定义。
弹匣：不离开当前页面，完成对某个任务的聚焦。 抽屉：基于父页面创建的附加面板，根据需要调用。 页：最底层的容器是我们最常见的容器形式。 其次，当我们被给予一个需求时，首先要分析这个需求，从以下几个方面来判断。
1 )信息承载量
既然是容器，必然有容量，这里使用信息量可能更合适。 信息量包括图像、视频、文本、表格等各种形式的信息量。 如果信息量非常大，又密又麻烦，当然不推荐弹夹。 信息量的大小通常有以下规律。 第gt页； 抽屉gt； 弹匣。
但是，信息量是考虑的第一步，是比较宏观的方面，不是决定性的因素。
2 )页面独立性
独立性可以理解为与上一页或当前页的联系是否紧密。 页面的独立性最高，如果一个接一个地打开新页面，往往无法记住上一页的内容。 这是因为这些页面的内容相对独立，相关性很低。
从定义上可以看出，弹匣和抽屉的独立性较低，弹匣的前提是不脱离当前页面的内容，弹匣本身甚至无法隐藏当前页面的重要内容。 抽屉基于父页面，是对父页面内容的补充。
大多数弹坑都与当前用户执行的操作内容有关。 例如，在表单输入场景中，选择时间时会弹出时间弹匣，选择地址时会弹出地址簿弹匣。
抽屉适合内容深刻、逻辑性强、概括短小的物品，例如购物网站的目录导航、safari收藏夹等，但并不总是需要展示的。
页面和页面之间的逻辑性不强，也不合逻辑。 例如，跳到莫名其妙的广告页面。
3 )页面切换成本
如果用户由于某种业务需要而需要在a页面和b页面之间频繁切换，则必须考虑切换成本。
抽屉有固定位置的触发按钮，需要频繁操作时，用户可以迅速找到抽屉并取出，从而降低学习成本。
窗口返回页面的速度也很快，对于非模态窗口，可能会自己消失，或者单击蒙版区域，或者单击“关闭”按钮。 对于模态窗口，如果用户进行了明确的操作，窗口将消失，自然返回当前页面。
页面切换成本最高，一般需要单击“上一步”按钮返回上一个页面。 此时，页面加载需要时间，并且用户需要快速识别新页面，因此页面切换成本最高。
2 .弹匣拷贝的写法1 ) UX Writing规则
说人话：弹窗应与现实世界相关联，弹窗应使用用户语言(用户熟悉的文字、短语、概念)，而非某些系统特有的专有名词。 清晰明确的表达方式：在窗户里使用意思清晰的问题和选择，而不是让用户感到困惑或犹豫。 简洁：在表达清楚的前提下，尽量减少字数。 另一方面，由于弹匣的尺寸有限，无法登载太多的字数。 另一方面，每个人都不喜欢长篇大论，弹匣希望帮助用户有效地理解和解决问题。 一致性：如果“编辑”和“修改”是相同的意思，则在相同的意思、相同的操作中使用的语句保持相同，在这个系统中只能出现其中一个语句。 2 )标题
标题是用户最先注意到的内容，用户可以看一眼标题，迅速知道这个弹坑在做什么，标题的重要性不言而喻。
如果用户主动触发弹匣，弹匣标题必须包含触发该弹匣的动作按钮的副本。 通常采用“动词名词”的形式，让用户通过标题确认自己进入了正确的模块。 弹匣的标题和内容是总-分关系。 标题一般是陈述问题、询问行动、提出行动建议，通常被简短地概括； 内容是更详细地说明了说明和操作的结果等。 标题上写着“错误！ ”等。 “警告！ ”使用带有“的任务结束”等信息的中性句子，而不是带有这种强烈感情的词语。 3 )内容
用户讨厌被责备。 请不要使用有针对性的语言。 比如说，你错了！ 不熟悉的专业术语的补充说明。 特别是像金融类产品一样，含有很多专业术语，专家以外的白有可能会混乱。 在这种情况下，可以采用Tooltip格式，通过用户将光标悬停在该术语上来查看该术语的说明。 内容不需要重复标题的复制。 使用可以具体付诸行动的语言，把重要的信息写在开头。 可以将用户可以查看的有用信息添加到内容中。 4 )如何优化按键复制
操作清晰可预测。 减少中性词的使用，避免用户停止思考，让用户了解在看到文本的瞬间按下按钮会发生什么。
优先“动词名词”的形式，不能这样表达的情况下，考虑“确认”“取消”“关闭”这样的中性词吧。
5 )反馈
操作后的反馈对用户体验也很重要，游戏通关后会发出喝彩的声音。 例如，提交了表格的弹夹。 提交后，必须显示提交成功的反馈。
成功：告知用户结果或当前进程失败：告知用户失败的结果、失败的原因和解决问题的方法
3 .滚动条首先要明确。 各规范不推荐使用滚动条。 首先是因为弹坑的内容不大。 如果业务场景复杂的弹匣，可以采用选项卡和分步弹匣，避免在弹匣中使用滚动条。
那么，在必须使用滚动条的情况下，有几个需要注意的地方。
嵌入式表弹匣：如果表中的数据较少，则表中不包含滚动条。 如果表中的数据列很多，将显示水平滚动条。 如果表中的数据行过多，请设置固定高度的表并显示垂直滚动条。 一般弹匣：禁止使用水平滚动条。 显示垂直滚动条时，请确认蒙版内容区域的滚动条是静止的。 否则，情况会混乱。 关闭弹夹后，内容区滚动条将恢复移动。
4 .弹匣大小1 ) Web端
调查市售电脑的分辨率后，从数据图中可以看出，分辨率以900 * 1080为主流，最小的分辨率为1024 * 768。
俗话说“一个桶，装水量要看最短的板子”，理论上说，只要弹匣能满足1024*768的分辨率，就能适应市面上所有的电脑。
宽度：最大宽度通常为1000px左右。 最小宽度由各平台确定高度。 最大高度为600px左右。 具体计算一下，768px-陟览栏上部的高度( 60~100px )系统下部的工具栏的高度( 40px )=628~668px，再加上弹匣不能像气球一样填满整个画面，所以一定要保证安全裕度( 40px ) 各平台可根据自身业务量和需求差异，按内容量对弹匣大小进行分类，常见分为超大、大、中、小，如阿里中台的Alert几个大小：
2 )手机端
手机端弹匣通常为全屏显示，除了Alert、Error、Notification等特殊弹匣类型外，有一定的尺寸规格。
5 .弹匣的两种有效模式弹匣有两种有效模式。 “立即提交模式”和“延迟提交模式”
例如，在选择后立即启用，如mac首选项中的桌面屏幕保护程序。 这里既没有提交也没有确认按钮。 这就是即时提交模式。 延迟提交模式更为常见。 例如，注册网站会员时，需要填写所有信息，然后确认一次，最后提交。
即时提交模式适合自己操作量少，但切换频繁的操作。 特别是对于视觉、听觉效果的变化，即时提交非常高效。 常见的有更换手机铃声、选择照片滤镜、更换电脑壁纸等。
延迟提交模式在B端非常普遍，必须仔细考虑用户输入的内容，修改用户的编辑使其满意，然后确认提交。 比起效率更重视质量，减少错误率。
6 .弹匣互动1 )弹匣内导航：
如果弹匣内有二次弹匣(相同容器、不同内容)，二次弹匣的标题部分会有返回按钮，用于返回主弹匣。
2 )用户改变弹坑显示尺寸
例如，在长列表中，有一个字段项目很多，由于长而隐藏了一部分。 用户需要滚动滑块以查看更多项目。 另外，如果可以改变弹匣的大小，用户就可以增大弹匣。 每次滚动都可以看到更多的项目，减少了滚动条的操作次数，扩大了视野，也提高了用户的体验感。
这里有两个小细节。
设置最大/最小宽度，使弹匣始终可见，而不影响弹匣最基本功能的实现。 提供小三角符号等暗示符号，让用户知道这个页面可以拉伸。 3 )拖动弹坑移动
弹窗有时会弹出来正好遮住底部页面的重要内容，所以弹窗需要移动和拖动的功能：
4 )防止弹匣误动作的功能
在填写表格的时候，比如用户已经花了20分钟填写了表格，但是不小心碰到了键盘上的Esc键，弹匣自动退出的话，他的内容就会消失。 这对用户来说是非常糟糕的。 就像五雷轰一样。
因此，一些弹匣需要增加防误接触功能。 不小心误接触后，没有马上关上弹匣，而是说：“你真的要离开吗？ 打开“你的内容会丢失”的确认弹匣，可以大幅减少误接触带来的不良后果。 到底，连续两次误接触的人很少吧。
的确，确认弹匣是防止出错的一种思路，另一种思路是在弹匣中增加自动保存功能，如果不小心关上弹匣再打开，虽然刚才的内容还在，但新用户的心情会经历起伏。 “糟了！ 我心里的血没有了！ (哭) ) -哦！ 他们还在，真令人惊讶！ ”
7 .多个弹坑需要澄清。 在各项规范中，不建议在弹匣上重叠弹匣。 即使在必要的情况下，弹匣的数量也会受到限制。 为什么这么受限制呢，比如说，你们小时候玩过俄罗斯娃娃吧。 每次打开人偶的时候都会藏着人偶。 试着把人偶换成弹匣。 我觉得弹坑里有弹坑。
这样，用户就会在当前弹坑中迷路。 弹匣越多，用户需要更多的时间和操作，需要回到主弹匣(最外面的人偶)。 最里面的弹坑太隐蔽了，不容易找到； 三、过多的弹窗会增加视觉工作量，增加视觉噪声，导致不良用户体验，因此弹窗不建议多级堆叠。 但在复杂的大型企业软件中，不可避免地会出现多个弹坑。 怎样才能解决呢
根据用户目标与任务的对应关系，弹舱与弹舱的关系可以划分为线性与非线性关系。
1 )非线性关系
例如，在Photoshop中，许多内部窗口是非线性的，因此可以调整此参数，然后跳转到另一个窗口以更改其他参数。 这些参数本身没有逻辑关系。 因此，Photoshop工作区可以自由打开、隐藏和关闭窗口，并根据设计人员的频率自定义工作区内容窗口。 另外，为了应对复杂且大量的功能，PS提供了搜索等工具，用户可以自主使用
对于多个非线性弹匣，与其费尽心思制造复杂的结构导航，不如给他们道具，让他们找到自己想要的东西。
2 )线性关系
当弹坑与弹坑之间存在密切的逻辑关系时，常见的有三种形态。
从A容器中取出与B容器相同容器的不同内容，合上A容器后，取出B容器，举例说明“新项目”:
假设用户要从现有项目中复制模板。 单击所有模板后，转至模板界面。 这一步是“从A容器弹出B容器”。
进入镂空弹窗后，单击新的镂空，选择“从现有项目新建”，可以看到此步骤的弹窗容器没有变化，只需更改弹窗的内容区域。 这就是“同一容器的不同内容”。
“关闭A集装箱后，排出B集装箱”并不常见。 例如，通常我们在卸载一些流氓软件的时候，在确认卸载后，再确认一次，会惹怒用户。 这些流氓软件为了留下来真的很辛苦。 另外，在填写非常重要的信息时，系统会提示用户“请务必填写正确的信息。 这个不能更改哦。”为了提醒注意，我会确认两次。
这个场景不常见，所以大多数弹匣只需要一个确认弹匣就可以了。
05弹窗的使用场景我们通过对话框传递的信息的性质和来源，可以将对话框分为系统弹窗、信息展示弹窗、操作弹窗。 在《About Face 4》一书中，将弹匣细分为属性、功能、通知、公告、进度弹匣，实际上是同样的理解。 进度和公告为系统弹匣，通知为信息展示弹匣，功能弹匣为操作弹匣。
系统弹匣：直接启动APP应用程序，而不是“版本升级到2.0”“页面崩溃”等用户请求。
信息展示弹匣：顾名思义，是展示信息的弹匣，该信息可以是来自其他用户的信息，也可以是查看详细信息。
操作弹夹：用户需要对弹夹执行具体操作，如填写常用表格、确认删除、上传信息等。
典型的简单场景不需要建立额外的层次关系，可以通过常见的简单方法满足需求，但在复杂的业务场景中可能会面临信息过多、信息过于复杂等各种挑战。
因此，将一些页面上使用的分层结构应用于弹坑，但弹坑的装载量非常少，请注意不要滥用这些手段。 例如，弹坑里有Tabbar和边栏，这是禁忌。 这里提供几个解决方案。
1 .标签导航弹匣标签是一种导航控件，页面内容不定时，可以将内容分类放入不同的标签页，如Mac系统首选项的显示设置。
选项卡的格式多种多样，只有文字、只有图标、图标上下文、带有子选项的选项卡选项、带有数字/角点标记等，设计师根据业务场景选择最合适的选项卡。
如果选项卡和底部选项卡同时存在，则选项卡的层次结构始终是最高的。 因此，如果单击选项卡按钮，则有效范围为所有选项卡，而不是当前选项卡。
如果用户想在当前选项卡上完成操作，建议删除底部的操作区域，使用复选框/复选框等选择控件。 在选中复选框的瞬间，此行为生效。
使用Tabbar时，请注意一些细节。
使用尽可能少的选项卡，并确保始终可以看到所有选项卡。 在某些情况下，即使某个选项卡下的内容为空或不可见，也需要显示该选项卡以保持系统的稳定性和可预测性。 您可以在空白页面上解释当前页面为空白的原因，以避免混淆用户。
2 .侧栏导航弹窗受弹窗宽度限制，Tabbar能承受的数量有限。 如果Tab的数量过多，请考虑使用Sidebar，以腾讯会议的设置弹窗为例。 由于Sidebar与Tabbar类似，并且是导航控件，因此同样，如果用户希望在当前Sidebar选项页上完成操作，建议使用选择控件，如单次选中/复选框这个也马上生效。
3 .分组弹匣是表单录入场景，在信息多混乱的情况下，往往会降低用户阅读效率，增加用户认知成本，分组是一个很好的解决方案。 无论是将同类信息放在一个组中，对每个组进行标题，还是只在组与组之间进行分隔线，界面都更清晰，操作过程更高效。
4 .分步弹匣应用于有一定优先逻辑的操作程序，必须完成第一步才能进行第二步。 不要像Tabbar和Sidebar那样去喜欢的地方。 最常见的是网站的注册。
这有几个优点。
用户只需一次集中于一个步骤，降低用户的认知，提高操作效率。 因为如果不完成第一步就无法进入下一步，所以如果前一步正确就可以进入下一步，整体的错误率将大幅降低。 步骤栏也是进度条，为用户提供正面反馈。 用户有“一切尽在掌握”的感觉，给用户带来体验感。 想想看，如果用户突然要写很多东西的话，在面对大量内容的时候很有可能会被留住，但是分解成多个步骤看起来不是很多，可以减少用户的压力。
5 .边栏作为参考弹匣，我们要聚焦当前任务，但在一些信息输入场景下，我们输入的信息并不是和我们的身份信息一样用手来拿。 例如，在输入商品信息的情况下，可以以侧边栏的形式将参考信息放在旁边。
在钦的“新工作待办事项”——中添加执行者的例子。 为了减轻用户的记忆压力，钦女士提供了常驻右侧的边栏，用户可以通过“最近的聊天”、“我的朋友”、“我的群”等方式查询自己朋友的名字。 此边栏相对于左页面是独立的。
06结语弹窗规范目前已经比较完善，但相信随着业务场景的日益复杂和多样化，将会有更多新的规则出台。 因此，要求设计师不仅要理解规范，合理运用，还要有疑问地思考，不断完善规范。
以上是我对弹坑的想法和总结。 如果你有不同的想法，请和我交流！ 我期待着听到你的声音！
本文由郝小七指导http://www.woshi pm.com/u/917803
作者：自来卷夏忆
本文由@自来卷夏忆原创，每个人都是产品经理，未经许可禁止转载
标题来自Unsplash，基于CC0协议
