目录

Axure RP - 快速指南

Axure RP - Introduction to Prototyping

prototyping一词在软件开发和架构开发方面非常普遍且与人们相关。 在建筑发展方面,在埃及,有吉萨大金字塔的原型。 这些都是(当然)较小的版本构建,以获得统治者的同意或批准。

这个小而有意义的例子恰恰说明了原型的目的。 根据维基百科的说法,原型是“开发其他形式的设备或车辆的第一个或初步版本”。

对于软件开发领域,定义可以被调整为页面,屏幕或功能的初步版本,其通过有效地可视化屏幕元素并展示交互来支持其他开发。 该定义包括最关键的部分,即交互。

在软件开发中,为了开发功能的一部分或完整功能本身,在时间和精力方面需要相当大的投资。 根据客户的反馈,这是一个无休止的开发,验证和纠正问题的过程。

大多数软件开发公司都希望这个过程尽可能快。 因此,他们不会继续全体团队成员的努力和时间投入。 相反,他们采取了招聘用户体验(UX)工程师的聪明举措,该工程师具有可视化特定功能的技能。 这使得他们在开发产品时处于驾驶座位上。

从本质上讲,需要进行原型设计,以便在开发的早期阶段模拟和可视化软件需求。 该过程最终对软件开发公司和客户都有益,因为它减少了特征中的未知,从而为开发提供了正确的方向。

原型开发的正确阶段

在当前高调软件开发的时代,整个软件开发生命周期表中有许多进步。 这些进步来自技术方面以及特定团队成员在生命周期中的角色/位置。 一个这样的职位已经开始获得牵引力,这被称为UX工程师。

UX工程师配备了技能组合,这对客户有益。 通过使用不同的技术或步骤更好地了解客户,UX工程师可以很好地掌握用户对给定软件产品的期望。

通常,当需求收集过程发生时,技术公司现在让UX工程师参与进入市场以了解用户需求。 随着响应式Web XDesign和Mobile-First方法的最新趋势,软件开发可能会有许多领域需要关注。 用户体验工程师采用用户访谈,市场调查等流程来了解其目标受众的脉搏。

这个过程既耗时又重要,因为它为软件产品提供了清晰的路径,以确定其在市场中的适用性。 在收集软件需求并引出它们时使用这些步骤。 这是一个理想的阶段,因为它降低了整体开发成本。 但是,当软件产品成熟时,可以引入UX研究阶段,以评估正在进行的增强的可行性。

Axure RP - Introduction

对于UX工程师而言,了解其用户群的过程不仅限于从客户或相关对话获取输入。 他们需要采取一些有趣的步骤来了解用户想要的内容。 当他们对用户可能期望从软件产品中获得什么感到清醒时,真正的工作就开始了。

一旦有关于用户如何感知即将推出的软件或现有软件的增强的一些数据,UX工程师就会回到它的巢穴为他们设计用户界面。 传统上或作为一种常见的方法,当有人说设计时,它意味着软件,如Adobe Photoshop,CorelDraw,甚至Microsoft Paint。 有时,为了快速回到用户,UX设计师利用优质的旧笔和纸来设计界面。

但是,对于UX设计师来说,提供设计用户界面的质量意味着不仅仅是展示一个很棒的设计。 用户体验不仅包括用户如何看待界面,还包括用户与其交互的方式。 上面提到的软件工具和市场上的类似工具都有自己的功能集。 对于UX工程师来说,选择合适的软件(头脑风暴,设计和获得反馈)确实是一项繁琐的工作。

输入Axure,这是目前流行的软件,用于设计精美的用户界面和交互。 Axure近十年来一直存在,允许UX工程师轻松了解创建软件原型的细节。 Axure作为原型制作工具,拥有一个强大的社区,通过许多示例和熟练的互动为UX世界做出贡献。

