一個好的 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
模擬現實 Simulation
有時候，通過資料分析與使用者訪談，我們發現使用者的某些需求只能通過定製特定的介面來滿足。
對於這些特殊用例，我們可以考慮設計一個自定義的功能動效。常用的方法很難完美實現某些獨特的案例。
用法：適用於那些難以表達含義的場景。
來源：Monterosa
視覺反饋 Visual Feedback
在 UI 設計當中，視覺反饋非常重要，在真實生活中，按鈕、控制器和其他物件都會響應使用者的互動操作，這就是使用者所期望的事物的運作方式。
但請謹記，視覺反饋這型別功能動效應該儘量“低調”，並且設計得易於理解。按鈕反饋被廣泛應用於每個 UI 介面，因此如果濫用沒必要的動效會適得其反。
用法：響應使用者的操作。
與此類似的有tumblr
系統狀態 System Status
這型別完全就是關於“控制”的。對於使用者來說，“控制”意味著在任何時候都可以感知和理解系統的當前場景。
功能動效實時監測系統狀態，讓使用者快速感知操作的開始、剩餘時間與準確的完成時間。也許第一個滿足此需求的功能動效就是 HTML 頁面的“轉菊花”GIF，目前還被廣泛使用於某些操作指示介面。
優質的系統狀態功能動效通常都遵循以下模式：
- 在程式開始後展示清晰的反饋；
- 在程式進行中提供反饋；
- 估算程式的完成度，並提供反饋；
- 在程式結束後提供成功或失敗反饋。
有個很出名的動效“下拉重新整理”，就是屬於本型別動效，在移動裝置上，它常用於觸發內容的重新整理。在幾個不同型別的 apps 中檢驗一下，你會發現這些動效都沒有完全遵循上述 4 個步驟，感覺怪怪的。例如，語意不明地抬升介面來結束程式，會讓使用者再一次觸發下拉重新整理。
用法：傳達出操作處理過程的可控性。
Yik Yak App的下拉重新整理
營銷手段 Marketing Tool
這型別雖然只與市場營銷有關，但已經有很多有趣的動效。之前的 8 個型別看起來都與理性和邏輯掛鉤，但是這型別只與感性有關。
假設我們需要定義一個產品的行為，突出獨有的功能，甚至捆綁品牌價值和風格。
在這些場景劇本當中，這些方法雖然未必是以使用者為中心來設計，但卻擁有明確的功能目標————可以滿足公司的營銷策略。
用法：幫助突出公司的品牌價值，或者產品的強項。
來源：Creativedash
總結：在我們的網站或者和移動產品新增動效，可以為使用者帶來很多驚喜與愉悅，但請謹記——形式服從功能，任何毫無用途，不是為了滿足實際功能需求的，為了動效而動效，請勿濫用動效。