前言
關於“用戶體驗動效“的十二項原則，本文分為四部分來引入說明：
1. “用戶體驗動效” 不等於 “界面動畫”；
2. 實時與非實時交互的區別；
3. 動效的四種可用性提升方式；
4. “用戶體驗動效”的十二項原則。
1. “用戶體驗動效”不等於“界面動畫”
在用戶界面設計中，大部分動態的效果被設計師理解為“界面動畫”，事實卻並非如此。在介紹“用戶體驗動效”的十二項原則之前，我們先明確一下二者之間的不同。
大部分設計師認為，“界面動畫”是為了讓用戶體驗變得更愉快，但它並沒有太多實際的價值。假設將用戶體驗比作一個紅頭髮的女子，“界面動畫”通常被當做口紅，只是做了微不足道裝飾。
這篇文章將說明，“界面動畫”需要以“用戶體驗動效”的十二項原則為基礎，才能具備姮好的可用性。比如，“界面動畫”是建築的施工，那“用戶體驗動效”的原則就是施工的圖紙，它將指引正確的方向。動畫是實踐，原則則是指導實踐的理論，十二項原則講給設計師在動效設計上提供有力的支點。
2. 實時與非實時交互的區別
實時交互 Eealtime（左圖）與 非實時交互 Non-realtime（右圖）
首先，在這裡要將“狀態”與“行為”做一個區分。在用戶體驗的過程中，很多內容的狀態都是靜止的，當一些內容可能處於被掩蓋或遮擋的狀態未顯示出來時，用戶需要進行短暫的行為動作與界面進行互動。
用戶交互的時間上可分為實時與非實時兩種狀態。實時意味著用戶直接與用戶界面的對象進行交互；非實時是指用戶行為發生後界面的反應，它是具有一定的過渡性。這是一個非常重要的區別。因此實時交互被認為是“直接操作"，用戶與界面的動作是同步的；非實時交互只有在用戶行為發生後用戶界面才會有狀態的改變，並且直到狀態改變結束用戶才可繼續操作。
區分二者的差別，將幫助我們更好的領會用戶體驗動效的十二項原則。
3. 動效的四種可用性提升方式
以下四種方式，是提升用戶體驗動效可用性的核心：
期望
期望分為兩個維度：用戶對界面的期望，以及界面是否滿足用戶的預期。作為設計師，我們要減小用戶的期望與實際體驗之間的差距。
連續性
連續性是指用戶流程的順暢與用戶體驗的流暢要一致。連續性包括場景/頁面內、場景/頁面之間的連續與流暢。
敘述性
敘述性是用戶體驗中的線性事件中，時間/空間架構的變化。這可以理解為把整個用戶體驗連接在一起的一系列關鍵時刻與事件。
關聯性
關聯性指界面對象之間的時間/空間的層次表現，幫助用戶理解和決策。
4. “用戶體驗動效”的十二項原則
· 時間相關的原則 (Timing):
緩動 (Easing) 、偏移 (Offset) 、延遲 (Delay)；
· 關聯性相關的原則 (Objeect Retationship):
父子關係 (Parenting);
· 連續性原則 (Continuity):
變換 (Transformation) 、數值/文本變化 (Value Change) 、遮罩 (Masking) 、覆蓋 (Overlay) 、分裂 (Cloning);
· 時間層級相關原則 (Temporal Hierarchy):
視差 (Parallax);
· 空間連續相關原則 (Spatial Continuity):
景深 (Obscuration)、翻轉 (Dimensionality)、移動變焦(Dolly & Zoom)。
emm...這是一個表格
原則1. 緩動 Easing
當事件發生時，對象行為應與用戶期望保持一致。
緩動 Easing
所有具有時間行為的運動都需要緩動（無論是實時還是非實時的交互）。緩動可以讓運動對象更自然，並且更滿足用戶的所期望的連續性。迪士尼動畫原則將其稱為“緩入緩出”
線性運動 Linear motion（左圖） 與 緩動運動 Elastic motion（右圖）
左邊的例子是線性運動 ，看起來非常糟糕。上邊三個動效是在同一時間內具有相同的幀數和動作，位移的區別在於添加的緩動效果。
作為設計師，除了關注美學外，還需要對自己進行嚴格的要求與反思，什麼樣的效果更具備可用性？更容易被用戶所接受？
緩動是固有存在的，假設把緩動的程度想象成一個“階梯"，那麼其中超出用戶預期的緩動效果體驗較差，是不可用的。將用戶體驗動效與用戶行為無縫連接，這才是一件合理可用的事情，因為它不會影響用戶的注意力。線性運動顯然是過於明顯的，感覺像是缺少或不完整的效果，容易造成用戶注意力的分散。
動效與用戶行為完全無縫連接才是最好的效果麼？這邊舉一個相矛盾的例子，相比較右邊的動效，它與用戶行為也不是無縫的，但它是經過設計過的。用戶可以注意到運動對象的著陸過程（那種彈跳的緩動），這個超出用戶的預期，但比線性動效要好多了。
緩動可以對可用性造成糟糕的影響嗎？答案是肯定的。我們要避免出現以下的情況：時間太慢或太快，會打破用戶的預期，造成注意力的分散；同樣如果緩動效果與整體的體驗不一致，也會產生負面的影響。
這裡所展示的只是冰山一角，設計師可以在項目中創建無數的“緩動”效果，不同場景的緩動都會帶來不同的效果，給用戶帶來的體驗也是不同的。而且在任何時候，都不要忘記緩動的作用！
原則2. 偏移與延遲 Offset & Delay
介紹新元素或場景進入時的層級與關係。
偏移與延遲 Offset & Delay
這個原則實用性在於，它可以很自然的告訴用戶界面中元素的性質。上圖可以看出，頂部的兩個形狀是連在一起的，與最下班的形狀是分開的。也許前兩個形狀可能是一個非交互式的圖像或文本，而底部則是一個按鈕。
在用戶接觸這些對象之前，設計師已經用偏移與延遲的設計原則，將信息分類，便於用戶有效的識別。
圖片來源: InVision
在上圖例子中，懸浮按鈕轉換成三個按鈕組成的導航元素。因為這些按鈕在時間上的“延遲”，所以可以很清晰的感受到他們是“分離”的狀態，這個效果的可用性非常高。換一種說法，設計師運用時間差向用戶說明三個元素是分離的關係。這是一種與視覺設計不同的方式來告訴用戶界面中元素的性質。
為了更好的表示這個原則的效果，下面將舉一個反例來做一個對比：
圖片來源：Jordi Verdu
上圖中，如果是靜態的設計稿，我們可以看出虛化的背景上懸浮著一些圖標，這些圖標彼此是分離的狀態，並擔任著不同的功能。但是這個錯誤的動效卻起了相反的作用。
在運動的瞬間，每行的圖標與文字都被打組，看起來一行的元素像是連在一起的整體。這個動效展示的效果與用戶所看到的預期相違背，我們可以說這樣的效果是不可取的。
原則3. 父子關係 Parenting
多個對象交互運動時的空間關係。
父子關係 Parenting
父子關係是非常重要的原則，可以將界面中的對象關聯在一起。上圖中，頂部子級元素與底部的父級元素在“比例”與“位置”的屬性上關聯在一起，這種關聯與繼承關係，可以增強動效的可用性。
界面中元素的屬性包括：比例、不透明度、位置、旋轉、形狀、顏色等，這些屬性中的任何屬性都可以相互關聯，為用戶提供更好的交互體驗。
圖片來源: Andrew J Lee，Frank Rapacciuolo
如上左圖中，氣泡表情中的表情元素為子級，它的縱軸會跟隨父級元素圓形指示器的橫軸產生關聯。當圓形指示器延橫軸移動式，其"子元素"表情會沿著水平與垂直方向同步變化。
父子關係的結果是在同一時刻發生不同層級的變化。表情元素在每一個數字中間是不完整的，只有當用戶的動作剛好停在數字上時，才會顯示完整的表情，用這種微妙的“欺騙性”效果，達到用戶體驗的無縫連接。
父子關係在“實時互動”的情況下最實用。當用戶對界面進行直接操作時，設計師可以通過這種動效向用戶傳達元素之間的關係。
父子關係分為：“直接繼承”（參見上面的兩個例子）、“延遲繼承”（下圖左）和 “逆向繼承”（下圖右）三種形式。
延遲繼承（圖左) 和 逆向繼承（圖右） 圖片來源: AgenceMe
原則4. 變換 Transformation
用不同的形態來表示對象功能的變化。
變換 Transformation
形態變化是非常明顯的效果，因為它很容易被識別。用戶可以輕易的注意到“確認提交”的按鈕形態變換成圓形的進度條，隨後在最終狀態變換成確認的標記。這種形態變換非常容易吸引注意力，並且可以描述一個完整的事件。
圖片來源: Colin Gacven
這種變換是將用戶體驗的不同狀態（“按鈕-進度條-成功”三種狀態）無縫的銜接，最終產生用戶所期待的結果。用戶通過這些變換了解到三種功能狀態，並最終達到目的。
變換原則可以將用戶體驗中不同時刻的信息分離成節點，並且在變換的形態中無縫連接，完成一個事件信息的傳遞。這樣連貫性的效果更容易被用戶的認知所接受。
原則5. 數值/文本變化 Value Change
可用一種動態的連續的方式來表達數值的變化。
數值變化 Value Change
數字/文本的變化是非常普遍的，以至於我們經常忽略這種變化，沒有為這種變化的可用性進行深入的瞭解。
那麼用戶在數字/文本發生變化時會有怎樣的感受？如果說本文列舉的“用戶體驗動效的12項原則”是在尋找動效可用性的機會點，那麼數字/文本的變化原則將有三個點可以提升動效的可用性: 向用戶傳遞信息背後的含義、代表一種變化的概念以及內容本身變化的意義。
來看下面“儀表盤”的例子:
靜態值 Static value（圖左）與 動態值 Dynamic value（圖右）
如果在畫面加載動效中，數字/文本沒有發生變化時，用戶會認為整個元素看起來是靜止的狀態，它們看起來與“限速55km/h”的標識牌的效果是一樣的。（見上圖左）
很多數字/文本要反應現實發生的事件，比如時間、收入、遊戲成績、商業指標、健身數據等。如果我們通過動態方式來表示這些內容，可以更直接感受到這些變化的信息（見上圖右）。如果用靜態的方式來處理變化的數據，則會失去深層次體驗的機會。
動態展示變化的數值/文本，可以刺激用戶的“神經反饋”，讓用戶更直接的感受到內容的變化。然而當數值/文本是靜態的時候，數值與變化的關聯就會減少，用戶也很難感受到內容背後的變量。
圖片來源：Barthelemy Chalvet, Gal Shir,（未知）
數值/文本變化原則，在實時與非實時的事件中都適用。在實時事件中，用戶可以通過對界面的交互改變數值/文本的內容（如上圖二）；在非實事件中，比如加載或轉換，這些數值在沒有用戶參與的情況下發生改變（如上圖三）。
原則6. 遮罩 Masking
當一個或一組元素元素在顯示與遮擋之間轉換時，變化過程要保持連續性。
遮罩 Masking
遮罩原則可以理解為，形狀改變與功能改變之間的關係。
雖然設計師對靜態的“遮罩”有所瞭解，但我們應該意識到，遮罩動效是隨著時間而發生變話的一種動態行為，而不是一種精緻的狀態。一瞬間改變遮罩區域，將內容順暢的顯示或隱藏起來的效果，也具有敘事的作用。
圖片來源: Anish Chandran
上圖的例子中，頭圖在內容不變的情況下改變了顯示區域的形狀與位置，變成一個專輯的唱片。這個例子說明，遮罩原則可以在不改變元素內容的情況下改變它的功能，這是一個非常巧妙地技巧。這個例子屬於非實時交互，用戶對界面進行操作後遮罩才發生變化。
注意，界面元素是有邊界的，內容保持不變的情況下，改變邊界對元素有很大的影響（比如上圖的邊界改變，將元素變成了唱片）
原則7. 覆蓋 Overlay
用堆疊元素的相對位置，來描述它們扁平的空間關係。
覆蓋 Overlay
覆蓋原則通過堆疊分層的形式來解決扁平空間不足的問題，這是非常實用的原則。設計師在非三維空間內將元素堆疊，通過移動某層的元素使其它層元素的內容顯示出來。
圖片來源：Bady，JaviPérez
上圖左的案例中，前景元素（人名信息）向右滑動，可顯示出收藏等其他信息；上圖右的案例中，整個界面向下滑動，可顯示出其下方圖層的其他內容（下方內容同時使用“偏移”與“延遲”原則來表述元素之間的獨立關係）
很多時候，“層”的概念對於一個設計師而言是非常深刻的，設計過程中經常接觸“圖層”的概念。但是設計師要注意“繪製的界面”如何更好的“被使用”。作為一直參與項目設計的設計師，我們非常熟悉界面中所有的元素（包括隱藏的部分）。然而，對於用戶而言，界面不可見的部分是被隱藏的，只有在制定的行為動作下才會被顯示。
覆蓋原則是設計師通過縱深關係定位圖層層級，制定行為下可像用戶展示更多信息，展示更多的內容空間。
原則8. 分裂 Cloning
當新元素從主體分裂離開時，連續性可闡述二者之間的關係。
分裂 Cloning
在當前的元素或場景中創建新的元素時，對形態的描述十分重要。本文強調元將素的產生與分裂的狀態描述出來的重要性，用簡單的不透明度的變化是不足以描述產生與分裂的狀態。遮罩、分裂和多維度原則非常實用，並且具有強烈的敘述功能，
圖片來源：JakubAntalík，JakubAntalík，未知
在以上三個實例中，當用戶注意力集中在主元素時，新元素在主元素的基礎上被創造，這種雙重動作（先用主體引導注意力，然後從主元素上創建分裂新對象來引導視覺）具有清晰的描述事件的強大效果：“Y”是通過“X”創建出來的子對象。
原則9. 景深 Obscuration
讓用戶看到非主視覺元素的對象或場景，打造空間感。
景深 Obscuration
與遮罩原則類似，景深原則既可以是靜態的，也可以是具有時效性的。
景深的這種“靜態”比較容易理解，景深的“時效性”可能會給設計師帶來疑惑。設計師經常會依次按順序的設計界面或任務。現在將“景深”視為遮蔽的一種行為動作，而不是靜止的狀態。行為發生時非主視覺元素變模糊，達到突出主視覺併產生空間景深的效果。
為發生時非主視覺元素變模糊，達到突出主視覺併產生空間景深的效果.
景深原則經常利用模糊與疊加透明度的效果，讓用戶感受到主元素與非主元素的空間上的層次關係（注：這裡有別於覆蓋的平面層次），主元素的背後看起來像存在另一個世界一樣。
原理10. 視差 Parallax
通過用戶的滾動操作，在平面中創造出空間的層次感。
視差 Parallax
“視差”在用戶體驗動效中的原理是，不同的元素以不同的速度進行運動。
視差在保證界面的完整性的情況下，可以讓用戶專注於主要操作的內容。在視差原則下，用戶對背景元素的感知會減弱。設計師可用視察原則將即時性的內容從環境或主內容中分離出來。
圖片來源: Austin Neill, Michael Sevilla
如上圖所示，視差原則是讓用戶在操作時，明確各元素之間的關係。用戶會感覺到，快速移動的前景元素距離自己很近，而要比移動較慢的背景元素要遠一些。
設計師利用運動弄速度的快慢，便能讓用戶感知到優先級更高的元素。因此，將背景或沒有互動的元素放慢，讓它們“遠離用戶”是有道理的。
這樣的視覺效果，不僅會讓用戶對界面的感知超出平面的層次感，也有利於將用戶把更多的關注下意識的引到要呈現的主元素上，動效對用戶自然反應的影響是非常有效且實用的。
原則11. 翻轉 Dimensionality
用翻轉的空間感，來表示元素的入場與離場。
多維度 Dimensionality
用戶體驗的關鍵是連續性與空間感。翻轉原則可有效的改善扁平型和非邏輯性的用戶體驗。
人類很擅長利用空間感來體驗現實和虛擬的世界。因此具有空間感的入場或離場是符合並能增強用戶體驗過程中用戶的心理預期。
另外，翻轉原理改善扁平化視覺無法分層的狀況，它可以讓同一平面的元素產生前後疊加的空間感。
翻轉原理常以三種方式呈現：摺紙翻轉、懸浮翻轉、整體翻轉。其中摺紙翻轉可被理解為三維中的摺疊和旋轉。
摺紙翻轉，可被理解為將界面元素在三維空間摺疊起來。
這用戶體驗的扁平感包裝成連續的空間體驗，用戶在對界面或某元素進行交互操作時即可感受到。
懸浮翻轉，為界面對象的入場與立場，提供更直觀的描。
這樣的結構增強了視覺設計與敘述事件上的表現力，可通過翻轉卡片來查看更多內容。
整體翻轉可讓對象整體更具有真是空間的形態。
整體翻轉效果 圖片來源: Issara Willenskomer，Creativedash
上圖所示，多個2D平面圖層被組合在3D的空間中組合成具有真實感的三維形態，翻轉可在實時或非實時的交互中顯示。整體翻轉的作用是吸引用戶發敏銳的現新出現的元素的功能或內容。
原則12. 移動變焦 Dolly&Zoom
界面元素或空間縱深移動時，流暢的動效可體現空間感。
移動變焦 Dolly&Zoom
移動變焦是一個電影概念，通過移動相機或物體的距離來控制影像的遠近。
但是在某些情況下（見下圖），無法判斷是對象在同一平面縮放、還是3D空間中攝像機在超固定對象的方向移動、或者是3D空間中對象在朝著固定的攝像機方向移動。
你猜猜圖層中誰在動？
由於這裡涉及到元素變化與場景的轉換，因此下面會將“相機滑動”與“變焦”分開來講，並說明它們是如何提高用戶體驗的可用性。
左邊兩張圖是相機縮放，最右側圖像是變焦
相機滑動（Dolly）是一個電影術語，意義是相機朝向或遠離主體的移動而造成的縮放效果。
在用戶體驗中，空間的運動可以引發用戶的視角變化，或當對象變化時保持視角的靜止。相機滑動結合翻轉原則，可以打造更多，更好，更深入的空間體驗。
變焦是指角度與元素不做空間移動，而是對元素本身進行的縮放（或者說我們的視角減小，導致元素放大）。這使觀看者感受到視角內的內容是在更多元素或更大的場景之內。
這種流暢的過度會提升動效的可用性。在打造界面的空間感，流暢的移動變焦效果將起到重大的作用。
