UI動畫流暢性體驗的快與慢

黃馨儀 武漢傳媒學院

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

一、思維與認知流暢

人腦中的兩大系統在《快思慢想》一書中，被定義為系統 1和系統 2，是由心理學家 Keith Stanovich 和 Richard West率先提出的術語，又在諾貝爾獎得主丹尼爾·卡尼曼的《快思慢想》一書中得到詳盡推理和廣泛傳播。在無意識的系統里，運轉的速度會非常快，是低能耗自發且控制熟練的行動；有意識的系統里，運轉的速度緩慢，是受控地高能耗的有反應的行動。而這兩個系統它們各有各的能力、上限和功能[1]，只要處于清醒的狀態，系統一和系統二都很活躍，且分工井然有序[2]。

（一）放松的思維認知

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

放松的思維認知來自于熟悉感、真實感、良好感和不費力的自在感。系統一的自動運作可以產生放松的構想模式，但是只有慢一點的系統二可以一步一步的建構思想[1]。

（二）緊張的思維認知

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

輕松的思維模式和緊張的思維模式交替運行，協同工作達到認知的流暢。

二、動畫的發展特征

（一）渾厚的動作審美

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

圖1 動畫影片《功夫熊貓》中的角色運動鏡頭

（二）敏捷的動作審美

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

無論是渾厚的動作審美還是敏捷的動作審美都有其各自的特點和魅力，人們會根據各自的偏好選擇不同風格。短促風與滯慢風都遵循動畫片的流暢之美，它們與人的認知思維相契合（見圖2）。

圖2 動畫影片《大鬧天宮》中的孫悟空運動鏡頭

三、UI動效設計原理

在UI動效的設計中，有不少相關的研究原理被借鑒和參考，其中最為著名的經典之作要屬《迪士尼的十二動畫基本原理》，早期作為表現角色動作真實、生動的動畫法則被廣泛傳播，而后也因為互聯網人工智能交互時代的到來被UI動效設計者們摘錄參照，特別是其中的“緩入緩出”“時間節奏”原理在動效設計的實踐中發揮著作用。它倡導物體運動需要時間來加速和減速，并且阻尼曲線逼真的動畫必須準確地對動作計時，以產生令人信服的結果。由此看來，《迪士尼的十二動畫基本原理》中對于運動的描述以“緩”為主，考慮真實性的體驗。基于這一點，Google的前交互設計師總結出了《UX在運動中的十二原理》，他的結論同樣指出緩動和延遲運動需要基于一定的時長。

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

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

不難看出，UI動效的設計原理中有的主張自然“緩”，也有的偏向高效“快”。而無論是“快”還是“緩”，它們都是流暢體驗的一種表現，不能割裂哪一方來評判是“快”好還是“緩”好，只是偏好不同。

四、人因流暢性體驗

（一）流暢性與主觀感知

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

（二）流暢性與時間規律

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

快與慢的運動是UI流暢性動效的研究內容之一。快，不一定要通過縮短時間來實現，慢，也不一定是增加時間來實現，而是探索如何運用時間規律來調整運動的速度，使界面中跳轉的動畫更符合人的認知心理、審美習慣、自然規律，從而達到流暢的體驗。它可以是一種個性的選擇，沒有唯一的標準。

綜上所述，UI動畫流暢性體驗的快與慢不僅僅體現在與時間的角逐，更是與人的認知心理、審美習慣、自然規律相結合的綜合探索。