Axure入门案例系列：APP首次引导页

APP更新或用户首次安装APP引导页是必不可少的一部分。

准备

本教程知识点

详细教程

功能

打开APP可以通过拖动切换引导页的展示信息。同时支持跳过，最后一个页面跳转登录页面。

制作方式

1）搭建基础框架

2）制作左滑动效果和右滑动效果

3）制作底部滑动条的效果（以左滑为例）

移动50px原理：由于滑轴的长度为为100px、滑杆的长度为200px。整个滑轴可移动的范围为100px，三个页面移动两次，每次移动50px。

左侧小于188px原理：滑轴初始状态（未滑动前）的X左侧坐标为88px，移动两次后为188px。为了防止移动超过，设置限制为188px。

右滑也是基于同样的原理。

4）制作立即体验按钮和滑轴进度的切换展示

在第三个引导页后两个中，存在隐藏（显示）滑动条显示（隐藏）立即体验按钮的交互。这里可以采用动态面板的状态改变时的交互事件。

当添加特定触发条件。切换对应的事件。

状态改变时，动态面板状态为引导页三，隐藏滑动条，等待200毫秒，显示立即体验。

等待100毫秒，是为了有一个视觉上的展示显示效果。

状态改变时，动态面板状态为引导页二，隐藏立即体验，显示滑动条。

注：一定要处理好显示隐藏的顺序，Axure本质上是按照顺序事件的先后顺序进行处理，不同的顺序处理的顺序不同，展示的效果也不同。

5）其他细节处理

总结

题图来自Unsplash，基于CC0协议。