lynda ux

by Rebecca Ussai Henderson

丽贝卡·乌赛·亨德森(Rebecca Ussai Henderson)

UX编排原理 (The Principles of UX Choreography)

迪士尼与UX的交叉以及为什么学习如何绘制米老鼠会改变您的设计方式 (The intersection of Disney and UX and why learning how to draw Mickey Mouse will change how you approach design)

Recently I collaborated together with Glen Keane, Disney animator and legend, on a talk at SXSW. This article is a summary of what we shared during the panel.

最近，我与迪士尼动画师和传奇人物Glen Keane合作，在SXSW上进行了一次演讲。 本文是我们在小组讨论中分享的内容的摘要。

Before I became a UX designer, I thought I wanted to be a title sequence designer. I took a course at Carnegie Mellon taught by Dan Boyarski called Time, Motion, and Communication. It was all about kinetic typography, rhythm, color, and movement. Dan used to describe every element on screen as if it were an actor on a stage — a character that we were directing, giving it behavior and personality.

在成为UX设计师之前，我以为自己想成为标题序列设计师。我在卡内基·梅隆大学(Carnegie Mellon)参加了由丹·博亚尔斯基(Dan Boyarski)教授的课程，该课程称为时间，运动和沟通。一切都与动力学排版，节奏，色彩和运动有关。 Dan过去通常将屏幕上的每个元素都描述成舞台上的演员，就像我们正在指挥的角色一样，赋予它行为和个性。

“You are responsible for directing each element’s entrance, performance, and exit.”

“您负责指导每个元素的进入，表演和退出。”

We would constantly revisit this sequence, giving reason to why a character was there and what its role was. Introducing time and motion changed everything for me, because what I realized was that it gave you precise control over the emotion you are trying to convey and how an audience will interpret your message. I’d often look to title sequences for inspiration because I was fascinated with how a 30 second or 3 minute sequence had the ability to set the tone for an entire film and foreshadow what was going to happen. When the job hunt began, it was a happy accident how I ended up as a UX designer at R/GA. I knew R/GA had a history in title sequence design — had no idea if they still did that now — but knew it was a place I wanted to work. I intended to apply for a visual design position but was nudged into UX, so started day one thinking, “what are wireframes?!”

我们将不断地重新审视这个顺序，从而给出为什么存在角色及其角色的原因。引入时间和动作改变了我的一切，因为我意识到，它使您可以精确控制要传达的情感以及听众将如何解读您的信息。我经常从标题序列中寻找灵感，因为我对30秒或3分钟的序列如何能够为整部电影设定基调并预示即将发生的事情感到着迷。当寻找工作开始时，我最终成为R / GA的UX设计师是一件很不幸的事情。我知道R / GA在标题序列设计方面有悠久的历史-不知道他们是否现在仍然这样做-但知道这是我想要工作的地方。我原本打算申请视觉设计职位，但被推向UX，因此从第一天开始思考，“线框是什么？！”

Fast forward to a few years later: I’ve created hundreds of wireframes and thousands of annotations that describe how things work and fit together. Things like: When the user taps on the menu icon, the panel will slide down from the top of the page. When the user clicks the thumbnail, the video will enlarge full screen. And then it hit me. We were stuck designing in these extreme states and a huge piece was missing in our work. When our deliverables consist of designing for these static comps like a home page or product page or article page and we only annotate how things flow together, we were completely failing to show what happens in between. Annotating doesn’t provide enough context: we had to start showing it.

快进到几年后：我创建了数百个线框和数千个注释，它们描述了事物如何工作以及如何相互配合。诸如此类的事情： 当用户点击菜单图标时，面板将从页面顶部向下滑动。 当用户单击缩略图时，视频将全屏放大。 然后它就撞到了我。我们被困在这些极端状态下进行设计，而工作中却遗漏了一大块。当我们的交付物包括为这些静态组件进行设计(例如主页，产品页面或文章页面)而我们仅注释事物如何一起流动时，我们完全无法显示两者之间发生的情况。注释没有提供足够的上下文：我们不得不开始显示它 。

