UI動效的規則有哪些？
實際如何運用？
常用的交互手勢有哪些？
運動曲線有哪些？
UI動效適合用在什麼頁面場景中？
如何保證UI動效的合理性？
UI動效如何做？
...
看了以上的問題，不知道大家感受如何？肯定心裡或多或少都有些答案了，但可能還不是特別全面。所以下面我的這篇總結會圍繞上面的問題一一給大家做解析。
01
UI動效的規則和實際運用
▼
UI動效的四大屬性：位置、旋轉、縮放、透明度
UI動效需要遵循的原則：提升用戶體驗，注重交互邏輯（落地回彈、先快後慢、慣性回彈）
動效的本質是服務產品和愉悅用戶的，並不是所有的頁面及元素都適合加動效，所以我們在做動效的之前，就應該明確目標以及動效的合理性。下面來具體講一下UI動效的使用規則和適用場景。
1、交互層級展現
交互層級動效實際運用到APP的並不多，因為有些複雜的動效對產品和用戶來說實質意義不大，而且開發的成本也不低。當然如果交互層級做得好的話，可以幫助用戶更好的理清關係，降低用戶的學習成本，以動效來體現整個系統的空間感。
適用場景：適合層級邏輯性較強的頁面，比如iOS系統的日曆，點擊年月日是一個層層遞進的感覺，無論是從年到月到日，還是日返回到年月，整個放大和回縮的交互動效都很一致，非常符合這種層級關係。
2、吸引眼球
這類的UI動效在運營設計中比較常見，主要目的是吸引用戶的注意力，促使用戶點擊，來達到一個轉化的目的。這類動效並不複雜，它一般只在重要的元素上做動效，這種微動效的方式不僅可以降低視覺元素的幹擾，還使得界面更加清爽簡潔，開發成本也比較低。
適用場景：適用於運營專題頁、banner、懸浮紅包優惠券等，比如下圖的banner，它只有兩個元素做了動效，一個是GO的按鈕，一個是人物的投影閃光。元素動效很簡潔但很有效，讓人一眼就看到了點擊的按鈕，懸浮優惠券也是如此。
3、操作反饋
操作有反饋是交互體驗的一個必備因素，這就不用多說了，至於反饋是要用靜態的方式呈現還是動效的方式呈現，這都取決於反饋是否重要，重要的反饋採用動效的形式展現，不僅可以幫助用戶更好的了解當前操作的響應情況，還能為用戶帶來安全感和愉悅感。
適用場景：適用於重要的操作反饋，大多使用在按鈕和圖標動效上。比如App Store的獲取按鈕，它是一個從安裝到完成對勾的一個動效，還伴隨著小震動和聲音，整個體驗流暢且愉悅。標籤欄的選中圖標動效其實也是屬於一個操作反饋動效，它能更好的突出選中氛圍。
4、轉場過渡
頁面轉場過渡的動效也非常常見，它最主要的目的是給內容加載提供一個緩衝，好的轉場動效不僅能降低用戶等待的焦慮情緒，還能使頁面更加生動有趣。
適用場景：頁面內容加載、加載小動效、刷新等。比如下圖的一個loading動效，它能在等待中有效的分散用戶的注意力，降低用戶等待的焦慮情緒。如果沒有動效的話，可想而知，用戶可能直接就走了，不等你加載了，所以一個生動的loading動效在轉場加載中是非常必要的。
5、增強表現力
表現力交互動效在dribbble上比較多，雖然酷炫的可能都是飛機稿，但真正有實用價值的也不少，像空間擴展、圖片放大延伸這些表現力的動效不僅能節省頁面空間，還能減弱用戶的挫敗感，增強產品表現力。
適用場景：頁面跳轉、內容滑動、空間表現等。比如下圖的愛彼迎列表頁面，點擊圖片，圖片放大至頂部，內容隨之出現，點擊返回，圖片縮小，內容不見。整個動效從列表到詳情的過渡非常自然，是給產品加分的，表現力就不言而喻了。
6、提升流暢度
提升產品流暢度相當於是對產品的一個不斷打磨和挖掘的過程，增強與用戶的互動，加深用戶對產品的挖掘，增加頁面的活力，給用戶製造驚喜，形成依賴。
適用場景：任何有優化空間的地方都適用。網易雲播放歌曲頁面就是一個很好的例子，播放時中間的唱片緩緩旋轉，唱頭也一直搭在唱片上面，暫停歌曲後，唱片停止旋轉，唱頭也隨之移開。整個動效過程的現實隱喻感很強，播放也非常流暢，個人非常喜歡這個設計。
02
常用的交互手勢
▼
1、點擊
點擊是最常用的手勢之一，基本上每個頁面交互都會涉及到點擊。比如：點擊跳轉頁面、點擊按鈕保存、點擊關注、點擊分享等。
2、雙擊
雙擊在移動端中不常用，一般只會用在雙擊放大圖片、放大視頻。
3、滑動
滑動包括左滑、右滑、上下滑動，也是比較常用的交互手勢，比如：左滑刪除、右滑動查看更多內容、向下滑動瀏覽更多信息等。
4、下拉
下拉這個手勢，最常見的交互就是刷新了。
5、長按
長按手勢在安卓系統中會比較常見，比如：安卓長按手勢可觸發刪除，而iOS則是左滑刪除，長按手勢還經常用在編輯上。
6、拖拽
拖拽手勢在移動內容中經常用到，例如發朋友圈添加了多張圖片時，可拖拽圖片進行重新排序。
7、兩指縮放
兩指縮放手勢經常用在圖片放大這個操作上，例如查看照片，兩指縮放可隨意放大或縮小圖片。
8、搖一搖
搖一搖這個手勢在頁面中不常用，只在特定的功能才會使用到，像搖一搖得紅包、搖一搖獲取附近的人。
03
UI動效的運動曲線
▼
運動一般都不是勻速運動的，都是有一個運動規律的，UI動效常用的運動曲線是緩出（先快後慢）和回彈。緩出一般用在頁面進入，回彈一般用在元素位移比較多。
下面是5種曲線運動的效果圖對比，當然如果想要做出更多不同的效果，還需要去調節曲線。
04
常用的AE表達式
▼
之所以介紹AE的表達式，是因為AE的功能非常強大，UI動效MG動畫包括影視後期都可以做。當然做UI動效也不一定要用AE，也可以使用一些比較輕量級的軟體，像Principle、Origami、Flinto也是很好的選擇。
AE的表達式很多，下面主要說一下比較常用的幾個，代碼可以直接複製使用。
表達式快捷鍵：按住Alt/Option鍵，然後點擊你要添加表達式的屬性前面的秒表，彈出的編輯框，把表達式代碼複製進去即可。
1、時間
利用隨著時間變化的time值，我們可以做出隨著時間變化的表達式，time的表達式可以讓我們更快的做出旋轉類的動效。
time後面的數字越大，動效就越快，反之越慢
if(time<1)這段代碼的意思就是：如果當前時間小於1，就執行time*120，否則就執行time*(-120)，運用if和else可以更方便的控制運動的走向。
2、複製
複製的表達式其實和動效沒太大關係，和普通的複製旋轉功能差不多，但是它比普通的方式更快捷方便，比如下面的圓角矩形，它只要在第一個形狀屬性添加一句代碼，然後多次複製，就可以得到加載的圖形。
30代表的是旋轉的度數，可根據情況自由更改。
3、循環
使用循環表達式可以省略我們很多的K幀，比如我們想要一個元素在動效中不停的循環，一般情況下我們會重複的K幀，比較麻煩。但是使用表達式的話，就只需要做好一個來回的關鍵幀，然後添加循環的代碼就可以。
這個表達式相對於上面這個，更加的緩和舒適，大家也可以根據自己想要的效果自行調節它們的緩動曲線。
4、運動拖尾
運動拖尾表達式可以用在一些位移動效上，結合運動模糊和透明度效果可能更好。
縮放屬性：s=100-(index-1)*10;[s,s]; 位置屬性：valueAtTime(time-0.015*(index-1))運動拖尾的這個效果，需要在形狀上添加縮放和位置這兩個屬性的表達式，然後複製多個就可以得到下面的效果了。
5、倒計時/記時
倒計時/記時的表達式在文本的源文本屬性上添加，倒計時的時間值等於動效的整體持續時間。比如說持續時間是5秒，最後倒計時時間值就是5秒。
t = Math.floor(outPoint-time); minut = Math.floor(t / 60);['0' + minut + ':' + '0' + second];['0' + minut + ':' + second];}else {if(second < 10){[minut + ':' + '0' + second];倒計時的動效只需要添加上面的這個代碼，而記時的動效需要先添加上面的代碼，然後把文本進行預合成，點擊右鍵選擇時間-時間反向。
6、抖動
抖動表達式比較靈活，UI動效的四大屬性位置、旋轉、縮放、透明度都可以用，但用的最多的屬性還是位置。
它的第一個參數指的是擺動的頻率，第二個參數指的是擺動的幅度。可以根據需要去調節它的數字。
7、萬能回彈
回彈在UI動效中用非常多，尤其是運用在位置屬性上。
nearestKeyIndex = nearestKey(time).index; if (key(nearestKeyIndex).time > time){ if (nearestKeyIndex == 0) { currentTime = time - key(nearestKeyIndex).time;if (nearestKeyIndex > 0 && currentTime < 1) { calculatedVelocity = velocityAtTime(key(nearestKeyIndex).time - thisComp.frameDuration / 10); frequency = 2.0;上面標紅的參數是可以調節的，amplitude是振幅、frequency是振頻，decay是衰減，至於具體什麼意思，大家去試試就知道了。
以上總結了UI動效的基本規則、使用場景、交互手勢、運動曲線、AE表達式，內容還是比較多的。其中AE表達式的話，個人建議也不要太死的去套，可以很靈活的按照自己想要的效果去修改參數以及調節曲線。表達式只是輔助，動效最重要的還是想法，只要想法及構思到位了，技巧和實現假以時日肯定是沒問題的。當然如果平時不積累不多看多練的話，大腦肯定是一片空白，是不可能想法的。
加老D私人微信，朋友圈更多精彩
你有在看麼