每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
课前准备
高清播放视频地址
界面设计（上）：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、展开到内容页面的过渡
码字这么辛苦，真的不关注下吗？？？
版权申明：本文为我的原创文章，如有转载请附上作者和链接哦~
全部评论：14条
-
-
-
-
UILEO
2018-06-22 15:19@姜一: 文章说的是事实，昨天我也在群里说了这个问题，没有必要加的动效就别加，并且要考虑到实现成本等，但是我做的不仅仅是歪一下，卡片是跟随手势进行拖动，增强对用户的反馈，你看的文章说去掉不必要的交互东西能减缓用户的视觉疲劳，但是还有文章说增强用户反馈能使用户用的更顺畅，我没看过文章，不是因为他没用，而是文章大多千篇一律，并且现在的文章都是一块一块的去讲述，反而会使设计师做设计畏首畏尾，文章虽好，但是不要因为文章影响到你的设计（尤其是初学者），所以我很想提个的建议，只是我个人认为的：初学者别去老看文章，多看看设计就好，任何设计规则都是别人总结出来的，为什么你不能总结出自己的一套设计方法呢，等到你设计水平稳定了，去看看其他文章验证你自己的设计想法，弥补自己过往的不足会提高更快。
-
-
-
-
-
-
-
-
-
更多作品
发表评论