1. UI界面 VS 卡通 大家都知道，UI界面一般都是基于靜態(tài)頁(yè)面來(lái)設(shè)計(jì) —— 無(wú)數(shù)個(gè)頁(yè)面組成了一個(gè)軟件。通常情況下，視覺設(shè)計(jì)師直接開始設(shè)計(jì)靜態(tài)頁(yè)面，幾乎不考慮它們之間如何切換。由于用戶對(duì)界面之間的關(guān)聯(lián)沒有預(yù)期，所以他們經(jīng)常會(huì)受到驚嚇。用戶苦思冥想，想了解界面之間到底發(fā)生了什么。
（我們的app都是由很多頁(yè)面組成的，由于用戶對(duì)界面之間的關(guān)聯(lián)沒有預(yù)期，所以經(jīng)常會(huì)受到驚嚇或者感到困惑。 當(dāng)用戶感知不到頁(yè)面之間的關(guān)系時(shí)，就說明頁(yè)面之間的因果關(guān)系不夠清晰。讓用戶理解頁(yè)面之間的關(guān)系至關(guān)重要，這直接關(guān)系到操作效率。在沒有輔助解釋的的情況下，用戶只能通過經(jīng)驗(yàn)去理解。這是一個(gè)非常有挫折感的體驗(yàn)。 舉例來(lái)說，在Windows中，如果我們的任務(wù)是：打開“我的電腦”中的D盤，那流程是這樣的： 1.雙擊“計(jì)算機(jī)”圖標(biāo)；2.圖標(biāo)擴(kuò)展成一個(gè)窗口；
3.在窗口中選擇D盤。 在這種情況下，第一步的元素是圖標(biāo)，第二步元素是擴(kuò)展的窗口。界面之間的跳轉(zhuǎn)是非常突然且直接，且沒有前后關(guān)聯(lián)。如果用戶第一次使用Windows，這樣的界面跳轉(zhuǎn)需要理解一陣子。
（在Windows中，圖標(biāo)和窗口之間的跳轉(zhuǎn)十分直接，如果第一次Windows使用會(huì)讓用戶很困惑） 用戶往往通過經(jīng)驗(yàn)來(lái)克服這些問題。前幾次的體驗(yàn)是最糟糕的; 最終用戶學(xué)習(xí)了“機(jī)器的行為“才能有效地與它進(jìn)行交互。盡管這些界面的認(rèn)知可以通過反復(fù)使用來(lái)提高，但認(rèn)知負(fù)擔(dān)依然沉重。例如，用戶知道點(diǎn)擊圖標(biāo)將打開一個(gè)窗口，但是突然的變化（突然從圖標(biāo)變成窗口）也會(huì)讓用戶遲疑。 卡通中的動(dòng)畫效果，非常擅長(zhǎng)于提供足夠的信息讓觀眾理解。動(dòng)畫中一些令人費(fèi)解的行為沒有讓用戶感到困惑；動(dòng)畫人物并不會(huì)突然消失，突然出現(xiàn)；動(dòng)畫在發(fā)生形狀變化時(shí)非常自然。 動(dòng)畫提供了必要的視覺線索，讓人理解某個(gè)動(dòng)作前后發(fā)生了什么。不像UI一樣認(rèn)知沉重并非常依賴經(jīng)驗(yàn)，且還將理解界面的責(zé)任的歸咎于用戶。動(dòng)畫利用真實(shí)的動(dòng)作來(lái)展示對(duì)象變形，讓人更加容易理解。 從認(rèn)知和情感兩個(gè)角度來(lái)說，將動(dòng)畫融入到界面切換中是有好處的。通過對(duì)系統(tǒng)的解釋，動(dòng)畫允許用戶持續(xù)的思考一個(gè)任務(wù)，而無(wú)需回想之前的操作。由于沒有突然的視覺變化，動(dòng)畫降低了用戶被UI界面嚇到的機(jī)會(huì)，從而減少了不安全感。因此，使用動(dòng)畫不僅有助于用戶理解界面，提高使用效率。而且還使界面的體驗(yàn)更愉快更舒適。2.在UI界面中使用動(dòng)畫的幾個(gè)方法 多年來(lái)，動(dòng)畫師們已經(jīng)研究出了很多動(dòng)畫設(shè)計(jì)的方法。這里選擇一些同時(shí)符合UI和動(dòng)畫的設(shè)計(jì)原則，同時(shí)展示了如何在UI設(shè)計(jì)中應(yīng)用。 我們從3個(gè)維度來(lái)討論，分別是：擬物化，夸張和增強(qiáng)現(xiàn)實(shí)。本節(jié)提到的所有動(dòng)畫設(shè)計(jì)原則都來(lái)自Disney 《Animation: The Illusion of Life》。
2.1 擬物化 把UI中的元素當(dāng)作真實(shí)的，有重量的物體。在動(dòng)畫片中，人物和元素都是真實(shí)的，有重量的物體。他們每次走動(dòng)都好像是生活在真實(shí)世界中一樣，這種感覺非常真實(shí)。這種擬物感不僅僅是填充一個(gè)像素區(qū)域那么簡(jiǎn)單，這些物件的運(yùn)動(dòng)是通過增加慣性來(lái)實(shí)現(xiàn)的。動(dòng)畫的所有的原則，例如：慢進(jìn)慢出，跟隨，和弧形運(yùn)動(dòng)，其隨后所有的討論，都是基于這個(gè)原則，他們是有質(zhì)量的物體。
（所有元素是有重量的物體。這是所有的運(yùn)動(dòng)的基礎(chǔ)。 把UI界面中的元素變成獨(dú)立的，區(qū)別于背景的物體，并讓其擁有動(dòng)作慣性是非常重要的。在UI界面中，元素應(yīng)該被繪制為一個(gè)在三維中的對(duì)象，用戶可以連續(xù)并穩(wěn)定的操作他們。 光是把一個(gè)元素?cái)M物化還遠(yuǎn)遠(yuǎn)不夠，性能優(yōu)化也是必須的。為了保持移動(dòng)的假象，對(duì)象在運(yùn)動(dòng)時(shí)，幀速率必須夠高（當(dāng)動(dòng)畫達(dá)到每秒24幀時(shí)，人眼看到是正常速度的運(yùn)動(dòng)）。由于性能下降可能導(dǎo)致移動(dòng)延遲，從而造成卡頓的現(xiàn)象。這樣用戶容易分心，體驗(yàn)就會(huì)折損。2.1.1 擬物化的方法一：運(yùn)動(dòng)模糊 擬物化和無(wú)卡頓只是最基本的需求。如果用戶大幅移動(dòng)一個(gè)對(duì)象，例如從屏幕左側(cè)跨越到右側(cè)。由于視覺停留效應(yīng)，用戶在屏幕上會(huì)看到2個(gè)以上的對(duì)象。眼睛呈現(xiàn)兩個(gè)短暫對(duì)象也被稱為視覺暫留效應(yīng)。 動(dòng)畫設(shè)計(jì)師面臨這個(gè)問題時(shí)，使用了一個(gè)經(jīng)驗(yàn)法則：如果一個(gè)物體移動(dòng)超過物體本身一半的大?。ɑ蛘吒螅┑娜魏蝺蓭g，加入運(yùn)動(dòng)模糊效果。使用運(yùn)動(dòng)模糊填補(bǔ)舊新位置之間的間隙，讓眼睛更能接受物體的移動(dòng)。雖然涉及到抗鋸齒的問題，但運(yùn)動(dòng)模糊確實(shí)是一個(gè)低成本的解決方案。
（在Windows中，鼠標(biāo)指針可以設(shè)置成運(yùn)動(dòng)模糊，方便用戶去追蹤鼠標(biāo)指針） 動(dòng)畫師發(fā)現(xiàn)，有兩種不同的運(yùn)動(dòng)模糊方式可以使用。最簡(jiǎn)單的就是使用半透明的條紋。這種條紋就像尾巴一樣跟隨在圖標(biāo)后，使用透明條紋來(lái)模擬現(xiàn)實(shí)的物理作用，并產(chǎn)生非常逼真的效果。另一方式是在單個(gè)幀中插入多個(gè)圖像。例如，手臂迅速來(lái)回?cái)[動(dòng)時(shí)，單個(gè)幀顯示多個(gè)手臂，每個(gè)手臂在不同的位置呈現(xiàn)。這種技術(shù)可以有效提高幀速率，并且很有說服力。 （運(yùn)動(dòng)模糊的全部幀效果，可以通過每幀展示多個(gè)豎線來(lái)達(dá)到提高幀數(shù)的效果） 運(yùn)動(dòng)模糊的效果表明：運(yùn)動(dòng)不僅是一系列的靜止圖像的集合。它會(huì)給用戶一個(gè)模糊的線索。這種感知來(lái)源于人的視覺系統(tǒng)的工作原理?？ㄍ▌?dòng)畫師經(jīng)常使用運(yùn)動(dòng)模糊，即使只是粗略進(jìn)行運(yùn)動(dòng)模糊的渲染，也足以打造一種快速運(yùn)動(dòng)的幻覺。在App設(shè)計(jì)中，由于手機(jī)尺寸的限制，一般不會(huì)出現(xiàn)超遠(yuǎn)距離的拖動(dòng)，但是在大屏幕的電腦上就會(huì)遇到這個(gè)問題。2.1.2 擬物化的方法二：出現(xiàn)和消失 除了移動(dòng)，元素?zé)o規(guī)則的出現(xiàn)和消失也會(huì)造成用戶困惑。在UI設(shè)計(jì)中，有三種方式展示出現(xiàn)消失的效果：移入，擦除，和模糊消失。他們的動(dòng)作是快而連續(xù)的，給用戶必要的視覺線索來(lái)理解發(fā)生了什么。
（從左到右動(dòng)效依次是移入，擦除和模糊消失）
