最近在研究動效設計，一邊試著把所得整理成這篇文章。
上圖是大家津津樂道的path動效。這個動效為什么大家覺得好，好在什么地方？大家在讀這篇文章之前，可以先試著思考這個問題。希望看完之后，大家有了自己的想法。
一、描述##
在 Material design 的設計規范里，動效這個章節的命名是 "Animation"（動畫），動詞 animate 是“賦予生命”的意思，引申為使某物活起來的意思。動效可以定義為使用類似動畫的手法，賦予界面生命和活力。
二、作用##
越來越多的app中采用動效，其作用被設計人員所重視，在網上搜索動效相關的文章的時候，隨便一搜就能找到一堆。其作用原因主要有兩個：
吸引注意力：人眼在查看界面時，運動的界面元素會被優先注意到。這相當于在界面原有的層級上添加了一個暫時的最高層級，在流程中插入一個最優先流程（例如在出現錯誤提示時）。這樣在設計時的騰挪空間就大了不少。
傳遞信息：運動的界面元素如果符合現實世界的真實物體運動效果相符合，會非常容易被理解，在界面越來越扁平化的趨勢下，"擬物"的動效起到了更多的傳達操作信息的作用。
具體到app中，動效起到的作用有：
1傳遞層級信息
通過一定的動效暗示，可以讓用戶更好的理解整個app的信息結構。
2傳遞狀態信息
賦予app生命感，讓用戶知道app正在積極的為用戶執行操作。
3提示隱藏信息功能
限于app界面的限制，或者說即使屏幕有pc那么大，也不適合把所有的功能都擺在用戶面前。有些功能需要做一定隱藏，需要用戶進一步的探索，或者在合適的場景才會出現。如微信信息列表左滑顯示刪除等操作。還有如iOS的appstore中下載按鈕幾個狀態，當場景變化時，按鈕形態變化對應的功能變化，同時用一些動效來銜接，減少這之間的突兀并喚起用戶的注意。
4傳遞情感化信息
當用戶看到一個有趣、恰當的動效時，會感受到app的活力和趣味。
通過動效還能傳達公司品牌價值，很多動效都會與公司的品牌做直接或間接的聯系，以更好的豎立公司的品牌價值。
三、上下文##
上面講了不少動效的作用，其作用是和具體的app上下文緊密相關。接下來會結合各個具體的場景來講動效是如何發揮作用的。
1轉場動效
轉場動效是指在不同頁面切換間出現的過渡動效。通過app內一致的，符合邏輯的動效暗示，結合良好的導航，可以讓用戶更好的理解app的信息結構。用戶在每個頁面時知道自己怎么來到這個頁面，從哪個頁面過來的，怎么回到原來的頁面，兩個頁面之間的關系是怎么樣的。比較常見的界面關系有：
1.1“父子”關系
這類關系一般用來形容界面元素存在一定的包含，遞進關系。最常見的例子是列表頁面-詳情頁面，如iOS系統消息從信息列表進入到信息詳情頁面。結合下圖可以看到，注意有幾個細節，詳情頁面從右側進入，先快速進入，然后再減速到位（ease-out），原有導航信息漸淡（fade），同時新導航從右進入，慢慢明顯。
從子界面返回到父界面，也是按照這個流程，只是方向相反，加強列表頁面和詳情頁面的邏輯關系。
此外，從首頁進入到列表頁/詳情頁，圖標進入詳情頁等上下文，具體邏輯與動效一般也不會有太大差異。并且設計的時候也應有意識的保持相同邏輯動效的一致性（包括app內和app間）。
特殊點還有如抽屜導航類的動效會有一定的差異。如下圖最美應用的點擊抽屜導航按鈕，原有界面勻速右移，導航信息逐漸明顯。因為側導航的位置所限，運動速度的先快后慢可能不太合適，在這里勻速可能也能接受。
而在一些特殊的上下文中，結合界面元素增加一些特殊的動效，會讓人感覺到產品背后的趣味和情感。在一些上下文中，界面間有一些是共享元素，這樣可以保留這些元素，減少界面的變化，界面的變化會變得更加流暢。在碰到這些有趣的動效時，總會會心一笑。
如iOS中分組打開的動效。這組動效中，包含三個元素，原有分組框伴隨文字快速放大，并向中間位移（目標位置），然后變大速度減緩（ease-out），同時下方文字在變大的同時變淡，消失后，上方文字逐漸明顯。
還有如微信讀書，大家可以揣摩下這之間的元素，哪些是進入元素，離開元素，共享元素，這幾個是如何變化的，變化的軌跡速度又是如何。
1.2“臨時”關系
“模態視圖（modal view）是一個以模態形式展現的視圖，它為當前任務或情境提供自包含（self-contained）的功能。”——iOS 人機界面準則
當使用原有界面自包含的功能時，即功能使用完成的結果是直接體現在原有界面上的，而且這個功能一般流程比較簡單，如iOS消息的新建，微信朋友圈的發照片。
當點擊新建后，新建消息從下方快速進入，覆蓋原有界面，就像在原有界面上蓋了一層暫時的界面，上升的速度慢慢降低。
可以看到，微信朋友圈在發一個新的朋友圈信息時，空白loading界面先快速從下方進入，然后再緩慢減速，到最終位置，在這過程中加載好備選的照片。在照片點擊發送后后，這里有一個很動人的動效，背景變深消失進入朋友圈的界面，照片緩慢變大到最后大小。這樣一個動效使得照片的發送變得非常流暢，讓人沒有感覺到任何的等待。
1.3“并列”關系
這種關系類型主要見于tab導航中，但考慮到iOS（一般在底部）和安卓（建議在頂部）的差異性，置于底部app一般不采用動效，伴隨對不同tab導航按鈕的點擊，出現對應界面。而在頂部的app一般采取點擊和手勢切換，點擊伴隨動效。
如下圖的網易音樂，點擊伴隨的動效導航文字下方的橫杠；而手勢切換的動效就伴隨著界面的切換。這也體現了動效的一個重要作用，對用戶操作及時，可見的響應會讓用戶產生自己在直接操作界面元素，打破用戶與界面間那層玻璃。
2反饋動效
反饋動效，意指用戶操作后，app給予的以動效形式展現的反饋。反饋可以說是app對用戶最基本的禮貌。根據人與app之間的交互過程，可以把反饋動效分成三種：
2.1即時動效
在現實中，按一個按鈕會立即有按下狀態。與之類似，app在接受到輸入后，在執行操作前需要即時給予用戶反饋。這個例子很多，在上面的動效圖中都可以見到，在iOS系統自帶app中，點擊的效果一般為按鈕/文字的顏色和透明度有一定變化。
而在安卓新推出的Material design 推薦使用漣漪效果。
對于點擊的即時動效，主要由兩個方面來組成，一個響應效果（顏色，形變，漣漪，或上浮等等），一個是響應元素（按鈕，照片，列表等）。這兩者結合告訴用戶你剛才是否進行了操作，操作了什么。
除了最基礎的點擊操作，觸屏手機的操作手勢還有很多（如拖拽，滑動，輕掃，雙擊，捏合，長按，搖晃）。這些手勢操作與現實中對物體的操作也有一定的相似性，因為這個相似性，許多剛接觸觸屏手機的用戶也能自然而然的把現實中的經驗遷移過來。也正因為如此，即時動效需要表達出與現實比較相近的操作結果（動效擬物）。而符合用戶現實操作體驗的動效也會給用戶帶來自然和諧的體驗，讓app更具有易學性。
2.2執行中動效
app正在執行操作時，讓用戶知道，app正在吭哧吭哧的干活呢。常出現在加載、刷新、發送等界面，通過動效可以讓等待變得不那么無聊。
在《移動設計》一書中，提到：
對于等待時間，有0.1s、1s、10s和3個關鍵時間點。如果在0.1s內，用戶在進行某個操作后能在0.1s內知道自己的操作結果，那么他不會感覺到任何的滯后。而當操作后響應時間超過1s，就會打斷用戶原來的思路，從而降低操作效率。而當響應時間超過10s，就會有大量用戶失去耐心轉而去做其他事情。
所以，如果時間在0.1s內，不做任何處理；0.1-1s可以使用動效為用戶提供等待提示，但此時的動效應盡量簡單，否則還未播放完畢就已經到達可操作結果。一種是將自己品牌的顏色質感等附加在抽象的形狀中，然后讓這些抽象的形狀進行變化；另一種是直接利用自己的品牌的logo進行動作或形狀的變化。
這種把時間作為動效設計的參考指標值得提倡。
表示執行中的動效比較常見，網上的范例也很多，也有許多出彩的。如下圖的進度條，把進度的變化與現實中的運動結合在一起，讓人不禁莞爾一笑。這種的例子還有很多，就不再多費筆墨了。
2.3結果動效
根據執行結果，并根據用戶需求決定是否告知用戶執行結果。這個的反饋方式不僅限于動效，但在一些需要激勵和緩解負面情緒的場景下，比較適合使用動效。正面場景如，游戲中用戶完成一些成就，擊敗對手；負面場景如刷新失敗、頁面錯誤、未聯網提示這些，就算失敗了還是感覺萌萌噠~
下圖中的是最近很火的卡牌游戲，皇室戰爭，其勝利動效十分生動，雖然元素不少，但卻在三秒依次呈現，VS字樣（放大縮小）—PKer（左右進入）—勝負點數（放大縮小，亮度高亮變淡）—獎勵寶箱（下方進入，透明度變弱）。所有元素都以不同的方式進入，給予用戶極大的成就感。
下圖是UC的頁面加載失敗頁面，帶點略微的動效的頁面，一定程度上緩解了用戶的負面情緒。
![UC失敗頁面]XD1]0PGFRH.png](http://upload-images.jianshu.io/upload_images/187543-f84b2b3b4db4abbc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3引導動效
對于隱藏的、需要注意的信息、功能，或元素代表的功能變化，需要做一定的引導。對于引導的設計也是可以單獨寫一個設計框架，在這就不過多的闡述了。提示有幾個注意點：
·用戶看的時間極短，所以需要簡單易懂，重點突出
·適時地出現和適時地離開，符合用戶使用的場景，在可能觸發或需要隱藏信息的時候才進行提醒。
而對于引導動效，不要做的太復雜，突出主要內容和操作。
如下圖的百度地圖的語音搜索，在開啟語音搜索后，同時以簡短的文字動效和語音圖標不斷擴大的圓環來引導用戶說出需要搜索的地址。簡單清晰又不影響用戶操作。
四、分解動效##
說了這么多動效的作用，形式，再回到實際的工作流程中。動效應該怎么傳達給開發人員呢？這時候就需要對動效進行分解。
1界面元素
進入元素：新產生的或變化的元素被引入或重新生成。
離開元素：元素不再與當前場景相關，會被移除。
共享元素：元素在轉換過程中一直存在，可以很微小（如一個圖標），或占據主要地位（翻譯自Material design - Animation ）
在明確各個獨立的元素后，針對各個元素闡述其變化，但注意各個元素間的和諧有序，明確相互之間的聯動關系。可以參考皇室戰爭動效。
2運動（速度，軌跡）
如上文所述，動效的擬物化能起到更好的傳達信息的作用。在物理世界里，存在著牛頓第一運動定律，又稱慣性定律：任何物體都要保持勻速直線運動或靜止狀態，直到外力迫使它改變運動狀態為止。所以物體的開始，停止，變向都需要有一個變化的過程（加速度）。“即使最不和諧的停止和啟動也不是即時的”（翻譯自Material design - Animation ）。如果違反了這一定律，動效看起來就會很不自然，有些app中的動效看起來很別扭就是因為這個原因。
除此之外，ios中的一些動效會在結束加一定的彈動/伸縮效果，使得動效更加靈動和自然。
除了速度方面的變化，還需要考慮運動軌跡，考慮各個元素的起始和結束位置，考慮這之間的運動路徑需要有意義且有序。隨意的運動會導致用戶分心，通過協調有序的動效來引導用戶的注意。
注意，最好同時運動的元素方向要一致，避免沖突的移動和重疊的路徑。
在material design設計中，還要考慮元素之間的層級關系。
這方面的內容大家可以看下這篇文章《動效設計的物理法則》和《Material design》。尤其后者官網上提供了大量生動的動效，很有參考意義。
3形變（大小，形狀）
形變主要包括大小和形狀，但元素的形變最好有明確的目的，如下圖appstore下載的圖標變化。
4色變（顏色，透明度）
色變主要包括顏色和透明度的變化，注意配合界面元素的強調和弱化，一般在動效中起輔助作用，緩和元素過于劇烈的變化，如下圖。
或者起到暗示點擊的作用
動效拆解起來是形變（大小，形狀）、色變（顏色，透明度，飽和度）、運動（速度，軌跡）的結合。每個動效不一定都包含這三者，但通過把每個動效按照這三個維度拆解可以更好的描述和傳達。
五、注意##
這里只強調一句，動效的設計要有意義。
最后：
終于寫到了最后，寫這篇文章戰線拉的有點久。從資料的收集，整理；案例的錄制、逐幀截圖；自己思路的思考總結都花費了不少時間。但每完成一個框架，都是對自己的一個提升。在這樣一個碎片化閱讀的時代，還是需要不停的收集，整理和產出。
諸君共勉！
ps.大家可以在回復里說下那些動效設計動人的app，讓大家一起欣賞下~
參考資料：
《Material design》-Animation
(翻譯http://www.uisdc.com/material-motion-design-guideline）
《移動設計》-動效
《ios 9 人機界面指南》-動效
《設計之下》-錦上添花的UI動畫
我們為什么需要動效設計
用戶體驗設計中的功能性動效
流動之美！探討一下移動動效設計
如何合理的在移動應用中使用動效
動效設計的物理法則
