交互设计：运用Axure实战交互动效设计

Axure做为老牌原型交互设计软件，在设计学习中可是必不可少的，作为专业的原型设计工具，它能快速、高效的创建原型。本节课程中，我们将以手机侧滑效果为例，带领大家使用Axure中的动态面板及动作来制作简单的交互效果。

接下来我们将用个四步骤，完成菜单页面的侧滑交互效果：

第一步，运用Axure制作完成静态原型草图；

第二步，运用动作中元件的移动，完成点击按钮，界面左右滑动的效果；

第三步，运用动作中动态面板的状态，完成两个不同状态切换的效果；

第四步，运用动态面板调整显示区域的功能，完成在固定区域内，显示侧滑内容的效果。

下图就是最终完成的交互效果。

1.静态原型草图

首先，打开Axure软件，第一步我们要制作原型草图，原型图可以有应用两种方式，第一种方式应用Axure当中的元件库，把左侧的控件拖入到右侧的工作区域内，然后进行相应的编辑来制作原型；

第二种方式，我们可以直接应用做好的效果图，直接导入到界面，最后加入相应的动作就完成了。

本节课我们要用第二种方法，第二种方法需要我们准备四张图片，这四张图片分别就是：左侧的菜单部分，中间的内容部分还有两个操作按钮(点击展示的侧滑效果)。

接下来我们可以应用直接把图片拖入到界面当中的方式，这是一种方式；第二种方式，我们可以直接点击应用左侧元件库当中的图片，把控件拖拽进来，然后双击控件，接着在打开文件中找到我们的图片位置，点击图片图片就呈现在界面当中了。

这是两种方式，大家可以选择自己熟悉的方式进行操作。现在我们把本节课要用应用到的四张图片，放到相应的位置。

大家注意，我们在应用的时候所有的控件一定要命名，方便在后续操作时找到相对应的图片，第一张是左侧的菜单，所以给它命名为menu， 中间是主界面的内容区域，直接给它命名为home。

接着还有我们两个按钮，第一个按钮是正常显示的状态(黑色按钮),也就是当页面中不显示左侧菜单的时候，在主界面区域显示的按钮，点击之后主界面向右滑动，显示出菜单页面。

所以给它命名为btn-right，橙色的按钮是当点击黑色按钮之后主界面侧滑展示菜单页面，在菜单页面显示的橙色按钮，然后再点击橙色按钮的时候页面向左滑动，主界面把菜单盖住。

所以这个按钮命名为btn-left，这是我们本节课要用到的四张图片。

2.侧滑效果

如果有同学希望多进行操作练习，可以应用控件直接去绘制。现在我们要开始制作了，开始制作我们的第一个效果，因为我们的原型就是这四张图片，图片位置摆放正确。

第一个效果就是当点击right按钮的时候(btn-right按钮，下称right按钮)，右侧所有的内容向右滑动，主页面向右侧滑动，露出左侧菜单。

滑动的位置是按照menu的宽度确定的，它的宽度是572，把右侧所有的内容然后向右滑动，当我们点击的时候是所有的内容滑动。

我们把右侧的内容进行合并组，应用上方快捷菜单，快菜单组合之后我们把合并组合命名为main，所以点击right按钮之后main组的所有内容就会全部向右滑动了。

选中right按钮，选择右侧菜单鼠标点击时选项，跳出弹窗，弹窗当中添加动作一栏选择元件，展开后选择里面的移动功能，在配置动作一栏里选择移动目标。

因为是整体向右滑动，我们选择main，移动选择经过选项，X轴和Y轴(X轴是横向的位置，纵向的是Y轴，原点为左上，向右向下数值增大)需要查看界面中标尺的数值，menu的宽度为572，那么需要在home的移动正572即为x轴移动范围。

只是向右移动，没有向下移动，所以Y轴是不变的，动画选择摇摆。同理将left按钮设置为向左滑动572距离，只需要将数值设定为负572即可。点击预览，调整页面为合适大小。

主页面滑动

