本文作者 Rebecca Ussai ?，成文于她和迪斯尼首席動畫師 Glen Keane 在 ?SXSW panel 合作的一次干貨分享之后，文章討論了 UX 設計師能從迪斯尼動畫設計學到的 5 大原則，干貨滿滿！

Rebecca Ussai 是一名用戶體驗設計師，而在這之前，她本想成為一名片頭設計師的，曾就讀于卡內基梅隆大學，上過一門叫做《Time, Motion, and Communication》的課程，課程主要教授動畫字體、節奏、用色和運動的一些知識。那時候，老師說過的一句話讓她印象深刻，「如同舞臺上的演員，我們作為導演需要對屏幕上的每一個元素進行動作編排，并賦予其個性?！?/p>

那時候，Rebecca Ussai 會一遍又一遍地檢查視頻序列，就是為了搞明白每一個人物設定存在的意義，這個角色出現的場景設定啊，這個角色設定合適嗎？引入時間和動作這兩個維度，使她在設計上有了很大的提高，因為她發現，這兩個維度的引入讓她從細節上對情感傳達和觀眾消化信息的方式有了更好的把控。她經常研究一些時長為 30 秒至 3 分鐘的短視頻片頭來獲取靈感，對于一個短片如何能在如此短的時間里奠定整個電影基調甚至進行一些劇情暗示非常著迷。后來找工作，本來是申請視覺設計，結果陰差陽錯進入 R/GA 成為了一名 UX 設計師，于是開始接觸線框圖。

干了幾年 UX 設計之后，Rebecca 大概創建了好幾百個線框圖，寫了好幾千條注釋說明，就是那種「點擊菜單按鈕，會從頁面頂部下拉展開」，「點擊縮略圖，視頻會全屏展示」的注釋說明啦。然后有一天，她突然意識到，在各個界面狀態切換之間好像缺了點什么。是啊，于是她開始反思，之前的工作就是設計一些首頁、產品頁，文章頁這樣的靜態頁面，然后用文字標注一下他們是如何進行交互的，但這種方式很難展示實際發生的交互。靜態的文字無法提供充分的情境，需要用其他方式來展示這些動態交互。

干 UX 這行的時間越長，Rebecca 就越加意識到，之前學習與動畫設計相關的所有專業知識都為她的 UX 設計和視覺設計工作息息相關，為她的工作帶來很多好處。日復一日的設計工作讓她意識到一點——最為流暢、讓人愉悅，最為直觀的體驗還是那些充滿細節的動畫設計。

迪斯尼和 UX 設計

如果要討論動畫設計，那就不得不提迪斯尼。迪斯尼提出的 12 大動畫原則力求人物角色動作的真實性以及人物和觀眾之間的情感聯系，這是每個動畫人都應該了解的。迪斯尼深諳真實世界中物體的運作邏輯和原理，他們了解觀眾對動畫的期待，動作必須是自然流暢的。迪斯尼深知，想要捕獲觀眾的注意力，就必須和觀眾產生情感共鳴。這就是為什么他們能如此成功地打造出一部部深入人心的動畫電影，創造出一個又一個栩栩如生的卡通人物形象俘獲大量觀眾心靈的原因。自然真實的動作，情感的共鳴，以及流暢的動效轉場，這也是 UX 交互設計中最重要的幾大點。

UX Choreography 是指用戶體驗流程編排 ，即如何運用適當的技巧來引導自然流暢的畫面動作和俘獲觀眾的注意力，并在一些至關重要的節點，和用戶產生雙向的對話。

我們可以從迪斯尼動畫設計中學到的 5 大 UX 設計法則

優秀的體驗設計師和視覺設計師的工作，不僅僅止步于遵循一些既定的規則然后進行功能設計，更加高明的做法是通過一系列的體驗流程來講述故事，并在這個過程中讓用戶有愉悅的體驗。在數字動畫行業摸爬滾打這些年后，Rebecca 發現動畫設計中的很多東西也適用于交互設計，為此總結出了迪斯尼 5 大動畫設計原則，不僅可以為 UX 設計所用，完美過渡不同的場景轉換，更重要的是整體上打造令用戶愉悅的產品體驗。

