AE教程:读书界面动效设计

AE教程:读书界面动效设计
日期:2018年6月14日10:27:43 分类:After Effects教程  UI教程 评论:发表评论

今天仅供品UI给大家带来的是AE教程中关于读书界面动效设计的设计,文章转自UI中国的UILEO ,喜欢他文章或者关注他的可以去看看

AE教程:读书界面动效设计

AE教程:读书界面动效设计

 

在看视频前建议浏览完整篇文章(视屏在文章底部)

 

必须下载的素材

本文所需要的素材 网盘下载


按照惯例开始继续啰嗦下


1、从本期开始将动效教程全部改成关于UI的动效


2、为了兼顾初学者,将出视频直播教程。有需要的可以关注下


3、请务必练习,看教程很舒服,但是其中会出现各式各样的问题

 

 

一、确定所需要的操作

1、APP设计的注意事项

2、如何搜集灵感

3、设计App

3、切图后导入AE

4、制作动效

AE教程:读书界面动效设计

 

二、App的注意事项

这个App用的是Iphonex的尺寸,先说下iphonex的注意事项

iphonex的官方文字规范 https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x


iphonex的官方界面源文件 https://developer.apple.com/design/resources/


这是源文件的部分截图

AE教程:读书界面动效设计

 

 


三、搜集灵感

 

确定了设计的规范,就可以想想怎么去设计这个界面,由于之前想设计一个关于读书的页面,所以我们去dribbble上找一些参考,可以下载之前的素材文件夹,里面有大图和gif

AE教程:读书界面动效设计

从这些dribbble的文件可以看出有些共同点

1、阴影
阴影基本上是大阴影,并且这块的阴影为了更有品质感,可以将原图层复制后缩小,进行高斯模糊,然后降低透明度,具体可以看源文件1中的封面2

2、字号
标题字号基本上都偏大号,并且都是加粗的,并且内容字号为了体现节奏感,将其字色和字号都变弱


3、留白

不同区块之间留的距离都很大,并且没有任何不相关的元素

 

四、设计APP

首先我们确定所做页面的内容
首页的布局为标题、搜索、封面、作者、底部导航

内容页的布局为封面、主内容、数据、评论

AE教程:读书界面动效设计

这里举一个例子,如何去利用别人的排版完成自己的设计(针对初学者),有一定审美的童鞋可以自由发挥,而就算用了其他人的排版,也需要注意页面整体的间距需要保持统一

AE教程:读书界面动效设计

这里建议初学者自己去设计一遍,可以对iphonex的规范有一个详细的了解
这里把标注放上

AE教程:读书界面动效设计

 

五、制作动效

这里说下大概的步骤,请完整看完后再看视频哦,尤其是第5步


1、将切图文件夹的文件分别导入到AE后排好

AE教程:读书界面动效设计


2、首先制作home页面的切图由透明度0-100,位置由上到下过度出现的过程

AE教程:读书界面动效设计

3、点击第一个封面后,其他的切图将会渐隐消失,所以可以将除去封面1、顶部时间、底部横线所有的都打上预合成,将透明度由100到0

AE教程:读书界面动效设计

4、然后将第二个内容页面的切图放入ae并排好,继续做一个透明度由0-100,位置由上到下的过渡,并且将封面1的位置由下往上挪动

AE教程:读书界面动效设计

5、接下来是最难的一步,涉及到3d图层的翻转,蒙版的扩散和羽化的知识点

这一步由于需要封面从左上侧开始放大,所以需要在第一步就将锚点挪至左上侧

AE教程:读书界面动效设计

 

在封面放大的同时将其他的切图进行隐藏,并且将第三个页面缩小并用蒙版裁切至封面的后面,随着封面一起放大
当封面放到到一定位置的时候,开始沿着Y轴旋转进行翻页效果,同时透明度由100降低到0
并且在翻页完成的时候第三个页面的蒙版中的扩展和羽化也会相应变化

AE教程:读书界面动效设计

 

 

 

    A+

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: