最抢眼的6个方法！如何让交互过程变得惊喜有趣？

二、灵动的动效

　　如今动效设计越来越被重视，尤其是在ios 7发布之后，一个优雅、灵动的动效，成为很多优秀app的标配。

　　首先让我们来一起思考一下，为什么要设计动效？是为了好看、酷炫、还是流行？这些当然都是，但是最重要的是，有意义的动效，可以解释应用的逻辑、层次和交互机制。动效是可以帮助用户理解应用的。恰当的应用动效，可以替代大段的文字，阐述应用的含义。比如ios 6中删除图片的那个动效，照片飞入垃圾桶，然后垃圾桶盖上盖子抖一抖，非常生动的传达了删除照片的含义。

　　最典型的利用动效表现产品逻辑的地方，就是转场动画，大家对于这样的动画再熟悉不过了，下一层级的页面，一般会从右侧覆盖进入，返回上一层级页面，会向右侧滑动退出，这种转场动画很好的营造出一种空间感和逻辑感。

　　Yep是一个基于地理位置的交友app，用户可以发起一个聚会，吃饭、喝茶、运动或者其他什么。比如用户选择了“就餐”，其他选项收缩淡出，“就餐”图标移位并变成地图上的一个图钉。“就餐”图标的变化过程可以将前后两个界面无缝的衔接起来，阐明了基于地理位置的筛选机制，表达出“在这个位置就餐”的明确概念。在地图界面中点击“OK”按钮，界面元素淡出，地图整体向后退去，融入到雷达一样的动效当中，圆形扫描区域所代表的就是以用户当前位置为中心的50 公里半径范围。这一连串的动效，实现了界面之间的平滑过渡，也阐明了应用所要表达的逻辑。

Yep用动效表达逻辑

　　视觉设计可以还原物理世界的真实感，动效也可以。比如Flipboard的翻页动效，给人一种硬纸板的感觉，iBook的翻页动效，给人一种柔软纸张的感觉，这种不同的材质感，都是通过动效来表现的。

用动效表现材质

 　　用动效表现材质，不会增加用户的视觉负担，在操控上更有真实感，所以就算拟物化的视觉设计已经慢慢在衰退，具有真实意义的动效却得以保留。

　　细节处的小动效可以为产品增加亮点，带来惊喜的体验。就像Tumblr点赞的动画，红心飘起来时，就像飞了一个吻，让人感觉心花怒放，取消点赞时，心都碎了。这种小细节让人爱不释手。

Tumblr的动效设计

　　利用动效速度的微妙变化，可以表现出应用的风格。快速可以体现灵活轻盈，慢速可以体现优雅委婉。如卯榫体现传统文化，动效缓慢优雅，slingshot是一款阅后即焚的即时通app，快速的动效体现了它敏捷迅速的风格。

　　无论是快是慢，两款app的动效都有慢入慢出的效果，体现出真实世界物体的惯性规律。不同的动效节奏会给用户带来不同的感受，但运动规律应该遵循现实的运动规律和节奏。符合基本运动规律，先快后慢、先慢后快、匀速、自由落体等，基本都有现实的运动事件做参照。