UI動效的規則

      UI動效的四大屬性：位置、旋轉、縮放、透明度
      UI動效需要遵循的原則：提升用戶體驗，注重交互邏輯（落地回彈、先快后慢、慣性回彈）

      動效的本質是服務產品和愉悅用戶的，并不是所有的頁面及元素都適合加動效，所以我們在做動效的之前，就應該明確目標以及動效的合理性。下面來具體講一下UI動效的使用規則和適用場景。

1、交互層級展現

      交互層級動效實際運用到APP的并不多，因為有些復雜的動效對產品和用戶來說實質意義不大，而且開發的成本也不低。當然如果交互層級做得好的話，可以幫助用戶更好的理清關系，降低用戶的學習成本，以動效來體現整個系統的空間感。

      適用場景：適合層級邏輯性較強的頁面，比如iOS系統的日歷，點擊年月日是一個層層遞進的感覺，無論是從年到月到日，還是日返回到年月，整個放大和回縮的交互動效都很一致，非常符合這種層級關系。

2、吸引眼球

      這類的UI動效在運營設計中比較常見，主要目的是吸引用戶的注意力，促使用戶點擊，來達到一個轉化的目的。這類動效并不復雜，它一般只在重要的元素上做動效，這種微動效的方式不僅可以降低視覺元素的干擾，還使得界面更加清爽簡潔，開發成本也比較低。

      適用場景：適用于運營專題頁、banner、懸浮紅包優惠券等，比如下圖的banner，它只有兩個元素做了動效，一個是GO的按鈕，一個是人物的投影閃光。元素動效很簡潔但很有效，讓人一眼就看到了點擊的按鈕，懸浮優惠券也是如此。

3、操作反饋

      操作有反饋是交互體驗的一個必備因素，這就不用多說了，至于反饋是要用靜態的方式呈現還是動效的方式呈現，這都取決于反饋是否重要，重要的反饋采用動效的形式展現，不僅可以幫助用戶更好的了解當前操作的響應情況，還能為用戶帶來安全感和愉悅感。

      適用場景：適用于重要的操作反饋，大多使用在按鈕和圖標動效上。比如App Store的獲取按鈕，它是一個從安裝到完成對勾的一個動效，還伴隨著小震動和聲音，整個體驗流暢且愉悅。標簽欄的選中圖標動效其實也是屬于一個操作反饋動效，它能更好的突出選中氛圍。

4、轉場過渡

      頁面轉場過渡的動效也非常常見，它最主要的目的是給內容加載提供一個緩沖，好的轉場動效不僅能降低用戶等待的焦慮情緒，還能使頁面更加生動有趣。

      適用場景：頁面內容加載、加載小動效、刷新等。比如下圖的一個loading動效，它能在等待中有效的分散用戶的注意力，降低用戶等待的焦慮情緒。如果沒有動效的話，可想而知，用戶可能直接就走了，不等你加載了，所以一個生動的loading動效在轉場加載中是非常必要的。

5、增強表現力

      表現力交互動效在dribbble上比較多，雖然酷炫的可能都是飛機稿，但真正有實用價值的也不少，像空間擴展、圖片放大延伸這些表現力的動效不僅能節省頁面空間，還能減弱用戶的挫敗感，增強產品表現力。

      適用場景：頁面跳轉、內容滑動、空間表現等。比如下圖的愛彼迎列表頁面，點擊圖片，圖片放大至頂部，內容隨之出現，點擊返回，圖片縮小，內容不見。整個動效從列表到詳情的過渡非常自然，是給產品加分的，表現力就不言而喻了。

6、提升流暢度

      提升產品流暢度相當于是對產品的一個不斷打磨和挖掘的過程，增強與用戶的互動，加深用戶對產品的挖掘，增加頁面的活力，給用戶制造驚喜，形成依賴。

      適用場景：任何有優化空間的地方都適用。網易云播放歌曲頁面就是一個很好的例子，播放時中間的唱片緩緩旋轉，唱頭也一直搭在唱片上面，暫停歌曲后，唱片停止旋轉，唱頭也隨之移開。整個動效過程的現實隱喻感很強，播放也非常流暢，個人非常喜歡這個設計。

      注：尊重原創文章,轉載請注明出處和鏈接 http://m.hebeijilong.cn/news-id-18498.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注UI設計頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050