编者按：看到这篇文章的时候，我发呆了，回到了学习网页的时候。那时候，我只懂编程，不懂设计。论坛大多在讨论怎么用Frame来分割页面，怎么做圆角，写一大段javascript代码或者做个flash就是为了让页面看起来更炫。后来css1.0、2.0相继出现，html4.04.1和现在的html5也逐渐取消了表示样式的标签。视觉传达的理念开始陆续进入程序员和产品经理的视线。从网页到现在的APP，在经历了残酷的成长阶段之后，只有那些功能和视觉传达同样出色的产品才能笑到最后。2007年，苹果给业界带来了耳目一新的感觉。此后，无数APP展现出近乎无限的惊人新概念。然而，并不是每一个新颖的想法都可以称为设计。设计师需要经过严格的训练才能将想法转化为最终的设计，而在整个转化过程中，无数的想法经不起仔细推敲。设计师花更多的时间去观察生活和自然。灵感不是随时都来的，但一个经过严格训练的设计师，能够将平凡的生活细节处理到设计中，最终创造出合格甚至优秀的产品。本文作者PasqualeD'Silva是Elepath的交互设计师和产品设计师。在这篇文章中，他从交互的角度阐述了一个优秀设计的一些品质，或者说，一个优秀的产品是如何做到与用户自然沟通的。不得不说，有太多的程序员或者美工（注意是美工，真正的设计师不会这样）把技术当成艺术，把美当成设计，而忽视了真正重要的交互部分。可以看到，大量的产品几乎是静态的，很多操作都极其诡异。比如你要在列表中添加一个item，它会直接出现在那里；如果你想删除它，它会直接消失。产品经理这样，你考虑过用户和产品的感受吗？你不能做这种完全不合逻辑的事情。当然，还是有一些产品是有交互的，但遗憾的是，那些交互完全是作为另一种形式的美化，天才知道那些人在想什么。交互真正革命性的意义在于，它把时间的神奇属性带入了静态产品中。通过对动作、速度、外观等的定义，让产品的操作体现出一种真实感，让用户自然而然地感受到。理解每个动作的含义。不过这可不是一个在高中整天泡妞，看不起书呆子的人能理解的。一些简单的例子这些例子的目的是向读者介绍动画的本质，告诉读者时间轴和空间对于动画的意义。动画对于交互的意义不言而喻。示例：缓冲效果下面三个demo展示了在最传统的动画中如何通过控制关键帧来控制整个动画的效果。在这三个25帧的动画中，设计者只需要定义第一帧、最后一帧和关键帧（第13帧），其余22帧由计算机自动填充。然而，计算机并没有想象中的那么聪明，它只能线性地填充空帧。优秀的动画师和动作设计师需要花费大量时间学习如何控制电脑按照他们设计的效果进行工作。有兴趣的读者可以自己做一些实验。这篇文章的重点是解释概念，所以我不会过多地关注技术方面。其他一些稍微复杂一点的例子：交互式动画可以创造的真实感。这些例子的目的是告诉设计者，交互可以替代一些旧的功能，实现以前做不到的功能。示例1插入元素下面是三个在列表中添加/删除元素的demo，展示不同交互动画的效果。Demo1没有任何处理，生硬粗糙，不能给人任何自然的感觉。Demo2加入了一些关键帧，让加入的动作更加流畅，这样的动画已经可以给用户一些提示。最后一个demo是最适合自然状态的。就像我们平时往书架上放一本书一样，我们需要在放书/取书之前腾出空间。例1最后一个demo的设计一目了然，因为它和生活中的动作完全相似，用户不需要其他提示就知道这样的动作是什么意思。这样的交互在以前的非触摸屏上用处不大，但对于如今无处不在的应用来说意义重大。#p#Example2扩展/弹出菜单也是三个demo，展示了不同扩展效果带来的不同感受。第一种是最典型的展开式，但在体验上并不一致。这个动作在现实中是不存在的，所以用户无法轻易理解它的含义。再观察第二个，这个风格是不是给了你更多的信息？最后一种样式可以使重点内容突出，可以用来强调。请记住，不要试图在一个产品/功能中放置多种样式，这会使用户感到困惑。例2中最后两个demo的设计可以替代老式的导航栏。用户可以很容易地记住他们的行为并知道他们在哪里。当然，所有的例子都不是万能的，需要根据情况使用。放在这里的目的只是为了让大家了解干净但合乎逻辑的动画在提升产品体验方面的作用。要详细了解动画在特定产品中的工作原理，请查看Thinglist，这是我与KyleBragger合作为Elepath开发的产品。下图是APP加载内容的演示。您了解基于操作的界面的设计原则。我不能在这里列出非常具体的产品名称。然而，有些产品确实走极端了。一种是界面极美但没有交互，一种是交互动画。当装修完全失去了互动的本质。所以我列出了以下原则来定义真正的交互：1.干净利落的动画2.一致的节奏和自然的过渡。难道您不知道交互可以为用户提供更多有用的信息，还是您认为这对您来说太复杂了？起初这个文档只是用来培训内部人员，后来我们觉得公开讨论可能会更有用，也想和更多的同行交流。如果您有兴趣，可以发推文@pasql。或者加入我们关于Branch的讨论。读者受益：一些值得阅读或观看的资料（原文有四个链接，但其中两个已经失效，所以只取下面两个）：TheAnimator'sSurvivalKitbyRichardWilliamsPrologue-DesigningFictionalInterfacesforIronMan2英文原文：medium.com翻译链接：http://www.36kr.com/p/203418.html
