收藏夹隐藏了怎么恢复(网页收藏夹隐藏了怎么恢复)

大家好，我是讯享网，很高兴认识大家。

编辑导语:弹窗不仅仅是“弹窗广告”，它是一把双刃剑。如果用得好，可以让用户更专注；如果用得不好，可能会让用户不高兴，甚至会排斥潜在用户。那么，如何设计弹窗呢？笔者详细分析了弹窗。让我们看一看。

我们现在熟悉的淘宝，曾经为了在电商领域生存，不得不使用大量的“流氓广告”。虽然这确实让用户很烦，但不得不说淘宝频繁刷脸，让大家更熟悉了。

弹窗是一把双刃剑。用得好的话，确实能让用户更专注。如果使用不当，可能会让用户不高兴，甚至排斥潜在用户。你在设计弹窗的时候有没有遇到过以下困惑？

该在什么时候选择用弹窗，什么时候用页面呢?弹窗的标题怎么起?弹窗叠弹窗最多可以叠几个?

可以说，弹窗的设计很能体现一个设计师基本功的不扎实。设计一个小小的弹窗看似非常容易，但面对不同的用户场景和业务背景，弹窗背后的思考从未停止。今天，我们来全面了解一下弹窗。

01 弹窗的定义

在正式的理解弹窗口前，我们不妨想象一下下面的场景:你正在家里做着什么，但这个时候电话响了，你要放下手头的事情去接电话。但是如果你在智能家居环境下，你可以通过人工智能自动接听电话，而你正在做的事情还在继续。

目前设计界对弹出窗口有各种各样的定义。从外观和布局上看，弹出窗口是在页面顶部弹出的容器，容器承载文本、按钮、选项、标签或表单等组合内容。从设计的角度来看，弹窗是用户与产品的一种对话方式，是引导用户注意力的一种形式。根据用户的关注量，可以具体定义为对话、Actionbar、Popover、Toast、Snackbar等。

广义来说，弹出窗口并不像它们的定义那样死气沉沉。有时候弹出窗口不一定有容器。比如追剧中常见的弹窗，也是一种新型弹窗。比如新手指导也是弹窗。不过这里说的是狭义上常见的弹窗，那些非典型的弹窗不在今天讨论的范围之内。

遮罩弹窗主体(容器、标题、内容、动作按钮)关闭入口(不必要/模态弹窗没有)

根据各种规格，不建议堆叠超过三个弹出窗口。当弹出窗口超过三个时，遮罩的颜色不会改变。在这里，我想补充一点，当弹出窗口太多，一个在另一个上面时，用户很容易迷路。这时可以采用交错持仓的方法。

弹窗的标题和内容的书写规则后面会详细描述，这里就不赘述了。

一般来说，弹出式菜单的动作按钮不超过三个:

1按钮:必须是可以关闭弹窗的操作，比如信息公告类型的弹窗“我知道”。

1)1)材料设计中的正确对齐

对于模态弹出，它的关闭模式只有在做了选项选择后才会消失，包括“取消”选项。有许多方法可以关闭非模态弹出窗口。总结起来，有四种方式:

一般位于右上角，少数规格把关闭按钮放在左上角，只要一致即可。

2)取消按钮

通常，它们与“确认”或其他动作按钮一起成对出现，以推动任务完成。

3)ESC键

你也可以通过按ESC键退出非模态弹出窗口。Esc是英文单词escape的缩写，是由IBM的一位程序员在1960年创造的。它的功能是“撤销”和“退出”。

现在虽然大部分人使用鼠标进行交互，但是为了无障碍设计(包容性设计)，还是需要通过键盘来完成交互，所以ESC键也是必须的。

而且这种快捷键的优化可以大大提高用户的效率，降低用户的运营成本。

尤其是在B端产品中，调用键盘进行操作优化是一个用户不容忽视的酷点。

4)点击遮罩区域。

遮罩区域是弹出窗口后面的内容区域。通常，为了使用户更加专注，会添加一层深色遮罩。当用户点击屏蔽区域时，非模态弹出窗口会自动消失。但是为了避免用户的误触，如果弹出的窗口是需要用户输入的表单和其他内容，这些内容就要自动保存。