在更高的层次上,以下是Axure提供的功能 -

  • 图表和文档
  • 使用动态内容进行有效的原型设计
  • 条件流
  • 美丽的动画,以增强互动
  • 自适应视图
  • 支持Windows和Mac

要浏览Axure提供的详细功能列表,请访问https://www.axure.com 。 有关安装说明, https://www.axure.com/download链接。

对于快速原型设计,Axure RP提供各种工具和技术,始终帮助分析师/用户体验工程师可视化最终目标。

随着一个强大的社区随时可以提供帮助,Axure RP正成为UX爱好者和从业者的首选工具。

Axure RP - User Interface

安装Axure后,您将看到一个界面,如以下屏幕截图所示。

安装Axure

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

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

  • 在Axure中启动一个新文件
  • 打开现有的Axure项目

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

单击“NEW FILE”按钮时,将显示以下屏幕以创建新原型。

新文件

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

  • Pages
  • Libraries
  • Inspector
  • Outline
  • Masters
  • 设计领域

让我们逐一介绍这些部分。

Pages

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

Home

Page 1

Page 2

Page 3

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

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

图书馆窗格

在库窗格中,可以使用原型所需的大多数控件。 本节中提供的典型控件包括 - 框,图像,占位符,按钮等.Axure RP提供了一组丰富的UI控件,这些控件根据其应用领域进行分类。

图书馆窗格

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

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

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

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

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

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

设计领域

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

设计领域

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

示例 - 菜单栏

从库中,在菜单和表格下,将Classic Menu − Horizontal控制拖动到设计区域。

菜单栏

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

控制

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

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

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

页面属性

在规划原型时,有必要清楚地了解用户以及原型将被展示/查看的设备。 为了获得与原型交互的最佳体验,Axure提供了一种设置页面属性的功能。

页面属性

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

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

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

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

通过Adaptive section ,Axure RP进入响应式网页设计。 如今,为网站设计体验是不够的,与此同时,企业更喜欢移动网站与网站共存。

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

Widget的Inspector窗格

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

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

检查员窗格

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

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

文件

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

OnClick - 在运行原型时单击控件时,OnClick定义控件的行为。 这可以实现各种交互,例如页面导航,菜单弹出等。

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

一旦我们深入了解下一章的例子,这些要点就会很清楚。

网格和指南

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

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

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

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

网格

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

Grid - 上下文菜单中显示的前三个选项与网格相关联。 它们是“显示网格”,“对齐网格”和“网格设置”。

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

显示网格
  • Snap to Grid - 启用“对齐网格”后,控件将根据周围的网格自动附加。 当您拖动控件时,您将能够看到此行为,它将自身附加到附近的网格。

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

网格设置

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

指南

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

  • Show Global Guides - 从设计区域中的水平和垂直标尺拖动时,将Show Global Guides这些Show Global Guides 。 亲自试试吧!

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

  • Show Adaptive Guides - 在设计不同自适应视图的页面时,有必要使用自适应指南。 此选项可启用自适应指南的可见性,这些指南将用于在不同的自适应视图中对齐对象。

  • Snap to Guides - 在设计区域中排列不同的屏幕元素时,此功能可以将对象捕捉到参考线。 当您将特定对象放在屏幕上并相对于另一个对象进行排列时,这会很方便。

Axure RP - Basic Interactions

本章将向您介绍Axure在设计屏幕时提供的基本交互集。

Axure RP的目的是允许交互式原型。 现在,在制作交互式原型时,始终需要注意创建一个过度交互的原型。 这就是为什么,一次从单个重要的交互开始,以便冲刺其余的可用页面是有道理的。

轴相互作用

交互是为将静态线框转换为可点击的交互式原型的功能元素而创造的术语。 为了使其成为一种简单的交互方法,Axure通过提供用于定义结构和逻辑的接口,消除了对原型进行编码的需要。

在生成HTML原型时,Axure RP将交互转换为实际代码(HTML,CSS和JavaScript)。 这可以作为催化剂在页面上显示预期的设计和交互。

