交互微動效設計指南

2017-10-26 09:54:20 閱讀 237236 本文來源：騰訊ISUX

分享至：

本設計指南適用于UI界面中交互微動效，涵蓋入場、出場動效，過渡動效和加載動效，在時間和緩動曲線的選擇上提供了一些通用的設計建議，幫助設計師理清動效設計思路，提高設計效率。

導語

一、本指南的適用范圍

本指南適用于UI界面中交互微動效，屬于功能性動效。與聚焦于提供娛樂體驗的動效（如動畫影片、游戲動效等）不同，功能性動效的設計，有清晰的邏輯目的，聚焦于幫助用戶理解當前所處的狀態。

動效范圍涵蓋：入場\出場動效（enter & exit）、過渡動效（transition）和加載動效（loading）

二、設計原則和設計考量

一個優秀的交互微動效，在設計上應該遵循以下三個核心原則：

為了確保動效有清晰的用途并能完成目標，設計時請思考以下幾方面的問題：

三、響應時間與持續時間

時間是動效核心元素，設計動效時需要考慮兩類時間 —— 響應時間與持續時長

3.1 響應時間

響應時間指從用戶執行操作到反饋出現的間隔時間。觸發機制不同，響應時間的限制也不同：

· 對于由用戶操作直接觸發的反饋，理想的響應時間應該控制在 100毫秒內

· 對于由用戶操作間接觸發的反饋，響應時長可允許達到 1秒左右，不可超過2秒無反饋

· 當超過2秒才能獲取反饋結果時，須設計加載動效（loading）：

· 當反饋時間為 2-9秒時，可使用循環的加載樣式（如常見的菊花轉）

· 當反饋時間超過10秒時，須使用帶有進度指示的加載樣式（如已加載了60%，還剩30秒）

3.2 持續時間

交互微動效的持續時間不宜過長，以避免浪費用戶時間，影響用戶的閱讀和操作效率，其持續時間一般不超過500毫秒 ( 加載動效除外 )。

若你希望用戶能清晰地捕捉到元素的漸進變化，持續時須大于200毫秒；若你不介意用戶認為元素的改變是瞬間的，希望盡量節省用戶時間，持續時間也可設計在 200毫秒以內（如hover到按鈕上顏色瞬間發生微妙改變）。

具體的持續時間的取值，一方面會受到元素的大小、動效的復雜程度影響；另一方面也會受到動效的目標和運行動效的設備的影響：

· 小元素的輕微變化效果（如漸隱漸現、大小變化等小范圍變化），一般在 200~300毫秒以內

· 較大元素的復雜變化效果（如包含大范圍緩動位移），可長達 400-500毫秒

· 較快的動效更容易吸引用戶注意力，也更節省時間。若動效元素在用戶的視線之外，為了吸引用戶注意并采取行動，可使用在短時間內變化較大的動效（如發生位置移動和速率改變）；若動效元素已經在用戶的注意范圍內，為了保持視覺連續性，完成必要的過渡（如漸隱漸現）后即可結束。

· 較慢的動效較少分散用戶注意力，更適用于非用戶直接觸發的場景。若動效不是用戶直接觸發的，不希望用戶注意力被轉移，可使用在長時間內變化較小的動效（一般不會出現位置移動）

· 不同設備的屏幕尺寸和特性不同，理想的持續時間也不一樣。一般來說，對于移動設備而言，屏幕越大往往動效的位移也越大，因此持續時間也應該越長（可穿戴設備上的持續時間大約比手機上快30%，平板電腦上的持續時間大約比手機上慢30%）。而臺式設備的動效設計往往比移動設備中的動效設計更簡單快速（150毫秒~200毫秒間較為常見），這是因為復雜的動效在臺式設備場景下容易出現掉幀、卡頓的情況，瞬時響應的動效能避免這一點。

· 出場動效一般比入場動效更快 ( 如當入場動效設置為230毫秒時，出場動效可設置為200毫秒) 這是因為元素入場時用戶一般需要閱讀并處理新出現的信息，而元素出場時通常表明用戶在此元素上的任務已完成，不需要再關注了，快速出場能夠節省用戶更多時間。