UX 設計中,功能動態效果背後的 9 個邏輯

功能動態效果有別於 Disney Studio 、或者專門為電腦遊戲設計的動態效果。它帶有明確的、符合邏輯的用途,目的是為了支援我們所推行的設計解決方案。
評論
評論

本文轉自 伯樂在線

一個好的 UX 設計師可以輕易地解釋任何設計決策背後的邏輯,包括了訊息架構、內容層級、流程等等。總有一天,動態效果會被引入到產品概念原型裡面,到那個時候,設計師們會更難解釋原型中的設計想法。最終只剩下「這動態效果很酷啊」、「效果太棒了」。

什麼是功能動態效果

微妙的功能動態效果作為設計流程的一部分,深藏於日常 UI 設計之中。

功能動態效果有別於 Disney Studio 、或者專門為電腦遊戲設計的動態效果。它帶有明確的、符合邏輯的用途,目的是為了支援我們所推行的設計解決方案。

在理想狀態下,我們能通過一套完善的使用原則來驗證這些功能動態效果的可行性。在過去的幾年裡,我接觸過各種各樣的專案。在這個過程中,我總結了 9 個類型的動態效果原則,若我們設計當中的某個動態效果遵循這些原則之一(或多個),那它就是一個有效的功能動態效果,證明可以被應用於項目當中。

如果功能動效不符合這些原則,那它可能就是多餘的,使用的時候需要三思而後行,這些動效通常會讓人感到討厭和笨拙。

下面是目前為止我所收集到的所有用途。希望對你們的動態效果設計

與驗證有所幫助。

定位 Orientation

方向闡明結構。在這類型的原則裡面,動效作用於界面之間的引導,展示網頁訊息架構的走向。這類型動態效果背後的邏輯,就是為了幫助用戶感知自己在頁面流程中的位置,理解頁面的變化,是什麼觸發這些變化,以及有需要的話如何再次觸發它們。

一個典型例子就是通過按鈕觸發「展示/隱藏」內容,當你點擊按鈕後會展示一個被隱藏的面板,當你關閉面板後,面板會“縮”回操作按鈕裡面。

用戶在第一次使用的時候無法預知此互動將會帶來啥結果,隱藏面板不斷增大的展開動效會幫助用戶保持方向感,讓他不會感到已經跳出了當前頁面,或者內容突然間消失了。關閉的動態效果讓用戶將不斷“收縮”的面板與操作按鈕聯結起來,這樣一來,他們下次就會記得如何打開這個面板了。

用法:避免突兀的過度轉場,幫助用戶定位。

0064cTs2jw1ewagz750q5g30dq09x1kx
Apple Mac OSX 的窗口動效
0064cTs2jw1ewagz4zpwfg309c0gje81
Facebook Paper 的菜單動效

 

操作切換 Same Location、New Action

有一條廣為人知的可用性原則,就是讓產品保持一致性(設計與功能的一致性)。保持良好一致性的網站(產品)可讓減低用戶的學習成本,讓內容與互動有良好的可預見性。除此之外,這條原則還適用於操作按鈕。

在某些案例裡面,當按鈕被觸發後,我們被迫在特定條件下改變這個按鈕觸發後的功能,這通常出現在那些整體空間受限的設計當中。因此,已經理解了按鈕初始功能的用戶,可能需要學習一下新功能了。

「保存」與「編輯」按鈕算是最常見的可切換按鈕了。這個算是最簡單的案例了,因為只要按鈕的定義是相反的(譯者註:例如「新增」點擊後變成「刪除」),就等於他們在同一場景下。在其他情況下,當兩個操作沒有直接表面關聯時,才算是可用性的難題,這時候,你需要功能動態效果。

用法:強調操作按鈕的功能切換。

0064cTs2jw1ewagz2i7vcg30ds06xq3w
Google material design 的 Button 靜音開關

 

放大 Zoom

第三種類型與「定位」類型相似。在這類動態效果裡,用戶在列表視圖裡面選中某個項來放大進入詳情視圖(覆蓋原有列表視圖),並且可以返回列表視圖。

通常應用於相冊、卡片和項目選擇。用戶會選擇一個選項然後馬上看到與之相應的詳情視圖。

要使用這類動效的難處在於,需要確保用戶感覺自己仍然能掌握住頁面並且不脫離當前場景。在這個情況下,功能動態效果是絕對必要的。

體驗過大量使用這類型的功能動態效果後,我總結出一些通用規則,若嚴格執行則功效顯著:

  • 動效的初始狀態就是原有列表視圖;
  • 每個選項都被指定一個視覺線索,這個線索可以是這個應用的主題色,也可以是某種符號、加粗的標題或者縮略圖;
  • 當用戶作出選擇後,將會新建一個頁面,然後視覺線索會移動到一個突出的新位置。例如,可以用選項的獨有顏色來填充整個頁面;選項的符號可以放大並且移動到頁面標題處;選項的名字可以放大並作為頁面標題來展示;
  • 一個顯眼的操作按鈕,用於退出這個新頁面,例如「取消」,「關閉」,「返回」或者「X」。

