超多干貨的UI界面動(dòng)效設計指南發(fā)布者：本站     時(shí)間：2020-06-20 15:06:48

UI是基于靜態(tài)頁(yè)面來(lái)設計的，頁(yè)面之間通過(guò)跳轉切換。在設計過(guò)程中，設計師很重視單頁(yè)的視覺(jué)效果，卻經(jīng)常忽略了對界面跳轉的處理。這些未經(jīng)處理的跳轉由于沒(méi)有提供足夠的預期，所以用戶(hù)在使用時(shí)經(jīng)常會(huì )覺(jué)得困惑。與此相反，在卡通領(lǐng)域，由于使用了足夠的動(dòng)畫(huà)效果，用戶(hù)可以非常容易理解某個(gè)動(dòng)作，即使夸張的動(dòng)作也沒(méi)問(wèn)題。

盡管UI設計和卡通動(dòng)效之間存在差異：卡通更側重于娛樂(lè )，而用戶(hù)界面卻是嚴謹的互動(dòng)式工具。但是我們還是可以借鑒卡通動(dòng)效的優(yōu)點(diǎn)，從情感和認知層面上將兩者的優(yōu)勢相結合。

Keywords：UI、動(dòng)畫(huà)效果、卡通。

1. UI界面 VS 卡通
大家都知道，UI界面一般都是基于靜態(tài)頁(yè)面來(lái)設計 —— 無(wú)數個(gè)頁(yè)面組成了一個(gè)軟件。通常情況下，視覺(jué)設計師直接開(kāi)始設計靜態(tài)頁(yè)面，幾乎不考慮它們之間如何切換。由于用戶(hù)對界面之間的關(guān)聯(lián)沒(méi)有預期，所以他們經(jīng)常會(huì )受到驚嚇。用戶(hù)苦思冥想，想了解界面之間到底發(fā)生了什么。

動(dòng)效設計原理:從卡通動(dòng)畫(huà)到UI動(dòng)效

（我們的app都是由很多頁(yè)面組成的，由于用戶(hù)對界面之間的關(guān)聯(lián)沒(méi)有預期，所以經(jīng)常會(huì )受到驚嚇或者感到困惑。圖片來(lái)自：

當用戶(hù)感知不到頁(yè)面之間的關(guān)系時(shí)，就說(shuō)明頁(yè)面之間的因果關(guān)系不夠清晰。讓用戶(hù)理解頁(yè)面之間的關(guān)系至關(guān)重要，這直接關(guān)系到操作效率。在沒(méi)有輔助解釋的的情況下，用戶(hù)只能通過(guò)經(jīng)驗去理解。這是一個(gè)非常有挫折感的體驗。

舉例來(lái)說(shuō)，在Windows中，如果我們的任務(wù)是：打開(kāi)“我的電腦”中的D盤(pán)，那流程是這樣的：

1.雙擊“計算機”圖標；
2.圖標擴展成一個(gè)窗口；
3.在窗口中選擇D盤(pán)。

在這種情況下，第一步的元素是圖標，第二步元素是擴展的窗口。界面之間的跳轉是非常突然且直接，且沒(méi)有前后關(guān)聯(lián)。如果用戶(hù)第一次使用Windows，這樣的界面跳轉需要理解一陣子。

動(dòng)效設計原理:從卡通動(dòng)畫(huà)到UI動(dòng)效

（在Windows中，圖標和窗口之間的跳轉十分直接，如果第一次Windows使用會(huì )讓用戶(hù)很困惑）

用戶(hù)往往通過(guò)經(jīng)驗來(lái)克服這些問(wèn)題。前幾次的體驗是最糟糕的; 最終用戶(hù)學(xué)習了“機器的行為“才能有效地與它進(jìn)行交互。盡管這些界面的認知可以通過(guò)反復使用來(lái)提高，但認知負擔依然沉重。例如，用戶(hù)知道點(diǎn)擊圖標將打開(kāi)一個(gè)窗口，但是突然的變化（突然從圖標變成窗口）也會(huì )讓用戶(hù)遲疑。

卡通中的動(dòng)畫(huà)效果，非常擅長(cháng)于提供足夠的信息讓觀(guān)眾理解。動(dòng)畫(huà)中一些令人費解的行為沒(méi)有讓用戶(hù)感到困惑；動(dòng)畫(huà)人物并不會(huì )突然消失，突然出現；動(dòng)畫(huà)在發(fā)生形狀變化時(shí)非常自然。

