7000+超詳細干貨！系統掌握動效設計模式（上）

動效設計模式是產品設計與用戶認知反復碰撞，長期積累、沉淀下來的知識資產。文章將基于界面整體設計框架，結合用戶心智模式，系統介紹動效設計需要考慮到的全部維度。文章還引入了設計方法、生產流程、評價分析等量化機制，讓沉淀下來知識資產，可以轉化為不斷復用的“流動資產”。

什么是動效設計模式

動效設計模式是產品設計與用戶認知反復碰撞，長期積累、沉淀下來的知識資產。整理總結這些知識資產可以幫助我們在未來工作中不盲目的使用動效和互動。使“動效設計模式”能成為指導提升產品用戶體驗，穩定輸出模式化、規范化動效及互動方式的白皮書。

動效在界面中的作用

1. 內容審美作用

審美有標準，但是個體對美的訴求各有不同。界面中恰當設置一些能與用戶交互的動效機制可以豐富內容，使界面有了生命，顯得不再呆板。設計合理的動效互動，能有效降低交互操作時的疲勞感，并增加界面審美情趣。

2. 注意停留作用

界面中“動”的模塊可以最大程度吸引用戶注意力。但當整個頁面都在發生劇烈變化時，不動的模塊產生的差異化更能吸引眼球。動效應該遵循差異化原則、信息錯峰方式，才能使得注意力最大化利用。

3. 理解共情作用

動效可以輔助用戶理解信息。動效與動畫一樣有著特別突出的敘事優勢。很多靜態圖片無法講清楚的事情，動起來、串聯起來就一目了然。動效結合互動可以更好的表達情感、刻畫情景，所帶來的優勢是代入感的增強，用戶更加投入信息，并容易理解其內容，降低了用戶理解成本。

4. 流暢引導作用

幫助引導用戶完成必要的操作。當整個引導過程充滿貼身般的跟隨感，就能夠獲得用戶更好的產品體驗。相較于傳統的文字指南更加立體鮮活、有效。而在游戲化設計中更為強調“流程體驗式引導”，每一個“新招式”都會讓玩家用戶先用一遍，按鍵操作指南會在玩家未達成訓練時反復提示，直到玩家學會“新招式”的操作要領后，提示才會消失。有時候教程和游戲進程也是同時進行的，玩家必須掌握迅速掌握“新招式”才能通過新的關卡。

5. 結構串聯作用

頁面經常需要的跨越式跳轉，把不同級別的頁面相互關聯，并要讓用戶快速理解當中的關系和邏輯，不至于迷失于龐雜的信息海洋中。這就是動效要在其中需要做的工作。

6. 行動轉化作用

之前流暢的引導促使用戶跑通了產品，全面的體驗了產品核心流程，建立起了對產品基本的認知和信賴，完成了從新手用戶到初級用戶的轉化。此刻的產品需要更多的誘惑機制，去引導用戶向其他方向逐步探索產品。這種探索欲必須是用戶自主行為。用戶將在這種內部驅動力作用下完成向資深用戶的轉化。這個時候用戶的身份已經與產品相互綁定形成極強的用戶粘性。資深用戶會自發的將產品擴散到該用戶認為可以轉化的新用戶群體中。動效和相關互動所要做的就是制造那些誘惑點，制造白帽與黑帽同時驅動，加速這個過程。

動效設計的原則與標準

1. 動效設計的原則

原則一：行動力原則

行動力原則是動效設計的基礎要求。這也是一個以結果為導向的要求，因為設計動效的目的，是要保證用戶能通過設置的動效，注意到屏幕中的特定區域，并很快理解信息要點，最終落實到設計者期望的用戶行動轉化中。

原則二：邏輯性原則

邏輯性原則，即動效、互動與用戶心智一致性的原則。保證了動效及互動的合理性、流暢度。

原則三：必要性原則

動效設計需要最簡化，才能保證原則一的更好實現，減少干擾，聚焦目標。

2. 動效設計的標準

標準一：吸引

采用訪談調研用戶、觀察用戶使用的方式，評估用戶對于該動效設計的吸引程度問題，獲得定量的標準。

標準二：流暢