通常,交互将在交互发生时开始。 例如,当页面在浏览器中加载时,当用户点击其中一个元素时,等等。

然后是问题,屏幕上的交互正在发生。 它可以是一个简单的屏幕元素,例如矩形,我们希望将其转换为可点击按钮以用于菜单(稍后显示的示例)。

最后,描述了交互中发生了What 。 让我们考虑浏览器加载页面时的页面加载; 您只需选择一个特定的幻灯片开始或在屏幕上输入时图像变大。

Axure活动

Axure中的事件可以是两种类型,由两种类型的事件触发。

页面和主要级别事件

当页面加载时,会发生大量事件来获取设计信息,内容,从而获取屏幕上每个元素的对齐方式。 由于这些事件发生在初始页面加载期间,您可以认为这些事件在每次页面加载时都是重复的。 以下是Page和Master Level Events的一些示例。

  • OnPageLoad
  • OnWindowResize
  • OnMouseMove
  • OnAdaptiveViewChange

对象或小组件级别事件

让我们考虑一下,我们在页面上创建了一个页面和一个特定的按钮小部件。 现在,可以通过触摸(在移动原型上)或鼠标单击来与此按钮小部件进行交互。 以下是对象或小组件级别事件的一些示例。

  • OnClick
  • OnMouseEnter
  • OnDrag
  • OnDrop
  • OnMouseHover

Cases

如前一章所述,在页面属性部分中,可以设计特定的窗口小部件交互。 这些被称为cases 。 特定的互动可以是多个案例的构成。

让我们考虑一个例子,更好地理解这一点。

示例:Axure原型 - 鼠标悬停时显示菜单

要从此示例开始,请通过单击New File菜单下的“ New ”或使用快捷键Ctrl + N创建新文件。

在这个例子中,我们将设计简单的Menu Bar如大多数软件产品中所示。 菜单结构将具有以下菜单元素和每个菜单元素下的子菜单。

File

  • New
  • Open
  • Save
  • Close

Edit

  • Cut
  • Copy
  • Paste
  • Find
  • Replace

View

  • 显示状态栏
  • 工具栏
    • 主工具栏
    • 样式工具栏

Help

  • 入门
  • 使用帮助
  • 这是什么

首先,在设计区域中拖放Classic Menu – Horizontal 。 您可以在Libraries→Menus and Tables下找到它。 将控件命名为MenuBarExample。 让我们制作宽度为300像素,高度为30像素的元素。 将其定位在X轴上的100和Y轴上的30。 您可以在右侧“检查器”部分下的“样式”选项卡下调整这些值。

在上述过程结束时,您将能够看到最终结果,如以下屏幕截图所示。

结果

我们也将这些名称添加到“检查器”部分的菜单标题中。 单击每个菜单标题并观察检查器部分。 如果未将名称指定给特定菜单栏,则名称将变为(菜单项名称)。

将File菜单命名为FileMenu

编辑为EditMenu和View为ViewMenu

要确认是否已提供名称,请​​单击每个菜单,然后在“检查器:菜单项”下确认。 您将能够看到名称而不是(菜单项名称)。

现在,根据我们的要求,让我们使用“帮助”菜单完成菜单栏。 右键单击菜单栏标题 - 查看,您将看到一个上下文菜单。 单击“添加菜单项”。

添加菜单

将出现一个空白菜单项。 双击空白菜单项,然后输入菜单标题作为帮助。 重复此过程,在Inspector:Menu Item Name下为其命名。 完成后,您将看到如下设计区域。

救命

接下来,让我们设计文件菜单的交互。

单击文件菜单栏标题,然后观察检查器:菜单项。

菜单项

如上面的屏幕截图所示,请观察“属性”选项卡。

在Properties选项卡下,我们将为File Menu创建交互。

将子菜单添加到菜单非常简单。 右键单击“文件”菜单,在出现的上下文菜单中,单击“添加子菜单”。

