UI動(dòng)畫流暢性體驗(yàn)的快與慢

黃馨儀 武漢傳媒學(xué)院

流暢并不能單純的與速度快或時(shí)間短畫等號(hào)。從字面上講，流暢在《漢典》中的釋義是靈活而通行無阻；快而清晰。在《劍橋牛津詞典》中的釋義是平滑無中斷；輕松而快。根據(jù)以上對(duì)文字的解釋，流暢的確和快有著聯(lián)系，但倘若快而不清晰，快而不能輕松自如，流暢便無從談起，反而成了負(fù)擔(dān)。因此，UI動(dòng)畫流暢性體驗(yàn)的意義，不是一味的快，而是在快與慢的動(dòng)畫流轉(zhuǎn)之間找到平衡舒適的體驗(yàn)，易于理解和使用的幸福感。

一、思維與認(rèn)知流暢

人腦中的兩大系統(tǒng)在《快思慢想》一書中，被定義為系統(tǒng) 1和系統(tǒng) 2，是由心理學(xué)家 Keith Stanovich 和 Richard West率先提出的術(shù)語(yǔ)，又在諾貝爾獎(jiǎng)得主丹尼爾·卡尼曼的《快思慢想》一書中得到詳盡推理和廣泛傳播。在無意識(shí)的系統(tǒng)里，運(yùn)轉(zhuǎn)的速度會(huì)非?？欤堑湍芎淖园l(fā)且控制熟練的行動(dòng)；有意識(shí)的系統(tǒng)里，運(yùn)轉(zhuǎn)的速度緩慢，是受控地高能耗的有反應(yīng)的行動(dòng)。而這兩個(gè)系統(tǒng)它們各有各的能力、上限和功能[1]，只要處于清醒的狀態(tài)，系統(tǒng)一和系統(tǒng)二都很活躍，且分工井然有序[2]。

（一）放松的思維認(rèn)知

系統(tǒng)一是無意識(shí)的思維模式，可以毫不費(fèi)力就能產(chǎn)生印象和感覺，是自動(dòng)化的運(yùn)作[1]。在沒有車輛的道路上開車、判斷一個(gè)聲音來源的位置，閱讀一則廣告信息上的標(biāo)題，回答簡(jiǎn)單的數(shù)學(xué)算術(shù)題等，都是認(rèn)知放松狀態(tài)下的工作范圍。它的另一個(gè)功能是根據(jù)給出的直觀數(shù)據(jù)，評(píng)估當(dāng)時(shí)的情況，決定是否需要更多系統(tǒng)二的協(xié)助，它會(huì)在容易與困難之間做選擇，當(dāng)事情沒有必要轉(zhuǎn)移注意力，或投入更多的精力時(shí)，就不會(huì)調(diào)出系統(tǒng)二來支援，當(dāng)認(rèn)知感到事情不那么順暢，有阻礙時(shí)，就會(huì)消耗系統(tǒng)二來保持事情的持續(xù)進(jìn)行。認(rèn)知放松的過程與多種輸入和輸出活動(dòng)的網(wǎng)絡(luò)相結(jié)合?？崧脦讉€(gè)例子說明了這一點(diǎn)：當(dāng)一個(gè)句子印刷清晰，被多次重復(fù)，或已深植于腦海，人就可以在認(rèn)知放松的狀態(tài)下，順暢的解讀出來。在心情好時(shí)聽一個(gè)人說活，人會(huì)感到認(rèn)知放松。相反，當(dāng)你在讀印刷不清楚，顏色淺淡的說明書，或句子冗長(zhǎng)、用語(yǔ)復(fù)雜，或心情不好，甚至在皺眉時(shí)，人會(huì)感到認(rèn)知緊張的狀態(tài)[3]。

放松的思維認(rèn)知來自于熟悉感、真實(shí)感、良好感和不費(fèi)力的自在感。系統(tǒng)一的自動(dòng)運(yùn)作可以產(chǎn)生放松的構(gòu)想模式，但是只有慢一點(diǎn)的系統(tǒng)二可以一步一步的建構(gòu)思想[1]。

（二）緊張的思維認(rèn)知

