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