回首2018年，付出最多精力学习的非动效莫属了，从起初AE到后面Principle，不仅掌握了一些动效技能还认识了一群志同道合的伙伴～

对于动效，我个人是蛮喜欢的，但是起初学动效只是希望界面能动，做一些简单的交互效果可以展示，并没有很好掌握动效的一些原则和技巧，也没有形成自己做动效的方法，很迷茫，经常不知道做什么。所以后续很开心的认识了@北北jiang和团队的小伙伴们，通过不断的开眼和练习，目前自己对于动效找到了属于自己的一套方法，回首2018年掌握的一些动效的基本方法，在最后一天做一个总结～

一、多看动效相关素材，寻找灵感。
每天都空闲时间就浏览一些我喜欢的动效相关的网站，回去搜集一些别人的动效，我个人比较喜欢的搜集到Eagle和花瓣，作为自己后续做动效的灵感库。
经常浏览的网站有：
Dribbble：https://dribbble.com/
Behance：https://www.behance.net
Ins：https://www.instagram.com/
muz.li每周推荐：https://medium.muz.li/search?q=UI%20Interactions
uimovement：https://uimovement.com/
微博：博主：UI设计-直接搜索动效
花瓣：直接搜索界面动效

二、画交互原型，确定跳转逻辑
确定主题后，根据自己以往搜集的动效素材给予的灵感确定跳转逻辑，比如说本次想
做一个阅读APP的进入详情页的一个动效，我会先去构思这个动效大概需要多少个页面可以完成，可以有哪些交互可以用在里面，界面有哪些元素，哪些元素有交互效果。画出一个交互原型图。这个步骤是我比较耗时的，也是比较重要的一个步骤，包括一些我想实现的交互细节我也会直接列示在交互原型图里面，比如概览页面点击进入详情页，点击元素不消失引导用户视觉直接进入详情页等等小细节（这个步骤基本上就已经把我们动效的整个步骤已经定下来了）

三、Sketch画界面
根据我们上一步完成的交互原型图去完成Sketch的界面视觉稿，需要注意的是这个步骤里，画好界面后，需要把动效中不需要变化的元素打组加*直接在Principle中变为一层，每个页面之中需要变化的相同元素，图层名称改为一致。（新版的sk文件后面加*可能导到principle里已经不能合层了，可以直接在sk里合成位图后再导出，选中文件夹然后按照下图操作即可，如果觉得像素不够可以先command+k放大200% 再合层 再缩小50% 就可以高清位图了）


四、导入Principle完成界面间的跳转（这个时候不考虑细节）
导入Principle中，先按照交互原型图将界面一点击某元素跳转到界面二，界面二点击某个元素回到界面一，点击某个元素跳转到页面三，完全不需要考虑细节，比如界面元素消失以及错帧等细节。

五、调整动效细节
在第四步完成了界面间的跳转，第五步主要完善细节，比如界面元素的消失，新界面元素的进入，调整错帧。

六、调整动效曲线
动效曲线的调整是可以代表每个人不同风格的，所以也是非常重要的，根据我们自身的喜好，逐渐可以形成属于自己的参数，每次根据自己的参数去调整缓动曲线的参数值，动效的缓动就是你的风格啦。当然这个动效曲线的设定也在遵循一定的规律，也要我们仔细去分析大神们的各种作品去总结，满满的形成属于自己的风格。团队的二萍小姐姐也有一篇关于如何通过缓动曲线形成自己的风格的相关经验分享，喜欢的小伙伴可以去看看

七、导出视频到PS内进行包装
在所有动效完成后，导出视频到ps内进行包装，包装也是很重要的一项内容，逐渐也可以形成自己的包装风格，并且可以复用，提成效率（我目前都采用的纯色系列的包装风格，2019年会尝试多一些的包装方式）

近期作品
目前仅仅掌握了一些方法，动效还在摸索中，希望大佬们多多提建议。

阅读APP界面动效：由首页Tabbar切换到图书发现界面，点击编辑精选图书进入详情页面，采用了双卡片引导用户视觉到详情页面，详情页面向上滑动图书名字和收藏按钮到顶部栏，最后点击收藏出现一个简单的情感化的爱心动效。


购物APP：使用原型图做交互灵感来源于Dribbble设计师Yaroslav Zubko，使用原型图展现了一套购物流程，可以很清晰的展现出用户流程的购买逻辑。

更多精彩图片 请登录

交友APP：通过左右缓动卡片的交互方式选择喜欢还是不喜欢，向右拖拽卡片为喜欢松手卡片向右飞，并且有爱心+1的反馈给到用户

更多精彩图片 请登录

美食APP：主要利用视差效果展现了界面之间的切换，增加用户使用过程中的趣味性

更多精彩图片 请登录

金融APP：主要利用蒙版作出金额的增长折线图，点击卡片进入卡片详情页

更多精彩图片 请登录

购物网页：主要利用视差切换效果，点击喜欢的物品会出现物品提示窗，点击进入详情页。

总结：
想做好动效，首先要明白为什么要做动效。
首先，动效一定要保证过程的流畅，不要为了展示动效时间过久，动效是为了提升用户体验的，不要为了做动效而做动效，不要让用户感觉反应迟钝缓慢。其次，动效可以提升整体界面的趣味性，设计是为了解决问题的，动效同样也是。以上是目前做到现在我做动效的一些方法，欢迎喜欢动效的小伙伴们一起多多交流～～

2018再见，2019你好！