The more wireframes I made, the more I started to realize that everything I had once learned about motion design was completely relevant to our roles as UX and visual designers. As I started to pay more attention to everything I engaged with day to day, I realized that the most fluid, delightful, and intuitive experiences were always the ones that put detail into motion design.

我制作的线框越多，我越开始意识到，我曾经学习过的有关运动设计的一切都与我们作为UX和视觉设计师的角色完全相关。当我开始更加关注日常工作时，我意识到最流畅，令人愉悦和直观的体验始终是将细节融入运动设计的体验。

迪士尼与UX (Disney & UX)

If we’re going to talk about motion and start somewhere, it’s with Disney. Disney developed 12 Principles of Animation which I find to be so important because of the way they depict realistic movement and emotional engagement. Disney had a deep understanding of how things move and behave in real life. They knew that when an audience would watch something on screen, they expected things to move in a way that felt natural. Disney also knew that if they wanted to captivate their audience they needed a layer of emotional engagement. It’s how they became some of the first animators to create full-length feature films that captured an audience’s heart and made characters feel believable and relatable. Realistic movement, emotional engagement, solving extreme states… that’s how this all starts to come together.

如果我们要谈论运动并从某个地方开始，那就是迪士尼。迪士尼制定了12项动画原理，由于它们描绘现实的动作和情感投入的方式，我发现它非常重要。迪士尼对事物在现实生活中的运动和行为有深刻的了解。他们知道，当观众在屏幕上观看某物时，他们希望事物以自然的方式运动。迪士尼还知道，如果他们想吸引观众，就需要一层情感投入。这就是他们成为最早制作全长故事片的动画师的方式，这些故事片吸引了观众的心，并使角色感到可信和相关。逼真的动作，情感投入，解决极端状态……这就是所有这些开始融合在一起的方式。

UX Choreography is a combination of the how with the when and why — the proper techniques of applying motion and captivating an audience combined with the most integral moments in user experience where you can start engaging your user in a two-way dialogue.

UX编排是如何与何时以及为什么的组合 -运用动作和吸引观众的正确技术以及用户体验中最不可或缺的时刻，您可以在其中开始双向对话。

UX编排的五项原则 (The 5 Principles of UX Choreography)

The biggest thing to take away here is that our job as UX and visual designers is not just to make things functional and follow best practices. We’re also trying to make these experiences enjoyable and, most of all, tell a story through experience sequences. The more I paid attention to how motion was applied in digital and the techniques that were being used, the more I started to see a pattern. I arrived at these 5 principles, which I feel address the most important communication points in UX, solve the gaps between extreme states, and overall create a more polished experience. Getting these details right is important because it influences people’s perception and trust in your product, which overall creates a more positive experience and enjoyable experience.

这里最大的收获是，我们作为UX和视觉设计师的工作不仅是使事物发挥功能并遵循最佳实践。我们还试图使这些体验令人愉悦，最重要的是，通过体验序列讲述一个故事。我对运动如何应用于数字以及所使用的技术的关注越多，我就越开始看到一种模式。我得出了这5条原则，我认为这些原则解决了UX中最重要的通信要点，解决了极端状态之间的差距，并总体上创造了更加优美的体验。正确安排这些细节很重要，因为它会影响人们对您产品的看法和信任，从而总体上创造出更积极的体验和令人愉悦的体验。

反馈 (Feedback)

Feedback helps demonstrate the result of a user’s interaction, whether or not it was successful, and why. It’s often used to show if something is correct or incorrect, if something is loading, if you’re making progress, or simply when you are making selections. Feedback is important because it builds trust with your users and it’s really satisfying and delightful for users to see! It helps add a tactile element to interactions because it makes you forget you may just be tapping a piece of glass and instead makes you feel like you’re interacting with real elements on the screen. It’s nice to feel like things are reacting to what you’re doing. When you think of designing for Feedback, it’s important to work on making it obvious to users. Feedback is more effective when multiple layers of elements are working together to react to what users do.

