動效設計

1、好的動效如何讓你的設計事半功倍？

好的動效，不該當僅僅是外表光鮮的童話，合理地支持可用性，纔是它的內核。 一個合格的動效動效應當在如下四個方面起到對可用性的支持，分別是：

接下來，就讓咱們結合具體示例，看看它們是如何進行實際應用的。

一、符合預期

此處的期待咱們能夠理解爲用戶的心理模型，即用戶對於產品表現的廣泛認知。動效做爲界面的重要元素，應當起到減小實際表現和用戶心理模型之間差距的做用，即經過符合「用戶對物理世界運動規律的廣泛認知」，來增長產品的可用性。 能夠感覺一下，下圖的緩動動效明顯不符合咱們平常熟知的天然運動規律，在沒有外力介入的狀況下，組件忽然加速，這樣不只不能增長可用性，甚至會損害體驗，讓用戶疑惑、分心。

對比之下，天貓小黑盒的頁面動效就很好地配合了品牌自己「盒」的概念，在下拉、轉動的動做中都參照了盒子的運動樣式，符合用戶對其品牌的期待的同時，還能夠加深品牌印象：

二、體驗連續

這裏的連續性包含兩個方面的內容： 一是使用流程的「連續性」； 二是將多個場景鏈接在一塊兒，構成整個體驗場景的「一致性」。 使用流程的連續性，即用戶的體驗流程是完整的，不是被忽然打斷的。一個常見的例子就是瀑布流，利用動效，可讓用戶在等待加載的過程當中依然處於「連續」的體驗感覺中，而不是戛然而止，同時也能夠幫助用戶產生心流體驗。 下圖Medium的文章瀑布流加載效果就很好地加強了這一點。在下拉的loading後，文章以漸現的效果出現，相比之下，知乎日報的效果就要生硬不少，每次加載都有一種生硬的截斷感。

體驗場景的一致性，則是指在總體的體驗流程中，保持總體邏輯和設計語言的一致。咱們會遇到不少不一樣場景的切換，例如網購時從登陸帳號到搜索商品、瀏覽結果等等。這些細分場景自己應當擁有一致的設計語言，在使用動效鏈接場景的時候，也應當和先後設計語言保持一致。 以下圖，在名畫推薦軟件「Daily Art」中，滑動當日推薦畫做的卡片時，卡片會產生了形狀大小上的變化，隨即從圖片場景轉換到了文字場景；在從文字場景迴歸到圖片場景時，依然延續了先前的變化邏輯，卡片從全屏幕縮小回本來的大小：

三、輔助敘事

用戶使用產品的過程，能夠類比爲與產品的設計對話的過程。在這個過程當中，動效就像是設計語言中運用的修辭手法，將語言中的元素連接成一個更加完整的體驗故事，例如可使用隱喻引導用戶進行操做。 京東「早點上新」頻道首頁中輪播的盤子，就隱喻了用戶能夠對該部分進行滑動操做：

在敘事層面上，動效還能夠幫助進行對界面元素性質的輔助闡述，例以下圖，進入京東App的「簽到」處時，咱們能夠看到京豆的數字變化上升的動態效果，體現了它的可增長性：

除了功能上的輔助敘事，動效還能夠幫助傳遞產品的性格和情感，和用戶構建起更爲緊密的聯繫。例如時間管理軟件Forest，在進入聖誕月後便在頁面中加入了雪花飄落的效果，以烘托冬季的氣氛，也增長了用戶「種樹」的實感，十分符合其小而精緻的文藝調性：

須要注意的是，就像平常對話中，咱們使用修辭（例如類比）是爲了讓他人更好地理解本身的意思，連篇累牘的華麗辭藻只會讓聽者一臉懵圈。動效設計也是如此，不要讓它的鋒芒蓋住了設計自己想傳達的內容。

這張圖中，icon和文字做爲信息上的共同體，應當成組出現。圖中的效果將文字與icon各自拆分設計了獨立的動做，對其自己應當起到的敘事做用形成了干擾。 四、合理關聯 動效於界面設計而言，帶來的核心價值之一，就是拓展了屏幕展現空間的維度，設計師能夠利用動效來進行更加豐富的層次設計。但須要注意的是，當界面包含的維度增長時，不一樣元素之間互相映射的關係也會變得更加複雜。 當咱們設計動效時，每一個運動的界面元素之間、多個界面元素構成的組件之間所涉及的空間、時間和層次變化都應當具備合理的關聯性，以此來清晰地告訴用戶「這是什麼」、「它是怎麼出現的」、「我能夠利用它去到哪裏」，從而使用產品達成決策。 在關聯性中，最爲常見的動效之一即表現父子關係（Parenting）的動效：

