本文作者 Rebecca Ussai ，成文於她和迪斯尼首席動畫師 Glen Keane 在 SXSW panel 合作的一次乾貨分享之後，文章討論了 UX 設計師能從迪斯尼動畫設計學到的 5 大原則，乾貨滿滿！
Rebecca Ussai 是一名使用者體驗設計師，而在這之前，她本想成為一名片頭設計師的，曾就讀於卡內基梅隆大學，上過一門叫做《Time, Motion, and Communication》的課程，課程主要教授動畫字型、節奏、用色和運動的一些知識。那時候，老師說過的一句話讓她印象深刻，「如同舞臺上的演員，我們作為導演需要對螢幕上的每一個元素進行動作編排，並賦予其個性。」
那時候，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 預備動作」，是指動畫角色的動作必須讓觀眾產生預期，讓觀眾更易於融入到劇情中。
為了解釋這個原則，Glen 用了米奇抓球的動作序列來做案例。在第一幀中，米奇的手靠近身體，眼睛注視著桌上的球，第二幀中，米奇的手就拿到球了。這裡的問題是，僅僅兩幀動畫不會讓觀眾產生預期。因為是這個抓球的動作完成之後，觀眾才知道米奇抓了球。只有兩幀，這個動作的前饋不夠，觀眾對米奇抓球的動作沒有心理預期，所以之後在這兩幀之間加入了米奇手掌開啟、具有明確預期的抓球動作之後，給足了觀眾的預期空間，整個畫面才變得正常很多。
不能對觀眾沒有耐心，他們只是在對你的設計做出反應。
Glen 又分享了另外一個例子，在《Duet》中，Tosh要從上爬下來。第一次，Glen 讓他直接爬下來，一切發生得太快，結果導致觀眾沒跟上劇情。於是他又重新安排了畫面，他先讓 Tosh 看了一眼 Mia ，然後轉身，再爬下來。幾個簡單的小動作給足觀眾提示即將要發生的事，自然而然地引導了觀眾的注意力，朝著劇情的方向發展。
左圖Yummly: 點選搜尋後，白色背景部分變成輸入框
右圖Snapchat: 往下拉圖示小人跳舞，提示使用者程式正在執行
左圖Clear:下拉時新建一個任務，用說明文字來給觀眾以提示
右圖Moldiv: 皮膚輕輕抖動，暗示左滑手勢支援退出
Spatial Awareness 空間感
空間感引導使用者感知周圍的環境，釐清各個要素之間的關係。在一個虛擬的數字「宇宙」中，存在著無數的空間維度可能性。如何有效地利用這個面積有限的小小手機螢幕，讓它既包含所有必備的元素，又能讓互動變得簡單易操作，這就需要考驗設計師空間轉場的設計能力了。讓使用者明白這些東西是從哪兒來的、到哪裡去、以及可能再次出現的地方。應該和物理世界的過渡一樣自然而流暢，不能像鬼一樣突然冒出來把使用者嚇個半死。這就是空間感在互動設計中存在的主要意義，即引導使用者建立起對產品的使用邏輯。
迪斯尼動畫原則中的「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（迪斯尼另外兩名老司機，是迪斯尼的元老級動畫大師）也常常教導後輩的動畫師，「線和線之間都有聯絡。」
當創作米奇的時候，會有一個主題指導創作，每下一筆都有講究。比如說，畫米奇的時候，先畫一個圓圈代表他的頭部，再畫上翹的鼻子，之後再畫頭部其他部分。根據鼻子的位置再畫眼睛，畫得離鼻子稍近，接著畫眉毛和嘴。簡簡單單幾筆，米奇完成了，他身上有一種莫名討人喜歡的特質，這就是我們前面提到的玄妙的吸引力。 Glen 認為，在你創作卡通人物之前，它早就存在於你心裡了。如果一切順利，你就能把它帶到這個世界。
左圖 Nike+:介面、圖示和徽章都以一定的速度滑向跑道，與 Nike 的主題調性運動遙相呼應
右圖 Zappos:沒人不喜歡彩蛋，特別是一隻披風貓送給你的
左圖 Snapchat: Snapchat 的 icon ，一個怪趣的鬼魂 ，已經如此深入人心，以致於總是能吸引住大家的目光
右圖 Flickr: 在重新整理個人主頁時，構成 Flickr 圖示的粉、藍兩色會出現旋轉動效，非常聰明的品牌展示
這 5 條原則告訴我們應該如何俘獲使用者的注意力，正確引導他們融入到你的故事中，希望能為 UX 設計師的工作帶來些許啟發。為使用者帶來真實、情感共鳴的、流暢的體驗是 UX 設計師的職責所在。時刻記得，作為一名 UX 設計師，我們的主角是作為人類的使用者，一切出發點都應以人為本。
我總是做些我做不來的事兒，因為我覺得可能做著做著就學會了。
——畢加索
電影、app、網站、書，雖然承載媒介各不相同，但進行設計的時候都有一個同樣的目的，那就是讓故事中的人物角色參與進來，而設計師的責任就是引導好每一個人物角色的進場、表演和離場。總覺得設計介面就像是一扇視窗，通過一扇扇視窗，故事朝更加豐滿的方向發展。我們在進行動畫設計的時候，可能很容易就遇到棘手的問題不知道如何解決，但是作為一門新興崛起的行業，新手遇到問題是常態，這個時候你只需放手去做就行了，因為做著做著問題就解決了。就算是 Glen 這樣的大師也會遇到同樣的問題。為此 Glen 分享了一個自己的案例，當年設計 Duet 對他來說也是一次全新的挑戰，因為在那之前他一直都是在紙上畫靜態畫的，不需要考慮轉場，一個角色在紙上消失了就表示已經離場了。但在互動設計體驗中則完全不同，你得考慮觀眾的感受，他們的注意力是隨著劇中人物而移動的，因此就必須以時間線的角度去考慮問題，就像是在一個無止境的幕布上畫畫一樣。
以上就是從迪斯尼人物編排原則學到的設計技巧，如果你剛好在 UX 設計中遇到問題一籌莫展，不妨看一眼以上列出的這 5 條原則，或許能帶給你一點啟示。