对于“取消”和“关闭”按钮，我想在这里解释的更清楚一些:我们举一个生活中常见的例子。假设你有一个爱问十万个问题的孩子，你正兴致勃勃地追剧。结果他来问你问题。在他开口之前，你捂住耳朵不听。这相当于弹出窗口右上角的关闭按钮(叉)，但关闭按钮只存在于非模态弹出窗口中。

虽然“取消”按钮和关闭按钮(叉号)最终都会导致弹出窗口关闭，但逻辑上是不同的。

比如你要删除一个重要文件，会弹出一个窗口，问你要不要删除？这时候你必须给出一个明确的指令，选择删除或者不删除，然后你就可以离开当前界面了。我们可以简单地把模态弹出窗口理解为用户必须做出的选择。

让我们看看非模态弹出窗口。非模态弹出窗口允许用户在不中断当前页面的情况下处理其他任务。比如在设计师最熟悉的PS中，可以同时调用多个弹出窗口来改变屏幕参数。因为艺术创作是一个多线的过程，艺术家可以改变任何他们能想到的参数。

2. 典型弹窗

1)行动表

参考:IOS设计

简介:动作表一次显示两个或多个与当前上下文相关的动作。除非必要，否则不要显示太多动作选项，并避免在动作列表中使用滚动条。

关键点:

动作按钮: 把危险性选择 (如清空、删除)放在最上面， 把取消按钮置于底部。避免使用太多动作按钮让Action Sheet列表产生滚动条。毁灭性操作需要在视觉上突出。

2)模态

参考规范:微软流畅的用户界面

简介:Modals也是一种模态弹出，要求人们将注意力从当前页面转移到弹出的页面，要求用户交互。与Dialog不同，Modal更适合长文本内容，如隐私条款、知情同意等。，或者要求用户执行更复杂的操作，如更改页面设置。

3)对话框

参考规范:微软流畅的用户界面

简介:Dialog是一种模态弹出，要求人们将注意力从当前页面转移到弹出页面，要求用户交互。基本都是在确认信息、删除文档、做出选择等简单场景下使用。

分类:

Alert Dialogue: 因为紧急信息、详情展示或者动作打断用户，用户必须做出一个选择才能关掉弹窗。Simple Dialogue: 展示会立即生效的列表选项，它不需要动作按钮。Confirmation Dialogue: 需要用户确认当前选择，假如用户反悔了，可以在这一步修改。Full-screen Dialogue: 全屏弹窗会充满整个屏幕，包含需要完成一系列任务的动作，只适用于手机端。

使用场景:

发生阻止程序运行的错误需要向用户展示完成某个特定任务的的关键信息， 如决定、声明需要最高程度地抓取用户注意力

关键点:

在当前强制要求输入的区域完成前，保存按钮处于置灰状态。在全屏弹窗上层允许出现一些简单的弹窗。标题保持简洁，最多不超过两行，假如长度不确定或者更长，把它们放在内容区而不是标题区。尽量减少使用Dialogue，因为它们毫无征兆的出现，会打断用户的进程。大多数弹窗内容应当尽量避免使用滚动条， 如果非使用不可(如选择时间日期)，保持标题和底部的动作按钮区域固定，遮罩区域的背景也不动。

4)抽屉

参考:材料设计

简介:抽屉是一种容器，性质类似于生活中的抽屉。它通常用于保存与特定窗口相关的一些信息或选项。默认情况下，抽屉是隐藏的，它通常由按钮或菜单触发，从父界面的一侧滑出，因此它不能独立于父界面而存在。

重点:避免使用抽屉。现在流行的软件很少用drawer，也不提倡。如果您想显示补充内容，请尝试面板、弹出窗口、边栏和拆分视图。

5)爆米花

参考:IOS设计

简介:当你触摸一个区域时，一个弹出窗口会短暂地出现在其他内容的上面。一般来说，Popover包含一个指向弹出位置的箭头。当你点击屏幕的其他区域或弹出窗口上的按钮时，非模态弹出窗口将取消显示。只能通过单击“取消”或其上的其他按钮来取消模式弹出窗口。

Popover更适合大屏幕设备，可以容纳很多元素，包括导航栏、工具栏、标签栏、表格、图片、地图、传统视图等等。当弹出窗口可见时，当前页面上的其他交互无法执行，直到它消失。

