Axure绘制App引导页

大家在日常的APP产品功能设计中，经常会进行APP引导页的功能设计。引导页常见于首次打开APP时，会看到3-4页的引导页，通常每页都会使用简短的话术介绍软件功能，那么如何使用axure绘制引导页功能呢？

 

 

一、效果展示

 

二、功能解析

我们需要实现功能如下：

①需要添加4页引导页

②左滑时，切换到下一页；右滑时，切换到上一页

③左滑至最后一页时，左滑失效；右滑至第一页时，右滑失效

三、原型绘制

1.先绘制4页引导页

①首先拖入一个手机壳

没有手机壳的伙伴们可以在网上下载一些元件库，有需要的也可以评论区联系我

②绘制第一页引导页的内容

拖入文本标签，并填写假数据；拖入图片，调整合适的大小及位置；拖入四个小圆点，标识当前是第几页，这里由于是第一页，所以将第一个小圆点设置成绿色

③添加其他页面

选中页面中的内容，转化为动态面板；复制4个状态，分别代表第一页、第二页、第三页和第四页

④编辑2,3,4页中的内容

这里主要修改的是文案和小圆点

2.编辑交互事件

①添加载入时的交互事件

添加载入时，1.5秒后，自动切换到第一页

②添加左滑时的交互事件

判断当前所处的页面是否是第1,2,3页，如果是，则向左拖动时，切换到下一页

③添加右滑时的交互事件

判断当前所处的页面是否是第2,3,4页，如果是，则向右拖动时，切换到上一页

到这里app端的引导页功能就完成了，是不是很简单，大家如果有什么疑问可以评论区讨论，谢谢大家的关注