翻譯自The Principles of UX Choreography
了解迪士尼和用戶體驗(yàn)之間的交集以及米奇老鼠是如何一筆一筆畫出來的會極大改變你對設(shè)計(jì)的想法。
我（作者）最近有幸和Glen Keane(迪士尼傳奇動畫師)一起上SXSW（譯者注：西南偏南大會，Twitter應(yīng)用就曾在SXSW上一舉成名）。這篇文章是總結(jié)我們一起分享的內(nèi)容。
在我成為UX設(shè)計(jì)師前，我以為我會成為一名電影片頭設(shè)計(jì)師。在Carnegie Mellon學(xué)校，Dan Boyarski老師的引導(dǎo)下學(xué)習(xí)了一門名為《時(shí)間、動作、溝通》的課程。內(nèi)容是全都是關(guān)于動態(tài)排版、節(jié)奏、顏色和運(yùn)動。Dan老師習(xí)以為常的描述屏幕上的每一個(gè)要素如同它即是舞臺上的演員一般——就像一個(gè)角色，我們給予他導(dǎo)演，賦予他行為和人格一般。
"你必須對舞臺上所有（演員）的任何動作負(fù)責(zé)，包括進(jìn)場、表演、謝幕。"
我們會不斷地重新審視(動畫)場景,給出理由這個(gè)角色為什么出現(xiàn)在那里以及它所扮演的角色是什么。時(shí)間和運(yùn)動概念的引入，對我而言改變了一切。因?yàn)槲乙庾R到它可以給你『精確控制』你正在試圖傳達(dá)的情感以及觀眾將如何理解、消化你的消息。我經(jīng)常在一些電影的片頭中尋找靈感,因?yàn)槲沂侵杂?0秒或3分鐘的一段片頭是如何具有為整個(gè)電影定下了基調(diào)的能力,而且預(yù)示著會發(fā)生什么。當(dāng)找工作開始的時(shí)候,有一個(gè)美麗的意外導(dǎo)致我成為一名在R/GA公司旗下的交互設(shè)計(jì)者。我知道R/GA公司在片頭設(shè)計(jì)領(lǐng)域有一段悠久歷史。——雖然不清楚他們現(xiàn)在的重心是否仍然從事這塊領(lǐng)域,但是我知道這里就是我心目中的伊甸園。我本打算申請一個(gè)視覺設(shè)計(jì)的位置,但卻被調(diào)崗到了用戶體驗(yàn)崗,所以任職第一天就不禁思考,“線框到底是什么東東? !”
快進(jìn)到幾年后:我已經(jīng)創(chuàng)建了數(shù)以百計(jì)的線框圖和成千上萬的注釋,描述它們?nèi)绾喂ぷ骱腿绾谓M合在一起。比如: 當(dāng)用戶點(diǎn)擊菜單icon時(shí),面板將從頁面的頂部滑下來;當(dāng)用戶點(diǎn)擊縮略圖時(shí),視頻會放大到全屏。有時(shí)我也會困惑。我們被困在如何設(shè)計(jì)諸如極端狀態(tài)應(yīng)該如何表述以及如何更好的去表達(dá)工作中缺失的重要一環(huán)。當(dāng)我們交付由這些靜態(tài)頁面組成的產(chǎn)品，譬如像一個(gè)主頁的設(shè)計(jì)或產(chǎn)品頁面或文章頁面,我們只注釋這些元素是如何配合的,我們并沒有展示元素之間會發(fā)生什么。注釋并不足以提供足夠的上下文:我們不得不開始* *顯示它。
畫得線框圖越多,我越意識到曾經(jīng)學(xué)過的一切動作設(shè)計(jì)與我們作為用戶體驗(yàn)和視覺設(shè)計(jì)師的角色是完全相關(guān)的。我開始更加關(guān)注每一天中的我參與的一切,我意識到最令人感覺流暢、愉悅、直觀的經(jīng)歷總是在運(yùn)動設(shè)計(jì)上融入許多細(xì)節(jié)。
迪斯尼與用戶體驗(yàn)
如果我們要談?wù)搫赢嫼鸵约皠赢嫲l(fā)源的地方,那就是迪斯尼。迪斯尼發(fā)展了動畫的12原則,因?yàn)樗麄兠枥L現(xiàn)實(shí)的運(yùn)動和情感投入的方式，讓我意識到這是很重要的。迪士尼對現(xiàn)實(shí)生活中物體如何運(yùn)動和表現(xiàn)有很深刻的理解。
。他們知道當(dāng)一個(gè)觀眾觀看屏幕時(shí)如果事物按他們預(yù)想的進(jìn)行運(yùn)動，他們感覺到這很自然。迪士尼也知道如果想吸引觀眾，他們必須抓住觀眾們需要情感投入的那個(gè)層次。這就是他們?nèi)绾纬蔀榈谝慌鷦赢嫀煵?chuàng)造出完整的故事片，牢牢抓住觀眾的心，并使筆下的一個(gè)個(gè)角色栩栩如生產(chǎn)生情感共鳴。逼近現(xiàn)實(shí)的動作，情感的投入以及極端狀態(tài)的處理...這一切開始交匯一起。
如果將用戶體驗(yàn)比喻為一場舞蹈，那么編舞則是由如何、為何、何時(shí)組成——關(guān)鍵時(shí)刻在用戶體驗(yàn)方面，運(yùn)用適當(dāng)?shù)膭赢嫾记蓙砦^眾，可以在你和你的用戶之間進(jìn)行雙向?qū)υ?/em>
用戶體驗(yàn)的五原則
至關(guān)重要的一點(diǎn)是,用戶體驗(yàn)師和視覺設(shè)計(jì)師不僅僅是使事物實(shí)用化和遵循最佳實(shí)踐。同時(shí)我們也試圖讓這些經(jīng)驗(yàn)令人愉悅,首先,從過往經(jīng)歷講述一個(gè)故事。隨著我逐漸逐漸把注意力轉(zhuǎn)移到昔日的數(shù)碼、技術(shù)是如何運(yùn)用到動畫中，我開始也慢慢觀察到一種模式。我得出這5個(gè)原則，是因?yàn)槲艺J(rèn)為它們分別代表著用戶體驗(yàn)方面最重要的溝通點(diǎn)，可以解決并克服極端狀況下的溝通代溝，從而創(chuàng)造更閃光的使用體驗(yàn)。將這些要點(diǎn)拿捏得當(dāng)是意味深遠(yuǎn)的，因?yàn)樗鼤绊懙饺藗兊恼J(rèn)知和信任你的產(chǎn)品，總的來說會締造出更積極和更愉悅的使用體驗(yàn)。
NO.1反饋
反饋有助于展示用戶的交互的結(jié)果,是否成功,以及為什么。通常用于呈現(xiàn)一件事情是正確或錯(cuò)誤,如果頁面在加載,如果你正取得進(jìn)展,又或者你只是在簡單的做選擇。反饋是至關(guān)重要的，因?yàn)樗陀脩糁g建立一種信任感，這使用戶非常舒服而且愿意看到的！有效的反饋會幫助你在互動的時(shí)候建立一種觸覺，讓你忘記你或許不是在點(diǎn)擊一塊冰冷冷的玻璃屏，而是在屏幕上和有血有肉的元素在進(jìn)行互動。有反饋的做事情總是很好的。但你針對反饋進(jìn)行設(shè)計(jì)時(shí)，讓用戶感知反饋是顯然易見是很重要的。在組合多層次、多元化的元素（視覺、聽覺、觸覺）對用戶進(jìn)行反饋是更具有效率的。
所以，迪士尼教會了我們什么？『夸張的手法』。Glen的描述『夸張的手法』不僅僅是肉眼所見，更是可以觸摸得到的。你會常常（在迪士尼的動畫里）看到一個(gè)個(gè)角色用一種夸大而且不容置疑的方式表達(dá)情感。
野獸逐漸變得沮喪和驚訝
他舉了一個(gè)沮喪的野獸與美女的一個(gè)例子（來自《美女與野獸》），當(dāng)她說她并不打算一起共進(jìn)晚餐時(shí)，野獸耷拉著腦袋同時(shí)也拉長著眼睛了，讓他看起來仿佛很驚訝。然后他的臉壓扁了下來而且眉毛讓他看起來很生氣。觀眾甚至都根本不用看字幕是什么，因?yàn)槲⒚钪幇l(fā)生的如此之快，以至于最終結(jié)果是令人震驚，且完完全全是顯而易見的。
反饋的例子：
iOS中密碼的晃動:頂部簡單晃動,清晰明了把(密碼輸入錯(cuò)誤)信息反饋給用戶。(上面第一張圖)
Dots(手游app):把通過小點(diǎn)吧各部分不同層次簡單、愉悅的關(guān)聯(lián)到一起。(上面第二張圖)
雅虎新聞：一個(gè)接一個(gè)的填充每個(gè)圓，隨著閱讀數(shù)的更新，進(jìn)度逐漸完整，而且還得到基于閱讀過程的全屏獎勵(lì)喔。(上面第三張圖)
Beats（音樂app）: 當(dāng)你點(diǎn)中一個(gè)音樂類型，圈圈會脹大,而且各個(gè)類型之間是排排坐的O(∩_∩)O！(上面第四張圖)
(PS:在[capptivate.co]（http://capptivate.co）有很多很棒的栗子)
NO.2正反饋
正反饋：是一種暗示，更是一種視覺上的啟示。有助于傳達(dá)給用戶接下來可能的相互影響是什么、應(yīng)該期望什么，以便于更好的理解(動畫)是如何工作和無縫連接的。正反饋通過正確的動作順序，使用戶避免混淆和更好地達(dá)到(啟示用戶的)目標(biāo)。幫助人們有明確的心理預(yù)期，即將會發(fā)生什么、應(yīng)該如何應(yīng)對，并提供暗示："注意咯，看這里！"或者"這里會下沉，別過來！"或"來，再拉過來一點(diǎn)點(diǎn)。"通常這都是些很細(xì)微的細(xì)節(jié)。。。。。人們甚至不會留意到(這些細(xì)節(jié)的)存在，更不用說日后回憶這些小線索會有所幫助。正反饋是微妙的，但很強(qiáng)大！當(dāng)貫徹落實(shí)正反饋時(shí)，回報(bào)是巨大的。
迪士尼的期望原理有個(gè)非常簡單的目標(biāo)：給觀眾老爺們備好接下來會發(fā)生什么。
米奇張開雙手的動作成為一個(gè)來描述大幅度甩手過來并抓住球的標(biāo)志性符號。
為了傳達(dá)這一原則，Glen先描述了一個(gè)非常簡單的場景：米奇跨過一張桌子去拿一個(gè)球。第一幀中，他的手離他很近，而且米奇一直注視著桌子另一邊的球；下一幀，米奇的手已經(jīng)差不多摸到球了。這個(gè)簡潔的手勢，就是所有你需要說明的，對吧？手勢下降的動作對觀眾來說是沒有疑問的；在他們意識到之前，動作已經(jīng)完成了。他們可能沒有準(zhǔn)備好你要做什么,即使看起來是辣么明顯。通過花時(shí)間搭建一個(gè)米奇大大張開的雙手場景框架來建立觀眾期望，橫跨桌子的手勢成為觀眾意識到有事即將發(fā)生的標(biāo)志性符號
不能對觀眾失去耐心，他們只是在對理解到的內(nèi)容進(jìn)行反饋而已。
Glen分享的另一個(gè)期望的例子是電影《Duet》里面的場景：Tosh正在往下爬樹。最初，Glen的安排是讓Tosh(劇中男一)從樹上跳下來。很快他意識到，這樣的動作太快了以至于觀眾們都錯(cuò)過了。"你永遠(yuǎn)不會想要觀眾們落下(劇情)，"Glen說。所以他改寫了這一幕，使Tosh先回頭看了一眼Mia(劇中女一)，然后轉(zhuǎn)過身子再慢慢爬下樹。這個(gè)細(xì)節(jié)使故事有了截然不同的變化并且使觀眾對Tosh接下來要做的事情有更自然的感覺。
在微電影《Duet》里面有個(gè)美妙的插曲，當(dāng)Mia(女一號)靈巧地跳進(jìn)池塘，跟魚兒們一起游泳/翻轉(zhuǎn)時(shí)，隨之脫離了水面和做了一個(gè)側(cè)手翻。Glen描述這個(gè)場景為具有“磁力的”，(這個(gè)場景)回答了什么米婭在做什么，而且進(jìn)一步推動劇情的發(fā)展。舉個(gè)栗子，當(dāng)她首次(從樹上旋轉(zhuǎn))跳入水面時(shí)，畫面有一個(gè)重要的改變細(xì)節(jié) - 入水的泡沫就像她周圍爆炸。他說，“總體的環(huán)境是很難改變的除非你制造一點(diǎn)沖擊”。這些氣泡有助于描述Mia在哪里(水里)，包圍著她的魚兒們則告訴觀眾她即將去哪，仿佛魚兒們正在指引著Mia進(jìn)入下一幕。我喜歡這個(gè)場景是因?yàn)榄h(huán)境的邏輯讓你感覺到每一幀之間都是緊密串連在一起的，同時(shí)引導(dǎo)著觀眾們的注意力
—————————————分割線—————-—————
