|
概要 UI是基于靜態(tài)頁面來設(shè)計的,，頁面之間通過跳轉(zhuǎn)切換,。在設(shè)計過程中，設(shè)計師很重視單頁的視覺效果,，卻經(jīng)常忽略了對界面跳轉(zhuǎn)的處理,。這些未經(jīng)處理的跳轉(zhuǎn)由于沒有提供足夠的預期，所以用戶在使用時經(jīng)常會覺得困惑,。與此相反,，在卡通領(lǐng)域，由于使用了足夠的動畫效果,，用戶可以非常容易理解某個動作,，即使夸張的動作也沒問題。 盡管UI設(shè)計和卡通動效之間存在差異：卡通更側(cè)重于娛樂,，而用戶界面卻是嚴謹?shù)幕邮焦ぞ?。但是我們還是可以借鑒卡通動效的優(yōu)點，從情感和認知層面上將兩者的優(yōu)勢相結(jié)合,。 Keywords：UI,、動畫效果、卡通,。 1. UI界面 VS 卡通 大家都知道,，UI界面一般都是基于靜態(tài)頁面來設(shè)計 —— 無數(shù)個頁面組成了一個軟件。通常情況下,，視覺設(shè)計師直接開始設(shè)計靜態(tài)頁面,，幾乎不考慮它們之間如何切換。由于用戶對界面之間的關(guān)聯(lián)沒有預期,，所以他們經(jīng)常會受到驚嚇,。用戶苦思冥想，想了解界面之間到底發(fā)生了什么,。 （我們的app都是由很多頁面組成的,，由于用戶對界面之間的關(guān)聯(lián)沒有預期,，所以經(jīng)常會受到驚嚇或者感到困惑。） 當用戶感知不到頁面之間的關(guān)系時,，就說明頁面之間的因果關(guān)系不夠清晰,。讓用戶理解頁面之間的關(guān)系至關(guān)重要，這直接關(guān)系到操作效率,。在沒有輔助解釋的的情況下,，用戶只能通過經(jīng)驗去理解。這是一個非常有挫折感的體驗,。 舉例來說,，在Windows中，如果我們的任務是：打開“我的電腦”中的D盤,，那流程是這樣的： 1.雙擊“計算機”圖標,； 2.圖標擴展成一個窗口； 3.在窗口中選擇D盤,。 在這種情況下,，第一步的元素是圖標，第二步元素是擴展的窗口,。界面之間的跳轉(zhuǎn)是非常突然且直接,，且沒有前后關(guān)聯(lián)。如果用戶第一次使用Windows,，這樣的界面跳轉(zhuǎn)需要理解一陣子,。
用戶往往通過經(jīng)驗來克服這些問題,。前幾次的體驗是最糟糕的; 最終用戶學習了“機器的行為“才能有效地與它進行交互。盡管這些界面的認知可以通過反復使用來提高,，但認知負擔依然沉重,。例如，用戶知道點擊圖標將打開一個窗口,，但是突然的變化（突然從圖標變成窗口）也會讓用戶遲疑,。 卡通中的動畫效果，非常擅長于提供足夠的信息讓觀眾理解,。動畫中一些令人費解的行為沒有讓用戶感到困惑,；動畫人物并不會突然消失，突然出現(xiàn),；動畫在發(fā)生形狀變化時非常自然,。 動畫提供了必要的視覺線索，讓人理解某個動作前后發(fā)生了什么,。不像UI一樣認知沉重并非常依賴經(jīng)驗,，且還將理解界面的責任的歸咎于用戶,。動畫利用真實的動作來展示對象變形，讓人更加容易理解,。 從認知和情感兩個角度來說,，將動畫融入到界面切換中是有好處的。通過對系統(tǒng)的解釋,，動畫允許用戶持續(xù)的思考一個任務,，而無需回想之前的操作。由于沒有突然的視覺變化,，動畫降低了用戶被UI界面嚇到的機會,，從而減少了不安全感,。因此,，使用動畫不僅有助于用戶理解界面，提高使用效率,。而且還使界面的體驗更愉快更舒適,。 2.在UI界面中使用動畫的幾個方法 多年來，動畫師們已經(jīng)研究出了很多動畫設(shè)計的方法,。這里選擇一些同時符合UI和動畫的設(shè)計原則,，同時展示了如何在UI設(shè)計中應用。 我們從3個維度來討論,，分別是：擬物化,，夸張和增強現(xiàn)實。本節(jié)提到的所有動畫設(shè)計原則都來自Disney 《Animation: The Illusion of Life》,。 2.1 擬物化 把UI中的元素當作真實的,，有重量的物體。在動畫片中,，人物和元素都是真實的,，有重量的物體。他們每次走動都好像是生活在真實世界中一樣,，這種感覺非常真實,。這種擬物感不僅僅是填充一個像素區(qū)域那么簡單，這些物件的運動是通過增加慣性來實現(xiàn)的,。動畫的所有的原則,，例如：慢進慢出，跟隨,，和弧形運動,，其隨后所有的討論，都是基于這個原則,，他們是有質(zhì)量的物體,。
把UI界面中的元素變成獨立的,，區(qū)別于背景的物體,，并讓其擁有動作慣性是非常重要的。在UI界面中,，元素應該被繪制為一個在三維中的對象,，用戶可以連續(xù)并穩(wěn)定的操作他們。 光是把一個元素擬物化還遠遠不夠,，性能優(yōu)化也是必須的,。為了保持移動的假象，對象在運動時,，幀速率必須夠高（當動畫達到每秒24幀時,，人眼看到是正常速度的運動）。由于性能下降可能導致移動延遲,，從而造成卡頓的現(xiàn)象,。這樣用戶容易分心，體驗就會折損,。 2.1.1 擬物化的方法一：運動模糊 擬物化和無卡頓只是最基本的需求,。如果用戶大幅移動一個對象，例如從屏幕左側(cè)跨越到右側(cè),。由于視覺停留效應,，用戶在屏幕上會看到2個以上的對象。眼睛呈現(xiàn)兩個短暫對象也被稱為視覺暫留效應,。 動畫設(shè)計師面臨這個問題時,，使用了一個經(jīng)驗法則：如果一個物體移動超過物體本身一半的大小（或者更大）的任何兩幀之間,，加入運動模糊效果,。使用運動模糊填補舊新位置之間的間隙，讓眼睛更能接受物體的移動,。雖然涉及到抗鋸齒的問題,，但運動模糊確實是一個低成本的解決方案。 （在Windows中,，鼠標指針可以設(shè)置成運動模糊,，方便用戶去追蹤鼠標指針） 動畫師發(fā)現(xiàn)，有兩種不同的運動模糊方式可以使用,。最簡單的就是使用半透明的條紋,。這種條紋就像尾巴一樣跟隨在圖標后，使用透明條紋來模擬現(xiàn)實的物理作用,，并產(chǎn)生非常逼真的效果,。另一方式是在單個幀中插入多個圖像,。例如，手臂迅速來回擺動時,，單個幀顯示多個手臂,，每個手臂在不同的位置呈現(xiàn)。這種技術(shù)可以有效提高幀速率,，并且很有說服力,。 （運動模糊的全部幀效果，可以通過每幀展示多個豎線來達到提高幀數(shù)的效果） 運動模糊的效果表明：運動不僅是一系列的靜止圖像的集合,。它會給用戶一個模糊的線索,。這種感知來源于人的視覺系統(tǒng)的工作原理?？ㄍ▌赢嫀熃?jīng)常使用運動模糊,，即使只是粗略進行運動模糊的渲染，也足以打造一種快速運動的幻覺,。在 App設(shè)計中,，由于手機尺寸的限制，一般不會出現(xiàn)超遠距離的拖動,，但是在大屏幕的電腦上就會遇到這個問題。 2.1.2 擬物化的方法二：出現(xiàn)和消失 除了移動,，元素無規(guī)則的出現(xiàn)和消失也會造成用戶困惑,。在UI設(shè)計中，有三種方式展示出現(xiàn)消失的效果：移入,，擦除,，和模糊消失。他們的動作是快而連續(xù)的,，給用戶必要的視覺線索來理解發(fā)生了什么,。 （從左到右動效依次是移入，擦除和模糊消失） 2.2 夸張 通過“夸張現(xiàn)實”的手法,，往往可以讓設(shè)計達到事倍功半的效果,。經(jīng)過夸張手法處理的卡通表現(xiàn)的更現(xiàn)實。 例如在迪斯尼的《白雪公主的小矮人》中,，小矮人是非常不寫實的：他們的臉和身體都很大,，他們的動作大而夸張。相比之下,，只有白雪公主的比例是逼真的,。相比于矮人，她更像一個真實的人,。所以白雪公主這個角色,，卻因為更接近于現(xiàn)實,，所以被渲染成相對平淡的角色。白雪公主是用來配合矮人的,。矮人反而看起來更逼真,。這種夸張的方式更加的突出了動畫本身。這樣的原理說明,，無論是物理特征,，動作特征，或四肢特征,，可以通過強化某些方面,，讓其更顯著。 通過這種方式,，觀眾可以更好的去理解這些特征和動作,。例如，每個小矮人和白雪公主都有一個特征,，往往是和他們的名字（遲鈍,，脾氣暴躁，打噴嚏）遙相呼應的,。這些特征非常強烈,，即使沒有這個名字作為一個額外的線索，人們也能通過每個矮人的身體特征,，動作和行為等夸張行為來記住某個角色,。 （白雪公主因為更接近于現(xiàn)實，所以被渲染成相對平淡的角色,。白雪公主是用來配合矮人的,。每個小矮人都有一個特征，往往是和他們的名字（遲鈍,，脾氣暴躁,，打噴嚏）遙相呼應的，而白雪公主則特征不明顯,。 ） 所以,，夸張的表現(xiàn)手法可以突出某些受到忽視的細節(jié)。在卡通中,，動畫師可以通過夸大某個細節(jié)來引起更多的注意力,。可能這些細節(jié)原本很難背察覺,。 和卡通一樣,，UI界面必須讓用戶理解，并在必要時突出一些細節(jié)。采用夸張的方式,，使UI界面中的某些對象可以更容易理解,，更加“現(xiàn)實”，從而使UI界面更吸引人,。 （在圖片社區(qū)項目中,，我們對通知使用了動效。因為通知入口屬于細節(jié),，在沒有通知時,，只保留一個icon（上圖），不吸引用戶注意,。當有新消息來時（下圖）,，用動效來吸引用戶注意。） 2.2.1夸張方法一：給用戶足夠的預期 在動作發(fā)生之前,，最好給給觀眾一些提示,。當動好，而不必對所發(fā)生的動作所驚訝,。 （ Tumblr中,，當鼠標移動到某一功能時，icon會跳動一下,，提醒用戶點擊之后會有變化） 像類似預期一樣的的夸張技巧,，它們可以讓用戶更容易理解界面。他們不斷的為用戶解釋或者暗示界面之間的繼承關(guān)系,。如果沒有這樣的線索,，用戶會非常難以理解這些界面。 2.3 增強現(xiàn)實（Reinforcement） 所有的動畫技術(shù)都會增強某個現(xiàn)實,。有些會非常極端－就像在某些動畫中，角色高速移動,，變成了一道光線,，快速的穿過屏幕。實際上這是非常隱蔽的手法,。觀眾不會感知到這些效果很夸張,。他們只是感覺超現(xiàn)實。這些夸張的效果已經(jīng)被精心處理,，所以觀眾不會被這些夸張效果所困惑,。本節(jié)就是探討，通過增強現(xiàn)實技術(shù),，用來彌補卡通與觀眾之間的關(guān)系,，亦或者UI與使用者之間的關(guān)系。 2.3.1 增強現(xiàn)實方法一：緩進緩出如前文描述，當卡通人物移動時,，是非常擬物化的,。 然而，這種移動并不是簡單的在紙上畫一些等距的角色,。動畫師在繪制動作時經(jīng)常使用緩進緩出效果：角色緩慢的走出屏幕,，接著一個快速的動作，最后的收尾動作很緩慢,。這種方式有助于讓角色在移動中看起來更有物理質(zhì)量,。此外，緩進緩出效果出現(xiàn)在某一個快速動作之前,，有助于觀看時更加舒適,。如果沒有它，動畫中的移動會感覺很假,，類似緩進緩出這種細節(jié)效果可以極大的影響一個動畫的質(zhì)量,。 （使用緩進緩出的效果后，界面感覺更加舒適,。） 2.3.2 增強現(xiàn)實方法二：弧形運動另一個原理也是經(jīng)常運行在人的潛意識中,，那就是弧形運動。相比于直線運動,，對象沿在弧形運動時,，他們是非直接式運動。類似于卡通中的角色,。圓弧路徑的運動給人一種更吸引人,，更活潑的感覺，而直線運動則比較簡單,。
2.3.3 增強現(xiàn)實方法三：跟隨運動 增強現(xiàn)實的最后一個方法是跟隨運動,。 在現(xiàn)實世界中,，當主物體發(fā)成運動時，與其關(guān)聯(lián)的物體會做出跟隨運動,。 動畫師們將這種觀察使用在動畫中,，當動畫中的主體物停止后，其他部分細節(jié)依然可以運動,。包括了身體,，衣服，和一些局部的動作處理,，讓其動效變的更加極致,。
（iOS中，移動app位置是典型的跟隨運動效果，當App插入一個新位置時,，其他app位置跟著位移） 構(gòu)建一個假象是一件非常脆弱的事,。 一些動畫的細節(jié)對最后的效果影響非常大。雖然這些動畫效果如果不在卡通中使用,，其實并不會破壞整體的世界觀,。但是加入這些效果會讓動畫更生動，更逼真,。 最終可以讓故事更容易被說服,，人們也更容易理解，也更容易讓用戶參與其中,。 3.為什么使用動畫 為什么要在UI中使用動畫,？動畫有2個特點可以解釋其在UI設(shè)計中的價值。 首先,，由于卡通是藝術(shù)性的,，他們有超越現(xiàn)實的能力。這個能力可以更有效的傳達信息,。UI界面同樣也需要明確,，清晰，簡潔的溝通,。
其次,，卡通創(chuàng)造了一個虛擬的世界，它非常容易讓觀眾沉浸其中,。通過此方法,，UI也能變的引人入勝。通過動畫,，充分吸引用戶來到它們的世界,。然后讓他們的注意力可以完全投入到工作中去。 讓用戶不要覺得他們在操作一個界面,，而讓他們更直接的觸達任務,。 4.使用UI動效的注意點 在UI界面中使用動效是有益的。但是UI并不是卡通,。它們之間最重要的一個區(qū)別是：卡通是一種被動介質(zhì)，而用戶界面是互動式的,。界面中的動效應該設(shè)計成不讓用戶感知到的狀態(tài)（足夠快,，足夠引人入勝，足夠干凈利落,。使用戶無意識的認識到這一點）用戶可能希望在前一個動畫結(jié)束之前就進行下一個操作,。在這些情況下，應該給予用戶最直接的控制。但是界面設(shè)計的原則仍應該利用動畫技術(shù)來支持,。 卡通和UI的另一個區(qū)別是他們的使用目標：卡通純粹是享受和娛樂,，而用戶界面是用來完成工作的。由于工作的嚴謹性,，需要排除漫畫中的娛樂元素,。卡通往往古怪且愚蠢,，如果這種古怪足以讓用戶理解用戶界面的功能,，那這種古怪則可以保留。例如,，動畫可以用在第一次打開軟件時,，給用戶一個驚喜。通過預期暗示用戶操作,，通過這個動作給用戶一些驚喜是可取的,。 UI是用來完成任務的工具，動畫應該盡可能的快,，同時也保持其清晰度,。例如把動畫當作一個時尚元素使用時，動畫必須要快,，通過快來減少用戶執(zhí)行和理解的時間,。 5.總結(jié) 在UI中使用動效有以下幾個優(yōu)點： -由于動畫讓用戶更容易理解界面之間的關(guān)系，所以減輕了很多認知負擔,。 -通過消除屏幕上的跳變,，讓界面不讓用戶吃驚并費解，從而讓體驗更加愉快,。 -將物理世界的運動用在動畫中,，縮短了用戶和界面之間的鴻溝，讓用戶更專注于任務而不是理解界面,。 動畫展示效果遠遠超過了靜態(tài)展示,，甚至比靜態(tài)展示更直接的闡釋了界面。動畫并不一定是緩慢的,，或者會分散用戶注意力的東西,。通過悉心調(diào)整，動畫可以讓界面可理解,，有魅力的,。同時使用起來的體驗是愉快的。 |
|
|