关键点:

避免在iPhone中使用Popover：一般来说，Popover 会在ipad中使用。在iphone中，通常会通过把信息展示在一个全屏的模态视图中来优化屏幕空间，而不是使用Popover。使用一个关闭按钮来确认。一个关闭按钮是值得加上去的，比如“取消”或者“完成”，当然如果空间不拥挤的情况下，还可以加上“保存然后退出”“不保存然后退出”这样的选项。一般来说，当Popover没必要再展示的情况下，它应当能够自动退出。在大多数情况下，当用户点击了它区域之外的范围或者是对Popover做出某种选择后，它会关闭。如果需要在Popover上做出多个选择时，Popover应当一直显示直到用户做出明确的关闭行为。自动关闭非模态Popover时，总是自动保存。 用户容易误碰到某个区域关掉非模态的Popover，除非是用户点击了明确的“取消”的按钮，这种时候才不保存工作。在屏幕上适当的放置Popover。 一个Popover的箭头应当直接指向触发它的地方，因为Popover不能在屏幕上拖来拖去挪动位置，所以它不可以遮挡住屏幕上用户重要的内容，当然它也不能挡住触发它的元件。一次只展示一个Popover。 同时展示很多的popover，会增加画面的噪声，致使用户疑惑。不要使用瀑布或者阶梯式的Popover，就是那种一个接一个的弹出来的。如果你想展示一个新弹窗，那就把打开着的先关掉。不要在Popover 的上层再展示其他弹窗，除了Alert。如果可能的话，让用户点击一下就能再打开一个新的Popover，避免多余的点击步骤。不要让Popover展示的太大。一个Popover不应该占据整个屏幕，只让它达到可以刚好可以容纳其中的内容，并且指向弹出它的方向就可以了。确保Popover看上去像Popover。 尽管用户可以个性化改变一个Popover的视觉外观，但是还是要避免设计用户识别不出的Popover。当Popover包含标准的控件和视图时往往用户体验最佳。

6)snack bar & amp；amp烤

参考:材料设计

简介:这里把Snackbar和Toast放在一起，因为它们很像但又不一样。

吐司是一种轻量级的反馈，比小吃店的提示要轻。它经常以小子弹盒的形式出现。一般出现1至2秒后会自动消失，但为了保持一致性，同一产品尽量使用同一位置。与小吃店不同的是，Toast经常被用作系统提示信息，它不包含动作按钮，可以出现在屏幕的任何地方，而且只有Android才有Toast。

小吃栏是用来通知用户程序正在发生或即将发生的进程，也就是说小吃栏的内容必须与用户当前的操作有关，而Toast的弹出内容与当前的操作无关，只是一个系统提示，比如“你收到了一条消息”。

小吃店也短暂出现在屏幕底部，它会消失，不会中断用户体验，也不需要用户进行任何操作。它继承了Toast的所有基本属性，但区别在于:

它常常只出现在屏幕底部可以出现0-1个动作按钮(不包括“取消”按钮)点击Snack bar之外的区域，它会消失

这里值得注意的是，材质设计上不再推荐吐司，更推荐小吃店。然而，Toast仍然广泛应用于Android应用程序中。

下面重点介绍小吃店。

使用场景:你想展示信息，把打断用户注意力降到最低。

关键点:

文案内容和当前程序的进程直接相关。Snackbar中不能包含图标。尽量使用不透明纯色背景， 也可以加一点点的透明度，只要文案清晰可见即可。为了和文案区别，动作按钮用不同的颜色强调。使用优先级最低的按钮样式，通常是文字按钮。动作按钮不是必须的， 因为即使什么也不做，snack bar也会自行消失， 最多加一个动作按钮， 通常是“取消”。最快4秒钟，最慢10秒钟， Snack bar会自行消失。当同时有多个snack bar需要出现时，它们是一个一个出现的，前一个snack bar消失后，下一个才会出现。通常出现在界面的底部，并且要避免它遮住导航、频繁使用的交互组件等等重要的UI元素。只有当界面底部没有常驻的导航元件如底部tab栏时， snack bar才可以和屏幕等宽显示。当界面中有悬浮动作按钮(FAB)时，snack bar不可以和FAB重叠，而是位于FAB的上方，底部有常驻导航元件时同理。

