提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
课前准备
高清播放视频地址
界面设计(上):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、展开到内容页面的过渡
码字这么辛苦,真的不关注下吗???
版权申明:本文为我的原创文章,如有转载请附上作者和链接哦~
微信公众号:LEO的Blender的课堂
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册