反馈有助于证明用户交互的结果，是否成功以及原因。它通常用于显示某些内容正确或不正确，正在加载内容，正在取得进展或只是在进行选择时。反馈很重要，因为它可以建立您对用户的信任，并且让用户看到它确实令人满足和愉悦！它有助于在交互中添加触觉元素，因为它使您忘记自己可能只是在轻敲一块玻璃，而使您感觉自己正在与屏幕上的真实元素进行交互。感觉事情正在对您所做的事情做出React，真是太好了。当您考虑为反馈设计时，重要的是要使其对用户显而易见 。当多层元素协同工作以对用户的操作做出React时，反馈会更有效。

So, what can Disney teach us here? Exaggeration. Glen describes exaggeration as something that is felt, not just seen. Often you’ll see characters react a big, unmistakeable way.

那么，迪士尼可以在这里教给我们什么？夸张。格伦将夸张描述为一种感觉到的东西，而不仅仅是看到的东西。通常，您会看到角色做出的React是大而正确的。

He illustrated an example of Beast getting frustrated with Belle when she said she wasn’t going to dinner. Beast’s face stretched up and his eyes widened, making him look surprised. Then his face squashed down and his brows looked angry. An audience doesn’t even notice the subtleties of what’s happening because it happens so fast, but it makes the end result feel like a jolt and completely obvious.

他举例说明了野兽对贝儿感到沮丧的时候，贝儿说她不打算去吃晚饭。野兽的脸张开了，他的眼睛睁大了，使他看起来很惊讶。然后他的脸压下了，眉毛看上去很生气。观众甚至不会注意到正在发生的事情的细微之处，因为它发生得如此之快，但是它使最终结果感觉像是震撼并且完全显而易见。

前馈 (Feedforward)

Feedforward: it’s a form of hinting. It’s visual affordance. It helps convey to users what possible interactions are and what to expect so that they better understand how things work and fit together. Feedforward nudges users through the correct sequence of actions so that they can avoid confusion and better accomplish your goals. It really helps prepare people for what’s about to happen and what to do, hinting at things like, “pay attention, look here!” or “you can drop that here” or “pull this a little further.” Often these are really subtle details… people may not even notice they are happening and recall what little cues helped them. Subtle, but powerful! The payoff can be huge when Feedforward is executed effectively.

前馈：这是一种提示形式。这是视觉上的负担。它有助于向用户传达可能的交互作用以及预期的交互作用，从而使他们更好地了解事物之间的工作方式和融合方式。前馈会引导用户按照正确的操作顺序进行操作，从而避免混乱并更好地实现您的目标。它确实有助于人们为即将发生的事情和要做的事情做好准备，并暗示诸如“注意，看这里！”之类的事情。或“您可以将其放在这里”或“将其进一步拉出”。 通常，这些都是非常细微的细节……人们甚至可能没有注意到它们的发生，并回想起小线索对他们的帮助。微妙而强大！有效执行前馈可以带来巨大的回报。

Disney’s principle of Anticipation has a very similar goal: preparing an audience for what’s about to happen.

迪士尼的预期原则有一个非常相似的目标：为即将发生的事情做好准备。

In order to convey this principle, Glen first illustrated a very simple sequence of Mickey reaching across a table to pick up a ball. In the first drawing, his hand was close to him and Mickey was eyeing the ball across the table. In the next drawing, Mickey’s hand was already on the ball. It’s such a simple gesture, that’s all you think you’d need to illustrate, right? The downfall here is that there is no enjoyment for the audience; before they know it, an action is completed. They may not have been ready for what you were about to do, even if it seemed so obvious when you were illustrating it. Taking the time to build anticipation by adding in an extra frame with Mickey’s hand wide open, stretching across table becomes a symbol to the audience where they realize that something is about to happen.

