動效賦能 助力用戶體驗設計

Sponsor

動效相信大家都不陌生，基本上市面上的互聯網產品內都有，但是可能很多人并還不清楚產品動效的起源與發展，在產品設計中的應用場景，在整個設計體系的重要程度以及能為產品或者業務帶來什么樣的價值等等，這篇文章呢就從下面的的5個維度來講述一下動效的過往、現在與未來。

目錄

• 起源發展
• 應用場景
• 設計語言
• 動畫價值
• 未來發展

起源發展

動畫發展大致經過了三大階段，分別是從傳統動畫（紙筆）>>CG動畫（離線渲染）>>互動動畫（實時渲染）。隨著時代變遷、設備以及技術升級，新的動畫形式以及呈現載體不斷的被創造出來。

動畫發展的三大階段

傳統動畫注重理論基礎以及扎扎實實的基本功，并且是藝術學院必修課，宮崎駿的早期的動畫就是傳統的手繪動畫。每一張都是純手繪的作品，所以我們看到宮崎駿的動畫會有完全不同于純工業的動畫的感覺。

CG動畫是隨著電影行業與游戲行業一并發展起來的，由于電影的工業化程度太高，技術積累也越來越深厚，所有游戲使用的工具與技術偏向電影那一套，但不同的是電影是離線渲染的，一部短片渲染幾千個小時都算很正常。而游戲與電影不同，實時渲染必須保證幀速率，所以游戲行業最重要的技術核心就是改進游戲引擎。

互動動畫想必大家更加熟悉，也就是游戲、web/app、VR/AR/AI、新媒體這些領域的動畫，這篇文章我們主要講的就是Web/App動畫。

初期蘋果Mac桌面文件夾的打開與關閉

從初期的MAC電腦到現在的iPhone X 不過短短的幾十年，產品設計中動效的運用已經獲得了巨大的進步。動效其實對于用戶體驗這個大專業來講是一種新的學科，隨著我們的設備的硬件條件越來越好，動效才被支持的越來越好，可實現的難度也才越來越低。

交互動畫里有一部分依然是歸為傳統動畫的，比如說Loading/插畫動畫/載入動畫等等。這些可以動畫需要多關注迪士尼12大動畫原則（節奏&時間、運動曲線、預備動作、夸張、擠壓&拉伸、次要動作、慣性、關鍵幀動畫&連貫動畫、動作表現力、感染力、角色個性），但是另外一部分則是扎根于產品設計的“交互”中。

CG動畫與交互動畫的區別

CG動畫更加注重片子所表達的故事的完整性以及趣味性，大部分運用的都是超現實的手法，時長一般都5s以上，只需要開動腦洞只要軟件技術能實現都可以發揮出來。

而交互動畫更注重的是動效的合理性和可用性，動力學需符合真實的物理世界，還要注重整個產品內的動效的統一與協調。一般持續時間都很短在1s內，大部分動畫在200-500ms內完成。整體來說動效都相對簡單，不會太復雜因為要考慮技術可實現性。

應用場景

這里我們只針對我們互聯網產品設計講一下交互動效的應用場景，我總結了以下七大應用場景，分別是圖標動畫、界面交互、插畫動效、HUD大屏、汽車系統、項目包裝、品牌宣傳等等。

圖標動效

一般來說圖標動效適用于App或者web產品中，單個持續時間在100ms左右，根據圖標的復雜程度以及實際使用的場景最長時間也不超過400-500ms。圖標動效更注重微弱的變化帶來的趣味性以及流暢性，常用于狀態反饋以及導航引導，通過小小的變化可以為產品體驗增色不少，優秀的還可以給用戶留下深刻的印象。

界面交互?

一方面界面交互動效可以讓人對產品產生深刻的印象，甚至是帶來驚喜，另一方面表達了界面之間的交互過程，吸引用戶的注意力。通過減少預判誤差、增加連貫性、強調敘述、清晰關系四個方面來增加產品的可用性。

汽車系統?

汽車系統的用戶界面以及動效一般都來說比較有科技感，動畫會更加的酷炫。本質上來說汽車系統其實跟我們日常用的產品是一樣的，由于行業定位的不同以及用戶使用場景的不同造成了這些差異。

插畫動效?

適用于App的引導頁、運營活動、空狀態頁面、錯誤頁面，展示型網站等等。在產品設計中插畫動效一般有2種實現形式，一種是視頻或者動態圖片直接加載即可，另外一種就是開發同學通過技術手段來實現，SVGA、lottile、apng等等。

品牌宣傳

