提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
大家好,从今天起,UI严选【每周一练】正式开始,U妹将和要学习的小伙伴们一起进行AE、交互动效设计、插画设计、2.5D插画设计等方面的练习,想一起学习的小伙伴可以加入进来,我们一起学习!
今天严哥先给大家做一个APP抽屉式导航交互动效设计练习,先来看来最终的交互效果
效果图抽屉式导航交互效果
1、 操作步骤
第1步:打开protopie,这个交互效果是用protopie软件做的,软件下载地址:http://www.protopie.cn/download/
Protopie软件介绍:《交互动效原型设计其实并没有你想象的那么难》
第2步:点击新建Pie文件按钮,选择界面尺寸(因为我的界面尺寸是1242x2208px,所以选择8 Plus)
第3步:在菜单栏,点击插入-图层-图片,插入所需要的图片素材,并将图片移动到相应的位置
第4步:先搞清楚交互原理:点击导航图标——导航页面从左侧进入,并且首页呈现遮罩层,然后点击遮罩层区域,导航页面还原;知道交互原理后,可见我们需要新建一个遮罩层,填充为黑色,将透明度设置为0,并将遮罩层调整到导航图标上层。
第5步:添加交互效果,为导航图标添加交互点击事件,添加触发条件:选择单击(选择导航按钮图标)—添加:移动(在属性区域选择:导航页面,X轴移动设置为:0,持续事件:0.3S)—添加:透明度(选择mask图层,透明度设置为50%)
我们先来看下预览:
第6步:再次添加交互效果,为遮罩层添加交互点击事件,可以让导航页回位;点击添加触发条件:选择单击(选择遮罩层)—添加:移动(在属性区域选择:导航页面,X轴移动设置为:-250,持续事件:0.3S)—添加:透明度(选择mask图层,透明度设置为0)
添加完毕后整个效果就完成了,我们再来看下预览效果:
第7步:我们也可以在手机上查看交互效果,安装protopieplayer APP,扫码后即可在手机上预览交互效果
我们也可以将交互效果,导出为MP4视频格式,也可以将交互效果上传到云端,分享链接给团队人员查看。
2、 素材+源文件获取
素材+源文件获取方式:点击下方“下载”按钮即可获得(https://pan.baidu.com/s/192d7EJgnwCFkdNSUjKPCrQ 密码:u0p0)
点我马上去UI严选设计铺看看
各位小伙伴们也可自行搜索关注严哥的淘宝店铺:UI严选设计铺
ProtoPie 激活码获取
微信扫一扫下方二维码
当然你也可以用你自己做的设计稿,来完成这次作业。
#UI严选【每周一练】——每周进步一点点#
微信公众号:UI严选
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册