系統(tǒng)二是有意識(shí)的思維模式通常動(dòng)用到注意力去做費(fèi)力的心智活動(dòng)，包括復(fù)雜的計(jì)算、選擇和專注力的主觀經(jīng)驗(yàn)[1]。例如在告訴別人電話號(hào)碼時(shí)，尋找棕色眼睛的少女，填寫個(gè)人信息表格，朗讀一篇文言文片段，在擁堵的馬路上行駛，這些都需要大腦持續(xù)的努力，然而注意力是有限的，如果超出預(yù)算，就會(huì)感到困難或無能為力，認(rèn)知緊張是受到目前費(fèi)力程度和未被滿足的需求兩者的影響。因此，當(dāng)一件事情被初步判斷不那么容易時(shí)，系統(tǒng)二就會(huì)開始運(yùn)作，消耗注意力，思維趨于緊張狀態(tài)，當(dāng)問題得到解決，系統(tǒng)二又會(huì)回到舒適的底費(fèi)力模式中，隨時(shí)等待召喚。系統(tǒng)一則繼續(xù)在輕松的思維模式中占據(jù)主導(dǎo)，達(dá)到思維認(rèn)知的平衡。

輕松的思維模式和緊張的思維模式交替運(yùn)行，協(xié)同工作達(dá)到認(rèn)知的流暢。

二、動(dòng)畫的發(fā)展特征

（一）渾厚的動(dòng)作審美

在一些傳統(tǒng)的動(dòng)畫理論中，以人體的形體大小為中間基準(zhǔn)，越是造型巨大的形體角色，其動(dòng)作就應(yīng)當(dāng)越緩慢越沉重，其動(dòng)作給人以一種“拖”著動(dòng)的感覺；而越是形體小巧的角色，其動(dòng)作應(yīng)當(dāng)越發(fā)快速敏捷[4]。在皮克斯的動(dòng)畫片中，就有很多這樣的例子?！冻丝倓?dòng)員》里的超人特工鮑勃，《功夫熊貓》里的大熊貓阿寶，《娜扎之魔童降世》里的龍王，《瘋狂動(dòng)物城》里牛警官的動(dòng)作都是根據(jù)這樣的模式設(shè)定的，雖然動(dòng)作笨重遲緩，但也正是這樣的設(shè)定突顯了動(dòng)作的渾厚有力，武藝高強(qiáng)?！丢{子王》是這一動(dòng)作美學(xué)的代表作之一，其角色動(dòng)作連貫流暢精細(xì)，無論是獅子們的奔跑、跳躍、捕食，還是嬉戲、打斗、對(duì)話都力求讓每一個(gè)動(dòng)作清晰可見，還原自然的效果。雖然略顯拖沓，但觀眾們的視線一直被生動(dòng)活潑的動(dòng)畫鏡頭深深的吸引（見圖1）。

圖1 動(dòng)畫影片《功夫熊貓》中的角色運(yùn)動(dòng)鏡頭

（二）敏捷的動(dòng)作審美

在另一些傳統(tǒng)的動(dòng)畫理論中，動(dòng)作有著別樣的魅力。它不以角色體型、力量大小為依據(jù)，而是用了超現(xiàn)實(shí)的速度與爆發(fā)力作為動(dòng)作的制作手法，再借助環(huán)境與特效的烘托來體現(xiàn)能量與力的巨大影響。這樣的動(dòng)作干脆利落，追求敏捷與速度，創(chuàng)造了新的動(dòng)作風(fēng)格。其動(dòng)畫風(fēng)格受武俠文化傳統(tǒng)和武術(shù)文化的影響，將“靜如處子，動(dòng)如脫兔。不動(dòng)如山，疾如林，徐如風(fēng)”的精髓表現(xiàn)得淋漓盡致。動(dòng)畫片《大鬧天宮》里斬妖除魔的孫悟空、《奧特曼》里大戰(zhàn)怪獸的戰(zhàn)隊(duì)精英，還有《飛天女警》《天元突破紅蓮之眼》《千與千尋》《大魚海棠》等都是運(yùn)用這樣的動(dòng)作審美來進(jìn)行角色詮釋的，它們都減少了中間動(dòng)作的連貫時(shí)間，簡(jiǎn)化動(dòng)作的準(zhǔn)備環(huán)節(jié)，但卻在配音、環(huán)境、特效的配合下，讓觀眾們體驗(yàn)到法力無邊，熱血沸騰的視覺畫面。

無論是渾厚的動(dòng)作審美還是敏捷的動(dòng)作審美都有其各自的特點(diǎn)和魅力，人們會(huì)根據(jù)各自的偏好選擇不同風(fēng)格。短促風(fēng)與滯慢風(fēng)都遵循動(dòng)畫片的流暢之美，它們與人的認(rèn)知思維相契合（見圖2）。

圖2 動(dòng)畫影片《大鬧天宮》中的孫悟空運(yùn)動(dòng)鏡頭

三、UI動(dòng)效設(shè)計(jì)原理

在UI動(dòng)效的設(shè)計(jì)中，有不少相關(guān)的研究原理被借鑒和參考，其中最為著名的經(jīng)典之作要屬《迪士尼的十二動(dòng)畫基本原理》，早期作為表現(xiàn)角色動(dòng)作真實(shí)、生動(dòng)的動(dòng)畫法則被廣泛傳播，而后也因?yàn)榛ヂ?lián)網(wǎng)人工智能交互時(shí)代的到來被UI動(dòng)效設(shè)計(jì)者們摘錄參照，特別是其中的“緩入緩出”“時(shí)間節(jié)奏”原理在動(dòng)效設(shè)計(jì)的實(shí)踐中發(fā)揮著作用。它倡導(dǎo)物體運(yùn)動(dòng)需要時(shí)間來加速和減速，并且阻尼曲線逼真的動(dòng)畫必須準(zhǔn)確地對(duì)動(dòng)作計(jì)時(shí)，以產(chǎn)生令人信服的結(jié)果。由此看來，《迪士尼的十二動(dòng)畫基本原理》中對(duì)于運(yùn)動(dòng)的描述以“緩”為主，考慮真實(shí)性的體驗(yàn)?；谶@一點(diǎn)，Google的前交互設(shè)計(jì)師總結(jié)出了《UX在運(yùn)動(dòng)中的十二原理》，他的結(jié)論同樣指出緩動(dòng)和延遲運(yùn)動(dòng)需要基于一定的時(shí)長(zhǎng)。