這是韓國一家咨詢公司Plus X做的一個App的宣傳動畫，這里說的品牌宣傳更像是一個產品的解析以及意義的傳達，更輕量化、片長更短、制作技法也相對簡單一些。

HUD?

HUD可能很多同學都不知道是什么，給大家科普一下。HUD（Head Up Display）又叫平視顯示器，最開始呢是運用在航空器上的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要的重要資訊。平視顯示器最早出現在軍用飛機上，降低飛行員需要低頭查看儀表的頻率，避免注意力中斷以及喪失對狀態意識(Situation Awareness）的掌握。因為HUD的方便性以及能夠提高飛行安全，民航機也紛紛跟進安裝，汽車也開始安裝。后面延伸到像大家在科幻電影里面看到的那種智慧大屏，以及政府機關等等我看看到的那種藍色動態LED大屏都屬于HUD。

項目包裝?

上面的視頻是騰訊的ISUX部門2018項目包裝的視頻，當時這個視頻上線后，各大公司的UED部門競相模仿，這個項目包裝里面有很多項目都用到動效設計，包括禮物動效，表情動效、插畫動效、logo演繹等等，這說明動效設計在互聯網產品設計中的應用已經相當的廣泛了，作品本身的效果加上簡單的動畫包裝就可以做成一個動態的作品集，對于宣傳團隊是一個很不錯的點，個人作品集也可以按照這個思路來做，肯定也會有很不錯的效果。

設計語言

設計語言是指導統一產品設計的大腦，所以了解設計語言對于我們無論是做界面還是做交互設計以及動效設計等等都有很大的指導性作用。

上圖中的6個是國內外比較知名的設計語言系統，大家應該或多或少了解一點，推薦大家有興趣可以去看看他們的設計系統，相信會對你們有很大的幫助，對幫助構建你的個人設計體系也有很大的參考作用。

這里我們以Material Design為例進行講解，給大家介紹一下這套設計語言以及設計語言內的動畫模塊在我們的工作中是如何運用的。

Material Design，是由Google在I/O 2014大會上推出的全新的設計語言，其靈感來自與真實物理世界及其紋理，包括真實物理世界如何反射光線和投射陰影，通過材料來重新構想紙張和墨水的一種介質。

其主要目標是：

創建：創建一種視覺語言，將經典的優秀設計原則與技術和科學的創新和可能性相結合。

統一：開發單一的底層系統，統一跨平臺，設備和輸入方法的用戶體驗。

定制：擴展Material的視覺語言，為創新和品牌表達提供靈活的基礎。

基本設計原則：

大膽，圖形，有意：Material Design以印刷設計方法為基本指導：排版、網格、空間、比例、顏色和圖像。即創造層次、意義和焦點，讓觀眾沉浸在體驗中。

動效有意義：通過微妙的反饋和連貫的過渡，集中注意力并保持連續性。當元素出現在屏幕上時，它們會轉換和重新組織環境，交互產生新的轉換。

基礎靈活：Material Design系統旨在實現品牌表達。它與自定義代碼庫集成，允許無縫實現組件，插件和設計元素。

跨平臺：Material Design使用跨Android，iOS，Flutter和Web的共享組件跨平臺維護相同的UI。

Material Design的要解決的問題以及設計原則大家應該都了解了，我們針對設計語言內的動效有意義做一下延伸，讓大家對動畫有一個再深入一些的了解。

那么Material Design動效的用途主要有以下四點：

層級關系：通過動效反映父級元素（收件箱）與子級元素（收件箱郵件）之間的層次結構關系。

狀態與反饋：動效提供及時的反饋和用戶操作狀態。

用戶引導：動效為用戶如何執行操作提供有用的建議。

個性化：動效為產品設計提供可更多的趣味性、個性以及吸引力，對品牌的提升和認知有很大的促進作用。

了解了設計語言的動效模塊，相信大家應該有一個系統的認識，在方寸之間進行動畫設計，考慮的就是毫秒之內，而在毫秒之內最應該考慮的就是速度，研究發現，在界面設計中最合適的動畫時間為200-500ms之間，時間太短，用戶難以感知，時間太長，用戶又會覺得整個過程太緩慢不夠流暢。

當然了根據設備的不同動畫內容的不同，動畫持續的時間自然也是不相同的。動畫時間的長短與動畫路徑的遠近是成正比的一般。另外平臺的不同，動畫持續的時間也是不相同的，在pc端內的動畫要比移動端的動畫持續時間普遍少50%左右，這是因為平臺的屬性所造成的。但是要是單純的做裝飾動畫是可以單純發揮的，不用遵守上面的幾個原則，所以進行動畫設計的時候都需要考慮到具體的場景以及具體的需求，靈活運用。

說完了時間，我們來說說跟時間息息相關的動畫曲線，我們都知道在幾百ms內表現出動畫的特點是有點難度的，所以精細的運動曲線對我們就顯得格外重要，這里我總結一下Material Design內提到的幾個常用的動畫運動曲線，大家有興趣可以去Material Design的官方文檔內詳細查看：

上述的幾個運動類型以及動畫曲線我們在產品設計內經常會用到，希望大家打好基礎，靈活運用。

我們知道任何一件事情都有存在的價值和必要，動畫也不例外，如果動畫沒有體現出他應該有的價值，那么做的再好看也只是僅僅局限在了好看這一個層面，下面我們就看看動畫到底能在產品設計中帶來什么樣的價值。

動畫價值

有時候現代科技產物使用起來非常復雜，但是其實“復雜”本身沒有好壞之分：不好是因為沒有處理好這個復雜所以產生了“混亂”，所以應該被批評的不是復雜而是因復雜所產生的混亂。

——唐納德·諾曼

優秀的動效可以幫我們解決產品設計中的很多問題，可以從用戶體驗的五大要素來進行價值的拆解：

戰略層

戰略層本質上來說大部分設計師其實是接觸不到的，當然接觸不到戰略并不能代表我們不需要了解，作為設計師我們必須了解公司對產品的戰略定位以及期望，也必須要了解用戶的目標和心理預期。戰略層是整個產品的核心也是底層，所以單純來講，動畫在這一層面上可以發揮的余地是是不多的，因為更多的這一層更加關注意識形態的戰略思考。

范圍層

范圍層是通過戰略思考來思考明確產品的大概功能和內容，有很多產品的功能復雜，交互繁重，內容很多，在這種情況下動效就派上了用場，我們可以嘗試通過動效來解決內容過載，優化交互模塊，擴展產品內容功能范圍。

結構層

這一層主要確定產品的功能結構以及層級，主要設計用戶如何快速，準確的觸達某個界面完成某個任務，要考慮用戶體驗地圖，用戶整個的任務路徑，簡單來說就是用戶要做什么事情，如何做，做完之后應該干什么，如果能對動效巧妙的運用，就可以做到引導用戶，練習上下流程的作用，降低用戶理解成本，提搞產品的操作效率，提高產品的可用性和易用性。

框架層

從這一層開始，UI設計師接觸的內容逐漸多了起來，大家也會更加熟悉工作的內容以及范圍，這一層主要體現在優化頁面布局，確定元素擺放位置，涉及到具體的信息、界面、導航設計等等。通過利用格式塔，柵格，設計語言等方法確定產品功能具體頁面內容布局，我們可以通過動效來進行輔助設計，例如強化元素的位置、顏色、大小，優化頁面的切換、跳轉的流暢度以及自然度等等。

表現層

表現層具體涉及到視覺、聽覺、觸覺的體驗設計，也是做為視覺設計師、UI設計師發揮最多的一層，在表現層動效的展現形式會多種多樣，這里不展開講解，大家應該都明白。在表現層加入適當的動畫能夠提升產品趣味性，加強用戶與產品的情感鏈接，增加用戶對產品的友好度。

未來發展

5G

5G時代已經到來，5G的普世將會為科技發展帶來更多的可能性，眾所周知5G的速度是4G的百倍，那么意味著我們的設計的動畫會加載的更快，動畫文件的大小限制將會被打破，另外也可以在某些領域的產品內設計更復雜更酷炫的動畫。

人工智能（AI）

它是研究、開發用于模擬、延伸和擴展人的智能的理論、方法、技術及應用系統的一門新的技術科學。該領域的研究包括機器人、語言識別、圖像識別、自然語言處理和專家系統等。在我們日常生活中運用的包括不限于人機對弈、模式識別、自動工程、知識工程等等。所以未來在這些領域內，我們能參與到的動畫設計必然會更多樣，形式也會更豐富，挑戰也會更大?？赡軙粩嘤行碌膭赢嬓问揭约霸O計方法被創造出來，讓我們拭目以待。

虛擬現實（VR）

是20世紀發展起來的一項全新的實用技術。虛擬現實技術囊括計算機、電子信息、仿真技術于一體，其基本實現方式是計算機模擬虛擬環境從而給人以環境沉浸感。隨著社會生產力和科學技術的不斷發展，各行各業對VR技術的需求日益旺盛，VR技術也取得了巨大進步，并逐步成為一個新的科學技術領域。相信在未來的工作中必然會慢慢的接觸到VR界面設計以及動畫設計，并且我相信未來會逐漸的變成主流。

參考資料

作者：小凱君，微信號：kane_notes

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。