Note - 我们还可以通过重复相同步骤并单击“删除子菜单”来删除子菜单。

添加子菜单后,将出现一个空白子菜单。 双击每个菜单项并提供诸如“新建”,“打开”,“保存”等名称。

右键单击最后一个子菜单项,然后再添加一个子菜单项。 将其命名为Close。

在Inspector部分下命名所有子菜单项也是一个好习惯。 这有助于在整个设计过程中引用它们。

在设计此部件时,请注意每当我们单击设计区域的任何其他部分时,子菜单将消失。 我们需要单击“文件”菜单项以查看子菜单。

我们来谈谈互动 - Hover 。 当鼠标指针悬停在特定元素上时,此交互具有触发的独特行为。 在Axure中,此交互是使用经典菜单 - 水平自动实现的。

要查看正在进行的交互,请单击工具栏中的“预览”按钮。 Axure将在默认浏览器中打开预览。

工具栏

将鼠标悬停在“文件”菜单上。 子菜单将显示如下面的屏幕截图所示。

徘徊

如果我们客观地看待它,我们刚刚利用Axure创建了一个复杂的交互,例如悬停在菜单项上。 在通常的HTML编码中,它将花费大约1到1.5小时的时间。

作为一项任务,完成其子菜单的其余菜单。

现在,让我们在“文件”菜单下的“关闭”子菜单上快速创建交互。 我们将在悬停时用红色突出显示它。 为此,请右键单击“关闭”子菜单。 单击交互样式...

在MouseOver选项卡下,选中选择填充颜色并选择红色。 Axure将立即在设计区域显示预览。 假设选择了应用于选定菜单部分和所有子菜单,它将以红色突出显示整个菜单。

单击仅选择菜单项。 现在选中“字体颜色”并为字体选择白色。 预览将立即更新。

单击“确定”完成此设置。

再次单击“预览”以查看正在进行的交互。

预习

这完成了这个例子。

您可以尝试以下交互作为快速分配。

使用按钮小部件的OnClick属性。

Axure RP - Using Masters & Dynamic Panels

在用户界面开发方面,许多软件开发方法采用了一种常用技术 - 创建大师。

主设备是可重复使用的线框,将在后续页面上创建一次并广泛使用。 使用Axure RP,当我们创建母版页时,对此页面所做的更改将应用​​于使用它的页面。 因此,它在很大程度上减少了所有页面共有的组件的时间。

要开始使用Masters,您可以专注于以下屏幕截图中突出显示的Masters部分(标记为5)。

大师

使用此主人部分 -

  • 通过添加,删除或编辑母版页/文件夹来组织原型的母版。

  • 选择要编辑的特定主数据。

动态面板

在Axure RP中,正如我们在前一章中所看到的,存在与给定小部件相关联的不同状态。 为了整合/组织特定小部件或小部件集的状态,我们需要一个容器/占位符。 动态面板充当窗口小部件状态的容器/占位符。

让我们更好地使用示例来理解动态面板。 我们将从菜单栏示例继续。

此示例中的添加将是图像区域和菜单栏下方的按钮。 使用窗口小部件占位符作为图像区域和常用小部件下的按钮。 将占位符命名为ImageAreaPlaceholder,将按钮命名为showImageButton。

另外,让我们将菜单栏添加到主人。 右键单击菜单栏,然后​​单击“转换为主文件”。 将出现一个对话框,提示主站的名称。 将名称添加为menuBarMaster。

menuBarMaster

如上面的屏幕截图所示,菜单栏变为粉红色,并添加了主人的条目。

现在,让我们创建一个动态面板。 动态面板的上下文是,您希望基于“显示图像”按钮单击来控制图像区域的可见性。 具有动态面板将允许图像区域的灵活性。

让我们看看如何创建动态面板。 右键单击图像区域,将出现上下文菜单,选择转换为动态面板。