反饋交互

反饋交互應該告知用戶進行一次交互操作后的結果，即這次操作是否有誤，為什么要進行這次操作，它經常被用在加載動效、進度條動效中，或是選擇操作的交互場景中。反饋交互是如此的重要，因為它建立了產品和用戶之間的信任感，令用戶感覺到愉悅和滿意。反饋交互讓人感覺自己是在與真實的元素進行互動，增加了一種有人味的觸感交互。當你進行操作后立馬獲得回饋，這種感覺非常棒。所以，進行反饋交互設計時，一定要記得讓這個設計顯而易見，一下就能抓住用戶的注意力，最好是能夠集合多層元素同時發力設計一個反饋交互。

關于反饋交互，我們能從迪斯尼學到的是夸張的表現手法。Glen 認為，夸張不僅被看見，還應該被感覺到。在迪斯尼的設計中，經常是以一種非常明顯、幅度較大的表達方式進行反應。

比如在「美女與野獸」的設計當中，當美女 Bella 拒絕了野獸哥的邀約，野獸哥馬上變得非常生氣，我們能從它夸張的表情變化中看到這個反饋，臉部拉長，眼睛圓睜，表示驚訝，接著，眉毛往上挑，看起來很不爽。這個動作發生得如此迅速，以至于我們可能沒能看清影片下的字幕，但通過這樣一種夸張的反饋方式迅速感知了野獸哥的情緒變化。

左圖 iOS :?密碼輸入錯誤的反饋交互：通過人類最自然原始的交互（搖頭表示 no ）給予反饋，表示密碼輸入錯誤，簡單直接又好懂。

右圖 Dots：使用到多個不同的元素共同完成一個回饋交互。

左圖 Yahoo News：圓圈中填充不同顏色，中間顯示已閱讀的文章數目，完成 8 篇文章閱讀后用戶可獲得一條趣味冷知識的獎勵回饋。

右圖 Beats: 選擇完喜歡的音樂流派后，bubble就會變大變明顯，并在右側彈出下一次選擇按鈕。

前饋 Feedforward

前饋是暗示的一種，呈現視覺上的可預見性，傳達給用戶可能將要發生或期待的交互是什么，引導用戶學會如何正確地使用產品。前饋指引用戶進行正確地流程操作，更好的完成任務。就像一個個小提示，幫助用戶了解為將要發生的交互做好準備，比如「注意，看這兒！」、「拖到這里吧！」、「再拉一點吧！」等等。這些小細節不引人注目且經常被人忽略，但是如果用好前饋交互，往往能為你的產品帶來意想不到的效果。

類似，迪斯尼法則中這個叫做「Anticipation 預備動作」，是指動畫角色的動作必須讓觀眾產生預期，讓觀眾更易于融入到劇情中。

Mickey 張開手掌抓球的手勢深入人心。

為了解釋這個原則，Glen 用了米奇抓球的動作序列來做案例。在第一幀中，米奇的手靠近身體，眼睛注視著桌上的球，第二幀中，米奇的手就拿到球了。這里的問題是，僅僅兩幀動畫不會讓觀眾產生預期。因為是這個抓球的動作完成之后，觀眾才知道米奇抓了球。只有兩幀，這個動作的前饋不夠，觀眾對米奇抓球的動作沒有心理預期，所以之后在這兩幀之間加入了米奇手掌打開、具有明確預期的抓球動作之后，給足了觀眾的預期空間，整個畫面才變得正常很多。

不能對觀眾沒有耐心，他們只是在對你的設計做出反應。

Glen 又分享了另外一個例子，在《Duet》中，Tosh要從上爬下來。第一次，Glen 讓他直接爬下來，一切發生得太快，結果導致觀眾沒跟上劇情。于是他又重新安排了畫面，他先讓 Tosh 看了一眼 Mia ，然后轉身，再爬下來。幾個簡單的小動作給足觀眾提示即將要發生的事，自然而然地引導了觀眾的注意力，朝著劇情的方向發展。

左圖 Yummly：點擊搜索后，白色背景部分變成輸入框

