Axure RP 8 for Mac破解版用于交互式原型,当静态线框,模型和流程不足以传达您的想法的复杂性时,是时候让您的设计具有互动性。Axure RP支持丰富的交互式原型设计:动态样式,动画,交互式表单和数据驱动的可视化(当然还有标准的超链接)。通过各种事件来利用这些效果:作为对页面加载的响应,按钮或按键,滑动,或者只是一个人可以用软件用户界面做的任何其他事情。
点击通过原型
Axure RP中的相互作用可以节约使用,效果很好; 你并不总是需要高度复杂的互动才能明白你的观点。考虑点击原型:一系列静态页面,每个页面在单击时将查看器推进到系列中的下一页。您可以使页面的全部内容可单击,也可以选择要关注操作的区域或元素(如按钮)。例如,包括注册表单的页面可以包括链接到确认页面的“提交”按钮。
要添加链接,请先在画布上选择要进行交互的小部件。然后,在检查器的“属性”选项卡中,单击“创建链接”的蓝色文本,然后从结果列表中选择目标页面。 | |
在Inspector中的“Interactions”标题下,您将看到在OnClick事件上创建了一个新案例。您将在下面了解有关事件和案例的更多信息。要测试您的链接,请单击主工具栏中的“预览”按钮(看起来像“播放”图标),以在浏览器中打开您的页面。查找并单击您的交互式窗口小部件以转到目标页面。 |
在浏览器中查看生成的输出时,通过单击原型侧栏中 “页面”窗格顶部的“突出显示交互元素”图标,突出显示图表的交互元素。打开突出显示将为具有至少一个案例的任何窗口小部件添加彩色轮廓。 | |
启用突出显示会更改页面URL。如果您将此更改的链接发送给其他查看者,则在查看页面时突出显示将已打开。 | |
提示窗口小部件可能是交互式的另一种方法是为其提供MouseOver交互样式。只要您的观众将鼠标光标移动到浏览器中的该窗口小部件上,MouseOver样式就会显示出来(并且样式将一直持续到鼠标离开窗口小部件为止)。从Inspector的“属性”选项卡添加MouseOver交互样式。 |
交互性质
不同类型的小部件具有不同的交互属性。以下部分介绍了各种窗口小部件类型以及每种类型的特殊交互属性。
交互式表格小组
交互式表单是在Axure RP中构建的项目的非常常见的组件,RP包括几个专门用于创建表单的窗口小部件类型。您可以在“默认”窗口小部件库的“表单”部分中找到这些窗口小部件。RP中的表单元素是功能性的 - 它们在生成的输出中变为真实的,工作的HTML表单元素。可以输入文本字段,下拉列表在单击时公开选项,可以填写和清除复选框等等。HTML表单元素的一个共同点是它们的样式通常由Web浏览器控制,因此与形状小部件相比,RP中的表单小部件具有最少的样式选项。
文本字段
文本字段具有“输入类型”属性,这将使它们在浏览器中表现独特; 例如,“密码”类型的文本字段将用黑点掩盖其内容。从Inspector的“属性”选项卡中为文本字段指定输入类型。
DROPLISTS
双击画布上的droplist小部件以开始添加列表项。单击绿色的“加号”图标一次添加一个项目,或单击“添加多个”按钮添加多个项目。在“编辑下拉列表”菜单中,您会在列表中的每个项旁边看到一个复选框。选中列表项旁边的复选框,使其成为默认选项 - 关闭下拉列表时可见的选项。(如果未选择默认值,则列表中的第一项将是默认值。)如果您希望默认情况下删除列表显示为空白,请添加仅包含单个空格字符的第一个列表项。
无线电按钮
典型HTML表单中单选按钮控件的定义特征是一次只能选择一个按钮中的一个按钮,并且选择任何一个按钮将取消选择其他按钮。您可以使用所谓的“无线电组”来为RP中的一组单选按钮实现此行为。在画布上选择一个或多个单选按钮后,从“检查器”的“属性”选项卡中指定一个单选按钮组。
导航表格
当您的观众遇到您的交互式表单时,他们将从之前的经验中学习,他们可以使用[TAB]键在表单元素之间移动,并且他们可以在完成表单时按[ENTER]键提交表单它。通过管理窗口小部件的图层顺序和分别指定提交按钮,可以在Axure RP中使用这些行为。Tab键顺序由小部件层顺序决定:[TAB]键在最后面的小部件到最前面的小部件之间移动。窗口小部件的图层顺序反映在“轮廓”窗格(界面的右下角)中。要确保在输出中使用Tab键时焦点直接从一个表单元素转到下一个表单元素,请确保表单小部件在“大纲”中彼此相邻。大纲可以从前到后(默认)或从前到后排序。从大纲列表顶部的小部件出现在图表中其他小部件的前面,前后排序是直观的。但是当使用表单的Tab键顺序时,前后排序是违反直觉的。处理Tab键顺序时,请考虑切换到“Back to Front”排序选项。从“大纲”窗格的本地工具栏中的“排序和过滤”按钮执行此操作。为了使其按下[ENTER]键提交表单,您可以将您设计的“提交”按钮与一个或多个表单小部件相关联。在检查器的“属性”选项卡中或在画布上选择一个或多个窗体小部件后从上下文菜单执行此操作。设置完成后,只要按下[ENTER]键,同时其中一个关联的表单小部件在浏览器中具有焦点,就会执行“提交”按钮的OnClick交互。
相互作用的风格
交互样式可以增加原型的保真度。这些可以在“属性”选项卡底部的“交互”部分下方找到。上面,介绍了MouseOver交互方式。交互样式是基于浏览器中的交互动态应用的窗口小部件样式。可用的交互样式包括MouseOver,MouseDown,Selected和Disabled。只要窗口小部件处于某种状态(鼠标悬停,选定等),交互样式就会将窗口小部件的样式从其基本样式更改为备用样式。当鼠标光标进入窗口小部件区域(对于MouseOver)或单击窗口小部件(MouseDown)时,将自动应用MouseOver和MouseDown交互样式。当触发事件针对这两种交互样式停止时,窗口小部件将恢复为其先前的样式。要将“选定”或“已禁用”样式应用于窗口小部件,请使用操作(请参见下文)。除其他外,名为“Set Selected”的操作将应用Selected交互式样式。“已禁用”交互样式与“启用/禁用”操作类似关联。请注意,禁用的窗口小部件不仅风格不同 - 也无法单击。要再次启用窗口小部件,请使用“启用”操作。
相互作用
交互确定小部件或页面的动态行为。您可以在检查器的“属性”选项卡顶部的小组件或页面上查看设置的交互。当您使用本文顶部的“创建链接”从一个页面链接到另一个页面时,会创建一个OnClick交互。
活动
Axure RP中的“事件”是一个触发器。事件以一个或多个案件及其组成行为的形式启动准备好的答复。例如,OnClick事件在单击窗口小部件时触发; 当鼠标光标穿过窗口小部件区域时,将触发OnMouseEnter事件; 当窗口小部件被页面上的另一个操作移动时,将触发OnMove事件; 等等。某些事件(如OnClick和OnMouseEnter)可用于每种类型的窗口小部件。其他事件对于某些小部件类型是唯一的。每种类型的窗口小部件最常用的事件始终显示在“检查器”窗格的“属性”选项卡中。
案例
“案例编辑器”对话框是Axure RP的交互命令中心。在这里你可以构建任何比页面之间的链接更复杂的案例。案例是分配给特定小部件或页面的特定事件的一个或多个结果的有序集合。要向事件添加案例,请双击事件名称。您也可以单击以选择事件名称,然后单击“交互”部分顶部的“添加案例”选项。这两种方法都可以让您进入案例编辑器。事件可以包含一个或多个案例。如果存在多种情况,可以选择使用称为“条件逻辑”的Axure RP功能来确定应触发哪种情况。如果未使用条件逻辑,则在发生触发事件时,浏览器中将显示所有案例的选择菜单。
行动
案例编辑器包含可用操作的完整列表。操作是事件触发时可能发生的结果。一个或多个动作可以作为总交互的一部分发生。操作包括以下结果:打开指向新页面的链接,更改窗口小部件上的文本以及显示或隐藏窗口小部件。当许多动作出现在同一个案例中时,它们通常会按顺序触发。此规则的例外是移动,旋转,隐藏和调整大小等动画操作,这些操作同时发生,以便允许复杂的动画(例如,同时移动调整大小)。
建立互动
从左到右配置案例编辑器中的操作。首先,从左侧列中选择一个操作。在标有“组织操作”的中间列中,可以单击所选操作以选择或拖动以重新排序。使用[DEL]键从列表中删除所选操作。标有“配置操作”的右侧列是完成或调整每个操作的位置。一些示例:对于“Open Link”操作,您可以在此列中指定将打开哪个页面以及它是在同一浏览器选项卡中打开还是在新选项中打开。更改窗口小部件上的文本时,此列是您输入新文本的位置。在显示或隐藏窗口小部件时,您可以在此处设置关联的动画(如淡入淡出)。某些操作仅适用于某些类型的小部件。如果操作要求您选择目标窗口小部件,则“配置操作”部分中将仅显示符合条件的窗口小部件。单击“确定”关闭“案例编辑器”并返回主界面。您将看到您的新案例,默认情况下称为“案例1”,列在其父事件下。您可以双击任何案例以在案例编辑器中重新打开它。“案例编辑器”窗口顶部有一个“案例名称”字段,您可以在其中重命名案例或添加其功能的简短说明。
常见的相互作用
我们已经讨论了链接,这是最常见的交互类型。下面解释了一些其他常用的动作。
显示和隐藏
使用“显示”和“隐藏”操作显示和隐藏小部件。默认情况下,这些操作是默认的,但可以在指定的持续时间内淡出。“显示”操作在“更多选项”下拉列表中还有一些其他特殊行为:对象窗口小部件可以放在前面,它可以充当弹出窗口,可以充当灯箱,也可以推开其他窗口小部件在页面上为它自己腾出空间。“隐藏”动画具有相应的“拉动窗口小部件”选项,以在窗口小部件消失后反转效果。
滚动到WIDGET
使用“滚动到小组件”操作创建“锚链接”效果 - 单击按钮可以滚动到长页面的特定部分。如果您还没有想要滚动到的确切位置的小部件,请在构建“滚动到小部件”操作之前将热点小部件添加到该位置的图表中。(在浏览器中查看输出时,热点窗口小部件不可见。)
组
窗口小部件可以分组。组具有与单个窗口小部件一样的事件,并且可以分配将影响整个组的案例和操作。假设你想要一个带有图标图像的按钮。您可以使用两个小部件创建此结构,一个用于按钮形状,另一个用于图像。然后,您可以对这些窗口小部件进行分组,并为整个组添加OnClick行为,从而省去了在两个组件窗口小部件上维护案例或在顶部添加热点以便有效捕获按钮单击的麻烦。在显示或隐藏一组相关小部件时,您可以采用类似于组的方法。要创建组,请选择组件小部件并使用快捷键[CTRL] / [CMD] + [G]。要选择属于组的窗口小部件,请单击父组中的任意位置以选择它,然后单击所需的窗口小部件。在画布上选择分组窗口小部件时,该组外部的画布将显示为灰色阴影,这表示此时不在该组中的窗口小部件不可编辑。选择组时添加到图表中的任何新窗口小部件都将添加到该组中。
组在“大纲”窗格中显示,其工作方式与“页面”窗格中文件夹的工作方式类似,因为它们可以命名,折叠或展开,并且可以拖入或拖出项目。通过单击组名旁边的蓝色方块,也可以在画布上隐藏组。(请注意,以这种方式隐藏组会将其隐藏在画布上但不会隐藏在输出中。)
动态面板
动态面板是特殊的容器类小部件。它们的主要功能是包含设计的多个替代版本 - 称为“面板状态” - 可以使用“设置面板状态”操作之间切换。一次只能看到一个面板状态。你可以想象一个动态的面板就像一副牌,只有顶牌显示。动态面板适用于某些特定的事物。例如,它们可用于制作幻灯片(也就是旋转木马)。如果您的设计需要多层组件,请将该组件创建为多状态动态面板,而不是多个单独的小部件或小组组。动态面板也是唯一具有拖动和滑动事件功能的小部件,因此在这些场景中也可以使用。但是,如果您只想分组小部件并且不需要动态面板提供的特定功能,那么最好使用组。
动态面板具有事件,就像组和单个小部件一样。在动态面板上设置案例时(例如,在其OnMouseEnter事件上),动态面板的任何部分都可以触发事件并触发案例。要向图表添加动态面板,可以从“默认”窗口小部件库中拖入一个空面板。或者,您可以选择画布上已有的一个或多个窗口小部件,并通过右键单击并使用“转换为动态面板”上下文菜单命令将它们转换为动态面板。此命令将创建一个单状态动态面板,其中已选中的小部件已加载到其中。双击动态面板以进入动态面板状态管理器,该对话框可以从中添加,复制,删除或重命名面板状态,或在画布上打开它们以进行编辑。您还可以从“大纲”窗格中获取这些功能。
MASTERS
在上一篇文章中,您被介绍给了大师。现在您正在处理交互,再看一下主人 - 以及他们的伴侣功能,“提升事件”。引发事件提供了一种方法,使主人的不同实例响应同一事件做不同的事情。例如:您可以将相同“下一步”按钮的实例链接到不同的“下一页”。
要添加链接,请先在画布上选择要进行交互的小部件。然后,在检查器的“属性”选项卡中,单击“创建链接”的蓝色文本,然后从结果列表中选择目标页面要测试您的链接,请单击主工具栏中的“预览”按钮(看起来像“播放”图标),以在浏览器中打开您的页面。查找并单击您的交互式窗口小部件以转到目标页面。