不一樣的方法論:從迪斯尼動畫學(xué)到的五大UX設(shè)計原則

0 評論 9198 瀏覽 46 收藏 23 分鐘

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

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

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

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

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

迪斯尼和 UX 設(shè)計

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

UX Choreography 是指用戶體驗流程編排 ,即如何運用適當(dāng)?shù)募记蓙硪龑?dǎo)自然流暢的畫面動作和俘獲觀眾的注意力,并在一些至關(guān)重要的節(jié)點,和用戶產(chǎn)生雙向的對話。

我們可以從迪斯尼動畫設(shè)計中學(xué)到的 5 大 UX 設(shè)計法則

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

反饋交互

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

關(guān)于反饋交互,我們能從迪斯尼學(xué)到的是夸張的表現(xiàn)手法。Glen 認(rèn)為,夸張不僅被看見,還應(yīng)該被感覺到。在迪斯尼的設(shè)計中,經(jīng)常是以一種非常明顯、幅度較大的表達(dá)方式進(jìn)行反應(yīng)。

1-YctY2u6kWGtQmiNl8gfl5g

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

1

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

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

yahoosmall

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

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

前饋 Feedforward

前饋是暗示的一種,呈現(xiàn)視覺上的可預(yù)見性,傳達(dá)給用戶可能將要發(fā)生或期待的交互是什么,引導(dǎo)用戶學(xué)會如何正確地使用產(chǎn)品。前饋指引用戶進(jìn)行正確地流程操作,更好的完成任務(wù)。就像一個個小提示,幫助用戶了解為將要發(fā)生的交互做好準(zhǔn)備,比如「注意,看這兒!」、「拖到這里吧!」、「再拉一點吧!」等等。這些小細(xì)節(jié)不引人注目且經(jīng)常被人忽略,但是如果用好前饋交互,往往能為你的產(chǎn)品帶來意想不到的效果。

前饋

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

for

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

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

不能對觀眾沒有耐心,他們只是在對你的設(shè)計做出反應(yīng)。

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

2

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

右圖 Snapchat:往下拉圖標(biāo)小人跳舞,提示用戶進(jìn)程正在運行

clearsmall

左圖 Clear:下拉時新建一個任務(wù),用說明文字來給觀眾以提示

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

Spatial Awareness 空間感

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

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

staging

Staging

屏幕快照 2016-08-27 下午11.00.28

上圖的連續(xù)動畫出自《Duet》,展示了 Mia 縱身跳入水中,游泳、翻轉(zhuǎn)、消失、在水上翻筋斗一連續(xù)動作。

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

stellarsmall

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

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

viscosmall

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

右圖 Nike Making:選擇類別后放大至全屏,然后往上滑動,出現(xiàn)子類別。

用戶焦點

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

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

觀眾跟得上劇情節(jié)奏,才會感到開心。要不然,沒人會開心。

pinterestsmall

左圖 Pinterest:長按卡片會適時地出現(xiàn)操作按鈕,「收藏」、「喜歡」、「發(fā)送」或者「更多」。

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

4-1

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

右圖 Yahoo Weather:動效是抓住用戶注意力的最有效方式,比如這里用到的風(fēng)車動效,簡單一目了然。

Brand Tone of Voice 品牌調(diào)性

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

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

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

Glen 說,F(xiàn)reddie Moore 是迪斯尼一名動畫師,負(fù)責(zé)迪斯尼「視覺和感覺」的設(shè)計。在他之前,米奇的人物形象和今天不大一樣,就是一個圈。Freddie 來了之后,開始研究米奇身上的每一個元素極其它們之間的關(guān)系。Frank Thomas 和 Ollie Johnston(迪斯尼另外兩名老司機(jī),是迪斯尼的元老級動畫大師)也常常教導(dǎo)后輩的動畫師,「線和線之間都有聯(lián)系?!?/p>

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

5

左圖 Nike+:界面、圖標(biāo)和徽章都以一定的速度滑向跑道,與 Nike 的主題調(diào)性運動遙相呼應(yīng)

右圖 Zappos:沒人不喜歡彩蛋,特別是一只披風(fēng)貓送給你的

snapchatsmalll

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

右圖 Flickr: ? 在刷新個人主頁時,構(gòu)成 Flickr 圖標(biāo)的粉、藍(lán)兩色會出現(xiàn)旋轉(zhuǎn)動效,非常聰明的品牌展示

這 5 條原則告訴我們應(yīng)該如何俘獲用戶的注意力,正確引導(dǎo)他們?nèi)谌氲侥愕墓适轮?,希望能?UX 設(shè)計師的工作帶來些許啟發(fā)。為用戶帶來真實、情感共鳴的、流暢的體驗是 UX 設(shè)計師的職責(zé)所在。時刻記得,作為一名 UX 設(shè)計師,我們的主角是作為人類的用戶,一切出發(fā)點都應(yīng)以人為本。

我總是做些我做不來的事兒,因為我覺得可能做著做著就學(xué)會了。

——畢加索

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

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

 

作者: Rebecca Ussai

原文:The 5 Principles of UX Choreography

本文已由作者授權(quán)給翻譯與發(fā)表,未經(jīng)授權(quán)禁止轉(zhuǎn)載。

本文由 @eloisechou 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!