下圖就是一個使用了父子關係的動效例子，在滑動按鈕的同時，氣泡處的表情也會隨之變化，從中咱們既能夠理解兩者是從屬關係，一個元素會隨着另外一個元素的變化而變化。

一個好的動效是如何幫助產品提升可用性，優化使用體驗的。在平常的設計中，咱們也須要反覆提醒本身，檢查本身設計的動效是否能在以上四個方面輔助提升產品的可用性，從而利用設計語言將產品內容更加清晰地傳達給用戶。

2、提升動效設計功力的實用技巧

一、擠壓和拉伸

在動畫中，擠壓和拉伸表明了物體的重力，質量，重量和靈活性。舉例來講，當一個彈球在它撞擊地面時會發生形態變化，就是擠壓和拉伸。 在界面中，擠壓和拉伸很容易就聯想到按鈕。當一個按鈕被按下時，就能夠理解爲受到了擠壓，經過控制按鈕的擠壓和拉伸，咱們能夠很輕易地作好一個按鈕的交互動畫。除了按鈕以外，這種原則也能夠應用於 UI 中的任何交互元素上。

△ 按鈕在交互時的擠壓和拉伸

△ 擠壓和拉伸被應用於側邊欄

二、預期動做

讓觀衆能預先知道接下來將會發生什麼，它是先於下一步會發生的動做。舉例來講，迪士尼動畫裏常常有從高空往下跳躍時會先彎曲膝蓋再跳，正在跑步的人要中止跑步前會逐漸變慢步伐等等。 在界面中，懸停狀態就是很好的例子。當咱們把鼠標懸停在元素上時，元素會提供反饋，代表它是能夠點擊的，而且在點擊時，又會有一些別的反饋。

△ 懸停的交互一般會暗示這個按鈕是能夠點的

在有水平滾動界面裏，一般在交互時會顯示下一個元素的部份內容。這實際上是一個很好的例子，由於它是在告知用戶下一步的一些信息。

三、時間節奏

在傳統動畫中，時間會決定關鍵幀的繪製方式。幀數越多，動畫就越流暢，同時也更慢，時間可以給動畫賦予情緒和性格。 時間的節奏感是任何動畫的基礎，速度在元素編排中起着很是重要的做用。速度太慢，用戶會不耐煩；速度太快，用戶又會錯過一些內容。通常來講，大多數 UI動畫在200-600ms之間，其中懸停和反饋交互時長大約爲300ms，精細的轉場動畫大約在500ms。能夠去參考谷歌的動畫規範（material.io/design/moti… 一些設計系統，如 Carbon（www.carbondesignsystem.com/guidelines/… Lightning（www.lightningdesignsystem.com/guidelines/…

△ 右邊的過渡動畫顯得太過於漫長，繁瑣。

四、漸快與漸慢

在現實世界中，大多數物體都遵循着緩動運動規律。也就是說，物體的運動並不會瞬間開始或瞬間結束，就像一個物體自由落體，也是一開始很慢後面纔會變快。

△ 左側的卡片是沒有緩動的，右側的是帶有緩動的，看起來會天然不少。 給 UI 中的元素加上緩動會讓它看起來更加天然，緩動和節奏感都是能夠有效的提高動畫的品質。

五、呈現方式

舞臺中的表演須要合適的編排纔會精彩。也就是說，對象在場景中如何擺放，每一個動畫又如何出現，關乎演出的質量。經過這種編排，可以將注意力引向最重要的角色。 在界面中，呈現方式可以決定元素的位置，以及在交互時，它應該如何編排才能將用戶的注意力引向預期的元素。

好比如今有一個基於興趣的音樂APP，對這個應用來講，最重要的事就是讓動畫引導用戶選擇他們所喜歡的音樂。所以，有必要將相似的操做與其餘元素分開編排，有目的的引導用戶。

六、弧形軌跡

一個從高處拋出的小球，運動軌跡會作拋物線軌跡運動，弧線能使物體的運動更加天然。 在界面中，沿着對角線的元素沿着弧線軌跡將會使運動變得更加天然。當須要凸顯出元素的運動路徑時，多嘗試使用弧線軌跡。

△ 經過對比，可以發現右側的弧線運動軌跡會比左側的直線運動軌跡顯得更加天然。

七、附屬動做

