6大要素教你如何製作UI切換動效

眾所周知，懂得動效對於一名UI設計師來說是非常重要的，恰當的動效能帶來更好的用戶體驗，動效通過形狀、大小、融合、位移、重組等靈活變化，使應用界面充滿活力。在UI設計中，通過巧妙的設計好功能性動效，使用戶在切換各個功能模塊或者頁面的體驗更加流暢。今天我們就一起來聊一聊UI中切換動效。

功能性動效，是指清晰的、有邏輯、有目的的交互動效。

要想設計出成功的切換動效，需要包含以下6大要素：

處處相應，及時反饋

在UI設計中，視覺反饋及其重要，因為它給了用戶的自然期望以一個及時而符合邏輯的確認。

例如，生活中，按一個按鈕，就可以點亮一盞燈；按門鈴，門鈴就會響……交互過程中，只要人做出了一個操作，系統就應當予以及時的反饋，這符合我們的習慣和對即將發生的事情的預期。

用戶界面應當根據用戶的觸發的操作快速給予反饋，同時，應當表明新的界面和觸發它產生的UI元素之間的聯繫，讓人總是知道當前的操作將會帶來什麼變化。

對象對用戶的操作作出恰當的反饋，點擊菜單-展開詳情，切換自然，符合預期。

相關性

觸發一個動作UI控制項，與即將出現的新面板之間，必須有邏輯上的緊密聯繫。這樣才有助於用戶更好的理解這個操作。

例如下面這個案例中，觸髮菜單與觸發它的UI控制項相隔較遠的距離，這就打破了它們之間的聯繫。

從視覺格式及心理學上來講，靠近對象之間的聯繫密切，而遠離對象之間的聯繫薄弱。

修改後如下，菜單從緊貼著控制項的位置出現，體現了它們之間的邏輯關係。

目的性

界面中的靜態圖片或者文字內容的導向作用都沒有動效強。因此，好的動效要正確恰當地指引用戶進行下一步操作。

第一次使用某個應用的用戶一般並不能預測交互何時何地會怎麼發生，且不知道會產生什麼樣的效果，但是恰當的動效能幫助用戶專註當前的目標，而不被干擾，感覺到當前顯示對象的突然變化。

點擊控制項，彈開更多菜單信息，信息的出現和展示井井有條，一切動效都是為了合理地展示內容，讓用戶專註於內容本身。

迅速敏捷

界面中元素在發生位置或狀態改變時，變化的速度不能過慢，導致過長時間的等待。當然也不能太快，導致用戶看不清、不能理解動效的邏輯含義。

例如，下圖中各元素的動效，速度過慢，造成了不太必要的延時。是不可取的。

修改後

過渡流暢自然

避免意料之外的交互動效。任何元素的移動應當遵循現實中的物體運動規律。在現實生活中，一個物體對象的加速或減速一般都受到外力的影響，而且運動速度的變化是連續而非突變的，所以同樣的，在動效設計里，突然或奇怪的運動模式都會顯得不自然，喪失愉悅的使用體驗。

點擊小卡片， 卡片和圓對象沿著一道平緩的圓弧進行緩動，並非突然閃現，或沿著奇怪的路徑（比如折線），同時卡片平緩的放大，切換自然舒服，且過度十分流暢。

清晰簡明一致

在單次交互動效中，不宜發生太多樣、太多元素的動態變化。交互動效應當清晰、簡明、一致。「少即是多」的設計原理在此同樣適用。酷炫不是目的，幫助功能的實現，信息的展示，適用的便捷才是目的。

我們在設計每一個交互的時候，都需要一個目的來支撐。動效是以引導用戶沿著正確的操作路徑快速高效的完成操作為目標，在任務過程中不迷失，不被突然打斷。無論你的應用是簡單的、是嚴謹的、還是逗趣風格，好的動效設計能帶來更好的用戶體驗。

如果想深入了解UI設計，往UI設計方向發展，請下面這篇文章：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！