右圖 Snapchat：往下拉圖標小人跳舞，提示用戶進程正在運行

左圖 Clear：下拉時新建一個任務，用說明文字來給觀眾以提示

右圖 Moldiv：面板輕輕抖動，暗示左滑手勢支持退出

Spatial Awareness 空間感

空間感引導用戶感知周圍的環境，厘清各個要素之間的關系。在一個虛擬的數字「宇宙」中，存在著無數的空間維度可能性。如何有效地利用這個面積有限的小小手機屏幕，讓它既包含所有必備的元素，又能讓交互變得簡單易操作，這就需要考驗設計師空間轉場的設計能力了。讓用戶明白這些東西是從哪兒來的、到哪里去、以及可能再次出現的地方。應該和物理世界的過渡一樣自然而流暢，不能像鬼一樣突然冒出來把用戶嚇個半死。這就是空間感在交互設計中存在的主要意義，即引導用戶建立起對產品的使用邏輯。

迪斯尼動畫原則中的「Staging 演出布局」也是同樣的原理。

Staging

上圖的連續動畫出自《Duet》，展示了 Mia 縱身跳入水中，游泳、翻轉、消失、在水上翻筋斗一連續動作。

觀察以上動畫，我們看到，當 Mia 跳入水中，整個畫面發生了巨大的變化，一個巨大的水泡驟然炸裂開來，暗示她從哪兒來，跳入水中后，她身邊出現的魚群則暗示她往哪兒去。整個動畫討人喜歡的原因在于，所有動作都緊密相連的，成功地俘獲了觀眾的注意力，讓觀眾感覺是自己在一幀一幀地推進整個劇情。

左圖 Calendar: 一周七天依次排序，左右滑動切換具體某一天。

右圖 Stellar: 一款講故事的app ，使用了擬真的翻頁交互效果。

左圖 VSCO：往上滑動小箭頭可以切換到位于另一個層級的工具箱

右圖 Nike Making：選擇類別后放大至全屏，然后往上滑動，出現子類別。

用戶焦點

用戶的焦點把控用戶的注意力。用戶焦點強調某一時刻觀眾應該注意的地方，當切換狀態的時候，弄清楚用戶焦點應該出現的位置尤為重要，因為這關系到每一幀的轉場控制。制作這種動效并不是簡單，別以為放一個元素到顯眼的位置就行了，可能還需要背景的動效反應。其實很多時候是多個層級的元素一起合力完成一個動作。為了突出焦點，可能需要模糊或者加深背景。

用戶焦點原則的運用讓體驗中的每一個元素都保持清晰明了。清晰度并不屬于迪斯尼動畫 12 原則，但是 Glen 說清晰度是他在迪斯尼學到的最為重要的技巧之一。

觀眾跟得上劇情節奏，才會感到開心。要不然，沒人會開心。

左圖 Pinterest：長按卡片會適時地出現操作按鈕，「收藏」、「喜歡」、「發送」或者「更多」。

右圖 Paper Notifications：彈框動效獲取用戶注意力。球形圖標彈出彈框，覆蓋住原本的圖層，以及通知欄上還會有一道光閃過，提醒用戶注意。

左圖 Peek：進行時間選擇時會進入全屏模式，同時選區變成橙色，背景呈深色，對比突出選區部分的元素，讓用戶注意力集中在選擇的元素部分。操作完畢切回原來界面。

右圖 Yahoo Weather：動效是抓住用戶注意力的最有效方式，比如這里用到的風車動效，簡單一目了然。

Brand Tone of Voice 品牌調性

其實這跟寫廣告文案創意差不多。想一想，如果品牌能說話，它會說啥？如果品牌能動，那會是什么樣的？只需一點微小細節的加入，就能讓用戶體會到你的品牌與眾不同的氣質。展示獨一無二的品牌個性，讓用戶覺得「嗷，這正是你家產品給我的感覺」，讓你想要傳達的品牌形象被用戶準確無誤地接收到了，這就是說明你成功了！