在動畫中，次要動做可以起到烘托主要動做，好比動畫中的角色在走路時，頭部的晃動就是次要動做，卻可以讓角色行走顯得更加天然。 在界面中，次要操做可以起到強化關鍵動做，當元素須要向用戶提供反饋時，這個方法很是管用。全部的微交互都是基於這個附屬動做原理。

△ 按鈕邊上的粒子效果強化了主按鈕的點擊效果

八、誇張和吸引力

場景中的重要角色一般會採用一些比較誇張的動做來得到更多的注意力。 在界面中，重要的交互也會經過一些誇張的動畫來引發用戶的注意。谷歌設計規範中的 FAB按鈕就是一個很好的例子，FAB按鈕在不動的時候也比較能引發注意，由於它一般會帶有比較鮮明的顏色，而且是獨立懸浮在界面元素之上的。當它被點擊時，FAB的動畫被放大，把整個界面都佔滿，使得它徹底佔據用戶的注意力。

△ FAB誇張的交互形式

△ 對於支付這麼重要功能的按鈕，經過誇張的動效引發用戶的注意

△ 表單輸入的用戶體驗加入動效就有很大的提高空間。好比你能夠在用戶輸入完成或者輸入正確以後，給用戶一個點頭的動效，在輸入錯誤以後左右晃動提供「搖頭拒絕」的動效，人性化地傳遞信息，用戶也是很容易理解的。

九、跟隨動做和重疊動做

想象一隻兔子從高處跳下來，當兔子開始起跳時，它的耳朵動做會與身體動做發生錯位。而後當它着陸時，它的身體停下來了，可是耳朵還在動。前者稱之爲跟隨動做，後者被稱爲重疊動做。其原理說的就是：沒有任何一種物體會忽然中止，物體的運動是一個部分接着另外一個部分的。 在界面中，可使元素在中止以前超過它們本來的位置，使得元素運動更加天然。就是咱們常說的回彈效果。

△ 界面有必定的回彈，會顯得更加天然。

△ 當界面滾動時，文字會跟隨圖片的運動，圖片與文字以不一樣的速度運動會更加天然。像是被拖着走的那種感受

十、顏色，音效還有震動

動效不僅是視覺上的，由於動效其實就是機器跟用戶的溝通方式。 另一點就是「小輸入，大輸出」。想一想在蘋果手機上瀏覽網頁，只要輕輕在網頁往上一劃，就會滑出很長一段距離。在設置日期，調整時間的時候，手機的震動以及音效使得交互變得更加真實。 iOS在設定日期時間的時候，來自手機的音效和震動效果增長了這個交互的真實感。

△ 在谷歌Pixel 上面，用戶能夠經過擠手機來激活谷歌智能助手，這不但使得交互變得方便，也必定程度上增長了互動的趣味，甚至讓機器「活」了起來。因此交互不是必定要都要在屏幕上發生。

界面中的每一次交互都必須在適當的場景中精心設計，讓整個體驗更具沉浸感。在正確的地方使用這些原則可以確保產品中的交互體驗更加協調天然。

3、動效設計思路

01. 屬性轉換法

這是最爲廣泛也最爲簡單的一種icon切換思路。 屬性包含了位置、大小、旋轉、透明度、顏色等，在這些屬性上面作動效，若運用恰當，能夠作出使人眼前一亮的動效。

如今絕大多數icon動效都離不開屬性變化，運動恰當，這個簡單而強大的方法大有可爲之處。

02. 路徑重組法

這多是看慣了屬性變換的動效以後，又一個讓人眼前一亮的動效思路。 將icon的路徑（筆畫）進行重組，構成一個新的icon，這期間考驗着更多的東西，好比觀察兩個icon筆畫之間的關係，這個思路最近至關流行，同時也具備挑戰性。

03. 點線面降級法

這是一個至關有用的思路。 面和麪進行轉換的時候，能夠用線做爲介質，一個面先轉換成一根線，再經過這根線轉換成另外一個面。同理，線和線轉換時，能夠用點做爲介質，一根線先轉換成一個點，再經過這個點轉換成另外一根線。 這麼說有點抽象，咱們來看幾個例子。

04. 遮罩法

兩個圖形之間相互轉換時，能夠用其中一個圖形做爲另外一個圖形的遮罩，也就是邊界，當這個圖形放大的時候，由於另外一個圖形做爲邊界的緣故，轉換成了另外一個圖形的形狀。 思路很簡單，卻又一點侷限性，兩個圖形必須是包含關係。

