說說迪斯尼卡通片與使用者體驗設計有何交集，以及我們能從這些米老鼠唐老鴨裡面學到什麼。（文章較長，趕時間的讀者可以直接滾到下面乾貨，另外本文引用的例子你都能夠在App Store下載得到，可以親手體驗一番）
最近一次分享會，竟花光所有運氣遇到了迪斯尼的首席動畫師Glen Keane，來自迪斯尼的動畫師本來個個都牛而他是牛中傳奇，這篇文章我就當做是那天他給我們分享的大幹貨的備忘錄吧。
我在成為一名使用者體驗設計師之前，本來是打算去當片頭設計師的，也就是電影剛開場蹭蹭往外冒字幕告訴你導演誰主演誰的那一段。遂於卡內基梅隆大學上了Dan Boyarski的一門叫做時間，運動與交流的課程。說的是一些關於字型動畫啊，節奏啊，用色跟動畫的一些知識。老師總是教育我們，每個進入畫面的元素都應該被看成是臺上的演員，而我們就是這些“演員”的導演。
你的職責就是編排好這些元素的進場、表演和退場。
我們當時做的最多恐怕就是一遍一遍的看視訊的序列，糾結畫面，糾結節奏，糾結每個元素應該擔當一個什麼樣的角色，然後又糾結到底有沒有更好的方案。不得不說，學會有意識地去注意時間和動作的細節讓我的作品有非常大的提高，因為你想要表達的情感往往是由這些無形的細節來展現，而觀眾也不自覺地由細節感受你想要傳遞的資訊。即使到了現在，成為了一名使用者體驗設計師之後，我也是很常去看這些30秒到3分鐘，並不很長但是總是創意十足的片頭。短短的片頭能夠確立整個電影本身的基調，甚至是劇透了結局，從這些不起眼的小片頭我獲過很多的靈感。畢業後找工作，我居然能去R/GA（國外知名廣告公司），那時候我我知道這家公司以前的片頭設計是非常出名的，我也一直非常希望能夠在這裡工作，原本我申請的崗位是視覺設計，但是卻被稀裡糊塗的地調配到UX的崗位上，天啊，我當時連什麼是線框圖都不知道啊好伐。
經過這幾年的工作，我已經是一個畫了無數多線框圖，也做過無數多標註說明的人了。例如：當使用者點選選單圖示，整個選單的皮膚會從該頁面的頂部向下滑動展開。當使用者點選縮圖，視訊會直接開啟到全屏模式。這樣的說明我相信大家也是做過太多太多，我越做越覺得，其實我們的用標註來描述狀態，只能從這個狀態到另一個狀態，而對於其過程，文字大部分時間無力去表述。使用文字來說明的我們的設計導致很多細節都被略過了，我們沒有很好的把整個東西設計出來。而且當我們這些寫滿了說明的交付物出來之後，必然不能體現當我們把這些東西放置在一起，它們看起來怎麼樣。文字說明的力量太過有限，我們ux，在最理想狀態之下，最應該做的當然是一個能夠被全面地體驗的demo，而不是說明。
這些年的ux經驗讓我越發覺得當年求學時候學的動效設計知識其實對於一個ux或者視覺的工作和成長真的是有莫大的裨益。日日面對無數產品，發現最是讓人有完美體驗的還是那一些有著美麗又充滿含義，流暢卻也細節豐富的動效的作品。
迪斯尼&使用者體驗
聽起來或許讓人有點出乎意料，但我是認真的，如果學動效，那麼請從看迪斯尼開始，迪斯尼提出的動畫的十二條原則值得每個想做動效的人學習，裡面對於運動的真實性以及情感投入的追求的理念簡直精髓所在業界標杆。迪斯尼做動畫那一年你還沒出生呢，他們對於動畫的積澱真的是很深厚。對比國內的喜羊羊你就能看出來，有時候真的不是畫得不如別人，而是關於動作的理解真的需要長年累月的研究，有時候肉眼看不見的東西往往最為關鍵，這個範疇我們是不能說說就能超英趕美的。他們深知在看動畫的時候會，自然真實的動作仍然是最讓人感到舒服的。他們也知道當作品能夠讓觀眾的情感有所投入，才能真正的讓觀眾參與到整個動畫片之中。我想這大概就是為什麼人家居然敢做出世界一部全動畫的電影的底氣所在，而且，你知道的，迪斯尼經久不衰，家喻戶曉，人人都認識。
真實的運動，感情的投入，解決問題，動效（我能說動畫就是動效沒差別嗎）與ux的交集是很大的。
我給他們的交叉取了個名字 ‘UX CHOREOGRAPHY’ ,中文字面意思就是使用者體驗編排（譯者還是個學生，水平有限，實在不知道怎麼按跟襯得上這逼譜的正式名字才好，呵呵真實複雜且傷腦筋），文章接下來即將進入大幹貨節奏，我們來探討下如何在正確的時間和地方，使用正確的技術，來構建一個能夠吸引得到使用者，能夠給使用者一套完整不零碎的體驗的動效。
UX CHOREOGRAPHY 的五個原則
當下，設計師們，無論是使用者體驗還是視覺，是否經常覺得我們大部分時間只要跟隨一些既定的指南或規則把東西設出來即可？確實是這樣，我們要了解既有的規則，學習相關的指南，但是手握精緻調料的廚師未必能夠做出一定好吃的菜餚，作為設計師的我們還需要著眼於在使用這一切元素之後的體驗。根據本技師多年的從業經驗，我總結了五條原則準備與大家分享。
1.反饋
一個顯性的反饋能夠告知使用者這次的互動操作的結果。它最先是讓使用者知道這個操作是成功的還是失敗的，比如一個顯示正在載入的動效，比如一個進度條，或是最簡單的Material Design裡面點選出現的ripple效果。具有反饋行為非常之重要，它是機與人保持聯絡的橋樑，使用者在操作之後總是希望有所反饋，這樣使用者才會有安全感和成就感。我們在裝置的螢幕上進行著大量的操作，玻璃螢幕在觸感上有且只有一種反饋，這樣使用者非常容易遺忘哪怕只是2秒鐘之前的操作，所以我們需要在視覺上把反饋設計出來，作為使用者對於裝置的感知的一種補充，讓這場體驗更趨於真實。對於使用者的操作有恰當的反應，是一種非常好的體驗。當我們用打算用動畫來表達反饋，一定要讓它足夠明顯，且最好同時調動介面內多個元素一起來構成這個動效，這樣出來的效果更有效率。
Glen說，在迪斯尼，這型別的重要的動畫通常需要使用誇張一點的手法來製作，讓使用者不單單是“看”到，還需要能夠“感受”到。他們經常使用足夠誇張，但是又不為過的方式來製作這些動畫。
美女與野獸的野獸，左1~2圖為感到厭煩的表情變化，右3~4為感到驚喜的感情變化
Glen拿了自己的代表作之一《美女與野獸》裡面的野獸來做栗子。動畫裡，當女主Belle說今晚不去跟他約飯的時候，野獸哥的臉緊成一塊，眉毛上揚，看起來非常驚訝，接著又變成耷拉著臉，然後他的眉宇間透露著不悅。觀眾們或許仍沒有完全看完字幕對白，但是綜合畫面的變化和表現，仍然能夠快速輕易地理解正在發生的故事。
關於反饋的例子。iOS系統的搖頭式密碼錯誤提示：用最自然原始的方式來表示否定，即密碼錯誤。Dots：簡單明快，運用了畫面中許多的元素來共同反饋。Yahoo News：外圍圈圈逐個填充顏色，中間的數字表現你的已讀數量，八條全部讀完之後全屏展示一條有趣的冷知識作為獎勵。Beats：顯示各種音樂流派的小圓圈會對你的操作有所反應。
2.前饋
前饋是暗示的一種，也可以說是視覺可供性。它告訴，或者說是暗示使用者，什麼是可互動的。另外還能起到引導使用者更好的學會使用的方法。前饋促進使用者把每個步驟做正確，從而更好地完成任務。針對前饋的設計應該為使用者可能會做的操作或可能遇到的事情做好準備。目前市面上最最常見的需要前饋來暗示的資訊有，“注意注意！看我看我！”，“把它拖動到這裡來哦”，“再往下（各個方向）拉一點。”常常都是這些細碎但是無比重要的關鍵資訊，前饋的負責表達的這些資訊常常太過細微，使用者甚至都沒太能夠注意得到，但是常常是這樣一些無比必要的操作。能夠用好設定前饋的方法通常能夠帶來意想不到的好效果。
圖中的米老鼠張開手，即將要去抓個球給你看
Glen大師拿了一段米奇老鼠抓球的小序列來做栗子。第一幀，米奇的手沒有張開，仍然靠近身體，而眼睛注視著球，第二幀的時候米奇的手已經抓住了球。對的，只有兩幀，非常簡單，但是大家可能已經看出了端倪。即使觀眾們都知道，米奇是即將要去抓個球，但是如果只有這兩幀的話看起來可真是不爽，跟心理預想的不一樣，我們覺得這個準備動作沒有做足，前饋不夠。接著Glen，才插入了上面那種圖到這兩幀之間，然後一切看起來就好了許多了，觀眾接收到了足夠多的暗示，我們引導了觀眾的預期。
你千萬別對觀眾不耐煩了，他們做的都是對你的反應。
關於前饋的例子。Clear:下拉即可新新增一條任務，它用了一個3d的反轉小動畫和文字來表達這一切。Moldiv:進入相框選擇介面之後，整個皮膚會像右邊抖一下暗示支援滑動手勢退出。Yummly:點選搜尋按鈕之後，原本的白色背景變為文字輸入區域，既優雅又明瞭，逼格滿滿。Snapchat:往下一拉，小icon開始跳舞，配合顏色一直變動的背景告知使用者程式正在執行。
3.空間感
有空間感的應用不會讓使用者在使用的時候找不著北，也能夠闡明個個元素的關係。雖說螢幕僅僅方寸大小，空間非常有限。我們常常要看菜吃飯，小心翼翼地放置一些東西。有些東西就是賤賤的，看起來放在哪兒都有理，最近一直也流行RecycleView的list樣式，各種元素可能還埋藏在下面，使用者需要劃開來才能找到。總而言之東西好像越來越多，一個介面的縱向空間現今被允許挖的更深一些，設計師們YY的空間更是廣闊，設計師腦洞大起來有時候真的是十個PM都拽不回來你敢信。這時候可能我們需要從空間感的角度來考慮我們這一摞東西怎麼擺才更好，既讓使用者覺得操作方便又讓使用者不會覺得介面過於複雜，難以學習。增強空間感，仔細做好元素的出現和消失的動效是最有效的辦法。這顆按鈕仔是重哪裡冒出來的，怎麼冒出來的，方向，位置和它的走向，都要讓使用者看得見，儘量不要讓元素突然地變出來，突然地變出來在現實世界中並不存在，只有鬼才會有突然飛出來嚇你一臉的癖好，除非你想用一顆配色鮮豔的按鈕嚇死你的使用者，否則還是仔細地打磨好你的動效把。空間感最主要的任務就是使用者建立起對於你的產品的使用邏輯。迪斯尼動畫的12原則中的Staging闡述了同樣一個道理。
這是Glen大師和谷歌合作製作的新作品 Duet（文章最後又Dute的簡介，譯者非常建議大家下載Google’s Spotlight Stories來體驗這個能夠360度全方位觀看的動畫神作，裡面還有很多其他非常不錯的動畫） ，裡面的那個人是女主，叫Mia。
Glen大師跟我們講了在動畫片中空間感又是怎麼來表現的。比如說，有個角色想要從畫面的右邊走進畫面的中心，那麼中心的位置就要留有足夠大的空間，讓人看出來這裡有個空缺，為即將要發生的運動留有足夠的位置。上面是一組Duet的小片段，Mia跳到池塘裡面游來游去，還游出水面做了個空翻。Glen大師說製作這組動畫的時候，要把Mia看作是一個有磁性的東西，整個場景應該配合Mia的動作而做出相應的運動，是Mia的運動帶動整個場景，同時也是場景讓Mia的運動看起來真實。比如當Mia跳到水裡面的產生了好多泡泡，它們炸出來圍繞著Mia。水泡的出現讓觀眾知道運動的方向，也知道了Mia的所在（水裡），接下來水中出現的魚群讓觀眾知道Mia正在朝某個方向游去，這些出現的元素好像響應著Mia的動作，同時間也推動Mia的運動，道清楚了方向，說明白了空間。
關於空間感的例子：Calender：一週七天，按順序排列好，方便使用者滑動選擇某某天。Stellar：這個看小故事的app使用了翻頁效果。VSCO：從下往上劃出現更進一步對濾鏡進行微調的皮膚。Nike Making：點選之後類目就會被放大到全屏，然後往上滑動，一串二層類目一個個往下面掉。
4.使用者焦點
能在正確的地方以正確的姿勢獲得使用者的注意力非常重要，一般在狀態改變的時候我們最需要獲取使用者的注意。獲取使用者的注意力講究的是如何控制介面各個層級的關係變化，還強調把使用者的注意力吸引到正確地方去。有時候製作這樣的動效並不是簡單的把物件放到最頂端就完事了，它需要個個層級的元素互相協調完成。大家最常用的就是模糊或者暗化背景的處理方式了，這種最普遍的處理前後關係的手法大家都會，所以今天我來給大夥提幾個特別點的好了。
正確的使用者焦點讓使用者覺得一切都非常清晰。雖然上文提到的迪斯尼動畫12原則裡面並沒有清晰度這一條，但是Glen大師說其實他在迪斯尼裡裡面學到最重要的東西就是清晰度。另外一位大師Eric Larson說過，即便是你覺得最簡單的東西，也要確保能讓觀眾注意到。
如果觀眾能一直跟上你的節奏，那麼他們將會很開心，如果觀眾不能及時get得到你的想法，那就沒人會開心了。
關於使用者焦點的例子。Pinterest：非常著名的一個方式，點贊轉發等操作的按鈕只有在你需要的時候長按才會出現，非常的清晰。Paper Notifications：利用層的動畫來獲取使用者的注意，地球狀的小icon非常Q彈，然後整個Notifications皮膚也遵循一定的運動曲線滑出來，醒目而且也符合了我們前面說到的空間感原則，這樣的app用起來體驗真的是好。Peek：如果選中某個專案會進入全屏模式，使用者的注意力能不會被無關的元素分散，當任務完成之後一切回到原來的樣子。
Yahoo Weather：用一些小動畫來吸引你的注意，比如轉動的風車，模擬顯示運動的太陽等。
5.品牌互動
我常常都說當我們使用必須準守的設計指南或者準則的時候要考慮這一點，“如果我們的品牌會說人話，它會說什麼？”以及“如果我們的品牌是會動的，它會有什麼姿勢”。其實也就是說我們的品牌，或者說公司的產品的風格、氣質，是怎麼樣的，像谷歌一樣讓人覺得是個一腔熱血，擁有奇思妙想，永遠穿著連帽衫的極客boy，還是像蘋果一樣，像個吹毛求疵，衣著講究的處女座科學家。向使用者展示你的氣質形象，讓使用者能夠：“噢，真的是那樣，你們家的東西給我的感覺就是這樣子的”，讓一切看起來都是那麼的理所當然。
作為設計師，想想你每天都在用的工具，瀏覽的網站，去的商店，想想他們是為什麼能夠讓你每天都是用他們的東西。市場上同型別的東西多不勝數，或許用這個或那個軟體你都能做出相同的東西來，可是為啥你選擇了這個，或許喝這家的咖啡和那家的咖啡口味上價錢上並沒有什麼不同可是你卻偏向於這一家。沒錯，這些東西的體驗都非常好，是好的產品，但是那個Mr.Right級別的卻把你深深的吸引住，它就是在給你相同結果的情況下卻讓你有更開心的感覺。它們是不是不僅僅有良好的體驗，而且在情懷上也吸引住了你，就好像程式設計師就是愛用Dell的螢幕，設計師就是喜歡水果牌的。吸引力是迪斯尼動畫12條原則中的最後一條，這是最玄乎的一個東西，就好像那些音響發燒友說的，火力發的電會讓聲音聽力來更硬，而水力發電則會讓聲音更軟，這事是真的還是假的我不知道，但是必須承認要設計這東西真的有難度。
吸引力是最神祕的東西，因為你不知道你有沒有這東西，當你知道你沒有這東西的時候你都不知道你怎麼才能有這東西，這東西就是那麼神祕的東西。
Freddie Moore也是迪斯尼的一名動畫師，迪斯尼有許許多多的角色出自他手，不僅僅是形象，而且還有氣質，Glen大師說的，應該不會騙人。在他來之前，米奇老鼠尚不如我們今天所熟悉的那隻那麼靈活生動。Freddie大師加入迪斯尼之後對小老鼠進行了很大幅度的提升，尤其是動作方面，他對米奇老鼠身上的每個元素，以及他們之間的關係都進行了思考。 Frank Thomas 和 Ollie Johnston（迪斯尼兩位元老級動畫大師，九老之中的兩位）常常跟後輩們說的是：“線與線之間都有聯絡。”畫米奇的時候，我們會有一個主題在背後指導創作，每一筆其實下得都有依據。譬如說，通常都會先畫一個大致的圓圈，來代表米老鼠的頭，再畫鼻子，並以鼻子的位置來補全整個頭的大致形狀。然後又以鼻子的方位來確定眼睛的位置。眼睛鼻子和頭畫好之後就可以畫眉毛和嘴巴了。這些簡簡單單的線條用這種步驟這種方式組合起來之後就構成了我們人見人愛的小米奇，這隻非常具有吸引力的老鼠仔就這麼出來了。Glen說他相信在你把角色畫出來的之前，其實你心裡早已經有了一個大致的形象了，當你能夠用畫筆把內心的這個無形的東西抓住，並帶它來到這個世界，你會冥冥之中能夠感受得到這一切是多麼的正確，多麼的討人喜歡，至少討你自己的喜歡。
只能說這些是營造吸引力的關鍵，各個元素的配合和諧悅目，每一根線條都是那麼的完美，你的內心會有一個人跟你說：‘就是這樣沒錯！！！’
關於讓品牌發聲的例子。Snapchat：他們家的氣質就是那麼頑皮搞怪，這個標誌性的小鬼魂圖示的行為總是讓人覺得頑皮又有趣。Flickr手機客戶端：下拉重新整理的時候，那個最讓人熟悉不過的藍粉色雙圈logo會開始繞圈圈。Nike+：整個軟體到處都是運動的元素，我們看到介面之間的轉場動畫都是在一條跑道上進行的。
Zappos：人人都喜歡彩蛋這種東西，尤其是當蛋兒們都由一條穿斗篷的貓帶來的時候
希望以上五條原則能夠對你的使用者體驗設計工作有所啟發。其實讓整場的體驗真實又富有情感，連貫不脫節，是使用者體驗設計師最基本的職責所在，希望大家能從文章學到怎麼填補各個環節之間的空缺，並且開始重視產品的氣質。
無論是電影，app，網站還是書本，無論是以什麼方式作為承載物，媒介、環境和物件總是相同的，我們所謂的設計體驗，其實跟其他東西的創作本質上並沒有什麼大的不同，我們也需要安排角色的進場退場和表演，只不過我們的舞臺是小小的螢幕，內裡的元素的關係更加複雜罷了。
動效的設計或許對一些人來說還是過於新近，其中的很多細節都有待大家繼續發掘完善，不過相信大家也不是第一次面對這些新潮流，還不是一次次都handle下來了嗎？Glen大師在分享會上還說其實這次和谷歌合作的Dute對於自己來說還真是一次全新的挑戰，因為以往自己的作品都在紙上完成，就算再神，離開了紙，創作就無法進行，況且只一次還是釋出在Google’s Spotlight Stories上的作品，觀眾能夠隨意改變自己觀看視角，聽起來就像你必須畫上無數幀才能完成。然而萬變不離其宗，原則性的東西走到哪裡都能夠使用，幫助你解決問題。
“我會一直做我不知道要怎樣才能做到的事情，因為也許試著試著就學會了怎麼做。”——畢加索
Google Spotlight Stories：盡情沉浸在專為移動裝置打造的故事大世界。工程師與知名電影製作人會利用最新移動技術為您奉上各色精彩故事。藉助 3D 和 2D 動畫、360 度全景影院品質視訊、立體聲音效和感測器融合技術，您可以通過螢幕這個視窗開啟故事大門，體驗彷彿身臨其境的美妙故事之旅。您可以仔細檢視每處故事細節，也可以關注特定人物角色，或重複觀看故事。您將發現每次觀看都會有別樣的感受。Google Spotlight Stories 就是您的移動電影院。
Duet：由迪士尼首席畫師格蘭·基恩繪製，講述了一對小男孩與小女孩，以及一隻小狗狗之間青梅竹馬的愛情故事，釋出於Google Spotlight Stories中，線條優雅柔和，音樂唯美清新，讓人身臨其境。