动态面板将在Outline:Page下。 同样在Inspector下,它显示动态面板。 将动态面板命名为showImageDynamicPanel。 此动态面板的名称将在“大纲:页面”部分下更新。

在设计区域中,右键单击“显示图像”动态面板以查看上下文菜单。 选择Set Hidden,动态面板将从屏幕上消失。

双击Outline:Page下可以访问动态面板。

动态面板

现在,让我们为按钮提供单击事件。 单击“显示图像”按钮,在“检查器”→“属性”下,双击“OnClick交互”。

OnClick交互

如上面的屏幕截图所示,单击Widgets下的Show/Hide。 它将自动显示可用的小部件以配置操作。 选中show showImageDynamicPanel。 单击确定。

现在,单击“预览”。 在预览屏幕上,单击“显示图像”。 最后创建了按钮的另一个交互。

Axure RP - Condition Logic

在本章中,我们将讨论Axure RP中使用的条件逻辑。

如果 - 然后 - 在Axure中

与任何其他编程工具一样,Axure也支持条件逻辑,以在原型中创建增强的交互。 一旦熟悉了如何提供交互,为交互提供条件逻辑就是下一个层次。

以下是条件逻辑的简单流程 -

  • 如果,单击特定小部件/屏幕
  • 然后,执行特定的操作/交互
  • 否则,保持/更改小部件或屏幕的状态

为了更好地理解这一点,让我们从前面的例子中恢复流程。 为此,我们需要熟悉Condition Builder。

条件生成器

双击任何交互,例如OnClick。 您将能够看到案例编辑器,如以下屏幕截图所示。

条件生成器

单击“案例名称”附近的“添加条件”按钮。 它将在对话框中显示如下。

添加条件

如描述中所示,条件构建器将根据条件部分中选择的条件创建If-Then-Else流。

让我们在这个按钮上创建一个条件。

一旦动态面板可见,我们想要显示隐藏图像按钮。 我们在上一个示例中单击“显示图像”按钮上显示动态面板。 现在,让我们创建另一个按钮隐藏图像可见。

关闭条件构建器,然后返回设计区域。

在公共库下的“库”中插入“隐藏图像”按钮。 重申一下,最好在将UI元素插入设计区域后对其进行命名。

右键单击“隐藏图像”按钮,然后单击“设置隐藏”。 该按钮将在设计区域中隐藏,如以下屏幕截图所示。

隐

现在,让我们回到Show Image按钮的交互。

首先,在“显示图像”按钮交互下,双击“案例1”,您将能够看到案例编辑器。 使用“显示/隐藏”操作,选择hideImageButton并设置其显示的可见性。

同样,使用“显示/隐藏”操作,选择showImageButton并将其可见性设置为隐藏。

我们已经管理了隐藏图像按钮的可见性,这样,当我们单击显示图像按钮时,将显示该按钮。

完整的条件将如以下屏幕截图所示。

条件

让我们建立条件。

在设计区域下,单击“隐藏图像”按钮。 在“检查器”部分中,单击“添加案例”。

在Add Case下,单击Add Condition按钮。 根据前面提供的背景,使用Condition Builder中的下拉值创建条件集。

条件集

简单来说,在上述条件下,我们检查动态面板showImageDynamicPanel是否可见

现在,让我们设计隐藏图像按钮的交互,配置如下 -

配置
  • 选择显示/隐藏操作。
  • 选择小部件showImageDynamicPanel。
  • 将可见性设置为“隐藏”。

同样,重复钻取以显示showImageButton并隐藏hideImageButton。

完成后,单击“确定”关闭“案例编辑器”。

然后,单击“预览”以查看所做的更改。

成功的结果将如以下屏幕截图所示。

单击“显示图像”按钮时 -

显示图像按钮

单击隐藏图像按钮时 -

单击图像按钮

Axure RP - Advanced Interactions

到目前为止,我们已经介绍了Axure的基本功能以进行交互。 但是,会有许多真实场景​​,原型必须是智能的。 通过智能这个词,原型将需要检测某个小部件的状态,以便执行某个动作/触发某个行为。

