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

原创文章 分类: 经验/观点 版权:
9252 223 384 10
2018-06-10
76.8
首页推荐


需要看高清无广告的视频可点击B站链接

https://www.bilibili.com/video/av24519371




提交作业:有跟着教程学习的朋友,可以将设计完成的APP和Gif上传到UI中国后,将链接放到txt中,将其txt以QQ号命名上传到QQ群文件,可见右侧头像下面。


点评模式:下周末我会抽取部分作品进行点评,并对其设计方向给出建议,希望大家练习的模式会越来越成熟,谢谢大家支持!



课前准备


必须下载的素材

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


按照惯例开始继续啰嗦下


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


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


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


在看视频前建议浏览完整篇文章



一、确定所需要的操作


1、APP设计的注意事项

2、如何搜集灵感

3、设计App

3、切图后导入AE

4、制作动效


Image title


二、App的注意事项


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

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


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


这是源文件的部分截图

Image title


IphoneX的界面尺寸为1125px*2436px,由于之前直播时候忘记录屏,大家想要详细了解Iphonex的设计规范可以查看这篇文章 http://www.ui.cn/detail/302573.html


三、搜集灵感


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


Image title


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

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


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


3、留白

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


四、设计APP

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

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


Image title


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

Image title


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


Image title



五、制作动效


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


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


Image title


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


Image title


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

Image title


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

Image title


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

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

Image title


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


Image title




码字这么辛苦,真的不关注下吗???


版权申明:本文为我的原创文章,如有转载请附上作者和链接哦~



UILEO

UILEO群号码:534616383

5456粉丝/2关注

原创小生
 AE教程:食物界面动效设计点评:读书界面动效设计
3
灰色軌跡

程序员看了想打人

精彩!

UILEO

UILEO

UILEO群号码:534616383

原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN