起源發(fā)展
動(dòng)畫發(fā)展大致經(jīng)過了三大階段，分別是從傳統(tǒng)動(dòng)畫（紙筆）>>CG動(dòng)畫（離線渲染）>>互動(dòng)動(dòng)畫（實(shí)時(shí)渲染）。隨著時(shí)代變遷、設(shè)備以及技術(shù)升級(jí)，新的動(dòng)畫形式以及呈現(xiàn)載體不斷的被創(chuàng)造出來。
傳統(tǒng)動(dòng)畫注重理論基礎(chǔ)以及扎扎實(shí)實(shí)的基本功，并且是藝術(shù)學(xué)院必修課，宮崎駿的早期的動(dòng)畫就是傳統(tǒng)的手繪動(dòng)畫。每一張都是純手繪的作品，所以我們看到宮崎駿的動(dòng)畫會(huì)有完全不同于純工業(yè)的動(dòng)畫的感覺。
CG動(dòng)畫是隨著電影行業(yè)與游戲行業(yè)一并發(fā)展起來的，由于電影的工業(yè)化程度太高，技術(shù)積累也越來越深厚，所有游戲使用的工具與技術(shù)偏向電影那一套，但不同的是電影是離線渲染的，一部短片渲染幾千個(gè)小時(shí)都算很正常。而游戲與電影不同，實(shí)時(shí)渲染必須保證幀速率，所以游戲行業(yè)最重要的技術(shù)核心就是改進(jìn)游戲引擎。互動(dòng)動(dòng)畫想必大家更加熟悉，也就是游戲、web/app、VR/AR/AI、新媒體這些領(lǐng)域的動(dòng)畫，這篇文章我們主要講的就是Web/App動(dòng)畫。
從初期的MAC電腦到現(xiàn)在的iPhone X 不過短短的幾十年，產(chǎn)品設(shè)計(jì)中動(dòng)效的運(yùn)用已經(jīng)獲得了巨大的進(jìn)步。動(dòng)效其實(shí)對(duì)于用戶體驗(yàn)這個(gè)大專業(yè)來講是一種新的學(xué)科，隨著我們的設(shè)備的硬件條件越來越好，動(dòng)效才被支持的越來越好，可實(shí)現(xiàn)的難度也才越來越低。交互動(dòng)畫里有一部分依然是歸為傳統(tǒng)動(dòng)畫的，比如說Loading/插畫動(dòng)畫/載入動(dòng)畫等等。這些可以動(dòng)畫需要多關(guān)注迪士尼12大動(dòng)畫原則（節(jié)奏&時(shí)間、運(yùn)動(dòng)曲線、預(yù)備動(dòng)作、夸張、擠壓&拉伸、次要?jiǎng)幼鳌T性、關(guān)鍵幀動(dòng)畫&連貫動(dòng)畫、動(dòng)作表現(xiàn)力、感染力、角色個(gè)性），但是另外一部分則是扎根于產(chǎn)品設(shè)計(jì)的“交互”中。CG動(dòng)畫與交互動(dòng)畫的區(qū)別
CG動(dòng)畫更加注重片子所表達(dá)的故事的完整性以及趣味性，大部分運(yùn)用的都是超現(xiàn)實(shí)的手法，時(shí)長(zhǎng)一般都5s以上，只需要開動(dòng)腦洞只要軟件技術(shù)能實(shí)現(xiàn)都可以發(fā)揮出來。而交互動(dòng)畫更注重的是動(dòng)效的合理性和可用性，動(dòng)力學(xué)需符合真實(shí)的物理世界，還要注重整個(gè)產(chǎn)品內(nèi)的動(dòng)效的統(tǒng)一與協(xié)調(diào)。一般持續(xù)時(shí)間都很短在1s內(nèi)，大部分動(dòng)畫在200-500ms內(nèi)完成。整體來說動(dòng)效都相對(duì)簡(jiǎn)單，不會(huì)太復(fù)雜因?yàn)橐紤]技術(shù)可實(shí)現(xiàn)性。
應(yīng)用場(chǎng)景
這里我們只針對(duì)我們互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)講一下交互動(dòng)效的應(yīng)用場(chǎng)景，我總結(jié)了以下七大應(yīng)用場(chǎng)景，分別是圖標(biāo)動(dòng)畫、界面交互、插畫動(dòng)效、HUD大屏、汽車系統(tǒng)、項(xiàng)目包裝、品牌宣傳等等。
圖標(biāo)動(dòng)效
一般來說圖標(biāo)動(dòng)效適用于App或者web產(chǎn)品中，單個(gè)持續(xù)時(shí)間在100ms左右，根據(jù)圖標(biāo)的復(fù)雜程度以及實(shí)際使用的場(chǎng)景最長(zhǎng)時(shí)間也不超過400-500ms。圖標(biāo)動(dòng)效更注重微弱的變化帶來的趣味性以及流暢性，常用于狀態(tài)反饋以及導(dǎo)航引導(dǎo)，通過小小的變化可以為產(chǎn)品體驗(yàn)增色不少，優(yōu)秀的還可以給用戶留下深刻的印象。
界面交互
一方面界面交互動(dòng)效可以讓人對(duì)產(chǎn)品產(chǎn)生深刻的印象，甚至是帶來驚喜，另一方面表達(dá)了界面之間的交互過程，吸引用戶的注意力。通過減少預(yù)判誤差、增加連貫性、強(qiáng)調(diào)敘述、清晰關(guān)系四個(gè)方面來增加產(chǎn)品的可用性。
汽車系統(tǒng)
汽車系統(tǒng)的用戶界面以及動(dòng)效一般都來說比較有科技感，動(dòng)畫會(huì)更加的酷炫。本質(zhì)上來說汽車系統(tǒng)其實(shí)跟我們?nèi)粘Ｓ玫漠a(chǎn)品是一樣的，由于行業(yè)定位的不同以及用戶使用場(chǎng)景的不同造成了這些差異。
插畫動(dòng)效
適用于App的引導(dǎo)頁、運(yùn)營(yíng)活動(dòng)、空狀態(tài)頁面、錯(cuò)誤頁面，展示型網(wǎng)站等等。在產(chǎn)品設(shè)計(jì)中插畫動(dòng)效一般有2種實(shí)現(xiàn)形式，一種是視頻或者動(dòng)態(tài)圖片直接加載即可，另外一種就是開發(fā)同學(xué)通過技術(shù)手段來實(shí)現(xiàn)，SVGA、lottile、apng等等。
品牌宣傳
這是韓國(guó)一家咨詢公司Plus X做的一個(gè)App的宣傳動(dòng)畫，這里說的品牌宣傳更像是一個(gè)產(chǎn)品的解析以及意義的傳達(dá)，更輕量化、片長(zhǎng)更短、制作技法也相對(duì)簡(jiǎn)單一些。
HUD
HUD可能很多同學(xué)都不知道是什么，給大家科普一下。HUD（Head Up Display）又叫平視顯示器，最開始呢是運(yùn)用在航空器上的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要的重要資訊。平視顯示器最早出現(xiàn)在軍用飛機(jī)上，降低飛行員需要低頭查看儀表的頻率，避免注意力中斷以及喪失對(duì)狀態(tài)意識(shí)(Situation Awareness）的掌握。因?yàn)镠UD的方便性以及能夠提高飛行安全，民航機(jī)也紛紛跟進(jìn)安裝，汽車也開始安裝。后面延伸到像大家在科幻電影里面看到的那種智慧大屏，以及政府機(jī)關(guān)等等我看看到的那種藍(lán)色動(dòng)態(tài)LED大屏都屬于HUD。
項(xiàng)目包裝
https://v.qq.com/x/page/r0824uenul0.html上面的視頻是騰訊的ISUX部門2018項(xiàng)目包裝的視頻，當(dāng)時(shí)這個(gè)視頻上線后，各大公司的UED部門競(jìng)相模仿，這個(gè)項(xiàng)目包裝里面有很多項(xiàng)目都用到動(dòng)效設(shè)計(jì)，包括禮物動(dòng)效，表情動(dòng)效、插畫動(dòng)效、logo演繹等等，這說明動(dòng)效設(shè)計(jì)在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中的應(yīng)用已經(jīng)相當(dāng)?shù)膹V泛了，作品本身的效果加上簡(jiǎn)單的動(dòng)畫包裝就可以做成一個(gè)動(dòng)態(tài)的作品集，對(duì)于宣傳團(tuán)隊(duì)是一個(gè)很不錯(cuò)的點(diǎn)，個(gè)人作品集也可以按照這個(gè)思路來做，肯定也會(huì)有很不錯(cuò)的效果。
設(shè)計(jì)語言
設(shè)計(jì)語言是指導(dǎo)統(tǒng)一產(chǎn)品設(shè)計(jì)的大腦，所以了解設(shè)計(jì)語言對(duì)于我們無論是做界面還是做交互設(shè)計(jì)以及動(dòng)效設(shè)計(jì)等等都有很大的指導(dǎo)性作用。上圖中的6個(gè)是國(guó)內(nèi)外比較知名的設(shè)計(jì)語言系統(tǒng)，大家應(yīng)該或多或少了解一點(diǎn)，推薦大家有興趣可以去看看他們的設(shè)計(jì)系統(tǒng)，相信會(huì)對(duì)你們有很大的幫助，對(duì)幫助構(gòu)建你的個(gè)人設(shè)計(jì)體系也有很大的參考作用。這里我們以Material Design為例進(jìn)行講解，給大家介紹一下這套設(shè)計(jì)語言以及設(shè)計(jì)語言內(nèi)的動(dòng)畫模塊在我們的工作中是如何運(yùn)用的。Material Design，是由Google在I/O 2014大會(huì)上推出的全新的設(shè)計(jì)語言，其靈感來自與真實(shí)物理世界及其紋理，包括真實(shí)物理世界如何反射光線和投射陰影，通過材料來重新構(gòu)想紙張和墨水的一種介質(zhì)。
創(chuàng)建：創(chuàng)建一種視覺語言，將經(jīng)典的優(yōu)秀設(shè)計(jì)原則與技術(shù)和科學(xué)的創(chuàng)新和可能性相結(jié)合。統(tǒng)一：開發(fā)單一的底層系統(tǒng)，統(tǒng)一跨平臺(tái)，設(shè)備和輸入方法的用戶體驗(yàn)。定制：擴(kuò)展Material的視覺語言，為創(chuàng)新和品牌表達(dá)提供靈活的基礎(chǔ)。
大膽，圖形，有意：Material Design以印刷設(shè)計(jì)方法為基本指導(dǎo)：排版、網(wǎng)格、空間、比例、顏色和圖像。即創(chuàng)造層次、意義和焦點(diǎn)，讓觀眾沉浸在體驗(yàn)中。動(dòng)效有意義：通過微妙的反饋和連貫的過渡，集中注意力并保持連續(xù)性。當(dāng)元素出現(xiàn)在屏幕上時(shí)，它們會(huì)轉(zhuǎn)換和重新組織環(huán)境，交互產(chǎn)生新的轉(zhuǎn)換。基礎(chǔ)靈活：Material Design系統(tǒng)旨在實(shí)現(xiàn)品牌表達(dá)。它與自定義代碼庫集成，允許無縫實(shí)現(xiàn)組件，插件和設(shè)計(jì)元素。跨平臺(tái)：Material Design使用跨Android，iOS，F(xiàn)lutter和Web的共享組件跨平臺(tái)維護(hù)相同的UI。Material Design的要解決的問題以及設(shè)計(jì)原則大家應(yīng)該都了解了，我們針對(duì)設(shè)計(jì)語言內(nèi)的動(dòng)效有意義做一下延伸，讓大家對(duì)動(dòng)畫有一個(gè)再深入一些的了解。
那么Material Design動(dòng)效的用途主要有以下四點(diǎn)：層級(jí)關(guān)系：通過動(dòng)效反映父級(jí)元素（收件箱）與子級(jí)元素（收件箱郵件）之間的層次結(jié)構(gòu)關(guān)系。狀態(tài)與反饋：動(dòng)效提供及時(shí)的反饋和用戶操作狀態(tài)。用戶引導(dǎo)：動(dòng)效為用戶如何執(zhí)行操作提供有用的建議。個(gè)性化：動(dòng)效為產(chǎn)品設(shè)計(jì)提供可更多的趣味性、個(gè)性以及吸引力，對(duì)品牌的提升和認(rèn)知有很大的促進(jìn)作用。
了解了設(shè)計(jì)語言的動(dòng)效模塊，相信大家應(yīng)該有一個(gè)系統(tǒng)的認(rèn)識(shí)，在方寸之間進(jìn)行動(dòng)畫設(shè)計(jì)，考慮的就是毫秒之內(nèi)，而在毫秒之內(nèi)最應(yīng)該考慮的就是速度，研究發(fā)現(xiàn)，在界面設(shè)計(jì)中最合適的動(dòng)畫時(shí)間為200-500ms之間，時(shí)間太短，用戶難以感知，時(shí)間太長(zhǎng)，用戶又會(huì)覺得整個(gè)過程太緩慢不夠流暢。當(dāng)然了根據(jù)設(shè)備的不同動(dòng)畫內(nèi)容的不同，動(dòng)畫持續(xù)的時(shí)間自然也是不相同的。動(dòng)畫時(shí)間的長(zhǎng)短與動(dòng)畫路徑的遠(yuǎn)近是成正比的一般。另外平臺(tái)的不同，動(dòng)畫持續(xù)的時(shí)間也是不相同的，在pc端內(nèi)的動(dòng)畫要比移動(dòng)端的動(dòng)畫持續(xù)時(shí)間普遍少50%左右，這是因?yàn)槠脚_(tái)的屬性所造成的。但是要是單純的做裝飾動(dòng)畫是可以單純發(fā)揮的，不用遵守上面的幾個(gè)原則，所以進(jìn)行動(dòng)畫設(shè)計(jì)的時(shí)候都需要考慮到具體的場(chǎng)景以及具體的需求，靈活運(yùn)用。說完了時(shí)間，我們來說說跟時(shí)間息息相關(guān)的動(dòng)畫曲線，我們都知道在幾百ms內(nèi)表現(xiàn)出動(dòng)畫的特點(diǎn)是有點(diǎn)難度的，所以精細(xì)的運(yùn)動(dòng)曲線對(duì)我們就顯得格外重要，這里我總結(jié)一下Material Design內(nèi)提到的幾個(gè)常用的動(dòng)畫運(yùn)動(dòng)曲線，大家有興趣可以去Material Design的官方文檔內(nèi)詳細(xì)查看：上述的幾個(gè)運(yùn)動(dòng)類型以及動(dòng)畫曲線我們?cè)诋a(chǎn)品設(shè)計(jì)內(nèi)經(jīng)常會(huì)用到，希望大家打好基礎(chǔ)，靈活運(yùn)用。我們知道任何一件事情都有存在的價(jià)值和必要，動(dòng)畫也不例外，如果動(dòng)畫沒有體現(xiàn)出他應(yīng)該有的價(jià)值，那么做的再好看也只是僅僅局限在了好看這一個(gè)層面，下面我們就看看動(dòng)畫到底能在產(chǎn)品設(shè)計(jì)中帶來什么樣的價(jià)值。
動(dòng)畫價(jià)值
有時(shí)候現(xiàn)代科技產(chǎn)物使用起來非常復(fù)雜，但是其實(shí)“復(fù)雜”本身沒有好壞之分：不好是因?yàn)闆]有處理好這個(gè)復(fù)雜所以產(chǎn)生了“混亂”，所以應(yīng)該被批評(píng)的不是復(fù)雜而是因復(fù)雜所產(chǎn)生的混亂?！萍{德·諾曼
優(yōu)秀的動(dòng)效可以幫我們解決產(chǎn)品設(shè)計(jì)中的很多問題，可以從用戶體驗(yàn)的五大要素來進(jìn)行價(jià)值的拆解：
戰(zhàn)略層
戰(zhàn)略層本質(zhì)上來說大部分設(shè)計(jì)師其實(shí)是接觸不到的，當(dāng)然接觸不到戰(zhàn)略并不能代表我們不需要了解，作為設(shè)計(jì)師我們必須了解公司對(duì)產(chǎn)品的戰(zhàn)略定位以及期望，也必須要了解用戶的目標(biāo)和心理預(yù)期。戰(zhàn)略層是整個(gè)產(chǎn)品的核心也是底層，所以單純來講，動(dòng)畫在這一層面上可以發(fā)揮的余地是是不多的，因?yàn)楦嗟倪@一層更加關(guān)注意識(shí)形態(tài)的戰(zhàn)略思考。
范圍層
范圍層是通過戰(zhàn)略思考來思考明確產(chǎn)品的大概功能和內(nèi)容，有很多產(chǎn)品的功能復(fù)雜，交互繁重，內(nèi)容很多，在這種情況下動(dòng)效就派上了用場(chǎng)，我們可以嘗試通過動(dòng)效來解決內(nèi)容過載，優(yōu)化交互模塊，擴(kuò)展產(chǎn)品內(nèi)容功能范圍。
結(jié)構(gòu)層
這一層主要確定產(chǎn)品的功能結(jié)構(gòu)以及層級(jí)，主要設(shè)計(jì)用戶如何快速，準(zhǔn)確的觸達(dá)某個(gè)界面完成某個(gè)任務(wù)，要考慮用戶體驗(yàn)地圖，用戶整個(gè)的任務(wù)路徑，簡(jiǎn)單來說就是用戶要做什么事情，如何做，做完之后應(yīng)該干什么，如果能對(duì)動(dòng)效巧妙的運(yùn)用，就可以做到引導(dǎo)用戶，練習(xí)上下流程的作用，降低用戶理解成本，提搞產(chǎn)品的操作效率，提高產(chǎn)品的可用性和易用性。
框架層
從這一層開始，UI設(shè)計(jì)師接觸的內(nèi)容逐漸多了起來，大家也會(huì)更加熟悉工作的內(nèi)容以及范圍，這一層主要體現(xiàn)在優(yōu)化頁面布局，確定元素?cái)[放位置，涉及到具體的信息、界面、導(dǎo)航設(shè)計(jì)等等。通過利用格式塔，柵格，設(shè)計(jì)語言等方法確定產(chǎn)品功能具體頁面內(nèi)容布局，我們可以通過動(dòng)效來進(jìn)行輔助設(shè)計(jì)，例如強(qiáng)化元素的位置、顏色、大小，優(yōu)化頁面的切換、跳轉(zhuǎn)的流暢度以及自然度等等。
表現(xiàn)層
表現(xiàn)層具體涉及到視覺、聽覺、觸覺的體驗(yàn)設(shè)計(jì)，也是做為視覺設(shè)計(jì)師、UI設(shè)計(jì)師發(fā)揮最多的一層，在表現(xiàn)層動(dòng)效的展現(xiàn)形式會(huì)多種多樣，這里不展開講解，大家應(yīng)該都明白。在表現(xiàn)層加入適當(dāng)?shù)膭?dòng)畫能夠提升產(chǎn)品趣味性，加強(qiáng)用戶與產(chǎn)品的情感鏈接，增加用戶對(duì)產(chǎn)品的友好度。
未來發(fā)展
5G
5G時(shí)代已經(jīng)到來，5G的普世將會(huì)為科技發(fā)展帶來更多的可能性，眾所周知5G的速度是4G的百倍，那么意味著我們的設(shè)計(jì)的動(dòng)畫會(huì)加載的更快，動(dòng)畫文件的大小限制將會(huì)被打破，另外也可以在某些領(lǐng)域的產(chǎn)品內(nèi)設(shè)計(jì)更復(fù)雜更酷炫的動(dòng)畫。
人工智能（AI）
它是研究、開發(fā)用于模擬、延伸和擴(kuò)展人的智能的理論、方法、技術(shù)及應(yīng)用系統(tǒng)的一門新的技術(shù)科學(xué)。該領(lǐng)域的研究包括機(jī)器人、語言識(shí)別、圖像識(shí)別、自然語言處理和專家系統(tǒng)等。在我們?nèi)粘Ｉ钪羞\(yùn)用的包括不限于人機(jī)對(duì)弈、模式識(shí)別、自動(dòng)工程、知識(shí)工程等等。所以未來在這些領(lǐng)域內(nèi)，我們能參與到的動(dòng)畫設(shè)計(jì)必然會(huì)更多樣，形式也會(huì)更豐富，挑戰(zhàn)也會(huì)更大?？赡軙?huì)不斷有新的動(dòng)畫形式以及設(shè)計(jì)方法被創(chuàng)造出來，讓我們拭目以待。
虛擬現(xiàn)實(shí)（VR）
是20世紀(jì)發(fā)展起來的一項(xiàng)全新的實(shí)用技術(shù)。虛擬現(xiàn)實(shí)技術(shù)囊括計(jì)算機(jī)、電子信息、仿真技術(shù)于一體，其基本實(shí)現(xiàn)方式是計(jì)算機(jī)模擬虛擬環(huán)境從而給人以環(huán)境沉浸感。隨著社會(huì)生產(chǎn)力和科學(xué)技術(shù)的不斷發(fā)展，各行各業(yè)對(duì)VR技術(shù)的需求日益旺盛，VR技術(shù)也取得了巨大進(jìn)步，并逐步成為一個(gè)新的科學(xué)技術(shù)領(lǐng)域。相信在未來的工作中必然會(huì)慢慢的接觸到VR界面設(shè)計(jì)以及動(dòng)畫設(shè)計(jì)，并且我相信未來會(huì)逐漸的變成主流。
參考資料
material.io/design/motionhttps://www.zcool.com.cn/article/ZODIzMzky.htmlhttps://zhuanlan.zhihu.com/p/27114894
原文地址： 小凱的設(shè)計(jì)筆記（公眾號(hào)）轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》動(dòng)效賦能 助力用戶體驗(yàn)設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