7)工具提示

参考:材料设计

简介:当工具提示被鼠标悬停、聚焦或触摸激活时，它会识别相应的元素，然后在该元素附近显示一个简短的描述性副本，通常解释该元素的功能。短暂停留后，工具提示会自行消失。

关键点:

通常为了避免歧义和补充说明，Tooltip用来解释图像、图标、相似相关的元素，不会用来解释本来意思就显而易见的文字。文案只用文字，不要添加任何富文本信息如图标、图像。完整展示整个Tooltip的元件，避免因为靠近边缘而被裁切。只要用户的鼠标还停留在目标元素内部，Tooltip就不会自己消失，当用户离开目标元素后，Tooltip会停留1。5秒后消失。

8)和日通知

参考:材料设计

简介:当软件不在使用时，通知提供关于软件的简短和偶然的信息。该信息可以是来自其他用户的通信信息或者提供任务提醒。

用户如何注意到通知:

显示状态栏图标在锁屏界面被展示发出声音或者震动在当前屏幕短暂的出现设备的屏幕闪烁一下

9)消息栏

参考:微软Fluent UI react 8.65.1

简介:显示软件或文件的错误、警告和重要信息。例如，如果一个文档上传失败，错误的消息栏就会出现。

关键点:

通常一个Message bar会显示在软件顶部，主操作栏的下面。比如说office的Message bar就是在ribbon的下面，在文档画布的上面。多条信息可以同时出现，但是一个场景或者相关一系列场景应当一个只展示一个Message bar。 Message bar很少是关于一个操作的直接反馈，而是展示一个用户应当了解的关于软件或者文档的总体的信息。使用图标来暗示Message的类型: 比如说， 信息图表就代表咨询类的message；盾牌的图标就代表和安全相关的message；警告图标代表非阻塞型错误警告；

10)coach mark & amp；amp教学泡沫

参考:微软Fluent UI react 8.65.1

简介:Coachmark是为了吸引用户的注意力，增加用户使用的机会。当鼠标悬停或选择Coachmark时，将显示教学气泡。

关键点:

一次一个Coachmark只可以和一个Teaching bubble组合。Coachmark可以是单个的，也可以是连续的。应当减少使用连续的coachmark， 它只在复杂多步骤的交互中会被使用，连续coachmark最好不超过3步。Coachmark只被设计来放Teaching bubble。不可以改变Coachmark的尺寸、颜色和动画。 打开弹出窗口时，这个操作会减少用户。04 弹窗的设计原则1. 什么时候选用弹窗

弹窗作为容器的一种，在选择的时候经常和抽屉、页面做比较。那么当给定一个内容时，我们应该选择使用哪种类型的容器呢？

首先，让我们明确这三个容器的定义。

弹窗：在不离开当前页面的情况下，完成对某个任务的聚焦。抽屉：建立在父级页面的基础上的一个附加面板，在被需要时呼出。页面：处于最下层的容器，也是我们最常见的容器形式。

1)信息承载能力

既然是容器，就要有容量。这里用信息承载能力可能更合适。信息承载能力包括图片、视频、文本、表格等多种形式的信息。当信息量非常大且密集恼人的时候，弹窗自然是不推荐的。一般来说，关于信息承载能力有这样一个规律:pages & gt抽屉& gt；弹出窗口

2)页面独立性

独立性可以理解为是否与上一页或当前页紧密相关。页面具有最高的独立性。当你不断打开一个又一个新页面时，你往往记不住上一页的内容。这是因为这些页面的内容相对独立，关联性不大。

但从定义中不难看出，弹窗和抽屉的独立性较差。弹窗的前提是不离开当前页面的内容，甚至弹窗的主体也不能覆盖当前页面的重要内容。Drawer是基于父页面的，是对父页面内容的补充。

大多数弹出窗口都与当前用户正在执行的操作内容有关。比如表单录入的场景，选择时间会弹出时间的弹窗，选择地址会弹出通讯录的弹窗。

抽屉比较适合内容深度大、逻辑严密、概括性短的内容，而不是必须一直显示的内容，比如购物网站的目录导航、safari收藏夹等等。

3)页面切换成本

