上下文链接：交互设计文档-1：经验和设计工具、交互设计文档-2：设✱计工具的选择 、交互设计文档-3：Axure线框图实例

上篇用SNS未登录加拿大预测网-在线预测的实例介绍了Axure RP Pro制作线框图(Wirefra🎀me)的基本操作🍰方法，嗯，那只是个入门。这个工具更多的“好东西”在这篇，以及在大家自己的研究之中。下面，我就把我所用到过的“好东西”先来分享分享，嘿嘿！

1、Masters（通用模块）
上篇的未登录加拿大预测网-在线预测中的底部，在网站中是通用的内容，因此我们可以利用到Masters（通用模块）。在通🌞用模块中新增一个取名为“footer”的Master🦩s。

双ꩵ击“footer”模块名进行编辑，将Home页中footer的内容剪贴到模块中。为了在页面中的准确定位，我给fooౠter也加了一个底色框。

然后别忘了把“footer”拖到Home页中相应的位置哦。

一个Menu(Vertical)：垂直菜单，一个Menu(Horizontal)：水平菜单。
菜单默认的一级Menu Item（菜单选项）有3个，我们可以🍷通过右击某个选项来插♔入同级菜单(Menu Item)和增减下一级菜单(Submenu)。还可以编辑菜单

Tips：按键盘Tab键只会让当前聚焦点在菜单选项间浮动，不能增加新菜单选项。
新增加的菜单选项的宽度会跟之前被操作的菜单的宽度相同；
另外，在菜单中修改任一菜单选项的宽度，整个菜单的宽度都会被修改。也就是说，菜单🃏宽度值是各个一级菜单选项的和，而不是自己事先定好的宽度。

拉长或缩短整个菜单的宽度时，只有最后的一级菜单选ꦛ项的宽度被改变。可以通过拖动来选择多个菜单选项，在公共栏中𒅌对内容显示进行相关操作。

Tips：要先选中上级菜单选项，下级菜单才会显示出来；
下级菜单♔显示的起始位置是上级菜单的左边线，并且无法超过左边线。通过右击菜单中的“Edit Rollover Style（编辑翻转样式）”🔥项，可以制定鼠标移动到菜单上时的菜单样式变化。

Apply to：
This menu item only ：只应用到对当前菜单选项；
This menu only：只应用到同级菜单；
This menu and all submenus：应用到所有同级菜单和下级菜单；Tips：为菜单添加了Rollover Style之后，菜单选项的左上角会出现一个黑白小框，鼠标移动到小框上，就可以看到ওRollover Style的预览效果。

为菜单加上链接，我们选择菜单选项“🐻加拿大预测网-在线预测”，再选择Interactions（交互）事件中的“Quick Link”

在Link  Properties（链接属性）中选择🀅网站页面地图中的“Home”页。一个链接就添加好了。

 
当然，也可以添加外部链接（Link to an external url or file）、重新加载当前页（Reload current page）、返回前一页（Back to previous page）。
 

我们简单模拟这个效果，寻找好友中姓“李”的朋友和叫“李查……”的朋友。实际上这个功能肯定不能像我们这样一个字一个字地匹配的啦=。=
点这里先看看我做好的效果，下面的图片效果：

过程讲解：
用Text Panel、Text Field和Butto꧙n 先做好搜🍌索内容。然后拖出一个Dynamic Panel（动态面板）：

在Text Field下面拉伸出一个“查询建议”的区域来：

在𓂃Label标签栏分别为工作区中的Text Field和Dynamic Panel命名为“keyword”和“matching”双击“matching”，为它加上3个Stat꧅e(状态)：

第一个状态设为空内容，双击第二个状态(matching1)进行编辑，用List Box(选择框)：

在List Box中添加多个姓“李”的好友名字选项。

注意：Allow multiple（允许多选）不要勾选。回到工作区，选择“matching” 动态面板，双击第三个状态(matching2)，继续制作“查询建议”菜单，这次都叫“李查……”。
以下是“matching1”和“matching2”状态的菜单内容。我们分别为两个选择框命名为“matchingList1”和“matchingList2”。
和
Tips：可以看到两个状态的边缘都有一条蓝色虚线，这就是我们在调用动态面板的时候为它预设的区域大小。超过蓝色虚线的部分将在页面𝓀中无法被显示出来。

下面开始添加Interactions🐲(交互事件)。为表单添加交互事件的方法，先选中工作区中的表单组件，然后在Interactio🎃ns面板选择“Add case..”添加事件。

或是用一些预设的交互行为作为条件，为组件添加事件。
OnClick：点击
OnKeyUp：键入
OnFocus：聚焦
OnLostFocus：失去聚焦

为“keyword” 文本输入框OnKeyUp（键入行为）添加事件。键入“李”时，显示“matching” 动态꧟面板中的“ma🦩tching1” 状态。

