UI中使用動效的3個關鍵點

小編：動效如今也是很受歡迎的一種設計表現形式，它不僅可以緩解用戶在等待的焦慮情緒，還能大大的提高用戶的使用體驗。動效是強大的，好的動效可以讓你的作品很快的脫穎而出即使是最常規的交互。一起來看看使用動效的3個關鍵點！

隨著技術的快速發展，動效不再是視覺上的華美，更多的用戶所要求的期望功能。動效解決了很多功能問題和介面，可以真正與用戶互動。

下面讓我們探索動效的關鍵策略，提高界面介面的功能增加情感的力量。

在你的程序在後台總發生一些過程，如正在從伺服器下載數據，進行計算。這總是需要一些時間的。你需要讓用戶知道這個程序沒有凍結，顯示正在處理的狀態。視覺交互給用戶一種控制程序的感覺。

載入完成度

載入時間對大多數產品是不可避免的。而動效雖然不能解決這個問題，但會減少一點問題。

當我們不能縮短時，當然可以使等待變得更愉快。

有創意的過程動效可以減少用戶感知的時間。動效影響用戶感知你的產品，使它看起來比實際上更好。

如果一個應用在載入時為用戶提供了一些有趣的事情，這會使得用戶更少關注等待本身。

圖片來源：Ramotion

下拉刷新

這組很流行的動效是「下拉刷新」，它發起一個移動設備上的內容更新的過程。

圖片來源：Zee Young

提示：刷新動效應該與設計整體匹配——如果應用很小，動效也應該是。

通知

因為運動會吸引注意力，動效是一個令人愉快的方式可以與沒有太多經驗的用戶進行交互。

移動的對象立即抓住了用戶的注意力。圖片來源：Arjun Kani

最基本的動效是轉換。這種類型的動效背後的邏輯是幫助用戶理解發生在頁面上的布局的變化，改變了什麼以及以後如何再次改變。一個典型的例子是一個漢堡包按鈕，進行切換隱藏內容。

動效設計可以有效地引導用戶愉快的接受通知。

圖片來源：Gal Shir

儘管漢堡包動效可能在這裡是最推薦的，還是有很多其他方式的動畫導航。

導航之間的轉換

設計師使用動效在導航之間切換用戶上下文，解釋屏幕上的元素的變化。

不同狀態之間的轉換應該充當中介的UI,幫助用戶理解屏幕上的變化是發生了什麼。

圖片來源：Ehsan Rahimi

視覺元素之間的層次結構和聯繫

動效可以完美的描述對象，並說明它們如何進行交互的。

動效說明了元素是如何交互的。

圖片來源：Vitaly Rubtsov

功能變化

在某些情況下，設計師們不得不設計一個在一定條件下變化的操作按鈕。我們經常在空間受限的手機設計中看到。

「開始」和「停止」按鈕可能是最常見的多態按鈕的例子。

圖片來源：KREATIVA Studio

這種類型的動畫顯示了當用戶進行交互時元素是怎樣改變的。在下面的示例中，當用戶按浮動操作按鈕，加號變成了一支鉛筆。這表示鉛筆是主要的功能。這個小的細節意味著接下來發生不同的情況，知道圖標意味著這兩種狀態。

按鈕改變從一個「 」到「鉛筆」表明按鈕的功能發生了變化。

圖片來源：Material Design

視覺反饋對於任何用戶界面都至關重要。它可以讓用戶有控制感，讓用戶感覺理解在給定的時間的當前上下文的系統。

反饋確認

用戶界面的元素如按鈕和控制項應該是真實的，即使他們是在另一個圖層後面。

在物質世界中，按鈕、控制項和其他與我們進行交互的對象。人們期望用戶界面控制項具有類似的響應能力。

為了彌合這一差距，視覺和運動軌跡需要即時輸入，動畫的外觀和方式可以直接進行操作。

按鈕響應用戶的點擊。圖片來源：Material Design

可視化的行為的結果

動效可以提高每一個交互並且是加強用戶預成型的操作。

在下面的例子中，當用戶點擊「支付」，一個轉輪短暫出現在應用中表示成功的狀態。動效讓用戶覺得他們可以很容易支付而且用戶會很喜歡這樣的細節。

視覺反應可以增加用戶的參與度並取悅用戶。圖片來源：Michaël Villar

工具和教程

下面的教程可以幫助你把動效融入你的Android或者iOS項目中：

• 用Adobe After Effects製作動效
• 用圖形和動效指南幫助你為應用程序添加一個動效到你的Android程序
• 使用iOS自定義的動畫項目

總結

動效在使用時是一種強大的複雜的方式。它為設計增加了生命，即使是最簡單的交互，也能讓你的作品脫穎而出。精心設計的動效增強用戶體驗。

謝謝。