当用户为了某个业务需求需要在A、B页面之间频繁切换时，此时就要考虑切换成本了。

抽屉在固定位置有触发按钮，需要频繁操作时，用户可以快速找到并弹出抽屉，降低学习成本。

弹出窗口快速返回页面。如果是非模态弹出窗口，它可能会自行消失，单击遮罩区域或单击关闭按钮。对于模态弹窗，只要用户明确操作，弹窗就会消失，自然返回当前页面。

页面切换成本最高。通常，您需要单击后退按钮返回到上一级页面。此时，页面加载需要一定的时间。用户需要很快认识到一个全新的页面需要一定的适应时间，所以页面切换的成本最大。

2. 弹窗文案怎么写

①UX写作规则

说人话：弹窗应与现实世界相关连弹窗应该使用用户的语言（用户熟悉的文字，短语和概念），而不是一些系统特有的专有名词。表述清晰无歧义：在弹窗中使用语意清晰的问题和选项，而不是让用户产生疑惑，令用户犹豫不决。简洁：在表述清晰的前提下，尽量减少字数，一方面是因为弹窗的尺寸大小有限，无法承载太多的字数；另一方面， 任何人都不喜欢长篇大论，弹窗做的就是帮助用户高效率理解问题、解决问题。一致性：同样的意思、同样的操作所使用的词语句子保持相同，比如说“编辑”和“修改”是差不多的意思，那么在这个系统中只能出现其中一个词语。

2)标题

标题是用户首先注意到的。用户扫一眼标题就能快速知道这个弹出窗口是干什么的，所以标题的重要性不言而喻。

如果弹窗是用户主动触发，弹窗标题应当包含触发该弹窗的动作按钮的文案，通常采用“动词+名词”的格式，这样用户才能通过标题确认自己进入了正确的模块。弹窗标题和内容是总-分关系。标题一般是陈述问题、询问行为或者做出行为建议，通常比较简短概括；内容是一个较为详细的说明解释以及操作的后果等等。标题中不要使用诸如“错误!”“警告!”这种带有强烈情绪的词语， 而是使用带有信息的中性的句子，比如“某某任务终止”。

用户不喜欢被责怪。避免使用针对性措辞，比如:你出错了!生僻专业词汇附加解释，尤其像金融类产品，里面涉及了大量专业词汇，非专业人士小白可能会一头雾水，这时候可以采用Tooltip形式，当用户悬停在该词汇上，显示对该词汇的解释。内容不必再重复标题中的文案。使用具体的可以付诸行动的语言，把重要的信息写在开头。可以在内容中添加一些可供用户参考的有用信息。

4)如何优化按钮复制

清晰和可预测的操作。少用中性词，以免用户停下来思考，让用户在看到文字的那一刻就知道按下按钮会发生什么。

以“动词+名词”的形式为主。如果不能这样表达，可以考虑“确认”、“取消”、“关闭”这些中性词。

运营后的反馈对于用户体验也很重要。就像你玩游戏的时候，系统会发出鼓掌的声音。例如，当您提交一个表单弹出窗口时，提交成功的反馈应该在您提交后显示。

成功: 告知用户结果或者当前进程失败: 告知用户失败的结果、失败的原因、如何解决问题

然后，如果你必须使用滚动条，有几点需要注意:

内嵌表格弹窗:当表格数据很少时，表格中不含滚动条；当表格数据列较多，出现水平滚动条；当表格数据行过多时，设定固定高度的表格，出现垂直滚动条。一般弹窗:禁止使用水平滚动条，垂直滚动条出现时，要保证遮罩内容区的滚动条保持静止，否则局面会变得混乱不堪。当关闭弹窗后，内容区的滚动条恢复运动。

俗话说“一个水桶的含水量取决于最短的板子”，所以理论上只要弹窗能满足1024*768的分辨率，就能适配市面上所有的电脑。

宽度: 最大宽度一般在1000px左右。最小宽度由各个平台制定高度: 最大高度是600px左右。具体计算: 768px-浏览栏顶部高度(60~100px)-系统底部工具栏高度(40px)=628~668px， 再加上弹窗不能像个充气的气球一样挤满整个屏幕，肯定还要留一些安全边距(每个平台的安全边距不一样)，我们再取个整——600px左右是最大高度。

