APP食物界面动效设计—AE动效教程

APP食物界面动效设计—AE动效教程
日期:2018年7月2日10:40:07 分类:After Effects教程  UI教程 评论:发表评论

今天精品UI给大家带来的ui设计教程是一篇AE教程,教程内容

课前准备

高清播放视频地址

界面设计(上):https://www.cctalk.com/v/15288086928126

动效设计(下):https://www.bilibili.com/video/av24912198

必须下载的素材

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

 

一、确定所需要的操作

1、搜集灵感

2、设计App

3、切图后导入AE

4、制作动效

APP食物界面动效设计—AE动效教程

 

二、搜集灵感

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

APP食物界面动效设计—AE动效教程

从这些设计中可以发现一些共同点

1、图片漂亮
图片非常重要,需要将所有图片统一,假如认为自己找不好的话可以挑选白底或者淡色的图,可以让整体保持整洁

2、主体内容突出
整个页面没有其他的元素,有些只有美食图片,有些只有图片和一些简介

3、字号节奏
标题和内容文字的字色和字号差的都很大,可以让界面更有设计感

 

三、设计APP


首先我们确定所做页面的内容
首页的布局为大标题、食物卡片(图片、标题、简介、价格、数据、点赞)、导航
内容页的布局为图片、标题、简介、价格、数据、评论、点赞和购买按钮

APP食物界面动效设计—AE动效教程

这里建议初学者自己去设计一遍,可以对设计感和设计细节更好的了解
这里把标注放上

APP食物界面动效设计—AE动效教程

 

四、制作动效

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

APP食物界面动效设计—AE动效教程

2、首页的变化主要为卡片的位移,注意卡片锚点的位置

APP食物界面动效设计—AE动效教程


3、展开到内容页面的过渡

APP食物界面动效设计—AE动效教程


今天的UI教程就到这里结束了,更多精彩内容请持续关注本站

    A+

发表评论

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