在谷歌的Material design規範中也出現相似的動效。

05. 分裂融合法

打個貼切的比方，就是把一把劍融成鐵水以後，鑄成一把新刀。 分裂融合法尤爲適用於其中一個圖標是一個總體，另外一個圖標由多個分離的部分組成的狀況。由分裂融合法作出來的動效也至關有趣。

06. 圖標特性法

以上的五種思路只是停留在如何讓icon動效有趣的層面上，那麼如何讓icon動效不只有趣並且有意義呢？這就須要考慮不一樣icon之間的特性來設計動效。 圖標特性法，顧名思義就是利用圖標表達的實際意義，作出與之吻合的動效，須要很強的思惟發散性。

4、14款UI動效設計軟件

目前行業裏的UI動效軟件確實挺多的，可是99%的都只支持Mac，只有1%支持windows，沒有Mac確實是一個硬傷，建議學好一個，夠用就好。學多而不精其實就是浪費時間！

1. Adobe After Effects

系統支持：Windows、Mac

AE這個軟件我想你們都該知道，火得一塌糊塗，若是U妹沒猜錯的話，它目前屬於設計師學動效的首選。

它的特色就是強大且牛逼。基本上要的功能都有，UI動效製做其實只是用到了這個軟件很小的一部分功能而已，要知道不少美國大片都是經過它來進行後期合成製做的， 配合PS和AI等自家軟件，更是駕輕就熟，Dribbble 、Behance上不少的大神都是用這個軟件在show。

可是有些效果工程師不見得可以幫你實現出來， 由於實際的項目產品受太多的制約。

2. Adobe Photoshop

系統支持：Windows Mac

可能不少人都認爲PS 只用來做圖和處理圖像的，並不知道PS 能夠作gif，然而當AE沒有火起來的時候，咱們這些老UI 設計師們都是用PS 作Gif，用Flash 作Demo（過去咱們只須要作PC桌面的動效）。PS從CS 6以後開始進一步增強了動效的模塊，如今的版本可以實現不少相對複雜的動效。

3. Adobe Flash

系統支持：Windows Mac

Flash能夠說是過去的王者，也是因爲時代的發展緣由，如今基本被淘汰了，這裏很少作解釋，具體能夠百度。 而Adobe開發出取代Flash的軟件叫作：Adobe Animate CC ，是Adobe爲了適應h5和css3設計的趨勢，在flash的基礎上添加了h5動畫的新功能和新屬性，是flash的升級版。

4. Pixate

系統支持：Windows、Mac

這個軟件被大牛Google 收購了，然而它Google收購一年後：Pixate Studio宣佈卻於10月31號被中止更新了（真是windows用戶的一大損失）。簡單說下它的優缺點： Pixate是圖層類交互原型軟件。優勢：可交互，共享性強，和Sketch結合相對高，同時對Google Material Design的支持比較好，有許多MD相關預設。Pixate的缺點是沒有時間線，層級管理不是很明確，圖層一多就會很是的繁雜。

5. Origami

系統支持：Mac

交互動畫原型設計工具 Facebook出品，必屬精品。 自Origami Studio出世以來，就廣受交互設計師青睞。這正是在於Origami Studio採用的Facebook的開源項目組件。 相似可視化編程的模式展現，全部操做幾乎只須要拖動鏈接便可，極大提升了工做的效率，操做起來也十分方便快速，所以也被設計師成爲「動效神器」。 要是沒點代碼知識作壓驚，建議遠處觀望就好。

6. Hype 3

系統支持：Mac

Hype 3也算是火了一小段時間的，號稱無代碼動效神器，像AE同樣使用時間軸就作可互動的動畫。PC、手機、Pad端均可以直接訪問（以web的形式），也能夠導出視頻或者GIF。3.0版還有物理特性和彈性曲線，能夠發揮更強大的動畫效果。對中國人來說，它原生支持中文這一點也很是棒！配合sketch效果也是槓槓的。

7. Flinto

系統支持：Mac

界面跟Sketch很像，若是會用sketch那麼上手很快。可以快速實現各類滾動、轉場、點擊反饋效果。手機和電腦端的預覽都很是的流暢。貌似如今用的人很多，下圖是demo：

8.Principle

系統支持：Mac

這個軟件的和上面的flinto有點相似，界面和sketch相似，同時配合sketch也是很是方便。它主要是作2個頁面間過渡專場特效，元素切換，細節動效的工具。優勢很明顯，效率高，質感好，缺點就是不能作整套原型。

9.CINEMA 4D

