Axure添加交互过程中最核心的两点是什么？

在Axure添加交互过程中，最核心的两点是：

事件：事件是指在Axure中通过用户 *** 作触发的动作，如点击按钮、鼠标移动等。

动作：动作是指在事件发生后需要执行的 *** 作，如页面跳转、d出提示窗口等。这两个点是交互设计中最核心的部分，它们之间的联系才能使交互设计效果最佳。

Axure进度条动态交互效果，展示效果如图

实现思路：在进度条（矩形框）中添加交互，载入时自动调整进度条的大小，然后用尺寸改变时（进度条的大小）触发其他交互，并添加判断条件，如果进度条的长度小于进度槽，进度条的长度自动增加直到进度条的长度等于进度槽的长度；上面的百分比套用函数公示，用当前进度条的长度/进度条的长度即可实现

在axure8中实现如下：

为更直观显示，所以将进度条加大加粗

1拖出一个矩形，填充颜色浅灰色，并命名进度槽；该矩形即为固定的进度槽。

2拖出另一个矩形，长度设置为1，宽度与上述矩形（进度槽）相同，颜色填充为红色，并命名为进度条；该矩形即为图1中长度改变的进度条。

3拖出一个文本标签，文字内容修改为0%，并命名百分比。
4将进度条放在进度槽上，头部对齐（此时两个矩形即进度条和进度槽的横纵坐标是相同的），并将百分比放在进度槽中间的上方。

5拖出一个文本标签，文字内容修改为0%。
6右下角点击选择进度条，然后上面的交互中选择更多事件-载入时-元件-设置尺寸-当前元件打对号-删除宽原来的数据-点击宽后面的fx插入函数-插入变量或函数-选择width并将width+1（如图10所示）-然后点击确定
7还是选择进度条，然后上面的交互中选择更多事件-选择尺寸改变时-添加条件（具体条件如图，即当进度条<进度槽时触发），其中在添加最后一个函数时，添加局部变量，将进度槽变成局部变量a
8添加动作-其他-等待时间设为50毫秒（此处时间长短为进度条增加一个单位长度的时间，时间越短，进度条增长速度越快）

9设置尺寸-当前原件-具体参数如图15
10设置文本-元件选择百分比-具体参数如图17，[[(Thiswidth/awidth100)toFixed(0)]]%，其中Thiswidth/awidth100算出当前进度条所占比例，toFixed(0)函数表示保留0位小数即保留整数
11点击确定，所有交互效果就添加完毕，效果如图18（因截屏录制原因导致gif未从0%开始）。

一般来说，axure的原型分成两种，低保真和高保真。低保真就是线框图，主要作用是给研发交付，做开发的参考，只要能能实现讲清楚页面的功能和逻辑就可以了，特点是高效、快速；而高真原型主要是在产品初期给公司领导、用户演示，除了要完成低保真的功能，对于原型的界面风格和交互都有要求，高保真的原型特点是效果好、更接近真实的产品，但是开发起来很费事件。这两种原型适用与不同的需求场景。

对于高保真来说，主要要实现以下几个方面：

1、页面布局尺寸要准确，最好能够实现自动适应屏幕；

2、页面风格，包括颜色、字体、行间距等，都要按照规范设计，这个阶段，往往需要UI的介入；

3、交互要能够实现，至少要实现所有的菜单功能，并且要实现主要细节页面；

按照上面的要求，高保真的原型除了基本的原件之外，一般都要使用到动态面板、中继器、内联框架等元件，需要产品经理能够对这些元件掌握的比较好。

总得来说，实现一个高保真的原型是比较复杂的，对于新手来说，还是比较困难的。

不过也有一些现成的pc端的高保真原型框架，可以下载直接使用。

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

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

        

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

      注意使用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

实战教程，未完待续

你在显示二个面板的前面加上一个等待时间。另外由于你做移除一级的时候就隐身二级的，所以二级的就没办法等到你移动过去就消失了。你可以在一级的时候不做设置移除隐藏二级。可以在并行的一级菜单移入的时候隐藏之前的一个的二级菜单。如果你要从别的地方移除我建议可以通过热区进行区分。 还是要看你具体要做什么样子的来订咯。

---