翻译自The Principles of UX Choreography

了解迪士尼和用户体验之间的交集以及米奇老鼠是如何一笔一笔画出来的会极大改变你对设计的想法。

我（作者）最近有幸和Glen Keane(迪士尼传奇动画师)一起上SXSW（译者注：西南偏南大会，Twitter应用就曾在SXSW上一举成名）。这篇文章是总结我们一起分享的内容。

在我成为UX设计师前，我以为我会成为一名电影片头设计师。在Carnegie Mellon学校，Dan Boyarski老师的引导下学习了一门名为《时间、动作、沟通》的课程。内容是全都是关于动态排版、节奏、颜色和运动。Dan老师习以为常的描述屏幕上的每一个要素如同它即是舞台上的演员一般——就像一个角色，我们给予他导演，赋予他行为和人格一般。

"你必须对舞台上所有（演员）的任何动作负责，包括进场、表演、谢幕。"

我们会不断地重新审视(动画)场景,给出理由这个角色为什么出现在那里以及它所扮演的角色是什么。时间和运动概念的引入，对我而言改变了一切。因为我意识到它可以给你『精确控制』你正在试图传达的情感以及观众将如何理解、消化你的消息。我经常在一些电影的片头中寻找灵感,因为我是着迷于30秒或3分钟的一段片头是如何具有为整个电影定下了基调的能力,而且预示着会发生什么。当找工作开始的时候,有一个美丽的意外导致我成为一名在R/GA公司旗下的交互设计者。我知道R/GA公司在片头设计领域有一段悠久历史。——虽然不清楚他们现在的重心是否仍然从事这块领域,但是我知道这里就是我心目中的伊甸园。我本打算申请一个视觉设计的位置,但却被调岗到了用户体验岗,所以任职第一天就不禁思考,“线框到底是什么东东? !”

快进到几年后:我已经创建了数以百计的线框图和成千上万的注释,描述它们如何工作和如何组合在一起。比如: 当用户点击菜单icon时,面板将从页面的顶部滑下来;当用户点击缩略图时,视频会放大到全屏。有时我也会困惑。我们被困在如何设计诸如极端状态应该如何表述以及如何更好的去表达工作中缺失的重要一环。当我们交付由这些静态页面组成的产品，譬如像一个主页的设计或产品页面或文章页面,我们只注释这些元素是如何配合的,我们并没有展示元素之间会发生什么。注释并不足以提供足够的上下文:我们不得不开始* *显示它。

画得线框图越多,我越意识到曾经学过的一切动作设计与我们作为用户体验和视觉设计师的角色是完全相关的。我开始更加关注每一天中的我参与的一切,我意识到最令人感觉流畅、愉悦、直观的经历总是在运动设计上融入许多细节。

迪斯尼与用户体验

如果我们要谈论动画和以及动画发源的地方,那就是迪斯尼。迪斯尼发展了动画的12原则,因为他们描绘现实的运动和情感投入的方式，让我意识到这是很重要的。迪士尼对现实生活中物体如何运动和表现有很深刻的理解。
。他们知道当一个观众观看屏幕时如果事物按他们预想的进行运动，他们感觉到这很自然。迪士尼也知道如果想吸引观众，他们必须抓住观众们需要情感投入的那个层次。这就是他们如何成为第一批动画师并创造出完整的故事片，牢牢抓住观众的心，并使笔下的一个个角色栩栩如生产生情感共鸣。逼近现实的动作，情感的投入以及极端状态的处理...这一切开始交汇一起。

如果将用户体验比喻为一场舞蹈，那么编舞则是由如何、为何、何时组成——关键时刻在用户体验方面，运用适当的动画技巧来吸引观众，可以在你和你的用户之间进行双向对话

用户体验的五原则

至关重要的一点是,用户体验师和视觉设计师不仅仅是使事物实用化和遵循最佳实践。同时我们也试图让这些经验令人愉悦,首先,从过往经历讲述一个故事。随着我逐渐逐渐把注意力转移到昔日的数码、技术是如何运用到动画中，我开始也慢慢观察到一种模式。我得出这5个原则，是因为我认为它们分别代表着用户体验方面最重要的沟通点，可以解决并克服极端状况下的沟通代沟，从而创造更闪光的使用体验。将这些要点拿捏得当是意味深远的，因为它会影响到人们的认知和信任你的产品，总的来说会缔造出更积极和更愉悦的使用体验。

NO.1反馈

反馈有助于展示用户的交互的结果,是否成功,以及为什么。通常用于呈现一件事情是正确或错误,如果页面在加载,如果你正取得进展,又或者你只是在简单的做选择。反馈是至关重要的，因为它和用户之间建立一种信任感，这使用户非常舒服而且愿意看到的！有效的反馈会帮助你在互动的时候建立一种触觉，让你忘记你或许不是在点击一块冰冷冷的玻璃屏，而是在屏幕上和有血有肉的元素在进行互动。有反馈的做事情总是很好的。但你针对反馈进行设计时，让用户感知反馈是显然易见是很重要的。在组合多层次、多元化的元素（视觉、听觉、触觉）对用户进行反馈是更具有效率的。

