原文由Rebecca Ussai 撰寫，內文為其在 SXSW 藝術節與迪士尼的傳奇動畫師 Glen Keane 一起討論出來的結果。以下由第一人稱編譯。
我原本是想當電影片頭設計師，為此我到了卡內基美隆大學修了 Dan Boyarski 所開的課程－Time, Motion, and Communication。課程主要都在討論動畫、印刷、旋律、色彩、動作。Dan 總是說每個物體在螢幕上都像是一個站在台上的演員，而我們負責控制他的動作、行為、個性及所有的一切。
動畫師可以精準的掌控片中所有物品的動作、位置，並試圖傳遞情感，猜想觀眾會怎麼解釋這個動作或表情。我之所以很嚮往片頭設計師這個職位，是因為他們可以在短短 30 秒到 3 分鐘的短片中，完整傳達整部戲的精隨，或是引導劇情發展。當就業節來臨，我投了 R/GA 的視覺設計師一職，但最後誤打誤撞變成 UX 設計師，我只知道 R/GA 是我所嚮往的公司，但他們有沒有在做片頭，我就不清楚了。既然都走到了這一步，首先要搞懂的就是，網頁框架（wireframes）。
過去幾年，我製作了上百個網頁框架，寫了上千個註解：當使用者點 menu 的按鈕，選單會從上面掉下來；當使用者擊點縮圖，影片會全螢幕播放。有天我突然驚醒，UX 和動畫其實是一樣的，但是我在設計網頁的時候卻忽略了「內容」，下一頁出現的究竟是首頁、產品介紹還是文章，只關注在每個頁面之間的流暢度，卻忽略了關聯性。我發現我過去所學的東西和現在的職務是完全相對應的，我越是這樣想，越是明白，動畫設計的核心是流暢、歡樂、直覺的體驗，並強調細節。那網頁呢？
- 迪士尼和 UX 的五大守則
說到動畫的起源就不能不提到迪士尼（迪士尼動畫 12 守則）。因為他們了解真實性對觀眾有多重要，當我們盯著螢幕時，會期待下一秒，人物照著常理動作。不僅如此，情緒的鋪成也很重要。掌握這些要點，讓動畫成為一部電影，而不再只是小品。他們抓住了觀眾的心，讓人覺得這些角色都是真時存在的。
UX 設計結合了 When 和 why，正確的技巧和動作，能夠與使用者過去的經驗結合，吸引他們目光，產生雙向對話。
首先我要強調，UX 和視覺設計師並不只把功能流暢的排進去就好了，還需要考慮使用者經驗，讓你的網站自己會說故事。這五個守則是我觀察繪圖數位化，及其所使用的技巧所統整出來的。抓住這幾個重點讓人們更信任你的產品，創造正面、歡樂的使用經驗。
● Feedback 回饋
回饋不一定文字表達，當網頁 loading 時，用一些圖案表示進度；或是讓滑鼠游標觸發一些反應，讓使用者覺得自己不只是觸碰了一塊玻璃，而是和你在互動。
善用回饋，可以讓使用者產生信任感，提升滿意度，強化正向的使用經驗。回饋一定要做的非常明顯，就像迪士尼守則中的「Exaggeration 誇大」。
迪士尼的卡通中，每個人物的表情反應都非常誇大，來表示情緒。最經典的例子就是《美女與野獸》中，當野獸知道貝拉不能和他一起吃飯了，他的臉瞬間向上拉長，眼睛睜大表示驚訝，然後又皺眉，臉往下垮，表示生氣。觀眾或許根本不會注意到這些分解動作，這只是幾秒鐘的事情，但是這些反應，讓故事更完整，為結局鋪成。
UX 例子：IOS 的螢幕屏鎖和小遊戲 Dots。
● Feedforward 提示
小提示可以幫助使用者了解「可能會發生的事」，像是「看這裡！」、「檔案可以丟這邊」、「再往上拉一點」等等。你可能覺得這看起來很突兀，但他可以幫助你的使用者了解如何操作網頁，也間接地引導他們達到你的目標。事實上，多數人在使用之後，並不會記得這些小提醒。微妙的效果就好像有迷之音在領導他們操作一樣。
在迪士尼法則中，這叫做「Anticipation 預期」，暗示觀眾等等可能會發生的事。Glen 以一個簡單的例子表示，當米奇想要越過桌子撿起一顆球。第一個畫面會是他的眼睛看著球，張開手掌，再來才會伸手撿球。即使你看到米奇的眼睛看著球，你也不一定知道他等一下會去撿球，兩者之間沒有絕對關係，但能暗示觀眾注意那個方向。
「別讓觀眾跟不上你的腳步。」－Glen
另一個例子是在《Duet》中，Tosh 要從樹上爬下來。第一次，Glen 讓他直接下來，但是多數人都沒跟上畫面。第二次，他讓 Tosh 先看了看 Mia，轉個身，才爬下來。簡單的幾個小動作就可以讓觀眾／使用者了解等一下可能會發生的事情，朝著你預設的方向前進。
UX 例子：Clear 下拉的時候會顯示「pull to create item」；Moldiv 則在進入首頁時會先晃一下，讓使用者知道往左滑會看到選單。
● Spatial Awareness 空間感
空間感可以幫助使用者釐清畫面和元素之間的關係，引導使用者如何操作，建立一個合理的邏輯。設計師如果只是為了滿足自己小小的心願，而將畫面切割成好幾小塊，或是將之塞滿各種元素，是不行的。
你必須確認你的設計是有邏輯性的，尤其當你的使用者拿的是手機，在小小的螢幕中，要如何簡化設計，又包含所有必備元素。
使用者必須「學習」如何操作這些畫面，這可能會花一點時間，但絕對值得。他們必須知道這些東西是從哪裡出來的，等等會去那兒，以及如何在找出他們。你的設計必須讓人們知道如何從 A 到 B，但不是突然跳出來，中間的轉場就考驗著設計師的功力了。
這就像迪士尼守則的「Staging 佈局」。Glen 說，當你想讓主角從最右邊走到最左邊，必須要有東西來強化兩個畫面之間的關聯性。在《Duet》中，有段畫面是當 Mia 跳進水塘裡，游泳、翻轉，水面閃生的漣漪。Mia 跳進水中之前，水面上有很多巨大的泡泡，吸引著他跳進水塘。當他撞進水塘，畫面產生了巨大的變化，泡泡整個向外炸開。，泡泡暗示著 Mia 即將跳進水池，後來成列的魚群引導著觀眾，Mia 即將去的地方。我之所以喜愛這段影片是因為每個畫面之間都有著邏輯，引導著觀眾注意力。
「你不能沒來由地改變畫面。」－Glen
UX 例子：VSCO 最底下有個小箭頭，網上可以拉出工具列。Nike Making，點選類別，圖層往上跑出子類別，往下滑回到上一頁。
● User Focus 使用者注意力
這邊的重點在於引導使用者的注意力，控制層次、狀態的轉變。在每個時刻，展現出最重要的元素（e.g 變色、放大），將背景或次要元素變淡，這可能必須改變所有元素的狀態。有些東西雖然必要，但不是時時都需要，只有當你喚醒他們的時候，才會出現。
這有點像是「Clarity 釐清重點」，雖然不在 12 條守則裡面，但我們可以讓他成為第３條守則。雖然我們前面一直強調邏輯、合理性的重要，但是在迪士尼，總是有很多神奇的事情會發生。
舉例來說，在《打掃風波》中，米奇想要將落葉放進籃子裡，但是籃子一直亂動，忽然米奇從褲子裡拿出了鐵鎚和釘子，將木籃固定。褲子裡怎麼放得下鐵鎚，米奇隨身攜帶這些工具嗎？這都不重要，因為鐵鎚是這個關鍵時刻最需要的東西，為了達成目標，觀眾是可以原諒小小的不合理的。
「如果觀眾站在你這邊，他們會很開心。如果他們不在你這邊，沒有人會開心。」－Glen
UX 例子：Pinterest 當你擊點圖片，會跳出三個選項，最常見的「喜愛」會是紅色。Paper Notifications 當你點選通知，上方文字會有光線的變化，吸引注意力。
● Brand Tone of Voice 品牌調性和聲音
每個計劃在設計或執行的時候，我都會問自己「如果品牌會說話，他會怎麼說？」、「如果品牌有生命，他有什麼感覺？」，聽起來很荒謬吧。但品牌可以讓使用者了解你、認識你。在關鍵時刻，展現出品牌的語氣，可以讓使用者感受到你的存在與個性。
當使用者說出，「我完全可以了解他們（品牌）為什麼這樣做」，你就成功了。
每個平台上都有很多功能相似的 app 或網站，一樣可以完成目標，為什麼用戶選擇你？這不僅是一個好的使用者經驗可以做到的。有時候，我覺得 app 可以娛樂我，可以完整我的生活，這就是「Appeal 吸引力」。這是最後一條守則，也是最重要的，但卻不容易被創造出來。
「吸引力是一個很玄的東西。你擁有的時候，你知道你已經得到他了；你沒有的時候，你知道你沒有，但是你卻不知道要如何得到他。」
「Freddie Moore 是在迪士尼裡面負責創造 look and feel（視覺與感覺）的人」Glen 說。在他進迪士尼以前，米奇只是幾個圓圈，但他來之後，一切都不同了。Frank Thomas 和 Ollie Johnston 經常告訴動畫師「每一條線都和另一條相關」。畫米奇的時候，一切都遵循著一個主題。你從米奇的頭開始，畫了個圈，然後畫了鼻子，接到頭部線條。眼睛和鼻子牽引著後面的眉毛和嘴巴，推動了臉頰的線條。突然米奇活了過來，他有能力去吸引觀眾了。
Glen 相信，每個角色被畫出來之前，就已經存在了。如果你的方法正確，你將是帶領角色到這個世界上的人。「吸引力的重要性就像賀爾蒙一樣，像一段美妙的和弦，你聽見的時候，就知道『就是他了！』」
UX 例子：Snapchat 的鬼；Flickr 的粉紅色和藍色圓形已成為經典圖案。
不管你是要拍電影、寫 app、架網站、寫書，我們的目標都是一致的。角色的進場、表現、出場都是你的責任；使用介面只是故事的一個畫面，不要忘了「內容」。
以上五個原則教你如何抓住觀眾的心，並且融入你的故事。這是我們平常設定角色和檢查錯誤的方法。但是我們並不是創造螢幕世界的角色，我們真正在意的角色是使用者，所有元素都是為了你們而設計的。
或許動畫設計對你來說很陌生，但這五個原則其實也是一種解決問題的方法。Glen 和我們分享了很多經驗和原則，動畫人物不只是畫布、螢幕上的角色，他們是活的，能和觀眾互動的，也能引導觀眾。這幾個原則不只可以用在動畫和 UX，你也可以用你的方法闡述，讓他成為你的原則。
「我總是在做我不會的事情，這樣我才能夠學習」－畢卡索。
- 延伸閱讀
UX 設計師很無奈：老闆，我們真的不只會畫畫框線做介面設計啊！
（文章來源：《Medium》；圖片來源：andy castro，CC Licensde）
