交互式原型 | Interactive Prototyping

Axure RP交互式原型

当静态线框图、原型、流程图不能满足你的复杂创意时,就需要使你的设计具备交互性了,Axure RP支持丰富的交互式原型,包括动态样式、动画、交互式表单和数据可视化(当然还有标准的超链接)。这些效果是对各种交互事件的相应:页面加载、按下按钮或按键、滑动、或其他任何可以通过用户界面执行的操作。

原型上的点击事件

Axure RP的交互性很少用于复杂的交互效果,你并不需要总是使用高度复杂的交互让别人理解你的观点。考虑一下原型上的点击事件:一系列的静态页面,每个页面都可以通过点击是浏览者看到下一页。你可以使页面上的所有内容都能点击,或者也可以选择一个区域或元素(如按钮)进行操作,例如你可以把注册页面上的“提交”按钮,链接到确认页面。

要添加超链接,首先在画布上选中需要交互的元件,然后在检视窗格中的属性页签下,点击蓝色字体的“创建链接”,然后在列表中选择链接的目标页面。

在检视窗格属性页签中的交互标题下,你可以看到一个新的用例被添加到了鼠标点击时事件下。在下面的章节中,你可以了解到更多关于事件和用例的内容。

如果要测试刚刚添加的链接,点击主工具栏中的“预览”按钮(看起来“播放”图标),之后会在浏览器中打开页面,找到你添加了交互事件的元件,点击之后跳转到目标页面。

在原型中高亮显示可交互的元素

在浏览器中预览原型时,点击原型左边栏“PAGE”窗格内顶部的“Highlight interactive elements”图标,可以在原型图中高亮显示可交互的元素。打开高亮显示功能后,会在包含交互事件的元件上显示彩色轮廓。

打开高亮显示功能会改变页面的URL地址,如果你直接把这个链接发给其他人,那么其他人打开链接查看原型时,高亮显示功能也会默认打开。

另外一种高亮显示元件的方法是给它添加鼠标悬停的交互样式,当预览者把鼠标光标移动到元件上,元件就会显示鼠标悬停的交互样式(在光标离开元件前,样式会一直显示),添加鼠标悬停的交互样式是在“检视”窗口中的“属性”页签下(交互样式设置)。

交互属性

不同类型的元件有不同的交互属性,下面将介绍各种类型的元件及其特殊的交互属性。

交互式表单元件

交互式的表单是Axure RP项目中常见的组建,RP中包含了几种专门用于创建表单的元件,你可以在默认元件库的表单元件中找到它们。

RP中的表单元素是实用性的,它们在生成的HTML中变成真实的可用的表单元素。文本框可以输入文本,下拉列表可以在点击时显示下拉选项,复选框可以进行勾选和取消勾选,等等。HTML表单元素的一个共同点是它们的样式通常是在浏览器中设置的,所以和普通的形状元件相比,RP中的表单元件样式选项非常少。

文本框

文本框有一个“输入类型”的属性,不同的输入类型在浏览器中的行为表现不同,例如“密码”型的文本框输入文本时会用黑点遮盖输入的内容。在“检视”窗口中的“属性”页签下可以设置文本框的输入类型。有关每种输入类型的简介,请浏览“文本框”文章。

下拉列表框

在画布中双击下拉列表框,可以添加下拉选项。点击绿色的“加号”图标,每次可以添加一个选项,如果需要一次性添加多个选项,可以点击“Add Many”按钮(译者补充:Axure RP 7中是“Add Many”按钮,Axure RP 8中则是“Edit Many”按钮)。(当添加了多个选项后)在“编辑列表选项”窗口中,你会发现了列表中每个选项前面都有一个复选框,勾选其中一个选项的的复选框可以使该选项成为下拉列表的默认选项(在下拉列表的关闭状态下显示),如果不勾选的话,列表中的第一个选项会成为默认选项。如果你想让下拉列表默认显示为空白,可以在选项列表中的第一个选项中只输入一个空格。

单选按钮

在典型的HTML表单中,单选按钮的特点就是一次只能选中一个按钮,选中任何一个都会使其他按钮取消选择。你可以使用所谓的“单选按钮组”来实现这种效果,在画布上选择一个或者多个单选按钮后,在检视窗格中的属性页签下设置单选按钮组名称。

引导表单

当你的观众遇到你的交互式表单时,他们会根据以往的经验,使用[TAB]键在表单中的元素之间切换,并且在填写完表单时按下[ENTER]键提交表单,这些行为在Axure RP中,可以通过调整元件的图层,以及指定一个提交按钮来实现。

元件的图层顺序决定了它们切换的顺序,[TAB]键的切换顺序是从最底层的元件到最顶层的元件,元件的图层顺序反映在概要窗格(用户界面的右下角)中。为了保证在导出文件中切换时,焦点可以直接从一个元件跳到另一个,你要确保这些元件在概要窗格中是相邻排列的。