勾选Select Actions（选择动作）中的“Set Panel state(s) to State(s)（改变动态面板的状态）”，在“Step 3: Edit the Actions description🐠（第三步：编辑动作描述）”中选中蓝色的Set Panel链接，将动态面板“matching”的默认状态“non🍒e”改为“matching1”，即前面设好的姓“李”的“查询建议”状态。

点击右上角的“Edit Condition（编辑条件）”，为Case设键入时的keyword值。
可通过下ꦜ拉菜单和输入框设置条件：“text on widget（文本组件）”，找到“keyword”文本输入框，equals value “李”（变量值等于“李”）。

以下还需要添加几个Case，这里不详说，大家试着自己做一下：
OnKeyUp行为下：
Case 2：当键入“李查”时，“matching”动态面板状态变为“matching2”
Case 3：当键入值不等于“李”时，“matching”的状态变回为“none”
OnFocus行为下：
Case 1：keyword的值是“李”，“matching”动态面板状态变为“matching1”
Case 2：如果keyword的值是“李查”，则“matching”动态面板状态变为“matching2”
OnLostFocus行为下：
Case 1：“matching”动态面板的状态为“none”
 
为“matching”动态面板内的两个状态添加交互事件，效果是“当某个查询建议被选中时，keyword文本输入框的文本值变为选中的内容”。
“matchin1”状态里的♛“matchingList1”选择框，OnChange行为的Case 1：

这样的Case我们需要做5个，因为我们有5个姓李的好友。我们可以通过Copy Case和♔Paste Case，来复制和粘贴。

但我们需要把equals的值“李安”分别改成其他的名字……

再选择OnChange，复制所有的Case：

到“matchin2”状态里的“matchingList2”选择框

将多余名字（不叫“李查”）的Case删除“Delete Case”

别忘记需要将选择框的名称修改为“matchingList2”

总算好了，发布看看吧（捏汗ing~~）~~点这里看效果；and 点这里下载.rp源文件，源文件包括了前篇中制作的SNS加拿大预测网-在线预测和今天讲解的所有内容。
  

4、RP Pro5.5多动作-倒计时跳转页面实例
RP 5.5版本之后，支持多个Action（动作）同步，这样我们可以制作出更多的交互效果来了。比如说：倒计时跳转页面。
新建一个页面，添加一个Text Panel加上内容“将在🌸ဣ　　秒后跳到加拿大预测网-在线预测！”。在文本空格处加上一个Dynamic Panel(动态面板)，在Label中为它取名为“stopwatch”。

再为它加上“s5”到“s1” 5个状态，分别编辑5个状态，在里面加上内容“5、4、3、2、1”5个倒计时秒数。
Tips：建议文本中输入空格时用全角输入，否则它将跟Dreamweaver一样在HTML不能显示全部的空格，这样会产生与设计时的错位。利用工作区下面的Page Interactions（页面交🉐互栏）为页面添加事件。

双击“OnPageLoad”，这时我们༺✤看到5.5版本中有一个选项“Advanced Editor(高级编辑器)”

利用这个高级编辑器我们可以为页面同时添加多个动作。选择🌳“Add Action”增加动꧂作，可以不断为页面添加动作。

Wait Time(ms)（等待时间）是我们等下要作为倒计时用的动作，单位是毫秒(ms)，1秒=1000毫秒。我们按步骤为页面事件添加动作🉐：

“stopwatch”秒表跳在“s5”第5秒；
等待1秒；
“stopwatch”跳到s4；
等待1秒；
“stopwatch”跳到s3；
等待1秒；
“stopwatch”跳到s2；
等待1秒；
“stopwatch”跳到s1；
等待1秒；
跳到加拿大预测网-在线预测。“Step 2: Select Actions”区域中的动作可以通过右上角的三个小按钮进行“上移、下移、删除”操作。另外，跟前面讲的表单交互一样，“Step 3”动作描述中的参数可以通过蓝色文字链接进行修改。
完成添加事件，多个动作一次完成。点这里看效果吧！
据称Axure是目前Windows系统最好的原型设计工具了，它的强大就在于这些交互事件，远不止我说的这些。欢迎大家继续研究、发现和探讨。
如果你说这些交互操作太复杂了？！嗯，是的，如果你不需要用到交互效果，可以选择其他更轻巧工具（如Mockups 或 Pancil）。但既要做原型又要达到交互效果，又加上你是Win操作系统的话，Axure无疑是当前最好的选择了。而且，Axure也是有汉化包的，大家可以去google之哦~~偶已经习惯于用“有道桌面词典”+ 英文版软件了=。=（这是无奈的习惯~~）
祝你“用餐”愉快~~

 终于收尾了，撒花~~~~

原文：//p.pnq.cc/ue/?p=185