[[149375]]

一個好的 UX 設計師可以輕易地解釋任何設計決策背后的邏輯，包括了信息架構、內容層級、流程等等。

終有一天，動效會被引入到產品概念原型里面，到那個時候，設計師們會更難解釋原型中的設計想法。“這動效很 cool 啊~”、“很接地氣~”、“效果驚呆了”將會是他們說出的唯一的評價

什么是功能動效

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

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

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

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

下面是目前為止我所收集到的所有用途。希望對你們的動效設計與驗證有所幫助。

定位 Orientation

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

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

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

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

Apple Mac OSX 的窗口動效

Facebook Paper 的菜單動效

操作切換 Same Location, New Action

有一條廣為人知的可用性原則，就是讓產品保持一致性（譯者注：設計與功能的一致性）。保持良好一致性的網站（產品）可讓減低用戶的學習成本，讓內容與交互有良好的可預見性。除此之外，這條原則還適用于操作按鈕。

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

「保存」與「編輯」按鈕算是最常見的可切換按鈕了。這個算是最簡單的案例了，因為只要按鈕的定義是相反的（譯者注：例如「添加」點擊后變成「移除」），就等于他們在同一場景下。在其他情況下，當兩個操作沒有直接表面關聯時，才算是可用性的難題，這時候，你需要功能動效。

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

Google material design 的 Button靜音開關

放大 Zoom

第三種類型與「定位」類型相似。在這類動效里，用戶在列表視圖里面選中某個項來放大進入詳情視圖（覆蓋原有列表視圖），并且可以返回列表視圖。

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

要使用這類動效的難處在于，需要確保用戶感覺自己仍然能 hold 住局面并且不脫離當前場景。在這個情況下，功能動效是必不可少的。

體驗過大量使用這類型的功能動效后，我總結出一些通用規則，若嚴格執行則功效顯著：

• 動效的初始狀態就是原有列表視圖；

• 每個選項都被指定一個視覺線索，這個線索可以是這個應用的主題色，也可以是某種符號、加粗的標題或者縮略圖；

• 當用戶作出選擇后，將會新建一個頁面，然后視覺線索會移動到一個突出的新位置。例如，可以用選項的獨有顏色來填充整個頁面；選項的符號可以放大并且移動到頁面標題處；選項的名字可以放大并作為頁面標題來展示；

• 一個顯眼的操作按鈕，用于退出這個新頁面，例如「取消」，「關閉」，「返回」或者「X」。

用法：將預覽視圖與細節視圖聯系起來。

視覺隱喻 Visual Hint

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

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

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

來源：Dejan Markovic

強調 Highlight

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

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

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

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

用法：在繁復的界面中吸引用戶的注意力。

www.Photojojo.com

#p#

模擬現實 Simulation

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

對于這些特殊用例，我們可以考慮設計一個自定義的功能動效。常用的方法很難***實現某些獨特的案例。

用法：適用于那些難以表達含義的場景。

來源：Monterosa

視覺反饋 Visual Feedback

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

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

用法：響應用戶的操作。

與此類似的有tumblr

系統狀態 System Status

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

功能動效實時監測系統狀態，讓用戶快速感知操作的開始、剩余時間與準確的完成時間。也許***個滿足此需求的功能動效就是 HTML 頁面的“轉菊花”GIF，目前還被廣泛使用于某些操作指示界面。

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

• 在進程開始后展示清晰的反饋；

• 在進程進行中提供反饋；

• 估算進程的完成度，并提供反饋；

• 在進程結束后提供成功或失敗反饋。

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

用法：傳達出操作處理過程的可控性。

Yik Yak App的下拉刷新

營銷手段 Marketing Tool

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

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

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

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

[[149383]]

來源：Creativedash

總結：在我們的網站或者和移動產品添加動效，可以為用戶帶來很多驚喜與愉悅，但請謹記——形式服從功能，任何毫無用途，不是為了滿足實際功能需求的，為了動效而動效，請勿濫用動效。