页面概要可以按照从顶层到底层(默认)或底层到顶层的顺序排列(译者补充:页面概要指的是Axure RP界面右下角概要窗格中的内容),从顶层到底层的排列比较直观,概要列表中顶部的元件是在图稿中其他元件的上面。但是当使用TAB键来切换表单中的元素顺序时,顶层和底层的切换顺序是由下往上的,所以如果要用TAB键来工作,那么最好是把概要的排序规则设置为“从底层到顶层排序”,点击概要窗格中的“排序和筛选”图标即可进行设置。

要实现按下[ENTER]键就可以提交表单,你可以将你设计的任何“提交”按钮与一个或多个表单元件相关联,具体的操作是首先在画布上选择一个或多个表单元件,然后在检视窗格中的属性页签下可以看到提交按钮的选项,选择一个按钮即可。设置完成后,当你按下[ENTER]键,并且任何一个与提交按钮关联的表单元件在浏览器中获得交单,就会执行“提交”按钮上的鼠标单击时交互事件。

交互样式

交互样式可以增加你原型的保真度,你可以在靠近属性页签底部,在交互部分的下面找到它们。上面我们已经介绍过了鼠标悬停的交互样式。

交互样式就是基于浏览器的交互行为动态应用的元件样式,可用的交互样式有鼠标悬停、鼠标按下、选中和禁用,交互样式可以在特定的情况下(鼠标悬停、选中等等)将元件的基础样式改变为特定样式。

当鼠标的光标进入到元件区域(鼠标悬停)或者在元件上进行点击(鼠标按下),就会激活鼠标悬停样式或鼠标按下样式。当这两种交互样式的触发事件停止时,元件将恢复到之前的样式。

要将选中和禁用样式应用于元件,需要用到一个动作(请继续看),这个动作叫做“设置选中”,将用于实现选中的交互样式。类似的,禁用的交互样式是由“启用/禁用”动作来应用。需要注意的是,一个被禁用的元件,不仅样式不同,而且也无法点击,如果要启用元件,需要执行启用操作。

交互

交互决定了元件或页面的动态行为,你可以在检视窗格中的属性页签下查看设置在元件或页面上的交互。当你在本文最开始的时候使用“创建链接”把一个页面链接到另一个页面时,就自动创建了一个鼠标单击时的交互。

正如基础知识中提到的,交互包含三个部分:事件、用例和动作。

事件

在Axure RP中,一个事件就是一个触发器,一个事件会触发一系列的预设响应,它们是由一个或多个包含了各种动作的用例组成。例如,一个“鼠标单击时”事件会在元件被点击的时候触发,一个“鼠标移入时”事件会在鼠标光标进入元件区域时触发,一个“移动时”事件会在元件被其他操作移动时触发,等等。

一些时间,比如“鼠标单击时”和“鼠标移入时”,可以用于任何类型的元件,其他一些事件是专属于某些特定的元件类型的。每种类型的元件最常用的事件,会始终在检视窗格中的属性下显示着。如果要看一个元件所有可用的事件,请点击“更多事件”选项。

用例

“用例编辑”对话框是Axure RP的交互命令中心,在这里,你可以构建任何比页面链接更加复杂的用例,一个用例就是分配给一个特定的元件或页面的一个或多个结果的集合。

双击事件名称可以给事件添加用例,你也可以单击选中一个事件后,点击交互顶部的“添加用例”选项,这两种方法都可以打开用例编辑器。

一个事件可以包含一个或多个用例,当有多个用例时,就会用到Axure RP中所谓的“条件逻辑”功能来决定应该触发哪个用例。如果没有使用条件逻辑,那么当发生触发用例的事件时,会在浏览器中出现一个包含所有用例的选项菜单。想要了解更多条件逻辑相关的内容,可以阅读条件逻辑章节。

动作

用例编辑器中包含了所有可用的动作,动作就是当事件发生时可能引发的结果。一个完整交互的一部机会有一个或多个动作发生。包含结果的动作像:在新窗口中打开链接,改变元件上的文本,以及显示或隐藏元件。

当同一个用例中出现多个动作时,它们通常会依次触发,但是也会有例外,像移动、旋转、隐藏和调整大小这样的动画动作就不符合这一规则,这些动作会同时发生以便可以实现复杂的动画(例如同时移动并调整大小)。

建立交互

在用例编辑器中从左到右配置你的动作,首先从左边的栏中选择动作,在中间标有“组织动作”的栏中,你可以通过单击选中动作或通过拖动来重新排序动作,使用[DEL]键可以在列表中删除选中的动作。

右边标着“配置动作”的栏,是完成或调整动作的地方。举几个例子,对于一个“打开链接”的动作,你可以在此栏设置打开哪个页面,以及是在当前浏览器窗口打开还是在新的窗口中打开;当要改变元件上的文本时,此栏使你输入新文本的地方;当要显示或隐藏一个元件,此栏是你设置关联动画(比如“逐渐”)的动地方。