動(dòng)畫(huà)提供了必要的視覺(jué)線(xiàn)索，讓人理解某個(gè)動(dòng)作前后發(fā)生了什么。不像UI一樣認知沉重并非常依賴(lài)經(jīng)驗，且還將理解界面的責任的歸咎于用戶(hù)。動(dòng)畫(huà)利用真實(shí)的動(dòng)作來(lái)展示對象變形，讓人更加容易理解。

從認知和情感兩個(gè)角度來(lái)說(shuō)，將動(dòng)畫(huà)融入到界面切換中是有好處的。通過(guò)對系統的解釋?zhuān)瑒?dòng)畫(huà)允許用戶(hù)持續的思考一個(gè)任務(wù)，而無(wú)需回想之前的操作。由于沒(méi)有突然的視覺(jué)變化，動(dòng)畫(huà)降低了用戶(hù)被UI界面嚇到的機會(huì )，從而減少了不安全感。因此，使用動(dòng)畫(huà)不僅有助于用戶(hù)理解界面，提高使用效率。而且還使界面的體驗更愉快更舒適。

2.在UI界面中使用動(dòng)畫(huà)的幾個(gè)方法
多年來(lái)，動(dòng)畫(huà)師們已經(jīng)研究出了很多動(dòng)畫(huà)設計的方法。這里選擇一些同時(shí)符合UI和動(dòng)畫(huà)的設計原則，同時(shí)展示了如何在UI設計中應用。

我們從3個(gè)維度來(lái)討論，分別是：擬物化，夸張和增強現實(shí)。本節提到的所有動(dòng)畫(huà)設計原則都來(lái)自Disney 《Animation: The Illusion of Life》。

2.1 擬物化
把UI中的元素當作真實(shí)的，有重量的物體。在動(dòng)畫(huà)片中，人物和元素都是真實(shí)的，有重量的物體。他們每次走動(dòng)都好像是生活在真實(shí)世界中一樣，這種感覺(jué)非常真實(shí)。這種擬物感不僅僅是填充一個(gè)像素區域那么簡(jiǎn)單，這些物件的運動(dòng)是通過(guò)增加慣性來(lái)實(shí)現的。動(dòng)畫(huà)的所有的原則，例如：慢進(jìn)慢出，跟隨，和弧形運動(dòng)，其隨后所有的討論，都是基于這個(gè)原則，他們是有質(zhì)量的物體。

tx20150723

（所有元素是有重量的物體。這是所有的運動(dòng)的基礎。圖片來(lái)自：https://medium.com）

把UI界面中的元素變成獨立的，區別于背景的物體，并讓其擁有動(dòng)作慣性是非常重要的。在UI界面中，元素應該被繪制為一個(gè)在三維中的對象，用戶(hù)可以連續并穩定的操作他們。

光是把一個(gè)元素擬物化還遠遠不夠，性能優(yōu)化也是必須的。為了保持移動(dòng)的假象，對象在運動(dòng)時(shí)，幀速率必須夠高（當動(dòng)畫(huà)達到每秒24幀時(shí)，人眼看到是正常速度的運動(dòng)）。由于性能下降可能導致移動(dòng)延遲，從而造成卡頓的現象。這樣用戶(hù)容易分心，體驗就會(huì )折損。

2.1.1 擬物化的方法一：運動(dòng)模糊
擬物化和無(wú)卡頓只是最基本的需求。如果用戶(hù)大幅移動(dòng)一個(gè)對象，例如從屏幕左側跨越到右側。由于視覺(jué)停留效應，用戶(hù)在屏幕上會(huì )看到2個(gè)以上的對象。眼睛呈現兩個(gè)短暫對象也被稱(chēng)為視覺(jué)暫留效應。

動(dòng)畫(huà)設計師面臨這個(gè)問(wèn)題時(shí)，使用了一個(gè)經(jīng)驗法則：如果一個(gè)物體移動(dòng)超過(guò)物體本身一半的大?。ɑ蛘吒螅┑娜魏蝺蓭g，加入運動(dòng)模糊效果。使用運動(dòng)模糊填補舊新位置之間的間隙，讓眼睛更能接受物體的移動(dòng)。雖然涉及到抗鋸齒的問(wèn)題，但運動(dòng)模糊確實(shí)是一個(gè)低成本的解決方案。