每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
Hi运动 Apple Watch 融合动效教程，交流 QQ群号：431014460（暗号：UI中国）
如果大家觉得视频模糊，可以到趣达官网观看：
http://ask.qduck.com.cn/course/detail/id-781
不知大家看到Apple Watch的界面有没有觉得很高大上啊！？
那种微妙的波动效果简直不能太酷炫！
今天就为大家准备了
Hi运动Apple Watch的融合动效教程
这可是分分钟能拿去装x的技能啊！
简单又实用，Get!!
以下是教程主要步骤：
一、准备材料
所需软件：AE、PS
所需素材：Apple Watch 的背景图、参考图（文章底部下载）
二、动效制作的原理及关键步骤（具体操作请看视频哦）
首先，设计一个动作之前可以参考生活中的真实运动轨迹或者国内外大师的示例作品，这就是传说中的“抄”，作为初学者，不先“抄”，何以“超”？
以下是创作思路：
1.设计动效的必要性
在设计动效之前，要问自己，是否有必要做动效？
例如，在苹果手表上，屏幕尺寸大小十分有限，用手指触摸互动是一件很痛苦的事情，曾经有个用户反映，使用智能手表最麻烦就是每次抬起左手到下巴，然后用右手去点屏幕，持续10秒就有举哑铃的酸痛感。
因此，从这个层面来看，就有必要做一个动效。因为在语音和手势交互技术还没成熟的情况下，一个小小的动效可以吸引用户，分散注意力，减轻排斥感，也就是可以提高用户的交互体验。设计应结合产品而定，例如可以根据动效幅度大小，元素大小和色彩对比等方面去调整。
2.动效效果
设计之前先把关键的地方考虑好动效的效果
跳转
提醒
激活
3.做一款动效背后的交互引导
交互的方式有很多种，是引导用户刷新下拉，还是引导点击跳转，还是引导左右滑动切换，这时就要考虑用户的使用习惯，最保险的做法就是尽量让交互与用户预期保持一致。
4.制作过程中该遵守的动效原则
时间
一定不能让用户等待加载动效，所以动效一定是快速的，并且动作流畅，一气呵成，
一般设置150-400ms，最佳的是150-200ms（仅供参考）
动作
尽可能避免在同一个画面中出现不同的动作，因为屏幕小的话，多个动作会让人感觉整个画面凌乱无序，没有统一性。
方向
动效的方向应该保持统一，整齐和有序。这样做的好处可以减少一些不确定因素的BUG，因此，可以尝试统一向上，统一向下，放射性发散，向中心集中和同频率波浪形运动等动效。
运动规律
在真实的世界里，物体的运动是受到三个因素影响而呈现非直线运动：地心引力、周围物体、摩擦阻力，因此在制作动效的时候也应该考虑这三个因素并尽可能地模仿参照真实世界里的动作变化。
以下这个教程视频的第一章，主要应用了水银扩散-融合的动作，这里的考虑因素上面有讲，如果使用选项卡排列的方式，感觉没有视觉的突破，于是尝试使用融合动效。
这种动效同样适用于一级导航下有多个选项，层级之间属于从属关系，而从属元素较多并且并列关系的地方。当然，既然是模拟了水状的动作，制作一个水瓶形状的进度加载器也是可以的。
如果这个视频还有其他的应用，欢迎同学挑战。
Ps：视频里所用的元素色彩对比度比较强烈，方便初学者观看视频的时候能快速找到对应元素，在最后渲染时整了一下，效果大致是这样：
好了，说了这么多，其实是想让大家从理论上知道动效的来源，而不是单纯地照葫芦画瓢。下面是图文的重点关键步骤，具体可以看视频操作：
如果有小伙伴想了解更多的教程细节或资讯
欢迎访问 http://ask.qduck.cn
带领新人从了解行业需求、用户画像，到原型刻画、界面设计
通过一个案例掌握入职互联网行业的秘诀！
有问题的同学可以留言提问
记得交作业哦！
么么哒~
全部评论：30条
-
-
-
-
-
-
-
-
-
-
-
-
-
陈趁辰晨尘闻雯汶玟文
2017-02-27 13:59@趣达学院: 我试了好多遍，发现视频教程里面用的素材可能和导出的有一点出入。背景的圆是带有透明度的，我自己在PS里面重新画了一个圆，不要透明度，解决了。
-
-
-
-
-
-
胖西红柿
2017-02-24 19:17不能观看超清的而且也不能跳转到bilibili！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
-
-
-
-
-
-
趣达学院
2017-02-22 19:08@120931454: 这个问题有点宽泛了。但大体来说，涉及表现层级关系，提示作用，吸引用户注意力的或者增强反馈的地方都可以考虑做动效效果，当然了，这个需要结合产品需求而定
-
-
-
-
-
更多作品
发表评论