聊聊动效设计

上周我参加了谷歌的I/O大会，加入了一个关于跨平台设计的小组座谈，这一次会议有非常多有趣的新事物，让人有种第一次走在拉斯维加斯大道上一样的惊奇。

这次安卓大会上宣布了许多的改进，比如电池保护模式和新的锁屏通知。

也有更多的设备能够使用上安卓系统：智能穿戴设备、智能汽车、智能电视。以后当有人说到安卓时，安卓将不仅仅是让人联想到手机，而是会联想到更多诸如电视汽车等。

“如果没有约束，就不仅仅是设计——它是艺术” — Matias Duarte

Android L最突出的改变完全是明面上的，也就是新的“材料设计”（Material Design）语言，相比之前的设计，新的设计语言灵感来源于纸张，界面风格更加的扁平化，更加的跳跃同时色彩也更丰富。同时加入了非常多精美又流畅的系统动画，能够以60帧的速度优雅的完成每一处系统动画的切换。

而且这种设计语言并不只是单单用在新版的Android上，而是致力于让谷歌旗下的所有产品都能够有一个统一的设计风格，包括网页、车载平台，可穿戴平台等等，其实这一理念已经在Google+的客户端上出现过了，当然这背后还会有更多的控件和标志。

安卓I/O大会不仅仅是讲安卓和设计语言本身，更是暗示着一个跨平台、手机、电视、汽车等的未来。

"如果你是一个设计师，请学习动效设计。因为你需要设计60帧中A到B之间的58帧。"

— Paul Stamatiou (@Stammy) June 26, 2014

一年以前，我在工作中会使用一系列的工具来在自己的想法和设计通过特效、或者是搭建HTML/CSS/JS原型与手机设备进行交互中展示动画和过度效果。

"在工程中使用QC不仅会使工作更加简单，还可以让你设计活起来，让人可以很快理解这个设计的工作和含义。"

——Julie Zhou

我不会太深入的探讨如何去设计动效，但是有一些建议是肯定的：正确的、响应式的、有意义的、人性化的细节。

“精心设计的动效”可以有效的帮助用户集中注意力和引导完成所有步骤；当布局更改时可以避免混淆的排列元素、改善整体的美观程度。动画也是一种个性、一种表达的途径。“

几个视图中可以通过动效来串连在一起，例如谷歌在视图的变化中就使用了一系列小的过渡效果来表达转换和帮助用户理解层次关系。

Roman Nurik告诉了我们一个问题，一个功能强大的原型是你展示设计最好的方式。

不过在过去五年中，我们常常是将一连串的页面链接起来而已。在今天来说，原型对我来说是能在移动设备上使用的真正的程序———真实的转换、可拖动的元素、可滚动的区域、动画效果等等。

在过去，它可能需要使用耗费时间区使用像Adobe After Effects来制作效果，这种耗时间的事情可能会到你截稿的时候都不一定完得成。

现在有很多新的工具可以帮助你更高效的处理。

比如Polymer可以帮助你编排，我一直在使用framer，几乎每天都在使用JS来构建交互式原型设计。不过framer在小的测试上并不怎么好用，因为会有很多的工作量。

有其它的工具像pixate，它可以让你通过网页拖放的形式来构建你的原型然后在设备上查看。

当然以后还会有更多的更好用的工具，不过有一件事上肯定的，那就是把一个真正的原型放在你的团队面前是最有效的交流方式，不用再去向团队的其它成员解释”你点击这个，然后它就会加载、滑动….“

我们认为移动设备的设计师越来越多的时候，我们就越需要更强大和好用的工具。这样我们可以设计出更好的产品来吸引用户、帮助用户解决问题。