写给程序猿们的交互设计

不得不说，有太多程序猿或者美工（注意，是美工，真正的设计师不会这么干）误把技术当艺术、把漂亮当设计了，真正重要的交互部分反而被忽略，你可以看看，一大批的产品都是近乎静态的，许多操作诡异至极，诸如你想添加一个条目到列表里，它就生硬的出现在那；你想删除，它就直接消失。这样的产品经理，你们到底有没有考虑过用户的感受，有没有考虑过产品的感受，这种完全不合逻辑的东西也亏你们做的出。

当然，还有一部分产品是有交互的，但是，悲哀的是，那些交互完全被用作另一种形式的美化，天才知道那些人在想什么。

交互真正革命性的意义在于，它把时间这一魔幻般的属性带入静态的产品之中，通过对动作、速度、显现等等的定义，让产品的操作体现出真实感，使得用户能自然而然的理解每一个动作的含义。不过这不是那些高中时候整天泡妞、看不起书呆子的人能理解的。

一些简单的例子

这些例子的目的是向各位读者介绍动画的精髓，告诉各位读者时间轴和空间对于动画意义。而动画对于交互的意义不言而喻。

例：缓冲效果

以下三个 demo 展示了在最传统的动画中，如何通过控制关键帧来控制整个动画的效果。

在这三段 25 帧的动画中，设计师只需要定义第一帧、最后一帧和关键帧（第 13 帧），其余 22 帧由计算机自动填充，但是，计算机没想像中那么聪明，它只能线性的填充空白帧。优秀的动画师和动作设计师需要花费大量时间来学会如何控制计算机按照自己设计的效果工作。有兴趣的读者可以自己做些实验，本文重点在于阐述概念，所以不着过多笔墨于技术方面。

另一些稍复杂的例子：交互动画所能营造的真实感

这些例子的目的在于告诉设计师们，交互所能代替的一些旧功能以及实现以前所不能做到的功能。

例一 插入元素

以下是三个关于向列表里添加／删除元素的 demo，来展示不同的交互动画所产生的效果

Demo 1 没有进行任何加工，既生硬又粗糙，不能给人以任何自然的感觉。

Demo 2 添加了一些关键帧使得添加的动作顺畅了很多，这样的动画已经能给用户一些暗示了。

最后一个 demo 是最贴合自然状态的，就象我们平时把一本书插入书架一样，需要先腾出空间，然后再插入／取出。

例一最后一个 demo 的设计让人一目了然，因为这和生活中的动作完全相似，用户不需要其他提示就知道这样的动作所代表的含义。这样的交互动作在之前的非触摸屏上没有多大用处，但对于如今遍地的 APP 意义重大。

#p#

例二 展开／弹出菜单

同样是三个 demo，分别展示不同的展开效果所带来的不一样的感觉。

第一个是最典型的展开样式，但是不具有体验上的一致性，这个动作在现实中并不存在，所以没有办法让用户轻易的明白它的含义。

再观察下第二个，这样的样式是不是给了你更多的信息？

最后一个样式可以使关键内容突出，可以用来表示强调。

切记，不要试图把多种样式放在一个产品／功能中，这样会导致用户不明所以的。

例二后两个 demo 的设计可以代替老式导航栏，用户可以很容易记得自己的动作，从而知道自己所处的位置。

当然，所有的例子都不是万金油，需要视情况而使用。放在这里的目的只是让大家明白，干净利落但是逻辑性强的动画对于改善产品体验的作用。

想要更多的了解动画在具体产品中的效果，可以体验下Thinglist，这是我与 Kyle Bragger 合作为 Elepath 开发的一款产品。下图是该 APP 关于如何加载内容的示范。 

动作化界面的设计原则

你明白的，我不能把很具体的产品名字些在这，但是，有些产品的确是走极端了，一种是界面极端漂亮但没有一点交互，另一种是拿交互动画当装饰完全失去交互的本质。所以我列出以下几项原则来定义真正的交互：

一、 动画干净利落

二、 节奏一致、过渡自然

有些人的想法让我很无语，他们从不认为可以添加时间元素到界面中。难道，你们不知道交互能提供更多更有用的信息给用户么，还是你们觉得这样做对你们来说太复杂了？

起初，这份文档只是用来培训内部员工，后来我们觉得如果公开来讨论可能会更有用，而且我也愿意与更多同行交换意见。如果有兴趣可以在推特@pasql。或者在Branch参与我们的讨论。

读者福利：一些值得读或者看的材料（原文有四个链接，但其中两个已经无效，故只取以下两个）：

The Animator's Survival Kit by Richard Williams

Prologue - Designing Fictional Interfaces for Iron Man 2

译文链接：http://www.36kr.com/p/203418.html