作为一名互联网设计人员，每天都会创建基于网站的架构图，包括各种带页面注释的页面示意图、操作流程图，以及多种多样的交互设计，这就让我们需要有一个合适的软件进行操作——Axure，她是网站需求的好帮手。她能快速有效的表达我们需要的架构，并可以自动生成用于演示的网页文件和规格文件，以提供演示与开发。

　　随着互联网的高速发展，在页面中出现了越来越多的交互元素，常见的就有很多，例如我们今天要介绍的图片自动跳转或点击跳转，相信大家在点击大多数网页的时候都深有体会。

　　 

　　接下来的问题就是设计师如何在原型设计中制作出这样的图片自动跳转或点击跳转效果呢？今天我们在这里和大家分享下在Axure中添加动态面板制作的方法。下面以我们 中睿信息技术有限公司 的首页banner部分为例，首先我们先看一下现在的效果。


　　

　　好的，那我们现在开始操作

　　步骤一：打开Axure，为了更加形象我直接利用图片来制作，可以添加一个<图像按钮>来添加图片。

　　 

        

　　这里选择<是>，就会导入相同大小的图，若选择<否>，则先要在<图像按钮>上定义大小（这里不推荐使用）

　　步骤二：在这里我还是使用图片来制作动态面板（正常情况下可以直接使用动态面板工具制作，原理都是一样的），鼠标右击：<转换>—<转换为动态面板>。

　　

　　步骤三：因为该动态面板是需要自动跳转的，我们以四个图片为例，双击鼠标左键，点击第一张大图（由于她已经是一个动态面板，我们可以按照制作的动态面板的方法进行制作）新建3个子动态页面状态，在每个动态页面状态放上图片（如何放置图片参考步骤一），由于她一开始的时候就显示了第一张图片，所以我们不用设置成隐藏。

　　步骤四：给动态面板命名¬¬——大图，添加动态面板状态并分别命名为图1、图2、图3、图4；

　　

　　步骤五：点击编辑所有动态面板状态，分别在图2、图3、图4放上其余的图。

　　

　　步骤六：在动态面板——大图上面，拉一条长954*40的黑色长条，代表分界线；

　　  
        

　　步骤七：在黑色长条上添加四个<图像按钮>，添加小图并命名 按钮1、按钮2、按钮3、按钮4；

　　

　　好的，基本样式就这样完成了，接下来我们要进行互动

　　步骤八：在基于前面的内容的基础上，选择调出页面注释和页面交互面板

　　<视图>—<页面属性>

　　 

　　 

　　版本不同的，可以尝试下按F1查找。

　　步骤九：回到添加了动态面板的页面上，选中想要做图片自动跳转的动态面板，然后在页面交互面板上选择<添加用例>，会弹出<用例编辑器>，

　　

　　步骤十：在用例编辑器里，选择添加动作——等待时间（毫秒），系统默认等待时间是1000 ms,点击文本框内1000 ms,可以自定义等待的时间。这里定为2000ms

　　

　　步骤十一：选择完后，接着选择<设置动态面板状态到指定状态>，勾选<大图（动态面板）>选择下面的动态面板状态到图2；设置新面板状态和原面板状态为<向左滑动>，用时2000 ms；然后依次再添加动作，等待4000 ms，面板状态转换到“图3”，等待4000 ms，面板状态转换到“图4”，等待4000 ms，在当前窗口中打开（选择到链接页面，动态面板在哪个页面上，就选择哪个页面），在当前窗口打开这步是为了实现不断的循环，如图：

　　 

　　这样就实现了图片自动跳转，那接下来我们来做下面的点击跳转

　　步骤十二：点击小图1，在<部件属性>--选择<OnClick（单击时）>，弹出用例编辑器，选择<设置动态面板状态到指定状态>，勾选<大图（动态面板）>选择下面的动态面板状态到图1；设置新面板状态和原面板状态为<无>，等待4000ms；

　　

　  

　　同理设置其他几个小图

　　总结，至此我们就完成了添加动态面板的交互操作，是不是很简单，简简单单的增加互动元素会让你在演示原型的时候给观看者带去生动的演示，还等什么赶紧一起来试一下吧。如有有更为简单的地方欢迎大家在评论处补充。祝大家工作愉快。

 本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。