android动画欢迎界面引导页_Axure 9 教程:移动端引导页/欢迎页滑屏交互

当你第一次打开一款应用的时候常常会看到很棒的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的好坏会极大地影响到后续的产品使用体验。因此很多产品都在努力将这几个页面设计好,从一开始就引人入胜。那么接下来我和大家一起用Axure9来做一个移动端引导页的demo。

5c6b4b12aaad6cef2c87471c8e289ea7.png

1. 拉出一个手机壳子啦啦啦啦

哈哈哈哈没有壳子也行,那就拖个矩形出来吧(壳子原型链接在下面大家可自行下载哦)。有的朋友可能问为啥是粉红色的,因为这是一个母版~

a1fa7b48a495409d0bf9c1ffc4fae8f0.png

2. 再找几张图片“伪装”成引导页

像我一样,我是在花瓣下载的~

194c0d2d4380719dcd657d0b6418ab97.png

3. 把这几张引导页放在一个动态面板里

首先得需要把图片尺寸和手机主界面大小调整一致,当然得你自己喜欢。调整好之后我们可以把其中一个引导页设为动态面板(点击当前选中图片,右键单击“转换为动态面板”),设为动态面板后新增两个状态,引导页有几页这边就新增几个状态啊同学们!可以给每个状态给个名称或者ID方便后面添加交互。

12c6a35df341666be36c12fa833b4b5b.png

4. 添加交互

在主界面选择我们引导页的动态面板,右侧交互,因为我们习惯性从左往右滑动引导页进入APP界面,当然你喜欢往哪边就往哪边哈~我这里选择从左往右滑动进入。

首先分析一下原型交互思路:

(1)在第一个界面从左往右滑动界面时往第二个界面滑动,第二个界面往第三个界面滑动

  • 情景一:面板状态=1,动态面板向2滑动
  • 情景二:面板状态=2,动态面板向3滑动

(2)在第三个界面从右往左滑动界面时往第二个界面滑动,第二个界面往第三个界面滑动

  • 情景一:面板状态=3,动态面板向2滑动
  • 情景二:面板状态=2,动态面板向1滑动

下面加入交互

选中动态面板,右侧选择“向左拖到结束时”。

加入情景1:

a3d401431b533c5131ecc5d56c7eeb67.png

设置面板状态

93d059d2103c21a997cfbb5924e83e1e.png

加入情景2:

485901ae85de53175b9496f5535ef109.png

设置面板状态:

99c9fbc35dd0019f589a0f0a75595b26.png

新建交互,“向左拖到结束时”

加入情景1:

1dc05673b432f2187c4a87ed5cbab508.png

设置面板状态:

0b55068d9b98be272f8a1c68744e6692.png

加入情景2:

9e479f8e117576ad83837d2726b0127a.png

设置面板状态:

eaba6eedb3e4fbde154b4ddeda84cb13.png

这是三页引导,如四页五页在此基础进行添加就可以了,如果不是看了不是很清楚的朋友,可以添加一下我的微信号“13667321807”在线为你解答哦~这边也有产品交流群,欢迎小伙伴的加入!

附上本原型实例链接:

https://pan.baidu.com/s/1Vh_7htgGc2hQEkBnXTyANw

提取码:6rp5

作者:妖怪口袋;微信公众号:妖怪口袋,不定时更新axure9原型案例。

本文由 @妖怪口袋 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值