看看你每天都在用的 app ，瀏覽的網頁，還有其他使用的什么服務，想想自己用它們的原因是什么呢？明明市面上還有很多同類的產品和服務，但你為什么就選擇這幾個呢？是它們的體驗好？拜托，體驗好的何止他家。在用戶體驗之外，它們能夠深深吸引你的原因是讓你產生心靈上的愉悅，這就是吸引力原則，這是迪斯尼 12 大動畫原則中的最后一條，是最為玄妙的一條，也是設計起來最不容易的一條。

吸引力是一種很玄的東西。

Glen 說，Freddie Moore 是迪斯尼一名動畫師，負責迪斯尼「視覺和感覺」的設計。在他之前，米奇的人物形象和今天不大一樣，就是一個圈。Freddie 來了之后，開始研究米奇身上的每一個元素極其它們之間的關系。Frank Thomas 和 Ollie Johnston（迪斯尼另外兩名老司機，是迪斯尼的元老級動畫大師）也常常教導后輩的動畫師，「線和線之間都有聯系?！?/p>

當創作米奇的時候，會有一個主題指導創作，每下一筆都有講究。比如說，畫米奇的時候，先畫一個圓圈代表他的頭部，再畫上翹的鼻子，之后再畫頭部其他部分。根據鼻子的位置再畫眼睛，畫得離鼻子稍近，接著畫眉毛和嘴。簡簡單單幾筆，米奇完成了，他身上有一種莫名討人喜歡的特質，這就是我們前面提到的玄妙的吸引力。 Glen 認為，在你創作卡通人物之前，它早就存在于你心里了。如果一切順利，你就能把它帶到這個世界。

左圖 Nike+：界面、圖標和徽章都以一定的速度滑向跑道，與 Nike 的主題調性運動遙相呼應

右圖 Zappos：沒人不喜歡彩蛋，特別是一只披風貓送給你的

左圖 Snapchat: Snapchat 的 icon ，一個怪趣的鬼魂 ，已經如此深入人心，以致于總是能吸引住大家的目光

右圖 Flickr: ? 在刷新個人主頁時，構成 Flickr 圖標的粉、藍兩色會出現旋轉動效，非常聰明的品牌展示

這 5 條原則告訴我們應該如何俘獲用戶的注意力，正確引導他們融入到你的故事中，希望能為 UX 設計師的工作帶來些許啟發。為用戶帶來真實、情感共鳴的、流暢的體驗是 UX 設計師的職責所在。時刻記得，作為一名 UX 設計師，我們的主角是作為人類的用戶，一切出發點都應以人為本。

我總是做些我做不來的事兒，因為我覺得可能做著做著就學會了。

——畢加索

電影、app、網站、書，雖然承載媒介各不相同，但進行設計的時候都有一個同樣的目的，那就是讓故事中的人物角色參與進來，而設計師的責任就是引導好每一個人物角色的進場、表演和離場?？傆X得設計界面就像是一扇窗口，通過一扇扇窗口，故事朝更加豐滿的方向發展。我們在進行動畫設計的時候，可能很容易就遇到棘手的問題不知道如何解決，但是作為一門新興崛起的行業，新手遇到問題是常態，這個時候你只需放手去做就行了，因為做著做著問題就解決了。就算是 Glen 這樣的大師也會遇到同樣的問題。為此 Glen 分享了一個自己的案例，當年設計 Duet 對他來說也是一次全新的挑戰，因為在那之前他一直都是在紙上畫靜態畫的，不需要考慮轉場，一個角色在紙上消失了就表示已經離場了。但在交互設計體驗中則完全不同，你得考慮觀眾的感受，他們的注意力是隨著劇中人物而移動的，因此就必須以時間線的角度去考慮問題，就像是在一個無止境的幕布上畫畫一樣。

以上就是從迪斯尼人物編排原則學到的設計技巧，如果你剛好在 UX 設計中遇到問題一籌莫展，不妨看一眼以上列出的這 5 條原則，或許能帶給你一點啟示。

作者： Rebecca Ussai

原文：The 5 Principles of UX Choreography

本文已由作者授權給翻譯與發表，未經授權禁止轉載。

本文由 @eloisechou 原創發布于人人都是產品經理。未經許可，禁止轉載。