Axure RP - 用户界面

安装Axure后,您将看到如下屏幕截图所示的界面.

安装Axure

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

在此屏幕上,您有以下选项 :

  • 在Axure中开始新文件

  • 打开现有的Axure项目

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

当你点击"NEW FILE"按钮时,你将成为显示以下屏幕以创建新原型.

新文件

如上图所示,工作区分为6个部分.

  • Pages

  • 图书馆

  • 督察

  • 大纲

  • 大师

  • 设计区域

Le我们逐个浏览这些部分.

页面

此部分显示您正在处理的页面.这些页面以默认树结构显示如下.主页包含以下子页面.

主页

Page 1

Page 2

Page 3

您可以继续使用给定的结构或您可以根据您的需要进行更改.为此,右键单击任何页面,然后您将看到选项,如 - 添加,移动,删除,重命名,复制等.

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

库窗格

在库窗格中,原型所需的大多数控件可用.本节中提供的典型控件包括 -  Box,Image,Placeholder,Buttons等.Axure RP提供了一组丰富的UI控件,这些控件根据应用程序的区域进行分类.

库窗格

如上图(a)所示,库的类别为 -  Common,Forms,Menus和Table,和标记.打开应用程序时,所有这些类别都会扩展.为方便起见,它在此屏幕截图中折叠.

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

使用Axure RP,您可以根据所有原型设计要求提供一种称为热点的非常有效的控制.使用此控件,您可以为UI中的几乎任何控件提供单击交互.将在后续页面中提供一个示例.

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

菜单和表具有传统结构.这种结构,可能是水平或垂直形式,在这个名为菜单和表格的库下可用.

最后,但并非最不重要的是Markup库,它包括stickies ,标记和箭头.大多数情况下,这将用于原型中的注释.

设计区域

这是UX工程师的实际操场.该空间将用于根据您的要求创建原型.首先,请参阅以下屏幕截图中用数字6突出显示的区域.

设计区域

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

示例 - 菜单栏

从库中,在菜单和表下,拖动经典菜单&减号;水平控制到设计区域.

菜单栏

在设计区域中拖动控件后,您将看到以下屏幕.

Control

如上面的屏幕所示,Axure RP足够智能,可以在菜单中显示预期的文本.考虑到它是一个菜单栏,Axure RP已在控件中自动创建了File,Edit和View as菜单.

如箭头所示,检查器部分显示控件的属性.在创建复杂原型时,使用此部分为控件创建唯一标识的名称.

让我们将此控件命名为TestMenu.我们将在前面的示例中使用此名称.

页面属性

在规划原型时,清楚地了解原型是有意义的.用户以及因此将展示/查看原型的设备.为了获得与原型交互的最佳体验,Axure提供了一个设置页面属性的功能.

页面属性

如上图所示,数字3表示的区域是页面属性部分.在本节中,您将能够看到交互下拉列表和自适应子部分.

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

交互部分处理与页面可能的交互(案例).如您所见,交互案例OnPageLoad在页面加载时处理事件.在大多数原型中,UX工程师更喜欢使用动画来给人留下第一印象.用于显示动画的特定事件通常在OnPageLoad情况下触发.

同样,其他情况包括 -  OnWindowResize,OnWindowScroll.在下拉菜单中,您可以看到其他支持的案例,以配置与页面相关的交互.

使用自适应部分,Axure RP进入响应式网页设计.如今,为网站设计体验是不够的,与此同时,企业更喜欢移动网站与网站共存.

同一页面,从不同的屏幕尺寸和布局来看构成不同的自适应观点通常,自适应视图是为移动设备和平板电脑设计的. Axure提供了自适应视图的这一功能,因此UX工程师可以从头开始控制原型的响应方面.

Widget的检查器窗格

Widget交互窗格是Axure中最重要的部分.您可以通过单击设计区域中的任何小部件来查看此窗格.

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

Inspector Pane

正如您在"属性"选项卡中看到的,有不同的交互,例如OnMove,OnShow,OnHide和OnLoad.这些特定于Menu控件的整体.

现在,从菜单控件中单击File.

文件

您会注意到"窗口小部件属性"窗格中交互类型的更改.此外,它还提供了为此菜单项提供名称的灵活性.我们以OnClick案例为例.

OnClick : 当您在运行原型时单击控件时,OnClick定义控件的行为.这样可以进行各种交互,例如页面导航,菜单弹出等.

Notes Pane : 在检查器窗格本身中,有一个名为Notes的子部分.在备注窗格中,您可以添加要记住的特定点,以便控制您的选择.

一旦我们深入了解下一章中的示例,这些点就会清楚.

网格和指南

对于具有最高质量和精度水平的原型,UX工程师需要能够将控件与另一个控件对齐/定位控制.

例如,考虑您要显示登录弹出窗口.如果要在屏幕中间显示此弹出窗口,则需要屏幕的整体尺寸.此外,要准确对齐屏幕中间,您应该让网格正确对齐.

Axure提供网格和指南的功能,以便您可以使用您的设计区域有效.

要查看可用的网格和指南,请右键单击设计区域,将弹出以下屏幕截图中显示的上下文菜单.

网格

现在,让我们了解可用的选项.

网格 : 上下文菜单中显示的前三个选项与网格相关联.它们是Show Grid,Snap to Grid和Grid Settings.

  • Show Grid : 启用"显示网格"后,您将能够在设计区域中看到网格,如以下屏幕截图所示.这在将控件与屏幕上的其他控件对齐时非常有用.

显示网格

  • 对齐网格 : 启用"对齐网格"后,控件将根据周围的网格自动附加.您将拖动控件并将其自身附加到附近的网格时,您将能够看到此行为.

  • 网格设置 : 此对话框中存在与网格相关的更多设置.如下面的屏幕截图所示,此对话框中将提供网格,网格类型等之间的间距.您可以根据自己的方便选择交叉类型的网格.

网格设置

指南 : 在以下屏幕截图中显示的上下文菜单中,第一个分隔符后的选项与指南相关.

Guides

我们将介绍常用于指南的选项.

  • 显示全球指南 : 从设计区域中的水平和垂直标尺拖动时,这些参考线将可见.亲自试试吧!

  • 显示页面指南 : 指南也可在页面级别使用.从垂直和水平标尺中拖动它们时会创建这些参考线.它们比全球指南更常见.拥有页面指南可以提高页面级别的设计灵活性.

  • 显示自适应指南 : 在为不同的自适应视图设计页面时,有必要使用自适应指南.此选项可启用自适应指南的可见性,这些指南将用于在不同的自适应视图中对齐对象.

  • 对齐指南&减号;在设计区域中排列不同的屏幕元素时,此功能可以将对象捕捉到指南.当您将特定对象放在屏幕上并相对于另一个对象进行排列时,这很方便.