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

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

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

准备

•Axure8(或Axure9)软件已安装。

•掌握基本的软件使用。

•熟悉动态面板。

本教程知识点

•基础动态面板应用。

•移动边界值的判断。

详细教程

本文以三页引导页为例，实现引导页的基本功能。

功能

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

一个页面跳转登录页面。

制作方式

1）搭建基础框架

•引导页、首页

•引导页主要由跳过按钮、引导页内容动态面板、滑动条、立即体

验按钮组成

•注意：在制作内容时，如果使用局部图片（如案例）注意排版时

尽可能的保证图片在每个界面的位置统一

D引导更

/・模板组合（沮合）

叵।（底部都单栏）

/«导航栏（幡面板）

/,Statel

回狱态栏-IphoneX）

=

/・内容框架（动态面板）

/■空导页

=硒礴邮）

/・涓动条（组合）回

='；醐

=滑杆一）

口跳过况形）

/■引导页内容（动态面板）回

/―引导页一

A（^）

/U（图片）

二BG献）

>■引导更二

>.引导更三

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

/,?向田羽网束时

/K左滑动

套设宣弓I导页内容为Next向左潜动out500ms向左滑动n500ms

*移动港柏by（50,0）wihboundaries:[left<188]

//向右施就洁束对

/K右滑动

，1SS引导页内容为Prevbus向右港京out500ms向右滑启in500ms

%移动潜轴by（-50.0）withboundaries:[left>88]

•由于在Axure中只有动态面板存在拖动的交互触发时间，所以此

处需要采用动态面板的这一属性进行实现。

•以左滑为例（动态面板的向左拖动结束交互事件）。

设置滑动结束后的切换面板状态为下一个即可。

•设置动画为向左滑动，且为500毫秒。这样可以有一个半秒钟的

滑动效果。

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

•原理：每切换一个引导页，滑动条跟随移动固定距离。且左滑动

至最后一张再滑动不在向左移动；向右滑动至第一张不在向右移

动

•根据原理，可设置每次左滑动移动滑轴50pxe同时设置左侧边界

可移动区域小于188px

移动50px原理：由于滑轴的长度为为100px、滑杆的长度为200pxe

整个滑轴可移动的范围为lOOpx，三个页面移动两次，每次移动50pxo

左侧小于188Px原理滑轴初始状态未滑动前的X左侧坐标为88px,

移动两次后为188pxe为了防止移动超过，设置限制为188pxe

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

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

在第三个引导页后两个中，存在隐藏（显示）滑动条显示（隐藏）立即

体验按钮的交互。这里可以采用动态面板的状态改变时的交互事件。

/■?状态改变时

/K处理第三个界面滑动条坦藏

Of面板状态于弓I导页内容==引导页三）

f值微滑动条向上滑动100ms

5"100新

f显示立即体受

/K处理回退滑动条展示

（ElseIf面板状态于引导页内容-引导更二）

,箜噌立即体造

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

状态改变时，动态面板状态为引导页三，隐藏滑动条，等待200毫秒,

显示立即体验。

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

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

注：一定要处理好显示隐藏的顺序，Axure本质上是按照顺序事件的先

后顺序进行处理，不同的顺序处理的顺序不同，展示的效果也不同。

5）其他细节处理

・跳过

•