Axure RP - 用户界面

---

---

安装 Axure 后，您将看到如下所示的界面。

此屏幕将在启动时始终显示，直到您选择不显示它。

在此屏幕上，您有以下选项 -

• 在 Axure 中创建新文件
• 打开现有的 Axure 项目

现在让我们使用 Axure 创建一个新文件。

单击“新建文件”按钮后，将显示以下屏幕以创建新的原型。

如上图所示，工作区分为 6 个部分。

• 页面
• 库
• 检查器
• 大纲
• 母版
• 设计区域

让我们逐一浏览这些部分。

页面

此部分显示您正在处理的页面。这些页面以默认的树状结构显示，如下所示。主页有以下子页面。

首页

页面 1

页面 2

页面 3

您可以继续使用给定的结构，也可以根据您的需要更改它。为此，右键单击任何页面，然后将显示添加、移动、删除、重命名、复制等选项。

与大多数可用的不同工具一样，此部分允许您与原型中的页面进行交互。您可以使用它来规划预期原型中的屏幕。

库面板

在库面板中，提供了原型所需的大多数控件。此部分中提供的典型控件包括 - 框、图像、占位符、按钮等。Axure RP 提供了一套丰富的 UI 控件，并按其应用领域进行分类。

如上图 (a) 所示，库的类别为 - 常用、表单、菜单和表格以及标记。打开应用程序时，所有这些类别都会展开。为了方便起见，在此屏幕截图中将其折叠。

常用库包括基本形状、按钮、标题文本、热点、动态面板等。

使用 Axure RP，对于您的所有原型设计需求，都提供了一个非常有效的控件，称为热点。使用此控件，您可以为 UI 中几乎任何控件提供点击交互。将在后续页面中提供示例。

在表单库中，顾名思义，包含列表框、复选框、单选按钮、文本区域和文本字段控件。要设计用户输入表单，您可以使用库下此部分中的控件。

菜单和表格具有传统的结构。这种结构，可以是水平或垂直形式，在此称为菜单和表格的库下可用。

最后但并非最不重要的是标记库，其中包括便签、标记和箭头。大多数情况下，这将用于原型中的注释。

设计区域

这是 UX 工程师的实际游乐场。此空间将用于根据您的需求创建原型。首先，请参考以下屏幕截图中标有数字 6 的区域。

在此区域中，您可以从库中拖放所需的控件。让我们使用库快速创建一个菜单栏。

示例 - 菜单栏

从库中，在“菜单和表格”下，将“经典菜单 - 水平”控件拖动到设计区域。

将控件拖动到设计区域后，您将看到以下屏幕。

如上图所示，Axure RP 足够智能，可以在菜单中显示预期的文本。考虑到它是一个菜单栏，Axure RP 已自动在控件中创建了文件、编辑和查看菜单。

如箭头所示，检查器部分显示控件的属性。创建复杂原型时，使用此部分为控件创建名称以进行唯一识别。

让我们为此控件命名为 TestMenu。我们将在后续示例中使用此名称。

页面属性

在规划原型时，了解用户以及将在其上展示/查看原型的设备的想法非常有意义。为了获得最佳的原型交互体验，Axure 提供了设置页面属性的功能。

如上图所示，编号 3 表示的区域是页面属性部分。在此部分中，您将能够看到交互下拉菜单和自适应子部分。

让我们详细讨论这些部分。

交互部分处理页面可能的交互（案例）。如您所见，交互案例 OnPageLoad 处理页面加载时的事件。在大多数原型中，UX 工程师更喜欢添加动画以留下第一印象。此特定用于显示动画的事件通常在 OnPageLoad 案例中触发。

同样，其他案例包括 - OnWindowResize、OnWindowScroll。在下拉菜单“更多事件”中，您可以看到其他支持的案例，以配置与页面相关的交互。

使用自适应部分，Axure RP 进入了响应式网页设计。如今，仅为网站设计体验是不够的，除此之外，企业更喜欢移动网站与网站共存。

从不同屏幕尺寸和布局查看的同一页面构成不同的自适应视图。通常，自适应视图专为手机和平板电脑设计。Axure 提供了自适应视图的功能，以便 UX 工程师从一开始就掌握原型的响应式方面。

组件的检查器面板

组件交互面板是 Axure 中最关键的部分。您可以通过单击设计区域中的任何组件来查看此面板。

考虑我们在上一节中使用的菜单项的示例。选择名为 TestMenu 的菜单项，并观察以下屏幕截图中突出显示的部分。

如您在“属性”选项卡下所见，存在不同的交互，例如 OnMove、OnShow、OnHide 和 OnLoad。这些特定于整个菜单控件。

现在，从菜单控件中单击“文件”。

您会注意到组件属性面板中交互类型的变化。此外，它还提供了为该菜单项提供名称的灵活性。让我们以 OnClick 案例为例。

OnClick - OnClick 案例定义了控件的行为，当您在运行原型时单击控件时。这使您可以进行各种交互，例如页面导航、菜单弹出窗口等。

注释面板 - 在检查器面板本身中，有一个名为注释的子部分。在注释面板中，您将能够为所选控件添加某些要点以供记住。

在下一章深入探讨示例后，这些要点将更加清晰。

网格和参考线

对于具有最大质量和精度的原型，UX 工程师需要能够将一个控件与另一个控件对齐/定位。

例如，假设您想显示一个登录弹出窗口。如果此弹出窗口要显示在屏幕正中间，则需要屏幕的整体尺寸。此外，要精确对齐到屏幕中央，您应该使用网格来适当地对齐它。

Axure 提供了网格和参考线的功能，以便您可以有效地使用设计区域。

要查看可用的网格和参考线，请右键单击设计区域，然后将弹出以下屏幕截图中所示的上下文菜单。

现在，让我们了解可用的选项。

网格 - 上下文菜单中显示的前三个选项与网格相关。它们是显示网格、吸附到网格和网格设置。

• 显示网格 - 启用“显示网格”后，您将能够在设计区域中看到网格，如以下屏幕截图所示。这在将控件与屏幕上的其他控件对齐时非常有用。

• 吸附到网格 - 启用“吸附到网格”后，控件将根据周围存在的网格自动附加。在拖动控件并将其附加到附近的网格时，您将能够看到此行为。

• 网格设置 - 此对话框中提供了更多与网格相关的设置。如以下屏幕截图所示，此对话框中将提供网格之间的间距、网格类型等。您可以根据需要选择交叉类型网格。

参考线 - 在以下屏幕截图中所示的上下文菜单中，第一个分隔符后的选项与参考线相关。

我们将介绍常用参考线选项。

• 显示全局参考线 - 当您从设计区域中的水平和垂直标尺拖动时，这些参考线将可见。自己试试吧！

• 显示页面参考线 - 参考线在页面级别上也可用。当您从垂直和水平标尺拖动它们时，会创建这些参考线。它们比全局参考线更常见。使用页面参考线可以提高页面级别的设计灵活性。

• 显示自适应参考线 - 在为不同的自适应视图设计页面时，使用自适应参考线非常有用。此选项启用自适应参考线的可见性，这些参考线将用于跨不同自适应视图对齐对象。

• 对齐到参考线 - 在设计区域排列不同的屏幕元素时，此功能使对象能够对齐到参考线。当您将特定对象放置在屏幕上并相对于其他对象进行排列时，此功能非常方便。