B 端产品设计中，弹窗可以做哪些事情？（二）

信息展示

1、解释或说明

一般由用户主动触发的，包含图文信息，少数会有简单的操作按钮，如“确认”、“知道了”等等。典型场景有：欢迎界面、操作说明、帮助、功能引导、取数说明、查看详情、预览或查看大图……

这种弹窗一般用来对页面内容作补充，用户通过点击图标或文字按钮，可以在当前页面展开弹窗。比如业务介绍、图表的取数说明、操作说明和引导等，这类信息往往与当前页面紧密相关，且从属于当前语境，所以并不适合用跳转页面、并列 tab 其或二级页面的形式来表达，因为这样无疑会加深页面层级，增加用户的认知负担。尤其是对一些很重要的操作说明或引导，甚至可以在弹窗中使用翻页或 tab 页签的形式来扩充弹窗的显示空间。

需要说明的是，很多产品喜欢对那些普通的字段解释和说明也使用带遮罩的模态弹窗，并需要用户点击才显示。这是一种很糟糕的设计。这种解释说明，完全可以用一般的非模态浮层来代替，用户只需要悬停就可以快速浏览，并且快速离开（移开触发区按钮或点击空白区域）（当然，如果内容太多，可能你要考虑设计跳转到新的页面而不是使用浮层或弹窗）。

类似这种页面的补充说明，使用悬停浮层体验会更好。

2、内容拓展

这种类型常见于一些图表统计页面、列表页面。由于页面布局的限制，以及突出核心需求的原则，我们只会给用户展示最关心的统计结果和字段，不会也不可能把统计图表的所有详细数据和说明展示在当前页面。而这些内容往往又并未多到需要一个新的页面来容纳（同样会增加页面层级），所以这时候就可以用弹窗来呈现。

内容扩展型的弹窗，主要有以下场景：查看详情、预览图片、数据透视、历史记录……

对于这种弹窗，模态和非模态并没有很大的差别。一般来说，如果是内容较少，并不会占用较大的屏幕面积，使用非模态的会更合适。因为用户只需要扫一眼内容就行，模态的可能会给用户一种“被打断”的感觉。而且，使用非模态的可以直接展现在目标旁边，关联性更好，同时可允许用户快速切换查看其它同类弹窗，且不会影响对其他的模块的操作和浏览。

3、弹窗的扩展样式——侧滑面板

还有一种比较常见的“弹窗”，会以侧滑的形式出新，而不是加遮罩层的模态弹窗。这样做的好处是，用户在查看弹窗内容的同时，不会失去当前页面的信息，方便用户进行对比、参照和检阅；同时并不会影响用户对界面其他区域的操作。这种形式一般在表格中出现较多。当然，这里的弹窗并不局限于一般的对话框样式，我们也可以使用侧滑浮层。

而对于那些信息量较大（可能有滚动条、拖拽操作等），甚至会有一些可选的支线任务或扩展操作时，建议最好使用模态的弹窗。这样可以让用户的注意力更为聚焦，且可减少可能产生的误操作（一些非模态的弹窗允许用户点击弹窗范围外区域关闭弹窗）。

4、渐进式的展示

除了弹窗和二级页面，还有一种信息展示方式——渐进式的策略值得借鉴：即在页面只展示结构式信息和核心元素，更多细节信息在用户需要时再作立即呈现。当然这样造成洞察速度受到一定影响，但你能得到一个更清爽更简洁的用户界面。

本文转载自 Think 体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/pRvR6B2qK7nraKxCESdc3A