流暢度問題描述的是流程引導是否順利，以及動效本身流暢度是否正常兩個層面。通過訪談調研用戶、觀察用戶使用，以及專家自評，獲得定性的標準。

標準三：理解

采用訪談調研用戶、觀察用戶使用等方式，評估用戶對于該動效設計的理解程度問題，獲得定量的標準。

標準四：合理

合理性問題涉及視覺風格、動效與互動方式是否符合互動的邏輯和用戶心智模式。通過梳理目標，并在特定前提條件下，梳理互動的邏輯流程圖，獲得定性的標準。

標準五：趣味

采用訪談調研用戶獲得定性的標準，即用戶感覺動效設計是否有趣味。

標準六：美學

采用調研用戶，成立專家組自評獲得定性的標準。確定動效設計是否滿足、契合產品的美學要求。

標準七：目標

目標完成度是可以定量的標準。整體上包括：點擊數、頁面停留時間（除停留動效類別外，其他類型動效平均停留時間越少越好）、任務引導完成度、終極目標轉化達成情況、用戶滿意度、復訪率。不同類型的動效目標不同，評價該問題時，需要挑選其中幾個相關維度參考即可。

標準八：簡化

簡化度問題應該通過專家自評獲得定性的標準。視覺、動效、互動三個層面是否為最簡化，保證沒有多余的設計。

動效設計在應用的框架

1. 控件動效

控件動效通過視覺和動效向用戶傳達該區域控件的功能用途，及入口連接頁面的去向、為用戶明確行動目的。運動變化中的控件動效，也可以有效吸引用戶注意力，是很好的注意力牽引工具。

圖標

「徽章等級圖標、功能圖標、提示圖標、輔助圖標、標簽圖標」

?按鈕

「導航按鈕、菜單/列表按鈕、圖標按鈕、復選單選」

卡片&容器

「卡片、彈窗、上/下/左/右拉彈窗、浮窗、XY 滾動/滑動容器、圖片容器、視頻容器、瀑布流、媒體庫列表」

提示引導

「流程引導、功能引導、消息提示、警示項」

圖表

「柱狀圖/進度條、扇形圖、折線圖、樹形圖、地圖」

字段

「價格、文字標簽」

2. 轉場動效

轉場動效我們應用程序是通過一個個緊密架構的頁面承載的。不同于翻書、看電影這些線性串聯的頁面，應用程序的頁面架構串聯都是及其復雜的。轉場動效及相關互動是為了在龐雜的信息中，讓用戶清楚的知道自己的位置和將要去到的目的地而存在的。

目前的轉場動效有三種：

1. 超過屏幕顯示能力的同一級頁面使用“滾動頁面動效”。近幾年衍生出來了視差滾動也屬于同類別。普通的滾動動效一般的開發環境已經自帶了，設計師只需要設計滾動時信息出現的順序和相關動效方式即可。

2. 遇到一個頁面無法承載的信息時，使用“頁面跳轉動效”。近年的 App 嵌套了各種非原生容器，因此，跳轉要區分局部跳和原生頁面跳轉，或者跨應用跳轉。目前主流推崇的是卡片式的交互形式，但是新的模式也在醞釀中。

3. 因為跳轉會有流失率，長時間加載會給用戶產生斷點等不利因素。同頁面的“彈窗動效”也就氤氳而生。彈窗有按鈕彈出式，和滑動彈出式。由于原生系統采用了大量的側滑、下拉、上推等手勢的滑動形式占用屏幕邊緣區域，導致三方應用程序只能大量使用按鈕式彈窗彈出的模式，僅在屏幕中央區域使用滑動彈出式。雖然限制很多，但是這類動效的創新依然大有可為。

滾動頁面

「空間視差滾動、普通滾動」

頁面跳轉動效

「整體跳轉、局部跳轉」

彈窗轉場動效

「底部彈窗、彈窗」

3. 停留動效

停留動效是用在一些涉及需要用戶等待的地方，用于緩解用戶焦慮感。例如，讀取加載的過程中，就會使用 loading 動效元素，在游戲界往往還會使用過場動畫，通過具體的內容敘事去緩解等待的焦慮。還有空白頁的兜底動圖，也都是受限于帶寬速度、讀盤速度、網絡錯誤等技術因素產生的動效形式，屬于被動等待。