为了传达这一原理，格伦首先展示了一个非常简单的米奇序列，它伸手穿过桌子拿起球。在第一张图中，他的手靠近他，而Mickey在桌子上注视着球。在下一张图纸中，米奇的手已经在球上。这是一个简单的手势，这就是您认为需要说明的全部，对吧？这里的缺点是观众没有乐趣。在他们知道之前，一个动作就完成了。他们可能还没有为您要做的事情做好准备，即使您在进行说明时看起来是如此明显。花些时间在米奇的手张开处增加一个额外的框架来建立预期，在桌子上伸展成为听众的标志，他们意识到即将发生的事情。

“You can’t get impatient with the audience, they are just responding.”

“您不能对观众不耐烦，他们只是在回应。”

Another example of Anticipation that Glen shared was a scene in Duet where Tosh was climbing down the tree. Initially, Glen just had Tosh hop off. He soon realized, however, that everyone had missed it because it happened too quickly. “You never want your audience behind you,” Glen described. He redrew this scene and had Tosh first look back at Mia, then turn his torso back forward to go down the tree. That subtle cue made all the difference in the world and helped the audience naturally follow where Tosh was going to go next.

格伦分享的《期待》的另一个例子是杜特(Toet)在树上爬下的场景。最初，格伦刚刚让Tosh跳了下来。但是他很快意识到，每个人都错过了它，因为它发生得太快了。格伦说：“您永远不希望观众落后于您。” 他重新绘制了这个场景，让Tosh首先回头看了Mia，然后将他的躯干向后转，顺着树走下去。这种微妙的提示改变了世界，并帮助观众自然地跟随了Tosh接下来的去向。

空间意识 (Spatial Awareness)

Spatial Awareness helps orient users with their environment and clarify the relationships between every element. If you think about it, there are essentially unlimited possibilities to the fictional, digital environments you are creating. Every experience you make has a unique lay of the land… elements may “live” behind the screen, to the left or right, pinched in-between, in a drawer… anything your little designer heart desires. However, you need to make sure you give logic to your environment. It’s especially important to think this through on smaller screens where you’re forced to think about how to properly use the little screen real estate you have and how you can reduce complexity. Having this open canvas while designing an environment is great for you as a designer, but it means that users have to learn and understand what you made. They have to learn every environment they engage with. There’s always a period of onboarding and orientation. Users need to understand where things come from, where they go next, and where they can find them again. You really have to ease people through these transitions so they understand how they got from point A to point B so that it doesn’t feel like a stark, sudden change. Sudden change doesn’t exist in the real world! The main objectives of Spatial Awareness are orienting your users and giving logic to environments. Disney’s principle of Staging teaches us a lot about this.

空间意识有助于根据环境来定向用户，并阐明每个元素之间的关系。如果您考虑一下，您正在创建的虚构数字环境实际上就有无限的可能性。您所做的每一次体验都具有独特的地形……元素可能会“隐藏”在屏幕后方，左侧或右侧，夹在中间，放在抽屉中……您的小设计师心中所想。 但是，您需要确保为环境提供逻辑。在较小的屏幕上仔细考虑这一点尤为重要，因为您不得不考虑如何正确使用现有的小屏幕屏幕资源以及如何减少复杂性。在设计环境时拥有开放的画布对于您作为设计师来说非常有用，但这意味着用户必须学习和理解您的作品。他们必须学习与之互动的每种环境。总会有一段时间的入职培训和入职培训。用户需要了解事物来自何处，下一步要去哪里以及可以在哪里再次找到它们。您确实必须让人们轻松地完成这些过渡，以便他们了解他们如何从A点到达B点，这样就不会感觉到像一个突然的，突然的变化。现实世界中不存在突然的变化！空间感知的主要目标是定向用户并为环境提供逻辑。迪士尼的分期原则为我们提供了很多相关知识。

Glen often talked about how the placement of a character in a scene can create expectation. For example, if a character is far left, the open space to the right creates want, “and when you have want, you have something to work with.” It creates an intensity, as if something is about to click with the audience.