接下来我们把menu页面放置到home页面后方，这样就可以在侧滑home页面的时候露出下方的menu页面。把menu页面左边与home页面左边对齐，在右下概要-页面栏目中，将menu页面置于最下方(页面顺序为从上至下为层级顺序，越往上优先级越高，越往下优先级越低就会被遮盖住)即可。

menu置于home下方

3.状态切换

接下来我们要做的内容是把两个按钮设置为两个状态。当点击黑色的按钮之后，它应该变成红色的，这才是正常的交互效果。

现在把两个按钮点击右键，两个按钮全部选中，黑色的按钮和红色的按钮全部选中，选中之后点击右键转换为动态面板，右下角动态面板的位置生成有一个状态一，两个按钮都在状态一当中，现在则需要把两个按钮进行分离。

它需要再添加一个状态，把另外一个按钮放到状态二当中去，在状态一上添加状态，把红色的按钮放到状态二当中，可以直接点击右键，剪切粘贴到状态二当中。

粘贴进来，注意一下按钮位置全都是处于x：0，y：0的状态，两个按钮都要处于这个位置，状态一里是黑色的按钮，状态二当中是红色的按钮，这样两个状态就做好了。

接下来我们要做的就是两个状态的转换。选中黑色的按钮之后，在右侧的交互当中双击这个case1，选中之后打开窗口，接下来要应用的是动态原件当中设置面板状态，设置面板状态。

当点击黑色的按钮之后，要切换到红色的状态里，也就是要切换到状态二，选择状态二也就是点击完状态一之后，然后让它切换到状态二。

点开红色的这个按钮，红色的按钮状态二然后把它选中，选中之后应用同样的方法，点击case1，然后再选中刚才的动态面板设置面板状态，让状态二切换到状态一。

现在我们预览一下效果，两个按钮就完成了切换的状态，这主要应用的是交互动效当中的效果，我们可以双击开，再看一下啊就是设置面板状态这样一个功能，它可以完成两个面板的切换。

当动态面板指向哪个状态的时候，哪个状态就是显示的，其他的状态就是隐藏的，就是这个效果。

4.固定区域显示

最后一步要做的就是让页面只在固定的区域内进行移动，超出区域外的内容就不再显示，这部分要应用到的就是动态面板的显示区域。

我们回到主界面双击index，这时候把页面当中的所有的内容选中，选中之后右键选择转化为动态面板，在属性栏中向下拖动选择下方选项，自动调整为内容尺寸，把这个勾选去掉。

现在动态面板内里边有多大，它的内容有多少，就显示多少，所以现在呢我们先把它去掉，我们来预览一下我们的效果，现在向右侧滑动的时候超出范围，就不显示了。

总结

本节课的侧滑交互效果就完成了，我们简单总结4步。

第一步，我们在做原型的时候，可以直接应用图片，不用重新应用元件库去绘制图片；

第二步，我们在做动效时候应用了左右滑动，也就是动态面板移动的效果，

第三步，就是我们动态面板的两个状态，同样的是应用交互动效里的设置面板状态，状态指向谁，谁就会显示，其他的状态全部隐藏。

最后一步，应用的动态面板的一个局部区域地显示，它可以显示固定区域内的内容，区域外不显示，所以这是我们本节课应用Axure做的侧滑手机当中常用的侧滑效果的案例。

带着大家一步步的完成了一个侧滑效果的制作。从圆形到动效的制作与优化，这门课程需要的不仅仅是大家对于操作的熟悉，更重要的是对交互逻辑的把握，大家可以找一些在手机中比较常用的交互动效，结合案例来制作加强对逻辑关系的理解以及对软件的熟练操作。

- END -

我是范舟（Knight）如果你觉得我的公众号还不错，请多帮我推荐给你的朋友，多谢了。

范舟简介：设计领域专家，莱茵教育创始人，中国UXD课程的开创者，具有15年设计经验， 曾担任多家一线互联网公司的设计总监，被中科院研究生、北京工业大学、浪潮集团、方正国际、三星研究院、湖北美术学院特聘为用户体验高级讲师，被视觉中国等主流设计媒体称为UI设计培训第一人。