AxureR9 页面实现上下滑动效果

研究了一下Axure页面滑动效果,作为笔记记录下来,要学的东西实在太多,只有笔记才不会忘记,O(∩_∩)O~ 


前期工作:

1、先画好头部底部

给头部底部样式取个名字,我分别取为“头部”、“底部”

AxureR9 页面实现上下滑动效果AxureR9 页面实现上下滑动效果

2.中间内容放置动态面板

给它取了个名字叫“内容”,记住它的高,等下用的到。

AxureR9 页面实现上下滑动效果

3、双击“内容”动态面板,再拖一个动态面板覆盖上去

为了实现滚动效果,这个面板要高于“内容”动态面板,取名为“内层动态”

AxureR9 页面实现上下滑动效果

4、双击“内层动态”面板,这里面可以放内容了

我随便搞了点东西放进去,内容放完,记住该面板的高,要用的到!!!点击关闭。

AxureR9 页面实现上下滑动效果

重头戏开始:

1、点击“内容”面板,新建交互。

AxureR9 页面实现上下滑动效果

2、点击“拖动时”-“移动” ,再点击“内层动态”,移动选择“跟随垂直拖动”,动画“None”确定。

AxureR9 页面实现上下滑动效果AxureR9 页面实现上下滑动效果

 3、再新建交互,点击“拖动结束时”,先不选择任何内容。确定后,鼠标移动到该交互上,会出现“启用情形”,点击。

AxureR9 页面实现上下滑动效果

3.1  情形1选择内容如下:

AxureR9 页面实现上下滑动效果

3.2 确定情形后,双击情形1操作:

AxureR9 页面实现上下滑动效果

 4.再在“拖动结束时”添加“情形2”,内容如下:

AxureR9 页面实现上下滑动效果

4.1 双击情形2操作,如下:

注意取两个动态面板高的差值( ⊙ o ⊙ )啊!

AxureR9 页面实现上下滑动效果



再看看“内容”动态面板的交互: 

 AxureR9 页面实现上下滑动效果

一个简单的页面滑动效果完成啦,只要熟悉了,操作起来真的很方便, Axure好多东西需要探索啊,希望我能够制作高保真的产品原型。以前都是用墨刀画原型,现在才知道Axure的强大,加油!!!↖(^ω^)↗