AE教程:数码电商界面动效设计

原创文章 分类: 教程 版权:
8804 141 285 12
2018-07-08
65.5
首页推荐


课前准备


在7月10日会带着大家花2-3周做一套车机的设计 http://activity.ui.cn/lynk 从规范制定到动效然后包装设计,欢迎关注!


---------------------------------------------------------------------------------

活动时间
7月8号-7月15号下午5点
将会在5点把点评和下一期教程一起发出
有问题可以在群里讨论和交流,不懂也可以来要教程看看


高清播放视频地址
界面设计(上):https://www.bilibili.com/video/av26116050/
动效设计(下):https://www.bilibili.com/video/av26344492/

必须下载的素材
本文所需要的素材和pdf  网盘下载


Image title

Image title



一、确定所需要的设计

这次我们设计一个数码电商页面,还有其动效

Image title



题目:数码电商页面

内容:首页需要有logo,菜单icon,图片,标题和价格。详情页需要有产品图片,标题,简介,价格,颜色选项以及其按钮。

提交:根据这次主题做出ui界面,然后将动效设计传到UI中国后,将其链接放到群文件中点评后选出最佳作品发放价值200元奖品,希望大家认真对待每次练习


Image title



二、简单介绍下如何制定规范,根据制定的规范去做设计


需要注意几点:

1、规范只是作为参考,有些特殊情况可以不用遵照规范去做

2、在规范中设定颜色等可以去看看优秀的设计,提取他们的关键元素,“颜色,字体,字号,字间距,行间距,内容间距”都是可以提取的

3、还有些问题在视频都有说明:https://www.bilibili.com/video/av26116050/


Image title

Image title


在这次设计我给你们找了一些参考,可以按照他们的排版参考后进行设计,可以下载pdf文件放大看


Image title



三、AE制作动效


介绍一下这个运动的过程

1、上滑首页后消失banner

2、点击卡片后过渡到二级页

3、二级页的出现效果


Image title



四、如何更方便的用AE直接转gif


很大一部分人都是导入到ps中保存gif,或者是用AE的插件GIFGUN去转换gif,其实AE内有自带的一个渲染选项,只需要下载Adobe的一个软件“Media Encoder CC 2018”一定得2018cc 的版本,可去百度或我网站进行下载

假如导出Gif有残影需要先导出视频文件后在转换成GIF,具体操作可见视频最后的部分:https://www.bilibili.com/video/av26344492/


Image title

Image title


五、设计完成进行提交

努力的人运气都不会差


Image title


最终效果


Image title



上周点评地址:http://www.ui.cn/detail/373493.html
希望大家能一起进步

版权申明:本文为我的原创文章,如有转载请附上作者和链接哦~
也欢迎加入设计群, 一起交流设计

UILEO

UILEO群号码:534616383

6191粉丝/2关注

原创小生
UI中国车机比赛活动“启动篇”点评:旅行界面动效设计

UILEO

UILEO

UILEO群号码:534616383

原创小生

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