所以，迪士尼教会了我们什么？『夸张的手法』。Glen的描述『夸张的手法』不仅仅是肉眼所见，更是可以触摸得到的。你会常常（在迪士尼的动画里）看到一个个角色用一种夸大而且不容置疑的方式表达情感。

野兽逐渐变得沮丧和惊讶

他举了一个沮丧的野兽与美女的一个例子（来自《美女与野兽》），当她说她并不打算一起共进晚餐时，野兽耷拉着脑袋同时也拉长着眼睛了，让他看起来仿佛很惊讶。然后他的脸压扁了下来而且眉毛让他看起来很生气。观众甚至都根本不用看字幕是什么，因为微妙之处发生的如此之快，以至于最终结果是令人震惊，且完完全全是显而易见的。

反馈的例子：

iOS中密码的晃动:顶部简单晃动,清晰明了把(密码输入错误)信息反馈给用户。(上面第一张图)
Dots(手游app):把通过小点吧各部分不同层次简单、愉悦的关联到一起。(上面第二张图)
雅虎新闻：一个接一个的填充每个圆，随着阅读数的更新，进度逐渐完整，而且还得到基于阅读过程的全屏奖励喔。(上面第三张图)
Beats（音乐app）: 当你点中一个音乐类型，圈圈会胀大,而且各个类型之间是排排坐的O(∩_∩)O！(上面第四张图)
(PS:在[capptivate.co]（http://capptivate.co）有很多很棒的栗子)

NO.2正反馈

正反馈：是一种暗示，更是一种视觉上的启示。有助于传达给用户接下来可能的相互影响是什么、应该期望什么，以便于更好的理解(动画)是如何工作和无缝连接的。正反馈通过正确的动作顺序，使用户避免混淆和更好地达到(启示用户的)目标。帮助人们有明确的心理预期，即将会发生什么、应该如何应对，并提供暗示："注意咯，看这里！"或者"这里会下沉，别过来！"或"来，再拉过来一点点。"通常这都是些很细微的细节。。。。。人们甚至不会留意到(这些细节的)存在，更不用说日后回忆这些小线索会有所帮助。正反馈是微妙的，但很强大！当贯彻落实正反馈时，回报是巨大的。

迪士尼的期望原理有个非常简单的目标：给观众老爷们备好接下来会发生什么。

米奇张开双手的动作成为一个来描述大幅度甩手过来并抓住球的标志性符号。

为了传达这一原则，Glen先描述了一个非常简单的场景：米奇跨过一张桌子去拿一个球。第一帧中，他的手离他很近，而且米奇一直注视着桌子另一边的球；下一帧，米奇的手已经差不多摸到球了。这个简洁的手势，就是所有你需要说明的，对吧？手势下降的动作对观众来说是没有疑问的；在他们意识到之前，动作已经完成了。他们可能没有准备好你要做什么,即使看起来是辣么明显。通过花时间搭建一个米奇大大张开的双手场景框架来建立观众期望，横跨桌子的手势成为观众意识到有事即将发生的标志性符号

不能对观众失去耐心，他们只是在对理解到的内容进行反馈而已。

Glen分享的另一个期望的例子是电影《Duet》里面的场景：Tosh正在往下爬树。最初，Glen的安排是让Tosh(剧中男一)从树上跳下来。很快他意识到，这样的动作太快了以至于观众们都错过了。"你永远不会想要观众们落下(剧情)，"Glen说。所以他改写了这一幕，使Tosh先回头看了一眼Mia(剧中女一)，然后转过身子再慢慢爬下树。这个细节使故事有了截然不同的变化并且使观众对Tosh接下来要做的事情有更自然的感觉。

在微电影《Duet》里面有个美妙的插曲，当Mia(女一号)灵巧地跳进池塘，跟鱼儿们一起游泳/翻转时，随之脱离了水面和做了一个侧手翻。Glen描述这个场景为具有“磁力的”，(这个场景)回答了什么米娅在做什么，而且进一步推动剧情的发展。举个栗子，当她首次(从树上旋转)跳入水面时，画面有一个重要的改变细节 - 入水的泡沫就像她周围爆炸。他说，“总体的环境是很难改变的除非你制造一点冲击”。这些气泡有助于描述Mia在哪里(水里)，包围着她的鱼儿们则告诉观众她即将去哪，仿佛鱼儿们正在指引着Mia进入下一幕。我喜欢这个场景是因为环境的逻辑让你感觉到每一帧之间都是紧密串连在一起的，同时引导着观众们的注意力

—————————————分割线—————-—————