用法:將預覽視圖與細節視圖聯繫起來。

0064cTs2jw1ewagz0tw41g30960gf1br

 

0064cTs2jw1ewagyzvjozg30cc0g5whz-2

視覺隱喻 Visual Hint

視覺隱喻幫助用戶更好地理解如何與產品界面互動,那些含有非主流組件或者特別導航系統的則更加需要視覺隱喻。

這類型功能動效很容易被發現,當我們打開一個頁面,一個一次性的動效會立即被觸發,並演示某個功能如何使用。

用法:為不常用功能或者隱形操作提供暗示。

0064cTs2jw1ewagytqhs7g30dm0a71hv
來源:Dejan Markovic

 

強調 Highlight

這類型的動態效果幫助用戶在滿佈繁雜元素的界面中做出有效操作。

設計師通常都會盡量避免設計出複雜的界面佈局–滿屏盡是多媒體–不斷爭奪著用戶的眼球。

減少噪音的其中一個方法就是去繁就簡,然而有時候這是不可能的任務。你想想,要求一個新聞網站的老闆移除新聞的文字內容模組和首頁的圖片欄目……

在 UI 界面當中,「運動」有一個很重要的特質,就是最容易吸引注意力,文字段落或者靜態圖片都無法與之媲美。我們可以利用這一點來設計動態效果。然而請謹記,最容易吸引注意力同時也是一種「干擾」,濫用的話等同於在界面中增加噪音。

用法:在繁複的介面中吸引用戶的注意力。

0064cTs2jw1ewagysbf65g30di09vdhg
www.Photojojo.com

 

模擬現實 Simulation

有時候,通過數據分析與用戶訪談,我們發現用戶的某些需求只能通過訂制特定的界面來滿足。

對於這些特殊用例,我們可以考慮設計一個自定義的功能動態效果。常用的方法很難完美呈現某些獨特的案例。

用法:適用於那些難以表達含義的場景。

0064cTs2jw1ewagyrjuzig30ds09vqv5
來源:Monterosa

 

視覺反饋 Visual Feedback

在 UI 設計當中,視覺反饋非常重要,在真實生活中,按鈕、控制器和其他物件都會回應用戶的互動操作,這就是用戶所期望的事物的運作方式。

但請謹記,視覺反饋這類型功能動效應該盡量「低調」,並且設計得容易理解。按鈕反饋被廣泛應用於每個 UI  界面,因此如果濫用沒必要的動態效果會適得其反。

用法:響應用戶的操作。

0064cTs2jw1ewagypxdl2g30du06ljza
與此類似的有 tumblr

系統狀態 System Status

這類型完全就是關於「控制」的。對於用戶來說,「控制」意味著在任何時候都可以感知和理解系統的當前場景。

功能動態效果即時監測系統狀態,讓用戶快速感知操作的開始、剩餘時間與準確的完成時間。也許第一個滿足此需求的功能動態效果就是 HTML 頁面的「轉菊花」GIF,目前還被廣泛使用於某些操作指示界面。

優質的系統狀態功能動效通常都遵循以下模式:

  • 在進度開始後展示清晰的反饋;
  • 在進度進行中提供反饋;
  • 估算進度的完成度,並提供反饋;
  • 在進度結束後提供成功或失敗反饋。

有個很出名的動態效果「下拉刷新」,就是屬於本類型動態效果,在行動設備上,它常用於觸發內容的刷新。在幾個不同類型的 apps 中檢驗一下,你會發現這些動態效果都沒有完全遵循上述 4 個步驟,感覺怪怪的。例如,語意不明地抬升界面來結束進度,會讓用戶再一次觸發下拉刷新。

0064cTs2jw1ewagyodbj8g30dq075woz
用法:傳達出操作處理過程的可控制性。Yik Yak App 的下拉刷新

行銷手段 Marketing Tool

這類型雖然只與市場行銷有關,但已經有很多有趣的動態效果。之前的 8 個類型看起來都與理性和邏輯掛鉤,但是這類型只與感性有關。

假設我們需要定義一個產品的行為,突顯出獨有的功能,甚至捆綁品牌價值和風格。

在這些場景劇本當中,這些方法雖然未必是以用戶為中心來設計,但卻擁有明確的功能目標————可以滿足公司的行銷策略。

用法:幫助突出公司的品牌價值,或者產品的強項。

0064cTs2jw1ewagynh43yg30ds0a3h4b
來源:Creativedash

 

總結

在我們的網站或者和行動產品添加動態效果,可以為用戶帶來很多驚喜與愉悅,但請謹記——形式遵循功能,任何毫無用途,不是為了滿足實際功能需求的動態效果,是一種沒有意義的濫用。