某些动作只适用于特定类型的元件,如果某个动作需要你选择目标元件,那么在“配置动作”的栏中,你只能看到符合条件的元件。

点击“确定”按钮关闭用例编辑器并回到主界面,在事件下,你会看到一个默认名称为“Case 1”的新用例。你可以双击任意一个用例在用例编辑器中重新打开它,用例编辑器窗口顶部有一个“用例名称”字段,你可以在这里对用例重新命名或为其添加剪短的功能描述。

常用的交互

我们已经讨论过超链接这种最常用的交互类型,下面将讲解一些其他常用的动作。

显示和隐藏

使用“显示”和“隐藏”动作来显示和隐藏元件,这些动作默认是瞬间完成的,但是可以设置为在指定的时间内淡出,“显示”动作在“更多选项”下还有一些其他特殊的交互行为:移到顶层、弹出效果、灯箱效果、推动元件(把其他元件推开以给自身腾出显示空间),“隐藏”动作对应的有一个“拉动元件”的选项,可以使元件消失时产生相反的效果。

滚动到元件

使用“滚动到元件”动作可以创建“锚链接”效果——点击一个按钮可以滚动到长页面的特定位置。如果你想要滚动到的位置没有元件,在构建“滚动到元件”动作之前,在该位置添加一个热点元件(热点元件在浏览器中是不可见的)。

元件可以编组,组有像单个元件一样的事件,事件下的用例和动作会作用到整个组。

假设你要做一个带有图标图片的按钮,你可能会使用两个元件来制作,一个用于按钮形状,另一个用于图片。你可以把这些元件编组,然后在整个组上添加“鼠标单击时”事件,这样就解决了你在每个元件上都添加一个用例或者在它们上面添加一个热点元件来捕捉按钮点击事件的麻烦。当你需要显示或隐藏一组相关元件时,也可以采用类似的编组方法。

要创建一个组,首先选中你要编组的元件,然后使用快捷键[CTRL]/[CMD]+[G]。要选中组中的元件,首先在组的任意位置单击选择组,然后再单击你要选的元件即可选中它。当你选中一个组中的元件时,组外的画布区域就会变成灰色,这就表明不在组中的元件此时是不可编辑的,在这种模式下新添加的任何元件都会自动添加到组中。

组显示在“概要”窗格中,其功能就和“页面”窗格中的文件夹类似,可以对它命名、折叠或展开,并且可以将项目拖入或拖出。通过点击组名旁边的蓝色方块,可以在画布中将组隐藏(需要注意的是,这种方式只能将组在画布中隐藏,而在浏览器中依然能够看到)。

动态面板

动态面板是一个特殊的容器类型的元件,它的主要功能是包含设计的多个可选版本(称为“面板状态”),可以通过“切换面板状态”动作进行切换。一次只能看到一个面板状态,你可以想象动态面板就是一副扑克牌,只能看到最上面的一张牌。

动态面板适用于某些特定的场景,比如制作幻灯片(又名轮播)。如果你的设计需要一个多层的组件,那么使用一个包含多个状态的动态面板要比多个单独元件或元件组好的多。动态面板也是唯一具有拖动和滑动时间的元件,因此也可以在这些场景中使用。但是如果你只是需要给元件编组,并且不需要动态面板提供的特定功能,那么最好还是使用组。

就像组合单个元件一样,动态面板也有事件,在动态面板上设置用例后(例如,在“鼠标移入时”事件下),动态面板的任何部分都可以相应这个事件并触发用例。

要为图稿添加动态面板,你可以从默认元件库中拖入一个空的面板,或者,你也可以选择画布中的一个或多个元件,然后通过右键菜单中的“转换为动态面板”功能将它们转换为动态面板。这个功能可以创建一个单一状态的动态面板,并且在其中已经包含了你之前所选的所有元件。

双击动态面板可以打开面板状态管理器,你可以通过它添加、复制、删除和重命名面板状态,或者在画布中进行编辑。当然你也可以在“概要”窗格中进行这些操作。

重要提示:与元件组类似,动态面板的空白区域是透明的,但是与元件组不同的是,动态面板的空白区域不可穿透点击,除非动态面板被移动或者隐藏,否则动态面板下面的元件不能相应鼠标的操作。

母版

在之前的文章中已经介绍过了母版,而现在你正在学习交互,不过我们再来看一下母版,以及他们附带的功能——“引发的事件”。引发的时间提供了一种方法,可以使母版在不同的场景下,对相同的事件做出不同的响应。举个例子,你可以使同一个“下一页”按钮母版,链接到不同的“下一个”页面。

如果你现在就想探究这些东西,可以参与本教程的“引发的事件”部分,如果你现在不需要这个功能,那么你只需要记住,以后任何需要的时候都可以使用它。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。