Google公司在Android系統(tǒng)中的設(shè)計(jì)是以材料設(shè)計(jì)Material Design為設(shè)計(jì)理念，其中提到緩動(dòng)是一種元素的自然力起作用的方式運(yùn)動(dòng)技術(shù)，即聯(lián)想到自然界中的運(yùn)動(dòng)，并確定了具體的時(shí)間參數(shù)，如：標(biāo)準(zhǔn)緩動(dòng)為300ms、重點(diǎn)緩動(dòng)為650ms[5]。Apple的人機(jī)界面準(zhǔn)則中的動(dòng)畫使人與屏幕上的內(nèi)容之間建立了視覺聯(lián)系：提供了狀態(tài)、提供反饋、增強(qiáng)直接感和幫助用戶可視化其動(dòng)作的結(jié)果。它們使用一致的動(dòng)畫，例如熟悉，流暢的平滑過渡、設(shè)備方向的流暢變化以及基于物理的滾動(dòng)[6]。Microsoft Fluent Design中同樣提到了基于真實(shí)物理世界的運(yùn)動(dòng)效果，為UI動(dòng)畫設(shè)計(jì)者們提供了寶貴的理論原理支撐。

近年來，國(guó)內(nèi)一些開發(fā)平臺(tái)在不斷的實(shí)踐中，如雨后春筍般推出了自己的動(dòng)效設(shè)計(jì)原理和規(guī)范，逐漸成熟起來。Ant Motion是從Ant design中提煉出來的動(dòng)效語(yǔ)言。內(nèi)容包括自然、高效、克制的動(dòng)畫效果。并依據(jù)移動(dòng)的距離的長(zhǎng)短和面積大小，具體制定了四種緩動(dòng)曲線：ease in out、ease out、ease in、linear，及四種時(shí)間參數(shù)：100ms、160ms、220ms、280ms[7]。和上文中的制造商相比，這樣的動(dòng)效對(duì)時(shí)間的設(shè)定要求更短速度更快。另一個(gè)國(guó)內(nèi)開發(fā)平臺(tái)Zan design 的動(dòng)效設(shè)計(jì)方向和路線也基本與之一致。