格伦经常谈论在场景中放置角色如何产生期望。例如，如果角色在最左侧，则右侧的空白区域会产生需求，“当您有需求时，您就可以使用某些东西。” 它创造了一种强度，就好像某种东西即将吸引观众。

There is a beautiful sequence in Duet where Mia jumps into a pond, swims and flips, then exits the water and does a cartwheel. Glen described the scene as having a “magnetic power” which responded to what Mia was doing and push her forward. For example, when she first hits the water there is a major change — the bubbles are like an explosion around her. He said, “You can’t change total environments without some kind of impact.” These bubbles help tell you where she’s been, and the fish that then surround her tell the audience where she is going next. It’s as if they are squeezing her to the next frame. What I love about this sequence is how the logic to the environment makes it feel like there is a connected thread from frame to frame, which guides the audience’s attention.

在二重奏中，米娅跳入一个池塘，游泳并翻转，然后离开水面并做一个车轮，这是一个美丽的过程。格伦形容场景具有“磁性”，可以对米娅的所作所为做出React并推动她前进。例如，当她第一次打水时，发生了很大的变化-气泡就像是她周围的爆炸。他说：“没有任何影响，您就无法改变整个环境。” 这些气泡有助于告诉您她去过哪里，然后环绕她的鱼告诉听众下一步她要去哪里。好像他们要把她挤到下一帧一样。我喜欢这个序列的原因是环境的逻辑如何使其感觉像是一帧从一帧到另一帧的连接线程，可以引导观众的注意力。

用户关注 (User Focus)

User Focus guides your user’s attention and clarifies change states. It’s all about controlling the transitions of hierarchy at each moment in time. It puts emphasis on the right elements depending on what the objective is. There may be multiple layers of elements working together to support that action. It may not always be as simple as bringing one element to the foreground when it’s need… maybe the background reacts too. It could fade a little or darken in order to give more prominence to the focus. You’ll often see a technique like the use of contextual controls — these important little actions you always want to have on hand — and you know they’re there — but you don’t necessarily have to see them all the time. They only come into focus the second you call for them.

“用户焦点”引导用户的注意力并阐明更改状态。这一切都是关于在每个时刻控制层次结构的转换。它根据目标是什么，重点放在正确的元素上。可能会有多层元素协同工作以支持该操作。它可能不一定总是像需要时将一个元素放到前台那样简单……也许背景也会做出React。为了使焦点更加突出，它可能会褪色或变暗。您会经常看到诸如使用上下文控件这样的技术-您一直希望手头上的这些重要的小动作-并且您知道它们就在其中-但您不一定必须一直看到它们。它们仅在您要求它们的第二秒才成为焦点。

User Focus helps bring Clarity to every objective in your experience. Clarity: admittedly this is not an official Disney principle! Let’s name this an honorary 13th. But Glen would tell me how this is one of the most important techniques he learned while at Disney. Eric Larson would always emphasize how they should never leave their audience behind.

以用户为中心有助于将清晰度带入您体验中的每个目标。 清晰度 ：诚然，这不是迪士尼的官方原则！让我们将其命名为荣誉13。但是格伦会告诉我这是他在迪斯尼期间学到的最重要的技术之一。埃里克·拉尔森(Eric Larson)会一直强调他们永远不应该让听众落伍。

“At Disney, I kept hearing about the plausible impossible,” Glen would say. There were moments were you could make someone believe something that may seem ridiculously crazy and they don’t question it. For example, in Little Whirlwind (1941), there was a scene where Freddie Moore was animating Mickey trying to hold down a basket of leaves that the whirlwind kept blowing away. All of a sudden, Mickey reaches into the center of himself and pulls out a huge hammer. It was so big because it was the only instance an audience was going to see it and was the most important thing in the scene at that moment. The audience doesn’t question why the hammer is there or where it came from because it’s what’s needed most in that moment. The plausible impossible makes you feel like you can break the rules a little bit.

