源文出处：http://developer.yahoo.com/ypatterns/pattern.php?pattern=animate#

　　今天看到Yahoo patterns上的一个Animate Transition原理，觉得很有意思，我用我的理解和语言大致翻译一下。

Rationale 基本原理

　　In our everyday world, objects occupy real space and don’t normally instantly appear and disappear. We throw a piece of trash into the trashcan and see it leave our hand and go through the air into the trashcan. In our interfaces, we do not need to mimic every movement from the real world. Interfaces would be dreadfully slow. But by using animation to show where an object came from or is going we can make it easier for the user to find the object again or feel confident in putting the object away in the future. Using animation to position an object in a grid confirms that it went into the slot. This type of feedback clarifies the user interaction.

译文：　在我们每天真实的世界里，目标物体占据了真实的物理空间，物体不会立刻的出现和消失。当我们把一片废物扔进垃圾桶的时候，可以看到废物从我们的手中离开，然后穿过空气，最后进入到垃圾桶当中。在我们的界面上，是不需要从真实世界中模拟每一个移动的动作，因为用界面来表现是很慢的。但是我们使用动画去显示目标从哪里移动来或是要移动到哪里去，用户再次去寻找目标就变得简单和轻松，或者用户在以后把物体移动到任何地方都会感到增加了信心。在表格中使用动画来定位一个目标，能确认它到达正确的位置。这种类型的反馈使用户的交互变得更清晰。

先看这个图，源文是动态的

　　其实像元素界面拖动来拖动去已经是很多地方在用了，像netvibes，Windows Live，像国内的chinaren，周伯通都用上了这样的Animate Transition技术。我想来对比说一下，真正清晰的交互是什么样子的。

　　一、打开 http://my.yahoo.com 右侧有几个item是可以拖动的。打开 http://www.chinaren.com 下面的内容也是可以拖动的。
　　二、Yahoo，鼠标移动到item标题的时候，鼠标形状开始变成windows默认的十字形，表示可以拖动。开始拖动，出现一个绿色的正方形，上面有一个对号，表示这个操作是对的；好了，再看chinaren，看星座占卜右侧有个麻点，可以拖动，鼠标移上去后显示了一行字，告诉用户去尝试这个行为，不过当我鼠标移到到左侧的三角键头的时候，依然是出现这行字。

　　区别：Yahoo把用户的动作行为嵌到了item的元素中，并在面板缩放、编辑、关闭有交互行为的时候用alt标签提示；而Chinaren用直白的文字提示用户。
　　
　　三、Yahoo，随意移动一下，往左，绿色正方形对号开始变成红色正方形禁止，很明显，不能拖动，往下移动，第一个item开始变透明，可以看到第二个item，再往下移，出现橙色块，马上明白，这个地方可以停下来；Chinaren，开始往下移动星座占卜，一样可以透明跌加，这个地方我是在尝试移动，可是那行字依然还在出现，OK，继续往下移，然后校园原创栏目自动往上移动，占了星座占卜的位置，空出了一片白，停下了鼠标，星座占卜停止了。

　　区别：Yahoo有操作提示，使用红和绿这两个色在界面中展示操作对和错，并有交互的焦点提示；而Chinaren没有焦点的提示，并主动使用跳跃式的item留出空白显示交互区域。

　　四、Yahoo的Item标题如果是子级页面的内容，会使用文字下划线表示链接；Chinaren的星座占卜确没有任何链接。

　　区别：标题的细节在于Yahoo标题的文字手形和移动操作十字形是分开的，而Chinaren是不分开。

　　看一下对比，其实、这就是可用性。

　　另有两条原则，不翻译了。

• Set the focus on the item that got changed. This enables assistive technologies to detect where a change happened. Of course if the user is typing or needs the focus in another area then this solution cannot be used.
• Provide ALT tags that preview what will happen when the user engages an interaction. For example, if you can close a panel and provide a way to communicate where the panel is collapsed to, you might consider putting text in the ALT for the image that tells the user what will happen when the click/activate the close icon and how they can get the panel open again.