B端：弹窗的场景、类型、 选择策略串讲，让你的设计有理有据。

B端产品在什么情况下使用弹窗，弹窗又分为哪些类型，该如何选择合理的弹窗形式，很多小伙伴都是跟着感觉走，本文告诉你依据。

一、弹窗及其场景

在B端系统中，"B端"通常指的是面向企业（Business）的系统，即企业级应用。在这样的系统中，弹窗通常是指在用户界面上弹出的对话框或弹出框，用于向用户显示信息、提示用户进行操作或者请求用户确认。

弹窗通常用于以下场景：

1. 提示信息：向用户显示一些重要的提示信息，例如操作成功、操作失败、系统错误等。

2. 确认操作：在用户进行一些重要的操作时，需要用户确认，例如删除操作、提交操作等。

3. 输入信息：需要用户输入一些信息时，可以通过弹窗来进行输入。

4. 警告信息：向用户显示一些警告信息，例如某些操作可能带来风险或者影响。

在B端系统中，弹窗通常需要考虑用户友好性、操作便捷性以及信息准确性等方面，以提高用户体验和系统的易用性。

---

二、弹窗分类

弹窗可以分为模态和非模态两种类型：

1. 模态弹窗：

模态弹窗是指当弹窗出现时，用户必须先处理弹窗中的内容，才能继续进行其他操作。在弹窗出现后，用户不能操作弹窗之外的界面，只能进行弹窗内的操作。模态弹窗通常用于需要用户必须完成某些操作才能继续的场景，例如确认框、提示框等。

2. 非模态弹窗：

非模态弹窗是指当弹窗出现时，用户仍然可以操作弹窗之外的界面。用户可以在弹窗出现的同时继续进行其他操作，不需要等待或者处理弹窗中的内容。非模态弹窗通常用于需要用户进行选择或者输入操作的场景，例如输入框、选择框等。

模态弹窗通常用于需要用户必须完成某些操作才能继续的场景，而非模态弹窗通常用于需要用户进行选择或者输入操作的场景。在实际应用中，需要根据具体的场景和需求来选择合适的弹窗类型，以提高用户体验和系统的易用性。

---

三、模态弹窗有哪些类型

模态弹窗可以以多种形式出现在用户界面上，常见的模态弹窗形式包括：

1. 确认框（Confirm Dialog）：

确认框是一种常见的模态弹窗，用于向用户显示一条消息以及“确定”和“取消”两个按钮，用户需要在确认框上选择“确定”或“取消”来确认或取消某个操作。

2. 提示框（Alert Dialog）：

提示框也是一种常见的模态弹窗，用于向用户显示一条消息以及一个“确定”按钮，用户需要点击“确定”按钮来确认消息并关闭弹窗。

3. 输入框（Input Dialog）：

输入框是一种模态弹窗，用于向用户请求输入一些信息，例如用户名、密码、数字等，用户需要在输入框中输入信息并确认后才能关闭弹窗。

4. 模态窗口（Modal Window）：

模态窗口是一种全屏覆盖的模态弹窗，用于显示较为复杂的内容，例如表单、设置页面等，用户需要在模态窗口上进行操作后才能继续其他操作。

5. 加载框（Loading Dialog）：

加载框是一种模态弹窗，用于在执行较长时间的操作时向用户显示加载状态，通常包括加载动画和提示信息。

以上是常见的模态弹窗形式，不同的形式适用于不同的场景和需求。在实际应用中，需要根据具体的情况选择合适的模态弹窗形式，以提高用户体验和系统的易用性。

---

四、弹窗的两种输入框：对话框和抽屉，如何选择

在设计 B 端系统时，对话框和抽屉都是常见的弹窗形式，它们在不同的场景下有不同的使用方式。在选择对话框和抽屉时，可以考虑以下几点：

1. 信息的重要性：

如果需要向用户展示重要的信息、警告或者需要用户进行确认的操作，通常选择对话框。对话框是模态的，能够确保用户在处理完对话框上的信息或操作后才能继续其他操作。

2. 用户操作的频率：

如果需要用户频繁进行一些操作，例如切换导航、设置选项等，通常选择抽屉。抽屉是非模态的，用户可以在抽屉打开的同时继续进行其他操作，适合用于提供附加信息或者导航功能。

3. 界面布局和一致性：

在设计中需要考虑整体的界面布局和一致性，对话框和抽屉的使用应该符合整体的设计风格和用户习惯，以提高用户的使用体验。

4. 用户行为的引导：

根据用户行为的引导，选择合适的弹窗类型。如果需要引导用户进行必要的操作或者选择，通常选择对话框；如果需要提供附加信息或者导航功能，通常选择抽屉。

可以根据具体的场景和需求来选择合适的弹窗类型。在设计 B 端系统时，需要根据具体的功能和交互需求来设计对话框和抽屉，以提高用户体验和系统的易用性。

Hi，我是贝格前端工场，10年前端和UI老司机了，持续为大家分享有价值、有见地的观点、作品、干货，欢迎评论、关注、点赞、有事请私信。

声明：未经允许，不能转载。