格伦会说：“在迪斯尼，我不断听到这似乎是不可能的事情。” 有时候，您可以使某人相信某些看起来很疯狂的事情，而他们却不怀疑。例如，在《 小旋风》 ( Little Whirlwind ，1941年)中，有一幕，房地美(Freddie Moore)使米奇(Mickey)生气勃勃，试图压住一篮旋风不断吹走的树叶。突然，米奇伸手进入自己的中心，掏出一把巨大的锤子。它之所以大，是因为这是观众唯一会看到的实例，并且是当时场景中最重要的事情。观众不会质疑锤子为什么在那里或它来自哪里，因为那是那一刻最需要的。 似乎不可能的事情使您感觉自己可以稍微违反规则。

“If the audience is with you, they’re happy. If you lose them, no one is happy.”

“如果观众与您同在，他们会感到高兴。如果失去它们，没有人会高兴。”

语音品牌音 (Brand Tone of Voice)

I often tell people to think of this the same way we treat copy guidelines. Every project where we think about, “If a brand were to speak to us, what would it say?” we also need to start thinking, “If a brand were to move, what would it feel like?” Is it whimsical? Is it swift and powerful? Is it a subtle added detail that helps users recognize who exactly you are? Demonstrating your tone of voice leaves your users with these little moments where they feel like saying, “I could totally see this brand doing that” because it felt so right and appropriate.

我经常告诉人们以同样的方式来思考复印准则。我们考虑的每个项目， “如果一个品牌要和我们说话，它会说什么？” 我们还需要开始思考， “如果一个品牌要移动，那会是什么样？” 异想天开吗？它Swift而强大吗？它是一个微妙的附加细节，可以帮助用户识别您的真实身份吗？展示您的语气会让您的用户留下这些小小的瞬间，他们会说：“我完全可以看到这个品牌在这么做”，因为它是如此的正确和恰当。

Think about all of the apps, sites, and experiences you use day to day and why you keep using them. Often there are dozens of other apps out there that can do the same exact thing and accomplish the same tasks. They might all have a good user experience but the ones that people gravitate towards to something more. You feel like they delight you, or they enable you, or you get something out of it. They have more than just a good user experience. They have emotional appeal. Appeal is the last Disney principle we’ll reference. It’s one of the most magical, but admittedly can be difficult to design for.

考虑一下您每天使用的所有应用程序，网站和体验，以及为什么继续使用它们。通常，还有许多其他应用程序可以执行相同的操作并完成相同的任务。他们可能都拥有良好的用户体验，但是人们倾向于使用它们。您会感到他们喜欢您，或者他们使您满意，或者您从中得到一些东西 。他们不仅拥有良好的用户体验。他们有情感上的吸引力 。上诉是我们要参考的迪斯尼最后一条原则。它是最神奇的之一，但不可否认的是它很难设计。

“Appeal is a mysterious thing because you know when you’ve got it and you know it when you don’t have it but you have no idea how to get it.”

“上诉是一件神秘的事情，因为您知道何时获得上诉，何时不知道却知道如何获得上诉。”

Freddie Moore was an animator at Disney who was really responsible for creating the “look and feel” of Disney, Glen described. Before he came along, Mickey was “just a circle.” It wasn’t the Mickey we know today. Freddie started creating a relationship between every element in his characters. Frank Thomas and Ollie Johnston would often tell the animators, “Every line relates to another line.” When drawing Mickey, everything would follow a theme. You would start with the circle of Mickey’s head, then draw his nose so it pointed up and followed the curve of his head. His eyes came closer to the nose and relate to it, the followed by his eyebrows and mouth — which would come up and push against his cheek. Suddenly there was something about Mickey that you were drawn to. Mickey had the power to pull an audience in because he had appeal. Glen has this belief that every character already exists before you draw them. When you get it right, you recognize them and you are the one who brings the character into the world. When you have Appeal, you find those moments and it’s a beautiful thing when it all comes together.

