Axure原型-动态启动引导图

什么是启动引导图？

启动 APP 时能够左右滑动的大图，滑动到最后一页时，点击“进入”按钮，才进到首页（通常引导图只会显示一次，即显示过就不再显示了）。

同样的，基本每个 APP 首页也都会有banner轮播图，可以左右滑动，或每个几秒自动滚动。而引导图跟banner轮播实现起来其实很类似，闲着没事，使用Axure 画了下启动引导图。

效果图

第二张、第三张引导页切换瞬间

步骤

1、创建手机外壳，我是用的iphone6元素；

2、拖入一个动态面板。这里以四张引导页为例，所以动态面板内添加四种状态，内容除了第四个界面多加个“立即体验”按钮其他的都相同。

3、首先分析一下原型交互思路：

（1）在第一个界面从左往右滑动界面时往第二个界面滑动，第二个界面往第三个界面滑动，第三个界面往第四个界面滑动

情景一：面板状态=1，动态面板向2滑动

情景二：面板状态=2，动态面板向3滑动

情景三：面板状态=3，动态面板向4滑动

（2）在第四个界面从右往左滑动界面时往第三个界面滑动，第三个界面往第二个界面滑动，第二个界面往第一个界面滑动

情景一：面板状态=4，动态面板向3滑动

情景二：面板状态=3，动态面板向2滑动

情景三：面板状态=2，动态面板向1滑动

Axure展示

注意事项

1、一定要创建动态面板；

2、动态面板内的State状态，可以复制粘贴进行增加；

3、属性有两个：交互思路（1）对应“向左拖动结束时”、交互思路（2）对应“向右拖动结束时”；

4、属性内的case用例，可以复制粘贴进行增加；

5、设置case用例的步骤：

①编辑条件；②设置面板状态；③选择切换状态及动画；

case用例步骤

这是四页引导图，如果是五页，那就在此基础进行添加就可以了。