这种交互的典型示例是设置按钮的颜色。 这需要UX工程师戴上思维帽并将原型设计提升到新的水平。

在Axure中使用变量

根据定义, Variable代表易于变化或变化的因素。 在Axure中,我们可以使用变量来表示或识别窗口小部件/交互的状态。

典型的例子是在将数据从一个页面传输到另一个页面时存储数据值。 为了使示例简单明了,让我们考虑一个需要显示特定小部件状态的场景。

继续我们的最后一个例子,让我们考虑一下我们想要显示图像显示的次数。

我们将如何做到这一点 -

  • 我们将创建一个变量,用于将计数启动为0。

  • 单击Show Image按钮,我们将增加此变量的值。

  • 显示文本标签中的值。

在本例中,我们将在动态面板下创建一个文本。 文本将显示 - 图像显示0次。

动态

Critical - 标签分为三个很重要。 请遵循表中列出的标签名称和文字。

标签名称 标签文字
imageLabel Image is shown
countLabel 0 (数字为零)
timesLabel Times

这是必需的,因为我们想要控制每个Show Image按钮单击的countLabel值。

让我们先定义一个变量。

我们需要一个变量,单击该按钮时将对其进行控制。 Axure术语中的这个变量是 - 全局变量。 要定义全局变量,请单击菜单栏中的“项目”,然后单击“全局变量”。 将打开一个对话框,如以下屏幕截图所示。

项目

单击绿色加号(+)图标以添加全局变量。 让我们调用我们的全局变量 - varDynamicPanel 。 其默认值为0

使用“显示图像”按钮交互,双击“案例1”。添加其他操作。 如以下屏幕截图所示,操作是Set Text on countLabel to [[varDynamicPanel + 1]]

为值选择文本标签非常简单。 让我们看看如何从动态面板中获取值。

文字标签

如上面屏幕截图中的步骤4所示,单击fx按钮,将打开以下对话框。

点击fx

在第一个文本区域下,输入以下字符串。

[[varDynamicPanel + 1]]

单击确定。

现在,我们需要确保在每次单击按钮后更新变量。

每个按钮单击

在案例编辑器对话框的操作下,选择“变量”→“设置变量值”。

选择varDynamicPanel作为变量。

将变量设置为从小部件上的文本中获取值作为countLabel从可用选项中获取。

单击“确定”关闭“案例编辑器”。 然后,单击“预览”按钮。

显示/隐藏图像四次后,这是预览屏幕上的结果。

隐藏图像

Axure RP - Widget Library

既然您已熟悉Axure中可能存在的不同交互和事件,您可能希望扩展您的工作,以便最大限度地减少将来的工作。

例如,第一个使用经典菜单 - 水平的示例,曾作为不同可用小部件的组合出现在Axure版本中。 这意味着,Axure随着时间的推移不断发展,以单个widget library的形式容纳经常使用的小widget library

小部件库的概念在大型UX团队中更为突出。 一些组织在中央存储库中为后续的UX工程师保留批准的小部件。

因此,简而言之,Axure Widget Library是存储在单个文件中的自定义小部件的集合。 RPLIB Widget Library的文件类型是RPLIB

小部件库的类型

Axure内置库

可以从“库”窗格访问这些库。 无法更新/删除这些库。 对于大多数复杂的原型设计需求,Axure内置库可以解决问题。

该库由17个独特的流程小部件组成,主要用于创建图表。 此外,线框库中有25个小部件。

第3章 - 用户界面中提供了库的简要功能。

Axure自定义库

Axure社区日益壮大,拥有大量用户创建的库。 您可以访问它们 - https://www.axure.com/support/download-widget-libraries

来自世界各地的UX专业人士,致力于使这个社区成长,他们在上述链接上提交他们的工作。

您可以从网站下载库,并使用库下的“加载库”选项将它们添加到Axure。 此外,您可以直接从应用程序界面本身下载库。