格伦说，弗雷迪·摩尔(Freddie Moore)是迪斯尼的动画师，他实际上是负责创造迪斯尼的“外观”。在他出现之前，米奇“只是一个圆圈”。不是我们今天知道的米奇。弗雷迪开始在角色中的每个元素之间建立联系。弗兰克·托马斯(Frank Thomas)和奥利·约翰斯顿(Ollie Johnston)经常对动画师说：“每一行都与另一行相关。” 绘制米奇时，一切都会遵循主题。您将从米奇的头的圆开始，然后画他的鼻子，使其朝上，并跟随他的头部弯曲。他的眼睛靠近鼻子并与之息息相关，其后是眉毛和嘴巴-会抬起并推向他的脸颊。突然，您对米奇产生了兴趣。米奇有权吸引观众，因为他具有吸引力。格伦坚信，在绘制每个角色之前，每个角色都已经存在。当你做对的时候，你就会认出他们，并且你就是将角色带入世界的人。当您拥有上诉时，您会发现这些时刻，而当一切融合在一起时，这就是一件美丽的事情。

“That is the key to appeal. It’s like the harmony of elements… a chord that is perfect. You hear it and say, ‘that’s it.’”

“这是吸引人的关键。就像元素的和谐……完美的和弦。您会听到说，'就是这样。'”

These 5 principles are how you captivate your audience and how they interact with your story. It’s your responsibility to craft an experience sequence that is realistic and emotional, connecting all the keyframes in your work. This is where we start to solve for the missing pieces and define the characters in our work. But the characters we’re designing for aren’t just the ones on screen — we’re also designing for the human element — our main character is our user.

这五个原则是您如何吸引观众以及他们如何与您的故事互动的。您有责任制定一个真实而感性的体验序列，将工作中的所有关键帧联系起来。这是我们开始解决缺失部分并在工作中定义角色的地方。但是，我们要设计的角色不仅是屏幕上的角色-我们还在为人为元素设计-我们的主要角色是用户。

Whether it’s films, apps, sites, or books….no matter the context, the medium, the environment, our objectives are all the same. We’re all engaging with our character in a narrative, and it’s your responsibility to direct each character’s entrance, performance, and exit. The interface you are designing for is just a window into a larger story.

无论是电影，应用程序，网站还是书籍……。无论背景，媒介，环境如何， 我们的目标都是相同的 。我们都在叙事中与角色互动，而引导每个角色的进入，表演和退出是您的责任。您要设计的界面只是进入更大故事的窗口。

Designing for motion may be something new and unfamiliar, but we’ve all experienced these moments where you step into a new problem and are at a loss on how to solve it. Glen even shared how designing for Duet was an intimidating task at first — he was used to drawing on a piece of paper where if a character goes off the paper they are gone. But in this interactive experience where the audience could follow characters in every direction, it was as if he’d have to solve for an infinite canvas. That’s why having these principles in your back pocket is a great thing — they’ll serve as the foundation for any problem that may come your way.

为运动进行设计可能是新的和陌生的，但是我们都经历了这些时刻，在这些时刻，您遇到了一个新问题，并且对解决问题的方法感到困惑。 Glen甚至分享了起初对Duet的设计是多么艰巨的任务-他习惯于在一张纸上绘图，如果角色不在纸上，它们就消失了。但是在这种互动体验中，观众可以跟随各个方向的角色，就好像他必须解决一块无限的画布。这就是为什么将这些原则放在您的后兜里是一件很棒的事情-它们将成为可能遇到的任何问题的基础。

“I’m always doing that which I don’t know how to do in order that I may learn how to do it.” — Picasso

“我一直在做我不知道该怎么做的事情，以便我可以学习如何做。” - 毕加索

鳍 (FIN)

奖金：UX编排的制作以及我有幸与迪士尼传奇一起工作 (BONUS: The making of UX Choreography and how I was lucky enough to work with a Disney Legend)

