動效呈現(xiàn)出狀態(tài)切換的過程，展現(xiàn)了元素之間的邏輯關系停蕉，并且吸引用戶的注意力，引導他們執(zhí)行有效的交互钙态。
在設計動效的過程中慧起， Material Motion 的設計原則，IBM動畫設計規(guī)則和UX動效宣言都是不錯的設計參考和指引册倒。遵循這些現(xiàn)有的規(guī)范蚓挤，能夠很好地提升動效本身的體驗和效果。
標簽頁切換動效
左側(cè)標簽切換的時候使用了淡入淡出驻子，右側(cè)標簽頁切換使用了滑動效果灿意。
通過滑動效果來展示內(nèi)容，不僅呈現(xiàn)了變化的過程拴孤，還指明了兩者的位置關系和邏輯關系，且相對于淡入淡出的效果更平和順滑甲捏。
在設計諸如標簽頁或者彈出菜單這樣的控件的時候演熟，盡量借助動效讓內(nèi)容的位置變化關系呈現(xiàn)出來，這樣不僅確保了內(nèi)容的可見性，而且能夠讓用戶不迷惑芒粹。這個時候兄纺，滑動手勢交互和位移動效是不錯的搭配，非常符合此處內(nèi)容切換的語境化漆。
卡片的展開動效
卡片是最常見的 UI 元素估脆，左側(cè)的界面中，點擊卡片之后座云，展開新的界面疙赠；右側(cè)界面中，點擊卡片之后朦拖，卡片擴展并填充整個屏幕圃阳。
最好的動效能夠通過變化讓人明白兩種狀態(tài)之間的內(nèi)在關聯(lián)。在制作不同狀態(tài)之間變化的動效的時候璧帝，可以將兩個界面中共享的元素作為橋梁捍岳，將兩個界面狀態(tài)連接到一起。在使用 InVision Studio 創(chuàng)建原型的時候睬隶，這種同時存在前后兩屏中的控件會自動連接起來锣夹，構(gòu)成動效。這一功能使得動效的構(gòu)建更加便捷苏潜。
在列表中使用瀑布式展開動效
左邊的列表使用了較為迅速的淡入淡出動效银萍，而右邊的列表當中，淡入淡出以延時的方式呈現(xiàn)窖贤，效果類似瀑布的展開方式砖顷。
瀑布式的展開動效只需要通過明顯的延時就能夠?qū)崿F(xiàn)，適當?shù)乜刂乒?jié)奏赃梧，讓整個加載速度適當?shù)臏p緩而不會太慢滤蝠，讓用戶能夠感知到這個過程即可。谷歌建議每個元素的延時不超過20毫秒授嘀。在 Material Motion 中可以看到設計的原理和更多的實例物咳。
展開時的擴展動效
左側(cè)的動效是內(nèi)容在頂層覆蓋列表，而右側(cè)的動效是從中間擴展將上下內(nèi)容頂開蹄皱。
通過移動览闰、覆蓋、展開的方式來呈現(xiàn)詳情頁的動效巷折，視覺上看起來不錯压鉴。
而點擊之后展開頂?shù)糁車脑兀椭車钠渌脑赜兴佣途校@樣的動效更有活力油吭。
界面中所有的元素都應該是有「重量」的击蹲，某個 UI 控件隨著動效變化的時候，和周圍的元素發(fā)生互動婉宰，則能夠強化這種實體感歌豺。
菜單的展開動效
左側(cè)的動效中，菜單從底部淡入界面心包，而右側(cè)的動效中类咧，菜單是從被點擊的按鈕中擴展開的。
菜單從按鈕的位置淡入進入界面的方式展現(xiàn)了兩者的關聯(lián)蟹腾。而通過擴展動效的方式來呈現(xiàn)菜單的展開痕惋，讓按鈕和菜單之間的關系得到了進一步的加強。
使用按鈕展現(xiàn)不同狀態(tài)
左側(cè)的按鈕通過文本說明和色彩變化來指示狀態(tài)改變岭佳，而右側(cè)按鈕則通過加載控件來展示不同的事件的發(fā)生血巍。
右側(cè)動效通過按鈕本身，視覺化地呈現(xiàn)加載的狀態(tài)變化珊随，比起左側(cè)的文本說明更加自然述寡，也更加易于理解。
嘗試使用加載指示器來指示狀態(tài)的變化和進度叶洞，類似的方式有很多鲫凶，重點是在于視覺化的、自然的呈現(xiàn)狀態(tài)的變化過程衩辟，如果搭配上色彩的變化螟炫，那么就更好了。
吸引用戶注意力的動效
左側(cè)僅僅是通過色彩艺晴、符號和位置來吸引注意力昼钻，而右側(cè)加入了微妙的動效來吸引用戶注意。
使用色彩封寞、標識和位置來吸引用戶注意力是頗為有效的手段然评。借助微妙自然的動效，不僅能夠吸引用戶注意力狈究，而且不會造成干擾碗淌。
對于一些重要的組件、事件或者信息抖锥，使用類似呼吸式的動效來強化效果是自然且干擾性較低的亿眠，這樣的動效設計讓元素的重要性得到凸顯，還不會讓用戶感到反感磅废。
結(jié)語
在設計動效的時候纳像，注意狀態(tài)變化的指示，元素之間關系的強化拯勉，適當?shù)卦黾右恍啡ぞ怪骸Ｗ裱@樣的原則耙考，總能讓動效更上一層樓。
