起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何正確使用UI動效？
如何在UI設計中正確地使用UI動效呢？又該怎樣通過動效來傳遞意圖信息呢？這篇文章將給你答案。
在而今UI設計師滿地都是的情況下，UI設計師除了日常的UI設計能力之外，要保持比較高的競爭力，還需要具備一定的動效能力。但是很多設計師在掌握了動效能力后，并沒有能夠很恰當地去使用動效。
那么怎樣在UI設計中正確地使用UI動效呢？
在過去幾年的時間里，高保真原型工具的爆炸式發展，給了設計師們一個創造詳細交互動效的機會，設計師們花了很多時間去學習這些工具，然而很多設計師在原型工具的技術細節上迷失了方向。
設計師們必須后退一步，問一下動效的目的是什么？通過動效來傳遞意圖信息，動效用來作為更好的向用戶傳遞信息的工具，設計者應該避免使用那些妨礙用戶操作體驗的浮夸動效。
設計師可以利用動效來解決設計問題，比如：通過進入和退出動效來顯示對象之間的連續性和關系，從減少認知成本到改進用戶決策操作方面入手，有意義的動效可以讓用戶愉悅和高效。
一、減少認知成本
認知成本是完成一項任務所需的腦力勞動。
維基百科說：“沉重的認知負荷會對任務完成產生負面影響。”
當用戶在網站上時，他們會收到大量的信息。因此，他們有選擇性的注意力?！八淼酪曇啊币馑际撬麄冎苯訉Ｗ⒂谒麄冋谶M行的屏幕區域，因此，用戶不會看到屏幕上的所有內容。
作為設計人員，創建易于使用的界面非常重要，這釋放了用戶完成任務的精神努力。
設計師如何用動畫來達到這個目的？
動效，當使用好時，通過有效的用戶溝通反饋能減少用戶的困惑。另外，通過釋放用戶的思想，注意力可以被吸引到更重要的事情上，比如：頁面的“響應動作”。
二、吸引用戶的注意力
NNgroup說：“使用動效的一個有效方法是吸引用戶的注意力，吸引用戶注意力的好處是——引導用戶關注屏幕上的界面和元素之間的層次和關系?！?/p>
動效不需要直接在用戶的視野中進行。NNgroup的文章解釋說：
由于我們的生物學認識到外圍的潛在危險，外圍視圖中的移動可以更快地吸引用戶的注意力。然而，用戶已經學會不去注意那些傳統意義上的側邊欄和標題欄的橫幅或彈出框，因此設計師必須確保UI和動畫不遵循這些模式。設計師可以通過最大限度地減少單次發生的運動量，以及位于用戶認為相關信息所在位置的動畫元素，來避免視覺盲點。
三、可視化層次結構
設置頁面元素加載到屏幕上的順序可以傳遞頁面的視覺層次結構，使用微妙的動畫將向用戶顯示頁面布局以及關注哪些內容，從而減少認知負擔。
另外，通過對不同元素使用相同的動畫，用戶很容易理解元素被分組并且可以執行類似的動作，因為人類的頭腦總是在尋找創造性的模式。
四、做出更好的決定
微交互（單個對象的轉換）和宏觀交互（對象之間的轉換）中的動效可以通過系統為用戶提供上下文之間的聯系，動效還可以教會用戶新的交互手勢。動效完成后，用戶可以快速了解信息如何組合在一起，從而做出更好的決策。
動效還有可以發現性，狀態之間的轉換可以傳達單個對象的功能。例如：菜單圖標可以轉換為關閉圖標以向用戶顯示同一按鈕可以完成兩個操作。
動效可幫助用戶構建更好的空間信息心智地圖，在小屏幕的時代，這是至關重要的，用戶可以很容易地迷失在移動端小屏幕的迷宮中。但是，動效可以讓用戶通過返回屏幕間的步驟，來學習如何使用應用程序。
例如：用戶通過右滑動進入到一個頁面中，他們會發現如果想要回到主頁面，他們可以向左滑動。為了確保視覺的可發現性，應結合動效。
五、新手入門
動畫可以幫助創建新用戶的上手入門，通過在正確的時間向用戶展示正確的東西，設計師能夠有一個高效的信息傳遞，漸進地信息傳遞使系統更容易被用戶學習和使用。在向用戶介紹應用程序的工作方式的同時，可以在新內容中加入輕松的動畫，這有利于用戶記住重要的事情。
六、制造驚喜
動畫是給用戶帶來驚喜和增強用戶體驗的絕佳方式。但是，在嘗試用動畫取悅用戶之前，設計師應該先滿足用戶的基本期望，并首先嘗試消除體驗不好的基本因素。否則，不會有令人愉快的動畫效果。
動畫的頻率、持續時間和速度也會影響用戶對系統的感知，這是設計師在創建動畫時應考慮的。
理想的添加動效令用戶愉悅的地方是用戶真正需要動效的地方，而且你的動效也不應妨礙用戶的行為。
頻率
設計師應該考慮用戶多久會看到一次動效。動效第一次看起來很新穎，可以讓用戶感到驚喜。但是，此后多次出現可能會變得煩人。在用戶測試和反饋中，可以經常收集到類似的反饋。
八、持續時間
設計師應該意識到用戶在放棄任務之前愿意等待動畫或其他操作的時間。
NN組的研究發現：任何100毫秒（1秒=1000毫秒）的內容對用戶來說是瞬間的。 理解動效需要一些時間，時間范圍從150ms到350ms。
根據Val Head的說法：一般的動效持續時間指標應該在200ms-500ms之間運行。 因為這是一個指導方針，所以我們的目標是讓動效看起來很自然。 用戶認同看起來很熟悉的東西，所以最終取決于設計師的最佳判斷。 當涉及動效運行多長時間時，速度太快，用戶可能會錯過它，速度太慢，用戶可能會認為系統太慢。
九、速度
整體動效的速度會影響到用戶的感知； 較慢的動效會導致用戶感覺整個系統也很慢。 然而，動效可以用來隱藏加載延遲，并提高用戶的參與感。
加載動效可以讓用戶占用視覺反饋，因此用戶可以感受到更短的等待時間，動效中的周期數量也可以提高感知速度。 Facebook有一個骨架內容加載動畫，這是傳統加載的優雅解決方案。
Viget的一項研究發現：相比較一般的動效而言，人們會等待更長的品牌加載動效。
十、可用性
設計師應該考慮動畫可用性。 對于患有前庭障礙（一種面對運動過快的物體會發生眩暈的病癥）的人，運動會引起頭暈，眩暈或惡心。 這是Apple iOS7可以關閉動畫過渡和移動背景的原因之一。
視差滾動，一種背景移動速度比前景慢的方法，是運動的一個例子，如果使用不當，會導致惡心。 為了解決這個問題，設計師要考慮不讓動效自動播放。 如果是由用戶啟動動效，他們將會更加準備，而且不會引起不適。
設計師應牢記以下幾點，保證最佳的實際輸出效果：
- 目標：與用戶溝通的動畫是什么？
- 焦點：用戶目前的焦點在哪里 – 用戶在哪里看？
運動力學：
- 頻率：這部動畫多久播放一次？
- 持續時間：此動畫應播放多長時間？
- 速度：這部動畫應該播放多快？
- 觸發器：動畫如何觸發？通過用戶操作？還是自動？
- 輔助功能：如果用戶關閉動畫，用戶體驗將如何受到影響？
原文作者：Naema Baskanderi
原文地址：https://uxdesign.cc/ui-animation-please-use-responsibly-e707dbdb12d5
本文由 @小賤劍 翻譯發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
動效軟件，有沒有比較簡單的好用的軟件推薦~~AE有點復雜~~~
其他的比較簡單的有flinto principle 墨刀這些，都是這些支持的是簡單的交互效果的，一般就能滿足日常的高保真原型的需求。但是如果要做出比較好有情感化元素的動效，還是需要用到AE 或者PS也有簡單的動效功能
??