當我們的互聯網產品發展到一定的程度，玩家已經開始接受在應用中消耗自己的時間，等待變成為主動的形式。于是為了創造更好的用戶體驗、逼真的使用場景，以及更加智能化的人機交互系統的產生，我們將越來越需要，情景氛圍動效和情感互動動效。

加載動效「刷新流程動效、常規 Loading、進度加載動效」

情境氛圍動效「氛圍渲染動效」

兜底頁面動效「空白頁微動效」

情感互動動效「互動角色」

4. 動效與互動

界面中的動效不是獨立存在的“花瓶”，而是服務于人機交互的重要元素。動效是互動的載體，它讓我們看到我們在計算機上的操作是真實的、可靠的。動效與互動高度一致性的設計，我們往往用“Smooth、絲般柔順、跟手、流暢、不卡”的辭藻去形容。這種流暢感是我們用戶體驗設計師所追求的基本要求，也是核心要求。在設計有互動關聯動效方面還有下面一個必須遵從的邏輯，才能幫助我們更好的達到這種流暢感：

界面中存在兩種類型的動效，一種是“無互動關聯動效”，顧名思義，此類動效沒有“互動”的邏輯，加載完成后就獨立播放（循環播放或者播放一次就停止播放）；

而另一種是“互動關聯動效”，它則由輸入信息為事件、處理的介質為觸發器、輸出結果為觸發事件、輸出表現為觸發動畫，四個部分組成。

輸入“觸發器”的“事件”既可是“物理事件”，也可是上一次“觸發事件”。我們現在用這個互動邏輯，去描述“鼠標點擊開關，控制界面暗黑模式和白天模式切換”，應該是這樣的：觸發器輸入“物理事件-鼠標點擊”，觸發器 1 輸出“觸發事件 A1-開/關”，輸出表現為“觸發動畫 A-播放按鈕開關動畫”。觸發器 2 輸入“觸發事件 A1-開/關”，觸發器輸出“觸發事件 A2-暗黑模式/白天模式切換”，輸出表現為“觸發動畫 B-播放暗黑模式/白天模式切換動畫”。

上面的案例中，“觸發事件 A2-暗黑模式/白天模式切換”不可能在“觸發事件 A1-開/關”之前發生。這也符合現實因果規律，關燈的結果不可能出現在按下開關前，否則為不合理。真實世界中，制造事件便能獲得相應“觸發事件”的動畫反饋。人們也把這些習慣帶到了虛擬的人機交互中。設計師應該盡可能多的設計可觸發的事件和相對應的觸發動畫，創造一個所見即所得，并可以豐富探索性的 UI 世界，這是界面進化的必然趨勢之一。

另外，互動關聯動效 總共包含三種模式：單次出發、線性嵌套、并列觸發。前面兩個通過案例結合流程圖已經很清楚展現其含義了。而并列觸發我還需要多說幾句：并列觸發是多個獨立的事件輸入到不同的觸發器，觸發事件并列存在，觸發動畫即可以獨立也可以按照邏輯生成合并動畫。比如，鼠標拖動窗口移動，鼠標點擊生成的抓取事件和鼠標位移生成的光標位移事件是獨立存在的觸發事件，但是互動同時作用于同一個控件，就可以產生兩個動畫的合并動畫，即光標拖動著窗口移動。

無互動關聯動效「循環、一次」

