一用Keynote，交互笑欢颜 - Keynote设计交互动效心

近来在研究交互设计的过程中，渐渐发现动效对于交互设计，或者说对于互联网产品尤其是app和web来说越发的重要，有的时候甚至能起到画龙点睛的作用。对于用户来说，动效能够帮助他们理解页面元素的来龙去脉，从而避免在繁杂的页面跳转中迷失；对于设计师来说，动效能够帮助我们将产品交互的更加流畅，能够解决一些静态元素在美学方面的先天性缺陷，当然，优美流畅的动效也会为用户提供好的用户体验。我在自学动效设计的过程中，研究了（瞎玩）市面上几个主流的动效设计工具，AE,Origami，以及Keynote，三者各有优势。AE能够设计出三者中最优美流畅令人愉悦的动效，追波behance中那些酷炫叼炸天的动效大多出于此君，但一方面对于非美术设计(本人专业交互设计)出身的我来说，AE的学习成本过高，另一方面在实际产品设计中，那些酷炫的动效基本上不会被用到，原因牵扯到很多诸如是否符合情景、以及成本等问题，值得单独写一篇来扯皮，本文不细述。Origami，facebook团队的设计利器，一时被各大设计团队追捧，诸如不用代码就能完成复杂动效，导出code可以无缝隙让开发汪们拿来使用等牛叉功能让一大批不明真相的围观交互们感叹春天来了，终于不用用手语向那些死开发们表达我们想要的酷炫动效了……然而我们too young to naïve!当我下好origami并颤抖着双手跟着官方教程走了一圈后，我感到了来自非死不可的深深恶意！Origami真的是不用编程！但是你要有颗有着严谨逻辑思维能力的脑纸才行啊！！！各种线连连看穿来穿去的让我感叹脑子不够用，而且让我的mac air不到5分钟就烫的不得了 （听说pro也如此）！同样，时间成本、学习成本过高。没有天赋的我选择放弃。

Keynote，一款ppt制作工具，看过WWDC或者老罗相声秀的人都能够了解它的美妙把。网上关于keynote制作动效的文章很多，最让我坚定学习keynote的是一个视频，牛人用keynote模拟安卓Material的动效(http://v.youku.com/v_show/id_XODU0MDQ3NDY0.html )，从中可以看出keynote的强大之处。学习成本低：做过ppt的都知道里面有些现成的动作效果设置工具，淡入淡出啊，移动啊，还有一个牛逼的页面过度效果叫神奇移动，好用到爆；时间成本低：页面跳转动效，包括页面内容的移动交互，其实是app设计中最常用到动效的地方，我在第一次实践中花了少于1小时的时间就制作完毕了，虽然很粗糙，但对于拿来与开发沟通帮助开发理解我想要的效果这方面来讲，完全够用。下面就用我的第一个动效作品来帮助大家理解keynote制作动效的特点。

页面跳转的逻辑是在评价列表中点击某条商品，然后进入到此商品的评价页面。当用户点击此条商品后，其他的商品消失，然后此条商品停留并向上移动，同时评价选项显示出来，这样的动效能够帮助用户理解我将要评价的是哪条商品。

下面是制作步骤：

1. 设置面板尺寸

750*1334， 是iphone6 的尺寸，我们在自定义尺寸里设置

2. 将需要的页面UI图片过拽到面板里，和ps以及sketch的逻辑类似

3. 设置你要的交互动效，此处是重点，首先，你要将你想要的动效顺序按时间先后罗列出来，就像做饭一样，第一步需要干什么，需要多长时间，第二步需要干什么，需要多长时间,如下图……

4. 将你的动效逻辑表现出出来，下图是keynote的动画效果设置面板，当“评价”按钮点击后，按钮和其他商品渐隐渐现效果消失，持续时间0.2s; 后续的动作是指定商品栏上移，同时评价页面上移的效果出现；每个动作的起始条件，持续时间，以及构建顺序（即动作顺序）需要预先设计好，并在制作过程中通过预览来测试和调整。

Keynote能够精确实现不太复杂的动效，并能够不太粗糙的实现复杂的动效；不太粗糙具体指的是类似于加速效果等非常精准的动效，但对于作为高保真原型拿来与开发以及产品经理、客户等沟通这一点来说，keynote完全可以胜任。在以后的文章中，我会详细的将我学习keynote设计动效的过程呈现出来，希望可以和大家交流、提升。