App动效设计案例解析1(Pixate教程)

移动端的动效与音频设计一直都是被广大交互设计师忽视的，这与国内的大环境有关。像TAB旗下产品，优秀的动效设计也很罕见。反观国外优秀的手机应用如Facebook paper,Twwiter,Houzz,pintrest,snapchat中，优秀的动效设计让人眼前一亮，确实提升了产品的使用体验。google的Meterial design和苹果的移动端设计指南都有提到利用恰当的动效设计取悦用户，提高其使用体验。

动效设计的作用有以下几点：

1.引导暗示

移动端界面空间有限，很多元素无法在同一个界面完全展示。为了突出内容，辅助性的元素如工具菜单和导航等需要隐藏起来或者是放到另一个界面。那么当界面切换或者是调出辅助界面时，良好的动效设计可以起到很好的引导暗示作用，使用户在潜意识里了解界面的来龙去脉。

2.增强反馈

界面的及时反馈可以减轻用户在操作过程中的焦虑，实时了解程序当前的状态和操作的结果。对比于对话框和静态文字，动效更加直观高效。比如苹果app Store中安装软件的过程，圆环表示当前的进度，下载完成后转换成打开按钮。

3.提升操纵感

用户的心理模式是基于现实生活中的真实体验，直接与内容交互使iphone掀起了一场触摸屏的革命。如ibook中阅读电子书翻页时，模拟了真实世界中纸张的效果。

4.平滑过渡

界面的切换，多状态按钮之间的转换（例如“取消按钮”旋转45度转换为“添加按钮”）。动效可以减少界面之间的割裂感，提升应用的整体性。

但是，不恰当的动效也会适得其反，过长或频繁的动效可能会使用户感觉到卡顿或者产生视觉疲劳。

随着移动互联网的逐渐成熟，产品同质化越来越严重，优秀的动效设计可以与同类产品拉开差距，提升体验。那么我们要怎样去学习使用动效呢？以前Flash和After Effect是传统动效设计中使用的工具，当时对于一个新手而言学习成本过高，而且对于移动端的展示来说也是很不方便的。Pixate横空出世，很好的解决了这个问题，不久前被google收购变为免费，对我们广大屌丝新手来说确实是个好消息。Pixate成为了Google的儿子，那么接下来必定会与Android移动端开发结合，会有哪些大动作确实值得期待！国内的学习资源还比较少，我从Pixate官网上当下了一个案列，来为大家解刨它的设计思路，快快随我来学习吧！

放上成品先：

Keezy界面动效

Pixate软件可以实时和手机连接，查看设计效果，界面也很简单，容易理解。动效设计中的元素有：

1.Menu按键，点击后按键先扩大到一定大小模拟长按屏幕的效果后扩大到整个屏幕，透明度降低到75%。

2.BG blur背景模糊层，点击Menu见后，模糊层透明度由初始的0%到100%，逐渐遮挡背景，产生模糊的效果。

3.container层，这个层很有意思，它包含五个按键元素，初始时是看不见的，做了逆向旋转90度，缩小到0倍的操作。所以作为子集的五个按钮也是看不见的。点击Menu键后container层顺时针旋转90度，放大到一倍。层内的五个按钮由同一个位置直线位移到五边形的五个角，因为父层是旋转的，所以组合起来产生螺旋扩散的效果。

有点击Menu键，和点击container两个动作，这是一个展开和收起菜单界面的起因。展开和收起的动效互为逆向，这在Pixate操作中都有体现。为了大家更好的整理思路，特绘制了动效拆解图：

点击Memu键展开菜单

点击菜单按钮收起菜单界面

附件有两个文件，一个是成品文件，一个是包含素材用来练习的文件。

附件下载

提取密码：es6f