大家好，U妹将和要学习的小伙伴们一起进行交互动效设计、插画设计、2.5D插画设计、C4D、一些技法等方面的练习，想一起学习的小伙伴可以加入进来，我们一起学习！

往期教程是：请点击查看往期详情，今天，我们的教程是：制作 App 页面导航交互动效设计教程，先来看一下最终的效果图：

 App 导航页面交互动效展示

1、 操作步骤

第1步：打开protopie，这个交互效果是用protopie软件做的，软件下载地址：http://www.protopie.cn/download/

Protopie软件介绍：《交互动效原型设计其实并没有你想象的那么难》

第2步：点击新建Pie文件按钮，选择界面尺寸（iPhone 8-375x667@2x，默认尺寸也是这个）

第3步：在菜单栏，点击插入-图层-图片，插入所需要的图片素材，并将图片移动摆放到相应的位置：

第4步：先搞清楚交互原理：有3个导航，随着手势左右滑动，当前页面导航条随着页面的切换而切换，这个交互效果相信大家也很熟悉了将导入的图片素材摆放如下：

第5步：调整图层顺序，添加滚页容器层（容器层即为承载交互效果的图层），调整滚页容器层大小到如下图，然后将wallet_01图层拖入滚页容器层里，然后将容器层组置于底层，预览效果如下：

大家可以看看滚页容器层的具体属性：

第6步：添加滑页容器层（容器层即为承载交互效果的图层），调整滚页容器层大小到如下图，然后将wallet_01图层拖入滚页容器层里，然后将容器层组置于底层，预览效果如下：

第7步：添加导航条联动效果，添加交互事件：联动，选择 “huaye容器图层”，属性：滚页；再次添加交互事件：移动，选择“Rectangle”图层（该图层为导航条），移动属性：scrolloffset（滚动偏移）设置为：

第一行（初始数值）：scrolloffset:0，X:0，Y:空

第二行（偏移数值）：scrolloffset:750，X:250，Y:空；预览效果如下：

我们先来看下预览：

第8步：我们也可以将交互效果，导出为MP4视频格式，也可以将交互效果上传到云端，分享链接给团队人员查看。

第9步：或者也可以在手机上查看交互效果，安装protopie player APP，扫码后即可在手机上预览交互效果

我们来看看导出的MP4视频预览效果：

最后，我们也可以将做好的交互效果，稍加调整，上传到你的Dribbble，分享给全球的设计师欣赏，如下图：

2、 素材+源文件获取

素材+源文件获取方式：

链接：https://pan.baidu.com/s/1VYYL0xasHMQUSapO46b47w 密码：1o4h

#UI妹儿【每周一练】——每周进步一点点#