vol .1 Axure 实现移动端页面滚动的2种方法

使用Axure 实现移动端页面滚动是非常非常实用的技能。在展示ui交互图的时候很常见。

于是我总结了5种方法，简化步骤，一看就懂。

首先你需要去搜一张长图，或者使用我放在文章最后的图片也可以。

---

方法1: 将长图转换成为动态面板，设置滚动条，调整页面大小；

第一步：复制一张长图到Axure ;，将图片调整到合适，易操作的大小；并且为它命名；

 方法:选中图片，长按 shift键 ，并动鼠标滚轮，可以不变形的调整图片大小；

示例图片1 

第二步：选中图片后，右键，将图片转换成为动态面板；

示例图片2：转换为动态面板

第三步：在面板右上角的属性区，设置动态面板的滚动条为“自动显示垂直滚动条”；这样图片右侧就会出现一个滚动条；

示例图片3 图片右侧出现了滚动条

第四步：

由于我们要做长图滚动效果，要有部分图片需要在滚动过程中展示，所以我们点击图片，调整他的高度和 宽度；调整到你要展示出来的页面大小；动态面板在这个过程中会调整页面，不展示的页面会在滚动条动的过程中展示；

就是鼠标移到图片右下角，出现指针，长点击鼠标左键就可以调正页面长度和宽度了。记得预览调正页面哦~ 好啦，这就是第一个方法，掌握这一个就可以使用了，而且这个方法是最常用最简便的方法呢。

学会了感兴趣的可以继续往下阅读哦，嘿嘿，，

如下图：

调整图片大小

---

方法二 内联框架 加载图片：

1、拉一个内联框架到页面，将框架 x,y坐标修改在（0,0）的位置；

2、新建一个子文件，里面放入长图；坐标也是在（0,0）；

3、 双击内联框架，选择长图所在的页面；

4、完成这简单轻松的三步搞定。

恭喜你掌握了第二种方法，预览以后调整图片大小，适配边框；

图示 将长图放在新建的子页面下

---

重要补充：但是上面的方法由于添加了动态面板的垂直滚动条，会有很粗的滚动条在右侧，展示的时候，页面不太美观（如下图）。移动端原型图却展示出来网页的感觉。我发现了一种办法可以将这个问题优化。

未优化滚动条页面

那就是将这个动态面板再次转换为动态面板。 进入动态面板子页面，

扩大子页面宽度（也就是将进度条拉到动态面板主页面显示区域以外）；

回到动态面板主页面，减少页面宽度，缩小进度条边缘。

这样预览后，页面依然可以滚动显示，但是不会出现难看的滚动条了。有个需要注意的问题就是，该动态面板上不能再添加

大面积“热区”。否则页面还是不会滚动的。（下面是图示）

将动态面板主页面再次转换为动态面板 动态面板子页面 动态面板主页面

其实，新手和老手的设计功底就会在这些地方区别，从细节上优化展示。

比如，用户点击一个功能按钮，会出现对话框。Axure里面，元件添加用例里面，显示页面，里面有“灯箱效果”。就是会在弹出对话框时，整体屏幕出现深色透明没，蒙版，这样出现的页面就比直接弹出效果好很多。

---

长图示例：

示例图片