B端弹窗设计要点总结

相对于移动端，PC端弹窗的使用率更高，在实际工作中，很多问题是关于在某一场景下用弹窗还是用抽屉，弹窗叠加弹窗的场景如何优化，弹窗内的限制，弹窗内操作交互等，设计师需要清楚有哪些类型的弹窗，在什么场景中使用，各有什么优缺点，承载不同信息时需要注意什么，这样才能输出合适的设计方案。

1.定义

弹窗是在当前页面之上覆盖出现的组件，通常在不想中断整体任务流程，但又需要为用户展示信息/给予提示/反馈或获得用户快速执行某些操作时使用。虽然在很多门户网站/信息网站中，各种广告弹窗滥用，引起用户很大的反感，但B端产品中弹窗是重要的组件，可以承载业务内容、给出用户反馈等等，使用频率比较高。适当的应用弹窗不仅可以提高用户体验，还能高效的实现业务层的需求。

提起弹窗，必然要谈到模态/非模态

模态化：出现在内容层之上的内容容器，用户不能继续操作页面层，直到用户明确与内容容器的交互结束。

非模态化：出现在内容层之上的内容容器，会在屏幕短暂停留后自动消失，用户仍然可以与背景页面的内容进行交互（例如，选择某一链接或点击某一按钮）。

通常情况下有遮罩的为模态弹窗，无遮罩的为非模态弹窗。

2.模态VS非模态

何时使用模态

1.要求用户立即响应 ：阻止用户继续操作，需要用户输入信息或必须进行某项操作后才能继续当前流程； 2.通知用户紧急信息 ：通知用户有关其当前任务的紧急信息，通常用于报告系统错误或告知结果； 3.确认用户决定 ：确认用户的决定，清楚描述当前行为可能导致的潜在后果，如果该行为具有破坏性或不可逆转性，则使用报错警告色。

何时使用非模态

1.内容比较少，父级页面中非主流程操作的反馈 2.系统级的通知，避免干扰用户 3.需要参考父级页面填写的体量较小的信息等

区分几个非模态情况

警告提示/全局提示/通知提示框/气泡卡片/文字提示

警告提示：展现需要关注的信息，当某个页面需要向用户显示警告的信息时， 非浮层的静态(或轮播)展现形式，始终展现，可设置自动消失或用户点击关闭。警告提示有多种类型

全局提示：响应用户的操作，提供操作结果反馈。可提供成功、警告和错误等反馈信息。Toast 被动出现，顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式，层级最高不受其他内容遮挡

通知提示框：全局展示复杂的通知提醒信息。可以带有交互的通知，给出用户下一步的行动点。或只有信息展示，可延时自动关闭。通知提醒可以配置从页面四个角顶部或者底部滑出。

气泡：点击元素，弹出气泡式的弹框，一般为确认/信息说明或是简单的操作，于全屏居中的模态弹窗相比，交互形式更轻量。

文字提示：简单的文字提示气泡框。鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。

3.模态弹窗组成

1.蒙层(必有)：黑色蒙层覆盖全页面，蒙层下方的页面内容不响应滚动和点击。蒙层颜色的思考，颜色本身能给用户传达出许多信息，在制定弹窗规范前，就要思考产品的定位，这样整个产品的颜色规范层面能够做到统一，蒙层颜色较浅，能尽可能减少用户的跳出感，蒙层颜色深会让用户更加专注于弹窗页面。

2.标题(可选)：可以是纯文字，也可以在文字前带有icon来明示状态；对于有流程步骤的弹框可在标题前面加返回icon；对于确认弹框可不用标题

3.关闭按钮(可选)：弹窗本身是打断用户正常流程的操作，所以提供关闭的出口是很有必要的，一方面可以减轻用户的反感，另一方面可以让用户较快的返回主流程中，所以一般会设计多个关闭弹窗的方式，如关闭按钮，取消按钮，点击蒙层等。

4.弹框内容(必有)：可包含文字描述、表单、表格、图表、步骤条、通知等

5.行动按钮(必有)：是对弹窗交互结果进行提交，一般是两个对立操作按钮。确认或信息录入弹窗一般为两个按钮（一般是“确定、取消”）；提示类/通知类弹框只提供一个按钮用于关闭；自定义行动按钮的个数及文案

6.弹窗框体(必有)：对话框全屏居中，根据主体内容展示场景的不同，自定义模态宽度。一般也会限制框体的高度，内容过多时会增加滑动条，在框体内滑动查看。

4.模态弹窗内容分类

弹窗的内容可以分为提示类/任务类/选择类/引导类

提示类，用户进行了很重要或者有风险的操作时，弹出提示类弹窗需要用户类进行判断

任务类，可以时内嵌表单/分步表单/表格筛选等

选择类，附件导入/上传弹窗，在B端产品中应用广泛

引导类，用户首次进入页面时，用于引导或者指导用户操作弹窗

5.特殊弹窗

抽屉：抽屉一般包含一个蒙版，一个主体及一个关闭入口，常见于网页端。侧滑抽屉有较强的连贯性，适合与原页面具有连贯结构的内容的展示。抽屉不在用户常规的视觉焦点中心，具有一定的偏移，内容的聚焦性较弱。可自定义上下左右四个方向，一般右侧最为常见。这样不会遮挡父级靠左侧的内容，（页面的信息是从左往右排布）抽屉填写或核对信息时仍可以参考父级内容。

新建页：新建页的应用比较广泛，可以承载较多的内容量，但是需要打开一个新网址链接，通常当前页面与新建页面没有流程上的连续性是可以选用，通常有覆盖当前窗口和新窗口跳转两种形式，根据场景可用不同的形式。

6.如何选择 弹窗/抽屉/新建页

从内容判断

子级的内容大致可以分为信息确认，操作反馈，信息编辑，信息展示这几个类型，但实际不管从内容类型或者内容量上来看，都不能清晰化弹窗何抽屉的边界，目前整理的只是较为通用的规则，信息编辑中很多情况弹窗和抽屉都可以选用，需要参考父子级页面的关系进一步判断

从父子界面关系判断

与父级页面的关系，主要通过独立性和聚焦性两个方面来判断，独立性也可理解为关联性，延续性。聚焦性可以理解为是否需要参考父级或者是否直接影响父级界面。

从切换成本

切换成本直接影响用户操作效率，通常切换成本抽屉<弹窗<新建页面，B端产品效率至上，如果子级页面使用频率比较高，这样用户需要在父子页面之间来回切换，就需要考虑页面切换成本了。

7.弹窗的适配问题

提供稳定尺寸的弹窗

通常定义两种尺寸的大小，参考的是单列表单和双列表单的宽度。而对话框大小会参考目前主流的屏幕分辨率(1920*1080)来定义,通常宽度不超过1000px，高度不超过600px，在这个范围内通常定义small/medium/large/x-large四个尺寸

定义弹窗位置

顶部高度固定，就是固定弹窗顶部到界面顶部的尺寸高度，一般为120px/160px/200px，根据弹窗尺寸进行调整，需要定义固定尺寸弹窗对应的高度。全局居中，也是定义弹窗位置高度的一种通用方式，但是对于弹窗类型较多较复杂的场景不适用。

弹窗内页面滚动

弹窗框体高度固定，当内容超过时，弹窗内不可滑动查看操作。弹窗动态高度，起始状态适配内容，到一定高度后可滑动查看或操作。如果内容较多，可直接定义固定的最大高度；如果内容通常不多，但是用户可操作，则可定义为动态高度。

总结会有不足不全之处，欢迎大家一起探讨交流。