B端弹窗设计要点

B端弹窗是一种常用的用户界面设计元素，用于在应用系统中以弹出窗口的形式向用户显示信息。可以保留用户在当前进程的情况下，完成特定操作，不会打断用户的工作流程。

一、模态与非模态

模态是使用半透明黑色在页面中进行整体覆盖，会阻止用户与应用系统的其它元素进行交互，直到关闭弹窗或点击遮罩模态层。

优势与劣势：模态弹窗可能会给用户带来障碍，有中断感觉，但却能让用户更集中精力去处理好弹窗内的信息。

非模态是指当弹窗显示时，用户可以继续与应用系统的其他元素进行交互。

优势与劣势：非模态弹窗不会打断用户的工作流程，用户可以在执行任务时更加自由，更加灵活。比如在特定场景用户需要弹窗与弹窗外的元素进行交互时就需要非模态弹窗。

如图有着透明黑遮罩的是模态弹窗，导出中没有遮罩的弹窗为非模态弹窗。

二、对话框（模态）

对话框在我们日常设计用户界面中使用得较为频繁，对话弹窗通常由以下几个组件组成。

①标题：对话弹窗的标题，通常用于描述对话框内容和目的。

②内容区域：用于展示对话框的具体内容，包括文本、图片、表单等。

③操作按钮：用于触发对话框中的操作，例如确定、取消、提交等。

④关闭按钮：用于关闭对话框，通常位于对话框的右上角。

如图所示对话框的标题是：指标下线确认，内容区域是文本，操作按钮是下线与取消，右上角是关闭按钮。

对话弹窗主要分为四大类：

1. 确认对话框
2. 操作反馈对话框
3. 表单编辑对话框
4. 内容展示类对话框

1、确认对话框是询问用户是否确定执行某个操作，如删除某项内容，提交表单等。

2、操作反馈对话框是指用户完成某个操作后，弹出的强提醒对话框，用于向用户反馈操作结果和状态。

3、表单编辑类对话框核心功能是采集、传递、提交数据信息，通常表单编辑对话框包含表单中需要填写的各项信息，如下拉框、单选、复选、上传附件等等，在设计表单编辑类对话框需要考虑表单的内容和表单元素之间的布局和排列，以达到更好的视觉效果和用户体验。

4、内容展示类对话框是指用于展示一些提示信息、详情信息的对话框，用户可以在该对话框中查看相关信息，但无法进行编辑或修改操作。该对话框还可以包含一个或多个按钮，以便用户进行相关操作，如确认、关闭、取消等。

三、对话框的弹窗大小

小型对话框：通常用于显示简单的信息或需要快速完成的任务，如确认框。这种对话框通常不会占用太多屏幕空间，一般大小为400px-512px。

中型对话框：中型对话框通常用于显示较为复杂的信息或需要一定时间才能完成的任务，一般大小为600px-760px。

大型对话框：大型对话框通常用于显示非常复杂的信息或需要较长时间才能完成的任务，这种对话框会占用大量屏幕空间，一般大小为800-960px。

如下分别是小型对话框、中型对话框、大型对话框的使用场景：

四、抽屉（业务需要也可非模态与界面其它元素进行交互）

抽屉是一种常用于B端应用的界面设计元素，通常指在页面中靠边或底部隐藏的内容，在用户操作或触发特定事件后以滑动或动画形式展开，以显示更多信息或功能。与对话框相比，抽屉的页面空间更大，能承载更多的内容，抽屉根据形式可以分为：①侧边抽屉 ②底部抽屉

①侧边抽屉含内容展示类型和表单编辑类型，以下为内容展示类型与表单编辑类型的使用场景。

②底部抽屉通常用于展示历史记录、筛选等内容。以下为底部抽屉的使用场景。

（以下弹窗为非模态弹窗）

五、气泡确认框

气泡确认框是一种常见的操作确认框，通常以气泡的形式在页面弹出，用于提示用户需要确认某个操作，可以点击确认或取消按钮进行操作选择，与传统的弹窗对话框相比，气泡确认框更加轻量化，不会中断用户的操作流程。以下为气泡确认框的使用场景：

六、气泡框

气泡框与气泡确认框的区别是气泡框通常用于为用户提供有关上下信息，如链接等，而气泡确认框需要显示与用户交互确认信息的UI元素。以下为气泡框的应用场景：

七、全局提示框

全局提示框通常用于向用户展示一些系统消息、警告等信息，可以出现在页面的顶部、底部或固定在屏幕的某个位置，一般采用较为醒目的颜色和字体，以吸引用户的注意力，常显于系统直到用户关闭。以下配置要求则为全局提示框的应用场景：

八、警告提示框

警告提示框与通知提示框不同的是警告提示框主要向用户展示一些重要的警示，以便用户更加清晰地了解和处理信息，以下为警告提示框的应用场景：

九、通知提示框

通知提示框是一种常见的提示框，用于向用户展示一些系统消息、通知、警告等信息。通常以弹出的形式出现在屏幕的中央位置，具有比较强的即时性和提示性，与全局提示框不同，通知提示框主要用于向用户推送短期、即时的消息和提醒 。以下为通知提示框的应用场景：

十、文字提示框

文字提示框是一种在用户界面中用于显示简短的易于理解的文本信息的UI元素，以下为文字提示框的应用场景：

以上我们可以做一个总结：模态弹窗=对话框+抽屉，但抽屉特殊场景也可以非模态，取决于业务需要抽屉间的元素与抽屉外的元素进行交互。非模态弹窗=a.气泡确认框+b.气泡框+c.全局提示框+d.警告提示框+e.通知提示框+f.文字提示框。

弹窗的使用优先级：非模态弹窗>对话框>抽屉，能更轻量化优先轻量化~

(^-^)感谢大家的阅读，有收获点赞支持一下哦~~(^-^)