不難看出，UI動(dòng)效的設(shè)計(jì)原理中有的主張自然“緩”，也有的偏向高效“快”。而無論是“快”還是“緩”，它們都是流暢體驗(yàn)的一種表現(xiàn)，不能割裂哪一方來評(píng)判是“快”好還是“緩”好，只是偏好不同。

四、人因流暢性體驗(yàn)

（一）流暢性與主觀感知

從主觀感知的角度來看，流暢性不是認(rèn)知操作本身，而是與認(rèn)知操作相關(guān)的輕松感，“時(shí)間錯(cuò)覺”中提到了這一概念，即時(shí)間知覺的錯(cuò)誤，變慢、變快、停止或倒退等時(shí)間錯(cuò)覺會(huì)受到事件、情緒、感覺通道、年齡等諸多因素的影響。也就是人對(duì)加工信息難易程度的主觀體驗(yàn)快慢取決于認(rèn)知熟練度，人對(duì)認(rèn)知較為熟練的信息會(huì)產(chǎn)生更快的體驗(yàn)，人對(duì)認(rèn)知較為生疏的信息或是和經(jīng)驗(yàn)不符的信息就會(huì)產(chǎn)生停止或更慢的體驗(yàn)。人的認(rèn)知熟練的信息來源于所處的自然環(huán)境，越符合自然環(huán)境的體驗(yàn)，人越能快速的感知，反之則不容易感知，就會(huì)有緩慢的錯(cuò)覺。比如在手機(jī)頁(yè)面中有動(dòng)效的轉(zhuǎn)場(chǎng)雖然客觀時(shí)間比無動(dòng)效的轉(zhuǎn)場(chǎng)長(zhǎng)，但主觀上可以使用戶加快反應(yīng)、理解頁(yè)面內(nèi)容的速度。因此，無動(dòng)效的切換頁(yè)面看似節(jié)省了時(shí)間，實(shí)則給用戶的認(rèn)知加載時(shí)間增加，流暢性體驗(yàn)主觀感知更遲緩。從而可知，流暢性與主觀感知的快慢成正比。

（二）流暢性與時(shí)間規(guī)律

流暢性不是單純的運(yùn)動(dòng)快或運(yùn)動(dòng)慢，在人因的研究中，可以找到人對(duì)于時(shí)間體驗(yàn)的規(guī)律。丹尼爾·卡尼曼提出：人對(duì)體驗(yàn)的記憶的決定因素分別是高峰時(shí)和結(jié)束時(shí)的感覺。他做了一個(gè)有趣的實(shí)驗(yàn)，分別使用線性的運(yùn)動(dòng)方式；開始快，結(jié)束緩慢的運(yùn)動(dòng)方式；開始緩慢，結(jié)束快的運(yùn)動(dòng)方式以及無規(guī)律的運(yùn)動(dòng)方式，在相同時(shí)間里完成同一個(gè)進(jìn)度條的播放，并搜集觀看者對(duì)于進(jìn)度條播放快慢的體驗(yàn)結(jié)果。結(jié)果表明，大多數(shù)人認(rèn)為開始緩慢，結(jié)束快速的進(jìn)度條感覺速度是在更快的推進(jìn)。

快與慢的運(yùn)動(dòng)是UI流暢性動(dòng)效的研究?jī)?nèi)容之一?？?，不一定要通過縮短時(shí)間來實(shí)現(xiàn)，慢，也不一定是增加時(shí)間來實(shí)現(xiàn)，而是探索如何運(yùn)用時(shí)間規(guī)律來調(diào)整運(yùn)動(dòng)的速度，使界面中跳轉(zhuǎn)的動(dòng)畫更符合人的認(rèn)知心理、審美習(xí)慣、自然規(guī)律，從而達(dá)到流暢的體驗(yàn)。它可以是一種個(gè)性的選擇，沒有唯一的標(biāo)準(zhǔn)。

綜上所述，UI動(dòng)畫流暢性體驗(yàn)的快與慢不僅僅體現(xiàn)在與時(shí)間的角逐，更是與人的認(rèn)知心理、審美習(xí)慣、自然規(guī)律相結(jié)合的綜合探索。