您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

AE教程:食物界面动效设计

原创文章 分类: 教程 版权:
12459 217 384 14
2018-06-17
83.8
首页推荐



课前准备


高清播放视频地址

界面设计(上):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、制作动效


Image title




二、搜集灵感


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

Image title


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

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

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

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



三、设计APP



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


Image title


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



Image title


四、制作动效

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


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


Image title


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


Image title


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


Image title



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


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



微信公众号:jiaouiweb

UILEO

微信:hjj199394 交流群号码:519675228

11588粉丝/2关注

首页霸主诲人不倦人气明星砖家小有见解
教UI系列教程 - 炫光文字动效  教UI系列教程 - 鸡蛋融体动效
6
UILEO

文章说的是事实,昨天我也在群里说了这个问题,没有必要加的动效就别加,并且要考虑到实现成本等,但是我做的不仅仅是歪一下,卡片是跟随手势进行拖动,增强对用户的反馈,你看的文章说去掉不必要的交互东西能减缓用户的视觉疲劳,但是还有文章说增强用户反馈能使用户用的更顺畅,我没看过文章,不是因为他没用,而是文章大多千篇一律,并且现在的文章都是一块一块的去讲述,反而会使设计师做设计畏首畏尾,文章虽好,但是不要因为文章影响到你的设计(尤其是初学者),所以我很想提个的建议,只是我个人认为的:初学者别去老看文章,多看看设计就好,任何设计规则都是别人总结出来的,为什么你不能总结出自己的一套设计方法呢,等到你设计水平稳定了,去看看其他文章验证你自己的设计想法,弥补自己过往的不足会提高更快。

精彩!

UILEO

UILEO

微信:hjj199394 交流群号码:519675228

首页霸主诲人不倦人气明星砖家小有见解

扫描二维码
去手机端查看海报

UILEO

TA已经获得16枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

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