课前准备

高清播放视频地址

界面设计（上）：https://www.cctalk.com/v/15288086928126

动效设计（下）：https://www.bilibili.com/video/av24912198

必须下载的素材

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

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

点评模式：下周末（2018/6/24）我会抽取部分作品进行点评，并对其设计方向给出建议，希望大家练习的模式会越来越成熟，谢谢大家支持！

上周点评地址：http://www.ui.cn/detail/367458.html

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

一、确定所需要的操作

1、搜集灵感

2、设计App

3、切图后导入AE

4、制作动效

二、搜集灵感

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

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

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

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

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


三、设计APP


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

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

四、制作动效

这里说下大概的步骤，请完整看完后再看视频哦，

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

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

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

码字这么辛苦，真的不关注下吗？？？

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