下载图书馆

如上面的屏幕所示,我们有一个上下文菜单,您可以在其中下载https://www.axure.com/support/download-widget-libraries提供的不同库。 您还可以创建自己的库,这对于为给定原型创建重复控件时非常方便。

有关下载/加载库的完整说明,请访问: https://www.axure.com/support/reference/widget-libraries : https://www.axure.com/support/reference/widget-libraries

在使用其中一个已加载库中的自定义窗口小部件时,将其拖放到与内置窗口小部件类似的设计区域中。 如果窗口小部件包含变量或自定义样式,则“ Import Wizard对话框将标记此类依赖项。

在这些依赖项中,您可能会注意到正在导入的窗口小部件库中存在某些不兼容的样式。 您可以选择Cancel并仅导入小部件,或单击“ Finish按钮导入整个包。

将窗口小部件拖放到线框后,该特定实例将不再与其原始窗口小部件库关联。 因此,即使在刷新库之后,对导入的窗口小部件库中的窗口小部件所做的编辑和更改也不会应用于项目文件中这些窗口小部件的任何实例。 请放心,一旦导入,您就可以利用导入库中的小部件,而无需担心在线可用的同一小部件​​库中发生的更新。

使用RPLIB

使用Axure RP Library文件非常简单。 下载库时,库文件(.rplib)的图标与Axure RP原型文件(.rp)明显不同。 例如,如下面的屏幕截图所示。

RPLIB

此工作机制 - 您可以在iOS线框演示中导入iOS线框文档。

此库可用于多个项目,一旦从上下文菜单刷新库,就可以使用库文件中的更新。 如前所述,在处理团队项目并以这种方式分发库时,这非常方便。

Axure RP - Exporting Prototype

Axure RP 8支持与该功能的合作 - 团队项目。 此功能不仅有利于分布式团队,也有利于单个用户。 单个用户的好处是能够在正在进行的工作上创建版本。

与团队项目合作

在团队项目方案中,每个团队成员都在其计算机上拥有项目的副本。 该项目将与共享存储库同步。 此共享存储库已连接到团队的其他成员。

在一天的工作过程之后,每个团队成员将创建新元素,检出文件,并通常编辑项目。 Check Out是一个常用术语,用于指示特定文件的正在进行的工作。

在团队成员签入所有签出的元素之前,更改不会反映在共享存储库中。 Manage Team Project控制台为所有团队成员提供系统管理的元素的可用性状态的实时视图。

此视图提供由另一个团队成员签出的元素的详细信息。

启动团队项目

要使用或创建团队项目,请转到“团队”菜单。 单击Team,然后从Current File中选择Create Team Project。 弹出以下屏幕。

团队项目

托管团队项目的可用选项是 - 使用AxShare和SVN。 我们将在下一节讨论AxShare。 SVN是常用的版本控制系统,它提供托管文档的服务器。

按照屏幕上的指南创建团队项目,然后您就可以开始在整个团队中使用单个Axure文件进行协作/将其用于您自己的历史存储。

Axure Share

在展示原型时,根据您所处的环境,有多种选择可用。最常用的导出原型的方法是使用Axure Share(也称为AxShare)。

通过Axure Share,可以实现以下协作功能。

  • 原型可以托管在Axure Share上,并与相关团队成员/客户共享。

  • 通过讨论/评论功能,您可以在制作中获得原型的移动输入。

准备好原型后,您可以使用Publish→Publish to Axure Share将原型上传到AxShare。 将显示以下对话框。

原型

您必须在AxShare.com上创建一个帐户才能继续前进。 如果您已有帐户,则可以使用“登录”选项登录并将您的工作上传到AxShare

上传的数据采用HTML,CSS和JavaScript格式。 上传后,您将获得一个链接,您可以将该链接提供给目标利益相关者/团队。

↑回到顶部↑
WIKI教程 @2018