手机的弹窗一般都是全屏显示的，除了一些特殊的弹窗类型如警告、错误、通知等会有固定的大小规格。

5. 弹窗的两种生效模式

弹出窗口中有两种有效的模式:立即提交模式和延迟提交模式。

比如mac preferences中的桌面屏保，你选中后马上生效，这里没有提交或确认按钮，是即时提交模式；延迟提交模式更常见。比如注册成为网站会员，需要填写所有信息，然后再次确认，最后提交。

延期模式在B端很常见。它要求用户仔细考虑输入的内容，在用户对编辑满意后再确认提交。相比效率，更注重质量，降低出错率。

6. 弹窗的交互

1)弹出窗口中的导航:

当弹出中有二级弹出窗口(容器相同，内容不同)时，二级弹出窗口的标题部分有一个返回按钮，可以返回到主弹出。

例如，一些长列表包含许多条目，一些字段因为相对较长而被隐藏。用户需要滚动滚动条来查看更多条目。当弹出窗口的大小可以改变时，用户可以放大弹出窗口，这样每次滚动都可以查看更多的条目，减少滚动条的操作次数，以更广的视野让用户的体验感更好。

这里有两个值得注意的小细节:

要设定一个最大/最小宽度，保证弹窗始终可以被看见，不影响弹窗最基本功能的实现。给一个暗示的符号，比如小三角符号，告知用户这个页面是可以被拉伸的。

有时候一个弹窗正好挡住了底页的重要内容，所以弹窗需要有被移动和拖动的功能:

在填表的场景中，比如用户已经花了二十分钟填表，但是不小心碰到了键盘上的Esc键，弹出的窗口自动退出，那么他的内容就消失了，这对用户来说是非常不好的，如同雷霆一击！

所以，对于一些弹窗，需要添加防误功能。误触后，弹窗不会立即关闭，而是弹出一个确认弹窗“你确定要离开吗？您的内容将会丢失。”这种确认弹窗可以大大减少误触的不良后果。毕竟很少有人会连续不小心碰了两次。

确认弹窗确实是一种防错的思路。另一个想法是在弹出窗口中添加自动保存功能。当弹窗意外关闭再打开时，刚才的内容还在，但新用户的心情会经历一次起伏:“哎呀！我的心血都没了！(哭泣)”–哦！！他们还在那里，真令人吃惊！”

这样会让用户迷失在当前弹窗中，弹窗越多，用户需要更多的时间和操作回到主弹窗(最外面的娃娃)。最里面的弹窗因为隐藏的过深，不容易找到； 三， 过多的弹窗加大视觉工作量，增加视觉噪音，导致糟糕的用户体验，所以弹窗不推荐多层级堆叠。

根据用户目标与任务的对应关系，弹窗与弹窗的关系可以分为线性关系和非线性关系。

1)非线性关系

例如，在Photoshop中，大量的窗口是非线性的。我可以调整这个参数，然后跳到另一个窗口改变另一个参数。这些参数没有任何逻辑关系，因此Photoshop workbench可以随意打开、隐藏和关闭窗口，并且可以根据设计师的使用频率自定义workbench的内容窗口。面对大量复杂的功能，PS给出了搜索等工具，让用户自主快速找到自己的功能。

2)线性关系

当弹出窗口和弹出窗口之间存在紧密的逻辑关系时，有三种常见的形式:

A容器中弹出B容器同一容器不同内容关闭A容器后，弹出B容器

进入模板弹出窗口后，点击新建模板，选择“从现有项目新建”。可以看出，这一步弹出的容器没有变，只是弹出的内容区域变了，意思是“同一个容器中的不同内容”。

以及“关闭容器A后，容器B弹出”，这种情况不太常见。比如我们在卸载一些流氓软件的时候，会先确认卸载，然后再确认，这让用户很生气。这些流氓软件真的想尽办法留下来；即在填写非常重要的信息时，系统会进行两次确认，以便提醒用户“一定要填写正确，因为无法更改”。

这个场景不同寻常，所以大多数弹出窗口只需要一个确认弹出窗口。

05 弹窗的使用场景