回首2018年，付出最多精力学习的非动效莫属了，从起初AE到后面Principle，不仅掌握了一些动效技能还认识了一群志同道合的伙伴～

对于动效，我个人是蛮喜欢的，但是起初学动效只是希望界面能动，做一些简单的交互效果可以展示，并没有很好掌握动效的一些原则和技巧，也没有形成自己做动效的方法，很迷茫，经常不知道做什么。所以后续很开心的认识了@北北jiang和团队的小伙伴们，通过不断的开眼和练习，目前自己对于动效找到了属于自己的一套方法，回首2018年掌握的一些动效的基本方法，在最后一天做一个总结～

一、多看动效相关素材，寻找灵感。
每天都空闲时间就浏览一些我喜欢的动效相关的网站，回去搜集一些别人的动效，我个人比较喜欢的搜集到Eagle和花瓣，作为自己后续做动效的灵感库。
经常浏览的网站有：
Dribbble：https://dribbble.com/
Behance：https://www.behance.net
Ins：https://www.instagram.com/
muz.li每周推荐：https://medium.muz.li/search?q=UI%20Interactions
uimovement：https://uimovement.com/
微博：博主：UI设计-直接搜索动效
花瓣：直接搜索界面动效

二、画交互原型，确定跳转逻辑
确定主题后，根据自己以往搜集的动效素材给予的灵感确定跳转逻辑，比如说本次想
做一个阅读APP的进入详情页的一个动效，我会先去构思这个动效大概需要多少个页面可以完成，可以有哪些交互可以用在里面，界面有哪些元素，哪些元素有交互效果。画出一个交互原型图。这个步骤是我比较耗时的，也是比较重要的一个步骤，包括一些我想实现的交互细节我也会直接列示在交互原型图里面，比如概览页面点击进入详情页，点击元素不消失引导用户视觉直接进入详情页等等小细节（这个步骤基本上就已经把我们动效的整个步骤已经定下来了）

三、Sketch画界面
根据我们上一步完成的交互原型图去完成Sketch的界面视觉稿，需要注意的是这个步骤里，画好界面后，需要把动效中不需要变化的元素打组加*直接在Principle中变为一层，每个页面之中需要变化的相同元素，图层名称改为一致。（新版的sk文件后面加*可能导到principle里已经不能合层了，可以直接在sk里合成位图后再导出，选中文件夹然后按照下图操作即可，如果觉得像素不够可以先command+k放大200% 再合层 再缩小50% 就可以高清位图了）


四、导入Principle完成界面间的跳转（这个时候不考虑细节）
导入Principle中，先按照交互原型图将界面一点击某元素跳转到界面二，界面二点击某个元素回到界面一，点击某个元素跳转到页面三，完全不需要考虑细节，比如界面元素消失以及错帧等细节。

五、调整动效细节
在第四步完成了界面间的跳转，第五步主要完善细节，比如界面元素的消失，新界面元素的进入，调整错帧。

六、调整动效曲线
动效曲线的调整是可以代表每个人不同风格的，所以也是非常重要的，根据我们自身的喜好，逐渐可以形成属于自己的参数，每次根据自己的参数去调整缓动曲线的参数值，动效的缓动就是你的风格啦。当然这个动效曲线的设定也在遵循一定的规律，也要我们仔细去分析大神们的各种作品去总结，满满的形成属于自己的风格。团队的二萍小姐姐也有一篇关于如何通过缓动曲线形成自己的风格的相关经验分享，喜欢的小伙伴可以去看看

七、导出视频到PS内进行包装
在所有动效完成后，导出视频到ps内进行包装，包装也是很重要的一项内容，逐渐也可以形成自己的包装风格，并且可以复用，提成效率（我目前都采用的纯色系列的包装风格，2019年会尝试多一些的包装方式）

近期作品
目前仅仅掌握了一些方法，动效还在摸索中，希望大佬们多多提建议。

阅读APP界面动效：由首页Tabbar切换到图书发现界面，点击编辑精选图书进入详情页面，采用了双卡片引导用户视觉到详情页面，详情页面向上滑动图书名字和收藏按钮到顶部栏，最后点击收藏出现一个简单的情感化的爱心动效。


购物APP：使用原型图做交互灵感来源于Dribbble设计师Yaroslav Zubko，使用原型图展现了一套购物流程，可以很清晰的展现出用户流程的购买逻辑。

更多精彩图片 请登录

交友APP：通过左右缓动卡片的交互方式选择喜欢还是不喜欢，向右拖拽卡片为喜欢松手卡片向右飞，并且有爱心+1的反馈给到用户

更多精彩图片 请登录

美食APP：主要利用视差效果展现了界面之间的切换，增加用户使用过程中的趣味性

更多精彩图片 请登录

金融APP：主要利用蒙版作出金额的增长折线图，点击卡片进入卡片详情页

更多精彩图片 请登录

购物网页：主要利用视差切换效果，点击喜欢的物品会出现物品提示窗，点击进入详情页。

总结：
想做好动效，首先要明白为什么要做动效。
首先，动效一定要保证过程的流畅，不要为了展示动效时间过久，动效是为了提升用户体验的，不要为了做动效而做动效，不要让用户感觉反应迟钝缓慢。其次，动效可以提升整体界面的趣味性，设计是为了解决问题的，动效同样也是。以上是目前做到现在我做动效的一些方法，欢迎喜欢动效的小伙伴们一起多多交流～～

2018再见，2019你好！