UX設計中的功能性動效

UX設計中的功能性動效

功能性的動效是指一種微妙且具有清晰合理目的的動畫效果。它能減少認知負荷,防止對界面變化的忽視,還能幫助用戶在界面的空間關係之中建立慣性回憶。

圖片來源:ZURB University

功能性的動效是指一種微妙且具有清晰合理目的的動畫效果。它能減少認知負荷,防止對界面變化的忽視,還能幫助用戶在界面的空間關係之中建立慣性回憶。更重要的是,動效給用戶界面賦予了生命。

通過對界面元素進行組合、拆分、改變他們的形狀和大小,動效可以讓界面更加生動。你應當使用功能性動效流暢地在上下文間引導用戶,解釋屏幕上元素排列的變化,以及加強元素層次結構。

成功的動效設計具有以下六大特點:

1.響應

視覺反饋在用戶界面設計中是非常重要的,因為渴望得到確認反饋信息是用戶的一種天性。在現實生活中,按鈕、控制鍵和其它物體會因我們的操作而產生相應的反饋,這已經是人們習以為常的交互方式。

圖片來源:Smart Design

用戶界面應該在用戶點擊輸入框時,就準確及時地給予響應,表現出上一界面和當前界面的關係,以及哪些元素和操作導致了當前界面的出現。用戶通過點擊應用程序總是能知道發生了什麼,這感覺很好。

元素對用戶的操作意圖給出了合適的回應。圖片來源:MaterialDesign

 

2.關聯

新出現的界面需要和那些導致它出現的元素或操作聯繫起來。這種聯想式關係所隱含的邏輯,能幫助用戶理解剛剛在視圖的布局中發生的變化和什麼觸發了變化。

下面你能看到兩個導航菜單的動效案例。第一個案例中,菜單從用戶點擊點以外很遠的地方開始浮現,這就打破了點擊行為和菜單動效的聯繫。

錯誤方式。圖片來源:Material Design

在第二個例子中菜單從接觸點出現,這就將元素關聯在了接觸點上。

正確方式。圖片來源:Material Design

另一個例子是在特定條件下操作按鈕功能的變化。「播放」和「停止」按鈕可能是切換開關最常見的例子。將播放按鈕轉換為暫停按鈕意味著這兩個動作是相連的,並且點擊一個按鈕后另一個按鈕才會出現。你應該提供按鈕動效讓這兩種狀態轉換地更為流暢且避免間斷感。

平滑地過渡到一個播放控制項並告知用戶按鈕的功能,同時增加了一個驚喜的交互元素。圖片來源:Material Design

 

3.自然

避免令人詫異的過渡,每一個運動都應該遵循現實世界中的作用力。在現實世界中,一個物體加速或減速的能力受重量和摩擦力的影響。同樣的,好的界面設計中,動效的啟動和停止也不能過於突兀。

下面你可以看到一個很好的例子,用戶選擇列表中的一項放大到詳細視圖。在擴展過程中,小卡片沿著弧線移動到它的目的地,擴展成一個更大的卡。

正確方式。在屏幕上向上移動的元素應該在運動過程中出現加速的力。圖片來源:Material Design

 

4.有意圖的

操作指南關注的是如何在合適的地點、合適的時間給出引導提示。而動態效果,因為其特性,則擁有界面上最高的可見性(譯者補充:運動中的東西最易被人眼察覺)。無論是文本段落,還是靜態圖像都無法超越它。好的過渡有助於引導用戶下一步的交互。

第一次使用時用戶無法真正預測即將發生的交互,但適當的動效可以幫助用戶引導方向,不會覺得內容突然發生變化。

Mac OS最小化窗口時使用的功能性動效,這個動效將第一個狀態和第二個狀態連接起來。

Mac OS最小化窗口動效

層級跳轉間使用的過渡動效,用戶在列表中選擇一個項目或卡片元素,並放大到詳細視圖。這個交互動效能夠讓用戶保持維持對界面情景的認知。

層級跳轉間的過渡動效。圖片來源:Material Design

 

5.快速

當元素在位置或狀態之間移動時,運動應該足夠簡潔快速,不要造成用戶的等待,同時又能保證過渡動效能夠被用戶所察覺並理解。

避免過慢的動畫,因為它會造成不必要的遲緩並增加完成操作的耗時。

錯誤方式。圖片來源:MaterialDesign

錯開和放慢過多元素的運動會延長持續時間。

錯誤方式。圖片來源:MaterialDesign

快速的動效,讓用戶不必等待動效完成。

正確方式。圖片來源:MaterialDesign

用戶會經常看到它們,所以應保持過渡時間短,保持動效持續時間在300毫秒內。

正確方式。圖片來源:MaterialDesign

 

6.清晰

避免在一次動效中做多件事情,因為當多個項目需要在不同的方向或交叉路徑移動時,它們就會變得很混亂,讓用戶暈頭轉向。

錯誤方式。圖片來源:MaterialDesign

過渡應該是清晰的,簡潔的,連貫的。關於動效,請記住少即是多。因此,我們應該只關注動效對用戶的實際價值。

 

正確方式。圖片來源:MaterialDesign

 

結論

總之,運動不是隨意的,每個動作都是有目的的。運動原理是動效設計的基礎原則,運動也能突出重點讓你不會淹沒在界面元素里。無論您的應用程序是有趣好玩或嚴肅直接的,使用運動原理能幫你建立一種清晰又具有凝聚力的界面體驗。

謹慎設計。關注每一個細節是使人機交互易於使用的關鍵。

 
本文地址:http://ddc.dianrong.com/?p=2189

Category

GogoShark 給你最好的網頁設計

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