Last year I had a simple goal: give a design talk on a topic I was interested in. It was as simple as that. Motion design is a topic I’ve always been interested in and find to be more and more relevant to what we’re doing today as UX and visual designers, so I put together a talk during an AIGA Mentor event last summer at R/GA (and was pretty happy just to accomplish that). I submitted it to SXSW not thinking anything else would become of it, but after a suggestion to find a Disney animator to collaborate with (where was I going to find that?!), a few attempts to reach out to people, a stroke of luck, a random introduction, and the stars aligning — I was introduced to Glen Keane, Disney legend. Glen worked at Disney for 38 years and was the animator behind the characters in some of our most beloved films of all time, such as the Little Mermaid, Beauty & the Beast, and Aladdin. He left Disney 2 years ago to see what else was out there and how he could apply his animation background to something else and continue to push himself (check out his work for Google’s Spotlight Stories, which includes his most recent animated short, Duet). When I told Glen about UX Choreography, he was interested immediately (!). You see, when he first joined Disney, the “9 old men” had to pass down their knowledge of Disney animation principles. “Some day you’re going to do bigger things than us,” Ollie Johnston told Glen. Glen felt like they had “passed the baton” to him. He never imagined that these Disney principles would be translated into something like UX, so he saw this as an opportunity to “pass the baton” to me. So once upon a time, we collaborated on an absolutely wonderful presentation at SXSW. I could literally go on for hours about the stories Glen shared and what I learned, but we’ll have to save that for another time!

去年，我有一个简单的目标：针对我感兴趣的主题进行设计演讲。就这么简单。运动设计是我一直感兴趣的主题，并且发现它与当今作为UX和视觉设计师的工作越来越相关，因此我在去年夏天的AIGA Mentor活动期间在R / GA上进行了演讲(并且很高兴能做到这一点)。我将其提交给SXSW，不认为会有任何其他变化，但是在建议找到迪士尼动画师与之合作( 我要在哪里找到它！运气，随机介绍和恒星排列-我认识了迪士尼传奇人物Glen Keane。格伦(Glen)在迪士尼工作了38年，是我们有史以来最受欢迎的电影中人物背后的动画师，例如《小美人鱼》，《美女与野兽》和《阿拉丁》。 2年前，他离开迪士尼，看看那里还有什么，以及如何将动画背景应用到其他事物上，并继续推动自己前进(查看他在Google的Spotlight Stories中所做的工作，其中包括他最近的动画短片Duet)。当我向Glen讲述UX Choreography时，他立即感兴趣(！)。您会看到，当他第一次加入迪士尼时，“九个老人”就不得不放弃了他们对迪士尼动画原理的认识。 “总有一天，您将要做比我们更大的事情，”奥利·约翰斯顿(Ollie Johnston)告诉格伦。格伦觉得他们已经“把警棍”传给了他。他从未想过这些迪士尼原则会被翻译成UX之类的东西，因此他认为这是向我“传递指挥棒”的机会。因此，很久以前，我们在SXSW上进行了绝对精彩的演示。我实际上可以花几个小时来讲述格伦分享的故事和我学到的东西，但我们将不得不再保存一次！

You made it this far, so thanks for reading! If you want more resources to get started here are a few, or tweet me @becca_u

您已经做到了这一点，非常感谢您的阅读！ 如果您希望更多的资源开始使用，请参考这里，或者在@becca_u上发给我

Find inspiration

寻找灵感

Many of the examples in this article were curated by Alli Dryer, check out her site to see dozens of great examples of motion in practice.

本文中的许多示例都是由Alli Dryer精心策划的，请访问她的网站以查看实践中数十个出色的运动示例。

http://capptivate.co/

other favorites:

其他收藏夹：

http://hoverstat.es/

https://instagram.com/userinterfacesio

More awesome reading:

更精彩的阅读：

https://medium.com/@pasql/transitional-interfaces-926eb80d64e3

http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/

Learn about Disney principles, then start making stuff

了解迪士尼原则，然后开始制作东西

http://the12principles.tumblr.com/

http://uxinmotion.net/

http://digg.com/2015/12-principles-animation-ollie-johnston-frank-thomas-alan-becker

翻译自: https://www.freecodecamp.org/news/the-principles-of-ux-choreography-69c91c2cbc2a/