恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
交互动效设计-After Effect(1)
0.0°
2018-07-02 原创文章 教程 举报 5081 87 92 11

从这次的教程开始,我会出一些UI设计相关的交互动效设计教程,希望能帮助到有需要的宝宝们


  • 写在前面

——

目前市面上已经有很多交互动效原型设计的软件

比如AfterEffects,Principle,Hype3,Flinto...等等。我目前用的最多的就是AE和Pr这两款的,往往在用ps设计界面时我会搭配AE做界面交互


当用sketch做界面时就用Principle。这两组黄金搭档可满足pc用户和mac用户的不同需求,当然这两款动效软件也是各有优劣,而我们要做的就是通过两款软件的完美配合,来实现市面上绝大多数的动效的设计和输出。



本次案例是我以前面试全民直播时的一个测试题,因为就只有2天时间做的不是很好大佬们多多批评

那这个案例的设计所用动效软件AE,界面设计软件PS,后期会出Principle搭配sketch的相关动效设计教程。当然如果有老铁对Hype3或者Flinto感兴趣的话可以评论区留言,倘若呼声很高的话,肯定满足你们的要求哈


Image title



  • 课前准备

——

首先当然要先安装好ps和ae这两款软件啦,下载地址可以在我的第一节教程


『5分钟教你学会Form 插件』自行获取哦

(如链接过期可到公众号EricUED获取哦)



  • 设计教程


——

一.在用PS设计UI界面时要随时注意图层的命名和归类,这不仅会方便我们界面的设计,在后期ae动效设计时也会节省很多时间


Image title

Image title




二.当我们完成了界面设计的部分后,这时就可以开始整理图层来导入到AE做动效了,注意:整理的规则是,将动效中不产生空间变化的图层分别Ctrl+E给合成为图片形式比如tabbar、statusbar。将卡片或者是按钮都合成为图片,如果有元素需要产生位移最好提前在ps中将元素的运动前后的状态做出来,以便于我们后期ae中动画的设计



Image title



三.打开AE,合成设置为我们的设计稿尺寸,一般为750*1334的大小,时间的话看你的动画的长短而定


Image title



四.将PS文件导入到AE中,对话框中导入种类:合成-保持图层大小,图层选项:可编辑的图层样式,然后将合层拉倒动效1的时间轴上


Image title

Image title




五.首先我们要做一个touch效果,类似手点击屏幕滑动的效果。新建一个圆形形状给它位置、缩放、不透明度打关键帧做动画


Image title



六.在我们滑动banner时会产生Y轴的旋转变化,让视觉上产生三维效果,这是这部分的一个小重点。注意;(图层的运动不可以是匀速的,一般会给关键帧添加缓动效果)


Image title


Image title


七.之前的banner是一个十字交互的手势所以只需要对这4个图片做动画就可以。如果是上下的roll滚动手势的话,就需要对所有的图层做P位置在Y轴的变化。





Image title


八.在上滑的时候tabbar和statusbar固定不动。其中会有2个设计难点


1、大标题手印2字上滑后消失然后缩小出现在nav中间位置。


2、即当上滑时搜索框和icon向右缩小,然后搜索框消失icon位移到nav右边的位置。


设计技巧:针对第一个问题,大标题只做向上的位移,然后双击在nav合成里对小号的标题手印2字做透明度变化,出现的时间上自己需要把控好。


第二个问题,在Search合成里面,其实就是给搜索框做了个从左向右缩小的蒙版路径动画,同时搜索icon跟随搜索框X轴位移,当2者运动到最后侧时一起向上位移消失,同时位于nav合成的搜索icon透明度动画出现

Image title



Image title

Image title

Image title



九.当上滑结束后,选择一个视频卡片。卡片会有一个运动曲线同时产生从位置和缩放动画。当右上角关闭视频时,视频卡片向左下角曲线运动


Image title

Image title


  • 总结


1.当用sketch做界面时就用Principle。这两组黄金搭档可满足pc用户和mac用户的不同需求


2.在用PS设计UI界面时要随时注意图层的命名和归类,这不仅会方便我们界面的设计,在后期ae动效设计时也会节省很多时间



3.图层的运动不可以是匀速的,一般会给关键帧添加缓动效果



第五篇教程希望能够帮助到老铁们,如果喜欢可以点个小赞赞哦


Image title


更新:2018-07-02

收藏

87人已收藏

佐木扉页

交友~合作~可加好友哦

  • 19

    作品

  • 2858

    粉丝

  • 9

    关注

  • EBToken项目复盘
  • Ebonex项目复盘
  • THIS IS SPOOK
  • UI中国APP新概念设计

    猜你喜欢

      2018-07-02 原创文章 教程 举报 5081 87 92 11

      交互动效设计-After Effect(1)

      0.0°

      你确定要举报交互动效设计-After Effect(1)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年07月01日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      92
      87
      11

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录