简约纯粹的互动体验，Axure17 带您了解通用管理后台的 ModelView 模态弹窗

Axure 17 实战：构建通用管理后台的 ModelView 模态弹窗

在当今数字化浪潮中，通用管理后台已成为各大企业和机构不可或缺的技术工具。它不仅可以帮助管理者高效地处理各种事务，还能够为用户提供便捷的交互体验。作为一名 UI 设计师，了解和掌握通用管理后台的交互设计至关重要。

在本章中，我们将重点探讨两种常见的管理后台弹窗交互方式：ModelView 模态弹窗和经典的确认弹窗。我们将使用 Axure 17 软件作为设计工具，一步步构建出这两个弹窗的原型，并探讨其背后的设计原理。

ModelView 模态弹窗：

ModelView 模态弹窗是一种常见的弹窗形式，它可以帮助用户快速地输入或编辑数据。这种弹窗的特点是，当它出现时，整个页面都会被遮挡，用户只能与弹窗中的元素进行交互。

在通用管理后台产品设计中，ModelView 模态弹窗通常用于以下场景：

• 新增或编辑数据：当用户需要新建一条数据或编辑现有数据时，系统会弹出 ModelView 模态弹窗，用户可以在弹窗中输入或修改数据。

• 查看数据详情：当用户需要查看某条数据的详细信息时，系统会弹出 ModelView 模态弹窗，展示该条数据的所有信息。

• 选择数据：当用户需要从一组数据中选择某一条或多条数据时，系统会弹出 ModelView 模态弹窗，列出所有数据供用户选择。

经典的确认弹窗：

经典的确认弹窗是一种简单而常用的弹窗形式，它通常用于提示用户确认某项操作。这种弹窗的特点是，它不会遮挡整个页面，用户可以继续与页面中的其他元素进行交互。

在通用管理后台产品设计中，经典的确认弹窗通常用于以下场景：

• 删除数据：当用户需要删除某条数据时，系统会弹出确认弹窗，询问用户是否确定要删除该数据。

• 提交数据：当用户需要提交某项操作时，系统会弹出确认弹窗，询问用户是否确定要提交该操作。

• 注销账号：当用户需要注销自己的账号时，系统会弹出确认弹窗，询问用户是否确定要注销账号。

Axure 17 实战：构建 ModelView 模态弹窗

现在，我们将使用 Axure 17 软件来构建一个 ModelView 模态弹窗。

步骤 1：创建画布

首先，我们需要创建一个画布来放置我们的弹窗。在 Axure 17 中，我们可以通过单击“文件”菜单中的“新建”命令来创建画布。

步骤 2：添加控件

接下来，我们需要向画布中添加控件。控件是 Axure 17 中用来构建界面的基本元素，它们可以是按钮、文本框、下拉列表等。

为了构建一个 ModelView 模态弹窗，我们需要添加以下控件：

• 一个矩形控件，用作弹窗的背景。
• 一个文本控件，用作弹窗的标题。
• 若干个文本框控件，用作数据输入字段。
• 一个按钮控件，用作保存按钮。
• 一个按钮控件，用作取消按钮。

步骤 3：设置控件样式

添加完控件后，我们需要设置它们的样式。样式包括控件的大小、颜色、字体等。

对于矩形控件，我们可以设置其背景色为白色，边框色为灰色，边框宽度为 1 像素。

对于文本控件，我们可以设置其字体为微软雅黑，字号为 16 像素，颜色为黑色。

对于文本框控件，我们可以设置其边框色为灰色，边框宽度为 1 像素。

对于按钮控件，我们可以设置其背景色为蓝色，边框色为灰色，边框宽度为 1 像素，字体为微软雅黑，字号为 14 像素，颜色为白色。

步骤 4：设置交互

设置完控件样式后，我们需要设置它们的交互。交互是指当用户点击控件时，控件会做出相应的反应。

对于保存按钮，我们可以设置其点击事件为“提交数据”。

对于取消按钮，我们可以设置其点击事件为“关闭弹窗”。

步骤 5：测试弹窗

设置完交互后，我们可以测试一下弹窗是否正常工作。

我们可以单击保存按钮，看看数据是否被正确提交。

我们也可以单击取消按钮，看看弹窗是否被正确关闭。

如果弹窗工作正常，那么我们就完成了 ModelView 模态弹窗的构建。

Axure 17 实战：构建经典的确认弹窗

现在，我们将使用 Axure 17 软件来构建一个经典的确认弹窗。

步骤 1：创建画布

首先，我们需要创建一个画布来放置我们的弹窗。在 Axure 17 中，我们可以通过单击“文件”菜单中的“新建”命令来创建画布。

步骤 2：添加控件

接下来，我们需要向画布中添加控件。控件是 Axure 17 中用来构建界面的基本元素，它们可以是按钮、文本框、下拉列表等。

为了构建一个经典的确认弹窗，我们需要添加以下控件：

• 一个矩形控件，用作弹窗的背景。
• 一个文本控件，用作弹窗的标题。
• 一个文本控件，用作弹窗的内容。
• 一个按钮控件，用作确定按钮。
• 一个按钮控件，用作取消按钮。

步骤 3：设置控件样式

添加完控件后，我们需要设置它们的样式。样式包括控件的大小、颜色、字体等。

对于矩形控件，我们可以设置其背景色为白色，边框色为灰色，边框宽度为 1 像素。

对于文本控件，我们可以设置其字体为微软雅黑，字号为 16 像素，颜色为黑色。

对于按钮控件，我们可以设置其背景色为蓝色，边框色为灰色，边框宽度为 1 像素，字体为微软雅黑，字号为 14 像素，颜色为白色。

步骤 4：设置交互

设置完控件样式后，我们需要设置它们的交互。交互是指当用户点击控件时，控件会做出相应的反应。

对于确定按钮，我们可以设置其点击事件为“执行操作”。

对于取消按钮，我们可以设置其点击事件为“关闭弹窗”。

步骤 5：测试弹窗

设置完交互后，我们可以测试一下弹窗是否正常工作。

我们可以单击确定按钮，看看操作是否被正确执行。

我们也可以单击取消按钮，看看弹窗是否被正确关闭。

如果弹窗工作正常，那么我们就完成了经典的确认弹窗的构建。

结语

通过本章的学习，我们掌握了两种常见的管理后台弹窗交互方式：ModelView 模态弹窗和经典的确认弹窗。我们也学会了使用 Axure 17 软件来构建这两种弹窗。这些知识将在我们的产品设计工作中发挥重要作用。