【Axure笔记】8.如何使用url及变量链接页面并实现跳转

        我们通过对一个按钮添加交互：点击时——打开链接——连接到——选择对应的页面，就可以很简单的实现跳页功能，这也是Axure里面用的最多的功能之一。

        而细心的朋友可能发现在连接到中有一个连接到URL或文件路径的选项，我们点击后出现一个需要我们填值的空，如何通过填写这个值来实现跳页呢？

        

        其实做法很简单，如上图只需要在链接到下面填写对应页面的名字并在后面加上.html就可以了，我们用Axure自带的示例进行演示，文件中有“Tour”和“Mobile”两个页面，当我们点击Tour页面中“GO TO MOBILE PAGE”按钮时跳转到Mobile页面，我们当然可以用最简单的方法直接选择连接到Mobile页面，我们也可以选择连接到URL或文件路径，并在值中填写“Mobile.html”,这样的效果也是一样的。

      【注意】使用URL跳页后所有的全局变量将会清空，因为系统认为当你使用URL打开页面时是新建的页面，将不会在这个“新页面”中保留原来的全局变量。

        有些人可能会有疑问，为什么明明可以直接连接到页面，却要使用Url来进行连接呢？因为使用变量进行跳转的场景则更为丰富，例如我们有三个页面“Tour”“Mobile”“Share”，前两个页面之间都有通往Share的按钮，而Share页面作为一个全局页面只有一个返回按钮，如何让用户点击返回按钮时返回之前的页面呢？这就需要在返回按钮中使用变量URL了。

具体做法如下：

1. 首先点击屏幕上方Axure菜单栏中“项目”——“全局变量”，新建一个名为“WhoCalledShare”（变量名可自定义，只要是英文都可以）。

2. 回到Tour页面，在Share图标上面加热区（ 为什么使用热区而不直接在图标上编写逻辑？ ），并在热区中编写交互“点击时”——“设置变量值”——目标“WhoCalledShare”——设置为“值”——值点击fx——“插入变量和函数”——选择页面函数类中的“PageName”——确定完成；

再添加“点击时”——打开链接——链接到“Share”，到这里我们实现了Tour页面在点击Share按钮时的变量赋值和跳页逻辑。

3. 打开Mobile页面，重复在Tour页面中的 *** 作，实现Mobile页面在点击Share按钮时的变量赋值和跳页逻辑。

4. 打开Share页面，在BACK按钮上编写交互“点击时”——“打开链接”——链接到——链接到URL或文件路径——点击fx-插入变量和函数-选择“WhoCalledShare”——之后在后面加上.html——确认完成即可。

这样我们就实现了之前GIF图中通过变量和URL链接实现复杂的页面跳转的效果。

思考：通过URL跳转页面的方式虽然方便，但是会丢失全局变量，那么如何在保证不丢失全局变量的情况下也实现根据变量来跳转页面呢？其实也不难，设置返回按钮点击时命令的启用情形就好了，分别设置if WhoCalledShare == "Tour"时，链接到Tour页面和if WhoCalledShare == "Mobile"时链接到Mobile页面就好啦。

——————————————————文章目录——————————————————

Chapter 1

开始前的准备

1. 写在前面，我为什么要开Axure这个坑？

2. 没有完整构想的产品上来直接开画就是耍流氓。

3. 做之前先想好：高保真还是低保真？

4. 移动端的相关规范，多多少少还是要知道一点点的。

Chapter 2

开始做吧,初学时懵逼的问题：

5. 站在巨人的肩膀上：先装个元件库吧

6. 技多不压身，元件多了真的压

7. 文本框、文本域：如何获取输入的文字？

8. 如何使用url及变量链接页面并实现跳转

9. 关于命名规范：页面、元件、组。

10. 什么时候该使用动态面板？

11. 什么时候应该使用中继器？

12. 交互、变量、函数我该怎么着手学习？

13. 关于交互的最后防线——启用情形

Chapter3

实战教程，未完待续...

早上同事突然问到这个问题，就来简单写下这个。

思路一：运用axure原下拉控件，尝试后发现只能实现动态选项切换，不能实现页面跳转，因此弃用原控件。

思路二：自己制作下拉框，下拉选项设置为动态面板，以点击显示和隐藏动态面板来实现下拉框效果；然后对单独的下拉选项添加点击跳转页面动态效果。

1.制作下拉输入框——用形状工具制作

2.制作下拉选项——用形状工具制作

3.将下拉选项转换为动态面板

4.添加显示隐藏下拉选项动态 *** 作

5.将下拉选项动态面板设置为隐藏状态

这里可能有些人会问，为什么要设置为隐藏状态？那是因为我们在实际应用中，下拉选项是看不到的，只有点击输入框才会出现的。

勾选隐藏选项后，隐藏后就变成了下面这个样子。

6.给下拉选项添加页面跳转

就此搞定

附上GIF动态图

PS：Axure文件动态效果是挺强大的，但是对于低保真原型图，忌讳过于严密复杂的动态效果，防止在需求变更时，带来大量的工作量，导致整个团队合作不够高效。

如更多的是做移动端的原型，现在有大批量的软件出现，可以尝试，例如墨刀、pop、mockplus等

海外MBA在读学生一枚，由于最近观察本地市场规律，决定尝试研发一款集中本地吃喝住行的APP。

实现页面跳转和实现页面切换显示是不同的，本文介绍如何实现页面跳转

工具Axure Rp9，MAC版本

主页如下

以食物的下拉选择为例

可选食物为：Chinese Food、Indonesian Food、Malaysian Food、Philippine Food、Singapore Food、Thai Food、 All Food

步骤如下：

1，元件里选择--下拉列表

双击进入编辑，编辑多项，效果如下

2，给此下拉列表命名为：Food select

期望结果，当我选择Chinese时，页面跳转到Chinese food页面

    2-1，新建交互--选项改变时--添加情景

    2-2，设置情景参数

2-3，打开链接--Chinese food page    （已经设计好的）--确认

2-4，预览下，ok

欢迎大家共同探讨学习

---