下面進入譯文。

一個優秀的UX設計師可以輕松地解釋每一個動作邏輯背后的設計概念，包括信息框架，頁面內容的繼承，每一個點擊動作對于頁面跳轉的影響等。

不 久的將來，動效將被廣泛的引入到原型的概念設計當中，然而隨之帶來的是設計方案的確定與分析變得越來越復雜。影響這些決定的原因當中，諸如“這樣看起來很 炫”，“這樣看酷”等等，將會讓動效設計失去了它本來的目的。接下來，我們將試著站在用戶體驗的角度來定義動效設計，以及解釋引入動效設計的目的。

什么是功能性的動效？

功能性的動效就是被我們引入到交互設計當中的微動效（motion），它通常是很細微的動效，來實現一些界面交互當中的一些功能。

不同于迪斯尼級別或者是視頻游戲里的動畫效果，功能性的動效更加的清爽、具有邏輯目的性。功能性動效需要在遵守設計規范的基礎上幫助我們實現我們的交互方案。功能性動效已經是我們交互設計中的另一個有效地工具。

在交互設計中，如果一個功能性動效能夠在遵守邏輯性目的的基礎上實現了交互效果，它才可以被看做是一個有效的動效設計，否則即使它實現了交互效果，也不是有效的。在過去的項目積累當中，我總結了9條邏輯目的性，通過解釋它們的特性，讓我們更好地理解功能性動效。

引導性（Orientation）

有目的性的啟發用戶。此類動效往往出現在菜單中，在網頁的內容框架中幫助吸引用戶的注意力。使用此類動效的目的除了吸引用戶的注意力之外，還有引導、啟發用戶理解界面布局剛剛所發生的改變，它們往往用來承接、過度界面的變化。

一個經典的例子就是觸發隱藏內容的按鈕，當用戶點擊這個按鈕，隱藏的內容面板出現，當你關閉這個內容面板后，它縮回隱藏到按鈕后方。當用戶第一次操作的時 候，TA并不能夠預測到會有這樣的交互，當TA點擊按鈕后，隱藏的內容面板逐漸變大出現的動效引導了用戶的注意力，并避免讓用戶誤以為TA已經離開了當前 頁面，或者誤以為主頁的內容忽然消失了（其實是被出現的內容遮擋住了）。關閉內容面板的動效幫助用戶聯想到小時的內容和按鈕的關系，因此下次他們就會記得 相應的操作所帶來的效果。

邏輯目的：避免突然的變化導致的茫然失措，引導用戶聯系動作前后的關系。

相同的位置，不同的動作（Same Location, New Action）

一條眾所周知的可用性規則：設計和網頁的內容應該具有連續性。一個具有連續性的網頁是可以根據用戶的經驗、設計的風格來感知的，是可以學習的。因此，這條可用性規則應該被用在操作按鈕的設計，以及其他的控件設計當中。

在某種場景中，我們被迫將一個操作按鈕設計成可以根據場景的不同而具有不同功能的效果。我們經常在極其有限的設計場景中看到類似的案例。因此，用戶需要學習/熟悉同一個操作按鈕在不同的場景下代表的不同功能。

“保存”和“編輯”應該是最具代表性的例子了。但這只是一個簡單地案例，因為他們代表著完全不同的動作，很少會讓用戶混淆誤解。當兩個操作無法清楚的區分對比時，用戶就會容易困惑，這就會帶來體驗上的痛點。在這種情況下，功能性的動效可以解決這個問題。

邏輯目的：幫助操作按鈕突出功能的變化。

放大（Zoom In）

這條原則與上文的引導性原則相似。在這類動效中，用戶在列表中選擇一條內容，然后點擊放大（跳轉）到內容細節的頁面（頁面跳轉），同時又能夠回到列表主頁 中。這類動效經常出現在圖片庫、卡片或者商品的選擇頁面中。用戶在其中選擇一條內容，然后頁面理解跳轉到所選的內容主頁面。這類頁面交互的難點在于要讓用 戶了解頁面跳轉到了自己想要的頁面。功能性動效在這里是必須的。

為了提高用戶體驗，以下幾點需要注意：

1.動效的起點應該是列表的初始狀態

2.動效中牽扯到的元素都應該有一個固定的視覺狀態，例如有一個主色調、一個圖標、一個加粗的標題或者一個縮略圖

