深度分析動效設計原理,提升產品可用性!

深度分析動效設計原理,提升產品可用性!

深度分析動效設計原理,提升產品可用性! ,觀點,Clip設計夾,翻譯文章站酷網,中國設計師互動平台。

動效對產品的可用性體驗有多維度的影響。在界面中動效不僅僅是一種視覺裝飾,它能夠提升產品的參與度並擴展交流的範圍。

本文追根溯源,先從動效的起源講起,一步步推進與產品、體驗之間的關係,最後通過案例分析動效設計的原理和應用。一起來看看吧~

一、動效設計的起源

動效與用戶體驗的結合相對較新,其根源是迪士尼動畫設計的十二個條基本原理。迪士尼動畫原理是為了講故事而提煉出的基本的物理運動規律。這些原理能讓繪製的卡通角色移動和表演,但不能充分滿足現代UI界面的交互需求。

為了彌合這個差距,動效專家Canedo Estrada改編的《動效設計的10條原理》更適合應用到數字產品設計中。

在圍繞界面元素建立用戶體驗時,重新定位動效原理的關鍵在於:

  • 將動效設計與UI動畫區分開;

  • 闡明動效如何幫助可用性;

  • 解開核心動效的內部工作機制。

二、動效設計與用戶體驗

在討論動效設計的原理之前,重要的是要強調動效不僅僅是裝飾,而是一種用來幫助用戶體驗的行為。動效設計涉及兩種基本的交互類型:實時和非實時。

實時

當用戶在屏幕上點擊UI元素時,實時交互提供即時反饋,會對用戶的操作做出即時響應。

非實時

非實時交互發生在用戶操作後,這意味著用戶需要經過短暫的轉場才能看到結果,然後再繼續。

另外動效設計通過四種不同的方式來提升產品的可用性:

  • 期望:當用戶與界面交互時,他們期望看到哪些行為?動效是否符合預期或引起混亂?

  • 連續性:交互在整個體驗中是否發生一致的運動行為?

  • 敘述:觸發的動作是否與滿足用戶意圖的事件的邏輯進程相關聯?

  • 關係: UI界面的空間、美學和層級結構如何相互關聯並影響用戶的決策?動效如何影響各種元素的關係?

三、產品動效設計原理

這裡提供12種動效設計原理的解析,每一種對應不同的案例,從更直觀的角度來解讀抽象的原理。

1 、緩動(Easing)

緩動效果模擬了現實世界中對象隨時間加速或減速的方式。它適用於所有運動的UI元素。下圖中的卡片和對應的椅子移動速度很快,但由於緩動效果它們可以平穩地受到控制。

2 、偏移和延遲(Offset & Delay)

當多個UI元素同時快速移動時,用戶傾向於將它們組合在一起,而忽略了每個元素自身的功能性。

偏移和延遲會在移動的UI元素之間創建層級結構,並傳達它們相關但又不同的消息。元素的時間、速度和間距不是完全同步的,而是交錯排列從而產生一種微妙的“一個接一個”的效果。

當用戶在屏幕之間穿梭時,偏移和延遲表明存在多個交互選項。

3 、父子關係(Parenting)

父子關係將一個元素的屬性鏈接到其他元素中。當父元素中的屬性更改時,子元素的鏈接屬性也會更改,同時所有元素的屬性都可以相互鏈接。

在下圖中,將父元素(藍色滑塊)的位置與子元素(燈泡發光效果&光照強度)相關聯。當父元素左右移動時,子元素的發光效果的範圍和光照強度的數值會發生變化。

父子關係在元素間創建關係並建立層級結構,允許多個元素同時與用戶交互。因此這種效果非常適用於實時交互中。

4 、轉換(Transformation)

當一種UI元素變成另一種形式時就會發生轉換。例如,轉換展示了下載的開始、中間和完成狀態——下載按鈕轉換為進度條,進度條轉換為完成圖標。

從UX角度看,轉換效果告知用戶元素的狀態發生了變化並將信息傳遞給用戶,提高了用戶的認知度。

5 、數值變化(Value Change)

數值的變化(數字、文本或圖形)在數字界面中非常豐富,從銀行APP到日曆到電商網站的各種產品中都會出現。

在某種程度上,數據的動態表達和交流可能會對數據的價值產生影響。例如下圖中的數值被動態引入,向用戶顯示他們有能力影響數據,提升了參與活動的意願。

6 、遮罩(Masking)

遮罩是對界面上的部分內容進行戰略性的顯示和隱藏。通過改變元素的形狀和比例,在改變元素效果的同時允許元素本身保持可識別性。因此,照片和插圖等視覺形式是理想的選擇。

從可用性的角度來看,設計師可以通過遮罩向用戶展示產品正在進行一系列的交互。

7 、覆蓋(Overlay)

二維空間中沒有深度,元素只能沿X或Y軸移動,疊加在界面中創造出前景/背景相區分的位置關係。通過模擬深度,覆蓋可以根據用戶的需要隱藏和顯示元素。

在使用覆蓋時,信息層級結構是重要的考慮因素。例如,用戶在筆記應用中首先應該看到的是筆記列表,然後使用覆蓋來顯示每個筆記的輔助選項,如刪除或歸檔。

8 、克隆(Cloning)

克隆是將現有的對象拆分成新對象,這是一種突出顯示重要信息或交互選項的方法。通過克隆將元素與界面相鏈接,如果元素只是突然出現或消失沒有關聯性,那麼用戶將缺乏信心去交互。

9 、模糊(Obscuration)

想像一扇磨砂玻璃門,雖然看不清門後的東西但是我們能察覺到門後事物的存在。

模糊的工作原理是一樣的。它為用戶提供提示,讓用戶意識到自己正在操作的界面之後還有其他的層級結構。導航菜單、密碼屏幕和文件窗口是常見的示例。

10 、視差(Parallax)

當兩個(或更多)元素同時以不同的速度移動時會構成視差效果。視差的主要目的是劃分層級結構:

  • 可交互的元素移動速度更快,出現在前景中;

  • 非交互式元素移動速度較慢,退到背景中。

視差引導用戶點擊可交互的元素,同時允許非交互的元素保留在屏幕上並保持設計的統一性。

11 、維度(Dimensionality)

維度使界面元素具備具多個方向的交互,這種行為是使元素看起來是可折疊、可翻轉、浮動的或具有深度。

作為一種敘述性工具,維度意味著元素的不同側面是相互聯繫的,並且可以實現無縫的屏幕過渡。

12 、平移與縮放(Dolly & Zoom)

平移與縮放通過視角的變化能產生更多空間上的體驗,逐級遞進顯示更高級別的細節。

平移:點擊元素後發生距離遠近的平移,用戶的視點會越來越接近圖像。 (一個人拿著照相機走到一朵花前面近距離拍攝)

縮放:用戶的視角與圖像的距離保持不變,但圖像在屏幕中的比例會增加。 (這個人站在原地不動,只利用相機的變焦功能使花顯得更大)

四、總結——動效即交流

互動體驗要求動效具備敏捷和微妙的形式。

堅持動效設計原理,即使最基本的界面元素也能成為交流的複雜媒介。動效設計與產品用戶體驗之間的關係正在迅速成熟,而且動效跨越了二維屏幕上元素的抽象運動和3D世界中對運動的感知之間的鴻溝~

文章很長,感謝看到最後~希望文章能夠讓你有所收穫!

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。