根据对话框传递信息的性质和来源，对话框可分为系统弹出、信息显示弹出和操作弹出。在About Face 4中，弹出分为属性、功能、通知、公告和进度弹出。其实理解是一样的:进度和公告是系统弹出，通知属于信息显示弹出，功能弹出是操作弹出。

系统弹出:这是应用程序直接启动的，而不是用户请求发出的，比如“版本升级到2.0”“页面崩溃”。

所以我们把一些页面中会用到的层次框架应用到弹窗中，但是要记住弹窗的承载量很小，不要滥用这些手段(比如弹窗中有Tabbar和侧边栏，这是禁忌)。以下是一些解决方案:

1. Tab导航弹窗

选项卡是一个导航控件。当一个页面的内容令人眼花缭乱时，我们可以将内容进行排序，放入不同的标签页，比如Mac中系统偏好设置的显示设置。

标签页的形式多样化，包括纯文本、纯图标、图标+文本、带二级选项的标签页选项、数字/角标等。设计师根据业务场景选择最合适的。

当tab和底部操作区同时存在时，操作区的级别总是最高的，所以当点击操作区按钮时，其有效范围是所有的Tab，而不是当前的Tab。

如果用户想完成当前标签页的操作，此时可以删除底部的操作区。建议使用选择控件，如单选框/复选框。选中该选项时，此行为生效。

使用Tabbar时，有一些小细节需要注意:

使用尽量少的tab，并且保证每一个Tab始终可见。当在某些情况下，某个Tab下的内容是空的或者不可见的，也要显示这个tab，原因是保持系统的稳定性和可预测性，你可以在空白的页面中解释为什么当前页面是空白的，避免让用户一头雾水。2. 侧边栏导航弹窗

由于弹出式窗口的宽度限制，Tabbar的数量是有限的。当标签页数量过多时，可以考虑使用侧边栏，以腾讯大会的弹窗为例。侧边栏和Tabbar一样，都是导航控件，所以同样，如果用户想在当前侧边栏选项页面完成操作，建议使用单选框/复选框等选择控件，立即生效。

3. 分组弹窗

在表单录入的场景中，当信息过多且杂乱时，往往会降低用户的阅读效率，增加用户的认知成本。分组是一个很好的解决方案。把相似的信息分组到一个组里，可以给每个组加一个标题，或者只是在组之间加一条分割线，这样会让界面更清晰，操作过程更高效。

4. 分步弹窗

分步弹出窗口适用于具有一定逻辑顺序的操作步骤。在进行第二步之前，您必须完成第一步。你不能去任何你喜欢的地方。最常见的就是网站注册。

这有几个优点:

用户一次只要专注于一个步骤，降低用户认知，提高操作效率。由于必须先完成第一步才可以进行下一个步骤，上一步正确了才能进行下一步，大大降低了整体的出错率。步骤条也是一种进度条，能为用户提供正向反馈，用户有一种“一切尽在掌握之中”的感觉，带给用户的体验感很好。试想如果一上来用户就被告知要写一大堆的东西(用户是非常讨厌做输入内容的工作的)，很可能面对大量内容时被劝退，但是分解到多个步骤中后，看上去就没有那么多了，减少用户的压力。5. 侧边栏作为参考

弹窗让我们不得不专注于当前的任务，但是在一些信息录入场景中，我们录入的信息并没有我们的身份信息来得得心应手，比如商品信息的录入。这时候我们可以把参考信息以侧边栏的形式放在旁边。

丁丁的“创造新的工作要做”——添加执行者。例如:为了减轻用户的内存压力，丁丁在右侧提供了永久的侧边栏。用户可以通过“最近聊天”、“我的朋友”、“我的群”找到自己朋友的名字。这个侧边栏相对独立于左侧页面。

06 结语

虽然目前弹出规范已经比较完善，但是随着业务场景的复杂化和多样化，相信还会有更多新的规则出现，这就要求设计者不仅要理解和合理使用规范，还要勇于质疑和思考，不断完善规范。

以上是我对弹窗的思考和总结。如果你有不同的想法，欢迎随时和我交流！我期待听到你的声音！

本文由导演郝

作者:自邀卷夏毅

本文由@自吸夏怡原创发布。大家都是产品经理，未经允许禁止转载。

来自Unsplash的图像，基于CC0协议。