騰訊出品的交互微動效設計指南

      作者:cyRotel
      分類: 觀點/經驗
      2017-07-04
      3648

      本設計指南適用于UI界面中交互在時間和緩動曲線的選擇上提供了一些通用的設計建議,幫助設計師理清動效設計思路,提高設計效率。

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

      一. 本指南的適用范圍

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

      動效范圍涵蓋:

      入場\出場動效(enter & exit)、過渡動效(transition)和加載動效(loading)

      二. 設計原則和設計考量

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

      設計原則和設計考量.png

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

      確保動效有清晰.png

      三. 響應時間與持續時間

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

      1. 響應時間

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

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

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

      當 超過2秒 才能獲取反饋結果時,須設計加載動效(loading)。

      當反饋時間為 2-9秒 時,可使用循環的加載樣式(如常見的菊花轉)。

      當反饋時間 超過10秒 時,須使用帶有進度指示的加載樣式(如已加載了60%,還剩30秒)。

      響應時間.png

      響應時間1.png

      2. 持續時間

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

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

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

      小元素的輕微變化效果(如漸隱漸現、大小變化等小范圍變化),一般在 200~300毫秒以內。

      小元素的輕微變化效果.png

      較大元素的復雜變化效果(如包含大范圍緩動位移),可長達 400-500毫秒。

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

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

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

      動效設計.gif

      動效設計1.gif

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

      四. 常用動效類型及應用參考

      在瀏覽器中最常用、最容易實現且能保障性能的是 位置(position)、大小(scale)、旋轉(rotation)、透明度(opacity) 這四種屬性的變化,當變化這四種屬性的任意一種或幾種就能達到交互微動效的目的時,無須再加入其它不必要的屬性,以免影響動效流暢度。

      屬性的變化一般又分為 線性(liner)變化 和 曲線(curves)變化兩種。

      1.  線性變化

      線性變化具有 勻速、驟停 這兩個特征,一般適用于與物理屬性無關的過渡動效(如透明度屬性的變化,包含漸隱漸現或顏色間的切換),或有規律的加載動效(如均勻的循環、數值變化或進度變化)。在與物理參數有關的變化中(如位置變化),盡量避免使用線性變化,否則很容易給人帶來動效僵硬、不自然的感覺。

      線性變化.png

      線性變化1.png

      2.  曲線變化

      曲線包含多種類型,在交互微動效設計中,緩動曲線(easing)的應用范圍最廣、效果最自然、對用戶的干擾也較小,多用于與物理屬性相關的屬性變化中,常用場景如下:

      曲線變化.png

      曲線變化1.png

      曲線變化2.png

      結語

      交互微動效以功能性為主,須遵循克制有度、清晰聚焦、自然流暢這三個核心設計原則。在設計前,思考希望如何影響用戶的注意力、動效的目標是什么、動效出現的頻率和觸發機制是怎樣的,在設計時選擇合適動效類型和持續時間并關注反饋的響應時間,做到有理有據、令人信服。


      0
      0
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 亚洲第一区香蕉_国产a| 一区二区传媒有限公司| 亚洲免费视频一区二区三区| 高清一区二区三区视频| 久久精品一区二区三区资源网| 日本一区二区三区不卡视频中文字幕 | 国产亚洲福利精品一区| 日本一区二区三区在线观看视频| 3d动漫精品啪啪一区二区免费| 搜日本一区二区三区免费高清视频| 国产中的精品一区的| 亚洲福利电影一区二区?| 亚洲一区二区女搞男| 狠狠综合久久AV一区二区三区| 一区二区高清在线| 日韩精品一区二区三区中文字幕 | 一区二区三区在线观看中文字幕| 99精品国产高清一区二区麻豆| 亚洲国产成人一区二区精品区| 91国在线啪精品一区| 精品国产AⅤ一区二区三区4区| 武侠古典一区二区三区中文| 日本人的色道www免费一区| 午夜性色一区二区三区不卡视频| 亚洲性无码一区二区三区| 无码国产精品一区二区免费式影视| 人妻少妇久久中文字幕一区二区| 无码囯产精品一区二区免费| 一区二区三区四区免费视频| 日韩国产精品无码一区二区三区 | 国产日韩视频一区| 美女AV一区二区三区| 内射女校花一区二区三区| 国产福利电影一区二区三区,日韩伦理电影在线福 | 精品一区二区三区在线播放视频| 91视频国产一区| 精品国产一区二区三区AV | 少妇无码一区二区三区免费| 无码国产精品一区二区免费式影视| 亚洲熟妇无码一区二区三区 | 97精品一区二区视频在线观看|