3.當用戶選擇了一個內容，在所跳轉的內容主頁中，動效中牽扯到的元素將會移動到顯著、重要的位置。舉個栗子，內容主頁的顏色跟內容的主色調一致；內容中的圖標被拉伸并且移動到頁面的標題處；內容的名稱變大并且出現在頁面標題處。

4.操作按鈕出現在內容主頁中，比如“取消”，“關閉”，“返回”或者“X”

邏輯目的：關聯縮略內容和主頁內容。

視覺暗示（Visual Hint）

視覺暗示引導用戶更好的理解怎樣與產品的界面交互。視覺暗示經常被用在包含不規則元素或者固定導航的設計中。當用戶打開一個新的頁面時，一個隨即被觸發的單次播放動畫很容易吸引用戶注意到某個設計元素的功能特性，這就是視覺暗示的作用。

邏輯目的：暗示用戶不規則元素的功能或隱藏的功能。

高光標注（Highlight）

高光標注幫助用戶在復雜混亂的排版中注意到重點內容。設計師在設計過程中經常會盡力避免復雜混亂的排版布局，這樣做的結果是頁面往往會整齊的被分割成幾塊，并有規則的填充文本內容和視覺元素。這些被整齊分割的版塊會使用戶迷失在頁面中，找不到重點。

一個避免混亂的方法是去除雜亂的內容。但這在實際操作中很難實現，現實的例子就是像新浪，或者淘寶這樣的平臺類網站\app中，主頁中的任何一條內容都是很難去除的，這往往牽扯很多市場因素、業務因素等等。

微動效，在這種情況下將起到非常顯著的作用。相比動效，無論是文本還是靜態圖都無法更加顯著地吸引用戶的視線。但需要注意的是，引入動效將會使原本已經混亂復雜的頁面布局更加撲朔迷離，所以是否增加動效，增加多少動效需要對整個頁面的復雜度進行權衡。

邏輯目的：吸引用戶的注意力，在復雜的界面布局中突出重點。

模擬（Simulation）

有時在設計研究和用戶訪談中我們發現，用戶的某些需求只有在模擬現實情景中才會被滿足，對于這種特殊的情況，我們需要設計定制的功能性動效。舉個例子，足球 比賽的數據分析，標準化的圖表、數字對比不會幫助用戶對與比賽數據的理解。再舉個栗子，通過地圖展示不同時段的氣候溫度，用戶可以很容易追蹤到明天巴黎與 倫敦的天氣情況。

邏輯目的：模擬現實場景可以幫助用戶理解捕捉特定的信息。

視覺反饋（Visual Feedback）

視覺反饋在用戶界面設計中非常重要。按鈕，操作控件，以及其他交互元素都需要反映用戶的操作，它們能夠引導用戶與頁面元素的交互。

功能性動效需要設計的非常細致入微（微動效），而且需要在用戶操作后具有反饋動作。點擊按鈕后的狀態反饋在界面設計中是必須的，它將提示用戶點擊操作已完成，頁面將會展示后續的反應。

邏輯目的：反映用戶的操作。

系統狀態提示（System Status）

好的交互意味著：用戶需要在任何情境下都要懂得頁面的內容，了解何時何地進行何種操作將實現何種功能。功能性動效能夠對系統的狀態（頁面狀態）進行實時的監 控，能夠使用戶在第一時間了解某個動作已經開始，持續中，以及何時完畢。在HTML網頁中，第一個實現這種功能性動效的是GIF，并且在目前仍被用來展示 動作的狀態。

高效的功能性動效通常會遵守以下規律：

1.清楚的反饋指示操作的開始狀態

2.反饋給用戶系統持續中的狀態

3.評估動作的進度狀態

4.清楚的反饋指示進度已完成狀態

舉個例子，“下拉刷新”動作，當用戶下拉后，頁面會出現不停旋轉的圓圈來提示用戶頁面正在刷新，當刷新完畢后，圓圈消失，內容更新。試想如果沒有圓圈旋轉，用戶可能會懷疑頁面并沒有刷新，這可能導致用戶在此下拉頁面。

邏輯目的：在一系列操作中展示不同的狀態變化。

營銷工具（Marketing Tool）

這類動效相較上文的動效來說具有更弱的邏輯性，但是卻更加的活潑生動！

當我們需要指導用戶怎樣操作產品時，當我們向用戶推薦某個功能點時，當我們向用戶推銷平臺里的某個產品時，營銷工具類的動效就能夠幫助到我們。這類動效或許沒有以用戶為核心來設計，但它絕對能夠完成營銷的目的。

邏輯目的：支持產品品牌概念，幫助推銷產品。