系統支持：Windows Mac

C4D 教程： 純乾貨：C4D徹底自學寶典

10. keynote

系統支持：Mac

keynote至關於windows的powerpoint，是個幻燈片軟件。可是！或許你並不知道，聽說蘋果的交互設計師都是用keynote作交互演示的。只要可以熟練掌握這個軟件，目前App裏的絕大多數動效都是能夠作出來的，可是相對複雜一點的動效實現起來就有點不夠。 用它作個簡單demo給程序員看的。快捷方便，要知道時間就是金錢！

相對主流的動效製做軟件就是上面這些

11. proto.io

系統支持：Mac

Proto.io是一個專用的手機原型開發平臺——能夠構建和部署全交互式的移動程序的原型，而且能夠模擬出類似的成品。它能夠運行在大多數的瀏覽器中，並提供了3個重要的接口：dashboard、編輯器以及播放器。 dashboard能夠用來管理項目。編輯器是構建原型的環境，由一組設計和開發原型的工具組成，另外還能夠構建交互。播放器用來觀看原型，並與原型進行交互，並提供了相關工具來標註和保留反饋信息。你能夠直接在真實的移動設備上對原型進行測試。而且可使用iOS或Android上的瀏覽器以全屏模式運行原型。

12. Atomic.io

系統支持：Mac

不管是在簡單的交互上，或是貫穿在整個產品的研發中，Atomic 均可以幫助你快速建立切實的原型。

13. Framer

系統支持：Mac

Framer是一個設計可交互動效的軟件，可快速導入Photoshop、Sketch中的圖像並模擬圖層分層，支持手勢，可在手機或平板中預覽。 Framer是一個開源項目，一個基於JavaScript的原型工具，專爲設計師打造。如今的應用更注重交互設計，它可讓你效率更高。

14. protopie——windows用戶設計師的福利

系統支持：Windows Mac

Protopie（菠蘿頭派）是一款交互原型設計工具，支持Mac和windows雙平臺（咱們都知道99%的動效設計軟件都只支持Mac，windows平臺目前只有2款，pixate和protopie無疑是win用戶設計師的福利，但pixate被谷歌收購後2-3年再也沒更新了），與principle、orgami、AE等相比，它更加輕量級，集成的功能更吸引人，能夠調用iphone系統的陀螺儀、麥克風、羅盤、3D Touch， 多種智能傳感器等等，這絕對是windows用戶設計師的福利。

官方網站 裏面已經提供簡單的介紹和教程，在這裏不進行贅述，在以後更新的文章中會經過我本身的使用和體驗對其中的各個小功能進行嘗試和介紹。 對於UI/UE設計師來講： 在 ProtoPie 上使用時不須要編寫代碼，經過後者可視化的設計便可完成相應功能的增減。好比，在一款軟件設計時，設計師無需記住具體的數據, 經過時間軸拖動相應版塊就能完成操做。在完成軟件設計後，設計師能夠將其導出到 ProtoPie 的應用中供開發者直接查看。 對於移動開發者和APP產品經理來講： 能夠直接在「設計師版」的應用中看到設計師的功能設計、交互邏輯等，還會得到一份由 ProtoPie 提供的具體參數數據，並按照這份數據進行開發。如此一來不只減小了設計師和開發者的溝通成本，也爲設計師探索新的交互設計提供了平臺。

總結：UI動效的優點

1. 展現產品功能 動效設計能夠展現產品的功能、界面、交互操做等細節，讓用戶更直觀的瞭解一款產品的核心特徵、用途、使用方法等細節。

2. 更有利於品牌建設 比較恰當的例子如最近優酷更新了Logo：

3. 利於展現交互原型（設計細節） 不少時候設計不能光靠嘴去解釋你的想法，靜態的設計圖設計出來後也不見得能讓觀者一目瞭然。由於不少時候交互形式和一些動效真的很難用嘴來形容，因此纔會有高保真Demo，這樣就節約了不少溝通成本。

4. 增長親和力和趣味性 有時候加個動效，能立馬拉進與觀者的距離，要是再加些趣味性在裏面，用」愛不釋手「這詞也絕不誇張。
   以上這些都是作交互動效原型的工具：AE，Principle、Keynote，Flash（已經退出了歷史舞臺），Hype3，Flinto，Proto.io，Pixate，Origami，Framer，protopie，Atomic.io，粗略的給你們介紹了一下，若是想學習動效設計，在具體瞭解這些軟件的狀況下，選擇其中一個適合本身的就好。