互動關聯動效「操作形式、反饋形式、互動節奏(操作與播放比率）」

物理事件

「指鼠標、觸摸板、陀螺儀等物理設備輸入的特定指令。如：#1 點擊/單觸、#2 連擊/連觸、#3 長按/長觸、#4 滑動/滾動、#5 拖移、#6 定位點/定位角」

觸發事件

「指物理事件或上一次觸發事件輸入后，觸發器輸出的相關聯的交互邏輯，并對界面中其他控件和動效產生影響。觸發事件是可以遵循一定的規則人為設計關聯的。觸發事件與物理事件，以及與用戶心智的一致性與否，影響產品的交互體驗。如：#1 命令類事件、#2 狀態類事件、#3 物理類事件」

動效的變化模式

1. 基本可變參數&應用

位置「X、Y、Z 軸向」

錨點位置「X、Y、Z 軸向」

旋轉方向「XY 軸平面順/逆時針、ZY 軸平面順/逆時針、ZX 軸平面順/逆時針」

縮放「0 - 100% - ∞」

透明度「0 - 100%」

字體「字體類型、字號大小、字體顏色、字間距、行高、行間距、對齊方式」

2. 高級可變參數&應用

圖形路徑與蒙版路徑「貝塞爾、形狀&蒙版路徑、布爾」

填充顏色「單色、直線漸變、徑向漸變」

形狀描邊「單色、直線漸變、徑向漸變」

物理

「眼睛容易感知的物理動畫主要有三類：彈性、慣性、風力&浮力；而作用力與反作用力、重力、摩擦力、阻力等往往是內部參數，改變影響動畫的運動效果。通過物理的動畫交互我們就算不對物體上色，也能從運動中感受到設計師賦予的物理材質感」

粒子&流體

3. 動效的節奏模式

?勻速運動「最基本單運動節奏，從始至終運動速度恒定不變」

非勻速運動「緩進、緩出、緩動」

節拍

「節拍是人為影響運動中最為美觀、最為嚴謹的方式。它就像古希臘時期，典雅端莊的神廟。好的節拍是遵循斐波那契數列的規律人為制定。如：1/4 拍：1/4 拍是 4 分音符為一拍，每小節 1 拍。3/4 拍：3/4 拍是 4 分音符為一拍，每小節 3 拍，可以有 3 個 4 分音符。強、弱、弱。」

矩陣運動系統中的整體與局部「節奏特異法」

模仿自然節奏「這類節奏需要找到關鍵的運動特征點，才能做到模仿。需要找到如：水滴、蜜蜂飛行、行走的人」

4. 動效的運動軌跡模式

原點軌跡-自旋「一元軌跡的運動」

線性軌跡-曲線函數「二元和三元的線性軌跡運動」

系統軌跡-形變

「二元和三元形變；軌跡系統中包含了點、線、面的變化；形變從作用力的視覺化上可以分為彈性運動中的被動形變、主動形變」

線性軌跡-生長形變

「這是一種線性生長的形變，生長命令沿著既定的軌道前進，而軌跡的函數不發生任何變化」

系統軌跡-矩陣

「常見的矩陣動效有：百葉窗、卡片翻轉、線性掃描、魔方矩陣、異形矩陣、破碎」

系統軌跡-維度「三維二維空間感的切換」

系統軌跡-布局「元素布局的切換」

動效與用戶心智模式

1. 設計原則

互動與認知一致體現效率；互動與認知不一致產生習得性效應，進而改變用戶心智模式和下一次相似互動的預期值，因此可能是地獄也可能是天堂。

用戶心智模式是人長期與自然互動、認知后構建出的心理行為模型。對于靜止不動的物體，人們可以通過識別物體的輪廓形狀、顏色、大小、質地等外觀特征，并結合過往經驗去判斷，一個物體的使用功能和可能的互動方式。比如，看到一個方形的物體，它僅僅只能容納下一個屁股（身體無法躺在上面），同時這個方形物體能夠支撐這個人的重量，那么對于這個人而言，它肯定不是床而是張凳子。

另外，對于一些特定的外觀，人類對于它似乎有刻到基因里的喜歡與厭惡，比如一條蛇和尖牙利齒的獅子。而對于一個運動中的物體，人們的注意力首先會被運動所吸引。人們還會通過它的速度及速度變化的頻率和軌跡，去判斷使用這個物體的屬性和互動方式。比如，打獵的時候捕食者觀察獵物運動速度就能判斷誰是體能比較弱的那一個。通過分析獵物移動速度和軌跡，預判射擊的彈道軌跡，完成一次互動。另外對于一個像人的物體，人們可以觀察對象的表情、肢體語言，通過天生的共情能力去了解對方此刻的情緒情感變化，進而對自己的行為形成約束。動效中大致可以找到感知的 6 個觸點：速度變化、形狀變化、空間變化、質地變化、光影變化、情緒變化。設計師可以應用這六個心智模式的觸點，為用戶的互動設定預期值。

因為動效是互動的載體，人們需要從動效中感知反饋。那“互動與認知的一致性”又是什么呢？人是參與互動的主體，人的心智模式決定了，這個人在互動前的預期值。計算機發明之前，人們就使用過各種樣式的按鈕，了解其使用方法和互動會產生的結果：有的按鈕像蹺蹺板，按下上方部分下方部分翹起，“咔”一下，室內的燈也亮了；有的按鈕按下后就會立即復原，按下便可以讓遙控車向前移動一步；這兩種按鈕形式也被借鑒到了我們的手機里。我們不需要額外學習就能掌握用法。

這讓我又想起了我外公第一次使用蘋果 ipad 查看照片，他不假思索地就張開了兩個手指放大圖片，同時他也很自然的并攏手指，似乎料定圖片就會“聽話”縮小。觸屏他用起來很自然，沒有人告訴他 Multitouch 手勢的使用方法。比起之前，Windows 那些需要帶著老花鏡，用放大鏡滿屏幕尋找的放大縮小按鈕，要來的自然的多。我想這種感受就是“動效、互動與認知的一致性”創造出來的。所帶來的好處自然就是效率和確定性，以及掌控感。

動效、互動與認知一致帶來的好處不言而喻了，那如果動效、互動與認知不一致呢？一定就是交互的災難嗎？不一定！任天堂在游戲化設計中的應用，已經把這種差異性錯配玩的神乎其神。游戲中部分的互動是與玩家心智模式不一致的。這里包含了塞爾達荒野之息中突然從森林土地里冒出來的章魚、也包括馬里奧奧德賽中顛倒重力后視覺錯位操作的關卡難度。合理、少量、謹慎的應用互動與用戶心智模式的不一致性，可以給產品帶來驚喜和趣味。但是如果過多使用，會降低產品的可用性。正是因為這種設計是反效率的，因此，在追求效率快速決策的工具產品、追求精準盈利的營銷產品內要更為謹慎。甚至應該避免這種不一致的事情發生。

2. 動效與感知

速度變化 觸點

形狀變化 觸點

空間變化 觸點

質地變化 觸點

光影變化 觸點

情緒變化 觸點

3. 動效的仿生

仿生動效

這是一種從模仿生物運動節奏、運動特征的復雜系統動效。仿生動效具有標簽性，就算不直接出現動物本身的視覺形象，也可以使人聯想到相關動物的動作姿態。靈動的應用這類動效可以增加界面的親近感，豐富視覺感官。

擬人動畫

這里我使用了“動畫”一詞。這是因為我們之前把“動效”和“動畫”的含義混著講，但是“動效”作為“動畫”的分支詞是有一定的區別的。特別是應用在一些視覺畫面完整、情緒表達為主的角色上，已經不能用“動效“，這種指運動、變化的效果一詞來表達。因此，擬人動畫是角色動畫在 UI 界面中的體現。擬人動畫中的角色可以是人，也可以是動物昆蟲。經過擬人化包裝之后具備人的情緒傳達，情感互動能力。

近年來 AI 語音交互應用，呈現增長趨勢，像蔚來汽車上的 Nomi、小米的小愛同學、百度的小度等智能助手層出不窮。這不僅僅只是一個角色、一個聲音與用戶進行交互，更是一個有性格的人在用戶身邊為之服務。公司通過這樣的產品，把服務打包進了這樣一個“活生生的人”里，實現了用戶對產品更加立體的認知，提升了親近感，是有人情味的交互。帶有擬人動畫的語音交互，是一次暨可視化界面顛覆代碼指令界面后的一次革命。當然，這類動畫的應用，也需要密切關注“恐怖谷效應”，避免用戶對此類交互產生反感。

講在最后

由于篇幅和時間限制，很多問題在本文章中沒有提及比如：動效與音效的問題、動效的視覺表現形式、文中涉及的高階動效如何應用到我們 App 開發中、模塊化動效如何落地實現。我將陸續在《動效設計模式(下)》補充。感謝大家的閱讀。原創不易，望大家點贊支持一下哦！

參考與推薦：《界面設計模式》、《通用設計法則》、《設計心理學》、Material Design

歡迎關注「JellyDesign」的小程序：