這份宣言拆分成5個部分：
1.解答 UI 動效的主題——不是你想象的那樣
2.實時與非實時交互
3.動效支持可用性的四種方式
4.原理、技術、性能與價值
5.動效中 UX 設計的12條準則
它無關 UI 動畫
由于設計師往往認為用戶界面中的動效就是 UI 動畫——然而這是兩回事——我覺得我有必要在12條法則之前插入一段情境。
設計師們通常會覺得 UI 動效的使用可以讓用戶體驗顯得更加生動愉悅，但總體上并沒有增加什么價值。所以呢，UI 動效總是姥姥不疼舅舅不愛的。就算有，也是排在最末位的，不足掛齒。
UI 動效對于“動效中 UX 設計的12條法則”來說就像是建筑物中的架構。我希望在我的宣言中用這個作為實例。
我的意思是，當一個結構需要實際地建立時（需要構造），決定導向建造什么的那只手來源于原則范疇。
動效的一切都和工具相關。原則對工具使用方法的實際應用進行指導，為設計師們提供優勢機會。
大多數設計師認為的“UI 動效”實際上也是一種高級設計手法：時效和非時效性事件中界面元素的時序表現。
實時交互 vs 非實時交互
在這個非常時刻，區分“情景”和“行為”就很重要了。UX 中的情景基本上是靜態的，就像一個設計合成品。UX 中的行為從根本上來講則是時序化的，基于運動。一個對象可以處于被屏蔽的情景中，或者被屏蔽的行為中。如果是后者，我們知道它涉及到運動，而且是能夠支持可用性的。
此外，交互中的所有時序化行為都可以被認為發生在實時或者非實時。實時意味著用戶可以直接于用戶界面中的元素進行交互。非實時意味著對象行為是后交互的：它發生在用戶動作之后，以及過渡之中。
這是一個重要的區別。
實時交互也可以理解為“直接交互”，用戶可以直接迅速地與界面對象進行交互。界面行為在用戶使用的同時發生。
非實時交互只發生在用戶輸入之后，而且有暫時鎖定用戶體驗的效果，直到過渡階段完成。
了解這些差異會幫助我們理解 UX 動效的 12 法則。
動效支持可用性的4種方式
這四個核心代表著時序性用戶體驗支持可用性的四種方法。
期望
期望分為兩大領域——用戶如何感知對象是什么，以及它表現出了何種行為。換句話說，作為設計師，我們期望盡可能縮小用戶期望和用戶體驗之間的差距。
一致性
一致性代表著用戶流以及用戶體驗的“一致”。一致性也可以理解為“內部一致性”——場景內和場景間的一致。一系列場景的一致性構成了用戶體驗。
敘述
敘述是用戶體驗中時間框架內事件的線性進展。它可以被認為是一系列被認真考慮以連接整個用戶體驗的時刻和事件。
關聯
關系是指空間，時間，和層次表示之間引導用戶理解和決策的界面對象。
準則、技術、特性和值
Tyler Waye這話就和他之前寫過的一樣好：“準則……是提升技術的基本功能前提和潛在規則。無論發生了什么，這些元素都保持一致。” 重申，原則是不可知的設計。
這樣，我們可以想象一個層次結構：準則位于頂層，技術在下一層，接著是性能，最下層的則是值。
技術可以認為是原則或原則組合的各種無限制的執行。我覺得技術類似于“風格”。
特性則是特定的對象因素來將技術轉化為現實。這些包括（但不限于）位置、不透明度、比例、旋轉角度、定位點、色彩、筆畫寬度、形狀等等。
值是隨時間而變化的實際數值屬性值，用以創建我們所稱的“動畫”。
所以在這里先停一下（再往前說一點），我們可以說一個假想的動畫參考是利用遮罩和“毛玻璃”技術：模糊 25px，不透明度 70%。
現在我們有些可利用的工具。更重要的是，有些語言工具對于任何其他特殊原型工具來說都是不可知的。
UX 動效中的12原理
緩動、偏移和延遲都和時間有關。父子關系涉及到的對象關系。變形、值變化、遮罩、覆蓋和生成都與對象一致性有關。視差與時態層次有關。蒙層，多維化以及鏡頭平移與縮放都與空間一致性有關。
原理1:緩動
當時序事件發生時，對象行為與用戶期望一致
所有界面對象表現出時間的行為（無論是實時或非實時），都很舒緩。緩動營造并加強用戶體驗的“自然主義”內在，并在對象表現符合用戶期待時營造出一種統一連續的感覺。順便一說，迪士尼把這叫做“緩進緩出”。
左邊有直線運動的例子看起來很“糟糕”。上面的第一個有緩動動效的例子看起來“很好”。 上述三個例子都有相同數量的幀，而且時長完全相同。唯一的區別就是它們的舒緩度。
作為設計師來思考可用性，我們需要對自身嚴格要求，提出疑問，美感角度之外，哪個例子對可用性支持來說更好？我這里呈現的例子是一定程度的擬物設計更為自然舒緩。你可以想象一個“緩動梯度”，即低于用戶期望的行為導致更差的可用性交互。在恰當的緩動的動效案例中，用戶體驗動效本身是不著痕跡的，幾乎難以察覺——這很棒，因為它不會因此而分散注意力。線性運動很明顯，感覺也有一些……不完善，不和諧，讓人分神。
現在我將在這里徹底反駁我（剛才）的觀點，談談右邊的例子。動效并不是不著痕跡的。實際上，它的感覺是被“設計”過的。我們注意到這個對象是如何停頓的。它給人的感覺很不一樣，然而它還是比直線運動的例子感覺上更“對勁”。
你能在不再支持（甚至破壞）可用性的狀況下依然堅持利用緩動嗎？答案是會。而且有很多種方法。一種是設定時間。如果你的時間設定得太慢（大概借用一下Pasquele），或者太快，體驗就會被破壞，而且分散掉用戶的注意力。同理，如果你的緩動效果偏離了品牌或者是綜合體驗的話，也會對體驗和無縫感帶來負面影響。
我想給你看的是一個在提到緩動之時充滿機會的世界。也有字面意思上的“舒緩”，作為一個設計師，你可以在無數項目中進行實踐。所有的這些寬松都有自己在用戶觸發時有自己期望的響應。
總結：什么時候使用緩動方式？任何時候。
原理2:分隔&延遲
在引入新元素和場景時定義對象關系和層次結構。
分隔和延遲是 UI 動畫兩大原則中的第二個，它深受迪士尼動畫原則的影響，這里出自“
動作跟隨與重疊。”
這一點很重要，值得注意。然而，這種操作在執行中也有相似之處，目的和結果不同。迪士尼的原則指導出了“更吸引人的動畫”，而 UI 動效原則引導了更具可用性的體驗。
這個原則的作用是可以通過告知用戶界面中界面的性質來預先進行成功設置。上面提到的敘述是：上面兩個對象是統一的，底層的則是分開的。也許前兩個對象會是一個非交互的圖像或者文本，而底層對象是個按鈕。
甚至在用戶了解這些對象都是什么之前，設計師們已經通過動效傳達給 ta 了：這些對象都是“分開的”。這就很厲害了。
在上面的例子中，浮動按鈕（FAB）成了包含三個按鈕的主導航元素。因為按鈕之間相互“獨立”，它們最終通過自己的“獨立”來支持可用性。換言之，設計師在利用時間本身來說明——甚至在用戶了解這些對象都是什么之前——這些對象是相互獨立的。這有告知用戶界面中對象部分性質的效果，完全獨立于視覺設計。
為了更好地給你展示它是如何工作的，我會給你舉一個沒有依照分隔與延遲原則的例子。
在上述案例中，靜態的視覺設計告訴我們背景上有圖標。假設圖標都是分開的，有不同的功能。但動畫和這個是矛盾的。
圖標被暫時分組成行而且被認為是單一的對象。它們的標題也同樣被列為行，也表現為單一對象。這個動畫告訴用戶的是眼睛看不到的東西。在這中情況下，我們可以說，這時此界面中的對象不可用。
原理3:父子關系
在多個對象交互時創造時間和空間層次關系。
父子關系是一個意義重大的原則——“串聯”用戶界面中的對象。在上面的例子中，頂部的“比例”和“定位點”屬性或者底部的“子對象”，以及“父對象”都是如此。
父子關系是對象屬性與其它對象屬性的連接。這可以創建對象關系和層次結構，以支持可用性。
父子關系還可以讓設計師們能夠在向用戶穿搭對象關系性質的時候更好的協調用戶界面中的時間事件。
再想想那些包括以下這些在內的對象屬性——比例、透明度、定位點、旋轉角度、形狀、顏色、數值屬性，等等。這些屬性中的任何一個都可以與其它屬性連接，并在用戶體驗中營造出協調的情景。
在上面左邊的例子中，“面”元素的“y 軸”屬性就是圓指針“x 軸”屬性的“子級”。當圓指針沿水平方向運動時，它的“子元素”沿水平方向垂直移動(while being Masked—another Principle)。
其結果是同一層次同一時空的描述框架同時發生。 值得注意的是，“面”的對象數值都被分別 “鎖定”，“面”是完全不可見的。用戶體會到了無縫的感覺，盡管在這個例子中我們可以說這是一個微妙的“可用性騙局”。
繼承性功能最好作為實時交互。當用戶直接操縱界面對象時，就是設計者在通過動畫與用戶交流——對象是如何連接的，以及它們之間是何種關系。
父子關系有三種形式：“直接聯系”（看上面的兩個例子），“延遲的聯系”，和“相反的聯系”（往下看）。
延遲的聯系 (Credit:AgenceMe) 和 相反的聯系 (Credit:AgenceMe)
原理4:變形
在對象作用發生變化時，創建一個連續的敘事流狀態。
很多人已經寫過了 UX 動效原則中的“變形”。在某些方面，這是最明顯最容易被看到的動畫原則。
變形非常明顯，因為它很突出。我們可以看到一個“提交”按鈕的形狀變成了一個橫向的進度條，并且最終變成了確認檢查的標志。它抓住了我們的注意，講述了一個事件，并最終完成。
變形的作用是在不同的 UX 狀態或者“這是”（就像這是一個按鈕，這是一個橫向進度條，這是一個復選標記）之間為用戶提供無縫過渡。這最終都會導致預期的結果。用戶被安排通過這些功能來達到最終目的。
“模塊”的變化產生的影響適當地將用戶體驗中的關鍵時間點分離成為一個無縫和連續的事件序列。這種無縫的體驗會帶來更好的用戶感知，記憶，以及后續行為。
原理5:數值變化
當值的主體發生變化時，產生動態的、連續的敘事關系。
基于文本的界面對象，即數字和文本，可以改變它們的值。這就是“難以察覺的尋常“中的一個。
文本和數字的變化太過常見，以至于它們可以在我們未曾區分并謹慎評估它們在支持可用性中的角色的時候就被它們越過了。
那么，值發生變化時的用戶體驗是什么？在用戶體驗中，UX 動效的12法則是支持可用性的有利條件。這里的三個條件連接用戶與數據背后的現實，有代理的意思，以及值本身的動態特性。
我們看看 dashboard 的例子。
當基于數值的界面對象在沒有數值變化時加載，傳遞給用戶的數字是靜態對象。它們就像是顯示限速每小時55英里的油漆標志牌。
數字和值都是事實發生的事件的表征。這個事實可以是時間、收入、游戲分數、商業指標、運動跟蹤。我們通過動畫來區分的是動態的“值的主體”，以及那些反映了動態值的集合的某些東西。
這種關系不僅失去了靜態對象的視覺價值，也失去了一個更深層次的有利條件。
當我們采用基于動態值的形式來進行動態系統陳述的時候，它觸發了一種“神經反饋”。用戶掌握了他們的數據的動態屬性。現在可以通過授權代理來改變這些數值。當值為靜態的時候，它與其背后的事實聯系較少，用戶失去了代理權。
在實時和非實時事件中都可能出現數值變化。在實時事件中，用戶與對象交互來更改值。在非實時事件中，比如加載和轉換，值的變化來源不靠用戶的輸入來反映動態敘述。
原理6:遮罩
在功能取決于對象或組的哪一部分顯示或隱藏時創造一個界面對象或者一組對象的連續性。
遮罩請求的表現可以被認為是對象的形狀和它的功能之間的關系。
因為設計師們對靜態設計的情景下對這招很熟悉，我們應當區別 UX 動效準則“遮罩”出現的時間。作為一種表現，而非狀態。
利用顯示和隱藏對象來使用時序化，功能的連續，以及無縫轉換。這也有保持敘事流的效果。
在上面的例子中，頂部圖片的形狀和位置發生了變化，而非內容，它變成了一張專輯。這具有改變對象為何物的作用，同時保留被掩蓋的內容——相當巧妙的把戲。它是非實時發生的，作為一個變化，在用戶動作之后才回被激活。
記住，UI 動畫原則的出現具有時序性，通過對連續性、敘事性、相互關聯和期望來支持可用性。在上面所提到的內容里，當對象本身保持不變的時候，也會有邊界和位置，而這兩個要素則決定了對象是什么。
原理7:覆蓋
在分層對象的位置有關聯的時候營造敘事和視覺的平面對象空間關系。
覆蓋通過允許用戶利用平面排序功能克服空間層次的缺乏來支持可用性。
為了安全著陸，覆蓋讓設計師通過動畫來聯系位置相關的排在后面或者前面的非3D空間中的對象。
在左邊的案例中，前景對象滑到了右側來顯示背后的附加對象的位置。而在右邊的案例中，整個場景向下滑動來顯示附加的內容和選項（同時還利用了分隔和延遲的準則來傳達照片對象的特征）。
某種程度上來說，作為設計師，“層”的概念實在是不言自明。利用層和層的概念來做設計對于我們來說已經被深深內化了。然而，我們必須小心區別“創造”和“使用”的過程。
作為不斷從事“創造”過程的設計師，我們對我們所設計的對象的每個部分（包括被隱藏的部分）都很了解。但作為用戶，那些視覺和認知層次上都不可見的部分是定義和實踐。
覆蓋原則允許設計師表達“Z 軸”定位層之間的關系，以促使空間定位到他們的用戶。
原理8:生成
在新的對象產生和消失的時候，創造連續性，關聯，和敘事。
在當前場景中創建新的對象時(來自當前對象)，敘事性地解釋其外觀尤為重要。在這份宣言中，我強調了創建一個敘事框架的對象起源和出發的重要性。僅僅是對不同明度的調整達不到這種效果。遮罩、生成、以及數值的變化是三種基于可用性來產生強烈敘事性的方法。
在上面的三個例子中，新的對象是在用戶的注意力集中在這些對象上時，以現有的主要對象（為基準）創建的。這兩個方法——注意力的引導，然后引導眼睛通過生成新的對象——具有溝通的清晰和明確的事件鏈的有力作用：動作“X”導致了創建新的子對象的“Y”結果。
原理9: 蒙層
允許用戶空間層次而不是在主視覺層次中定位自己的對象或場景的關系。
和 UX 相關的動效原理中的遮罩類似，蒙層同樣作為一個靜態的暫時現象。
這可能會讓那些沒有短暫思考經驗的設計師感到混亂——就是在時刻之間的時刻。設計師通常所做的設計是屏幕到屏幕或任務到任務。可以將蒙層看做是遮蔽的行為，而非被遮蔽的狀態。靜態設計代表被遮的狀態。引入時間給我們一個物體被遮的行為。
從上面兩個例子中，我們可以看到，看起來像透明物體或覆蓋物的蒙層，也是一個同時涉及多個屬性的即時互動。
其中的模糊效果和減少對象整體的透明度設計到各種常見的技術。使用戶理解這是她正在操作的一個另外的非主要情景——是另一個世界，就在她的的主對象層次之后。
蒙層使設計者能夠在用戶體驗中對單一統一的視野，或目標導向進行補充。
原理10:視差
在用戶滾動界面時創造視覺空間層次。
“視差”作為一個 UX 動效原理之一，指界面中的不同對象以不同的速度移動。
視差允許用戶專注于主要行動和內容，同時保持設計的完整性。背景元素在一個視差事件中為用戶“提供”感知和認知。設計師可以使用視差分離出即時內容從環境或支持的內容。
這對用戶的影響，是明確定義
持續時間的互動，各種對象的關系。前景對象，或移動“更快”的對象被認為離用戶“更近”。同樣，背景對象或對象移動“慢”被認為是“更遠”。
設計人員可以利用時間來創建這些關系，告訴用戶界面中的哪個對象具有更高的優先級。因此，將背景或非交互元素進一步“推回”是很有意義的。
不僅用戶感知的界面對象在視覺設計中具有層次區分，這種層次結構現在可以利用來讓用戶在意識到設計內容之前掌握用戶體驗的本意。
原理11：多維化
當新的對象的產生和消失的時候提供了一個空間敘事框架。
用戶體驗的關鍵是連續性的現象，以及對位置的感知。
多維化提供了克服用戶體驗的二維世界，非邏輯的有力途徑。
人類非常善于利用空間框架來引導現實世界和數字世界中的體驗。提供空間的起源和偏離參考有助于加強用戶在用戶體驗中的心理模型。
此外，多維化原則在同一平面上的物體存在缺乏深度，發生在其它對象的“前面”或“后面”（的問題）上克服了視覺平面中的分層悖論。
多維化以三種方式呈現——折紙維度，浮動維度，以及對象維度。
折紙維度可以被認為是在“折疊”或“翻轉”三維界面對象。
由于多個對象被組合成“折紙”結構，隱藏的對象仍然可以被稱為“存在的”，即使它們在空間上是不可見的。這有效地將用戶體驗作為一個連續的空間事件：用戶導航，創建一個運行環境中的交互模型，還有界面對象本身的時間特性。
浮動維度給界面對象一個空間的起點和消失，使互動模式的更直觀且保持高度敘事。
在上面的例子中，維度是通過使用3D“卡片”實現的。這提供了一個支持可視化設計的強大敘事框架。敘事是延長卡片“翻轉”訪問額外的內容和交互性。維度是引入新的元素，盡量減少突發性的有力途徑。
對象維度帶來有真正的深度和形式的三維對象。
在這里，多個二維層被安排在三維空間，以形成真正的三維對象。他們的維度顯示在實時和非實時的過渡時刻。對象維度的作用是用戶開發基于非可見空間位置的對象效用的敏銳意識。
原理12：鏡頭平移與縮放
在導航界面對象和空間時保留連續性和空間敘述性。
鏡頭平移與縮放是電影的概念中的相機和相關物體的運動，而畫面本身的大小在畫面上平穩地從長鏡頭變為特寫鏡頭（反之亦然）。
在某些情況下，這是不可能的。比如對象縮放，物體在 3D 空間中朝著攝影機移動，或者是攝影機在 3D 空間中向著物體移動（參見下方參考）。下面的三個例子說明了可能的情況。
這是移動攝像，縮放，或是攝像機的運動嗎？
這種，是將“移動影像”和“變焦”的例子進行了分別處理。但類似的，他們也涉及連續元素和景深變化，滿足了 UX 的動效設計原理：他們通過運動支持可用性。
左邊的兩個圖像是移動攝像，而右邊的圖像是變焦。
移動攝像是一個電影術語，適用于攝像機運動，無論是向或遠離對象 (它也適用于水平的“跟蹤”運動，但在可用性情景中的相關性較小)。
在 UX 的空間中，這個動作可以指觀眾視角的改變，也可以指當對象改變位置時保持靜止狀態。移動攝像原理通過連續性和敘事，無縫過渡接口對象和目的地支持可用性。移動攝影還可以結合維度原理，從而產生更多更深入的空間體驗并傳達給用戶當前視圖的“前面”或“后面”的領域或內容。
變焦是指既沒有透視也不是物體在空間上移動的事件，而是指對象本身的縮放（或者我們看它的角度導致圖像放大）。這傳達給觀者，額外的界面對象是“內部”其他對象或場景的感覺。
它可以無縫轉換——實時或是非實時——來支持可用性。這種無縫使用移動攝影和變焦原理在創造空間的心理模型的情況下是很強大的。
如果你已經讀到了這里，那么恭喜！這真是個野蠻的宣言。
我希望這些加載的 gif 沒有讓你的瀏覽器陷入癱瘓。我也真的希望你找到一些對自己有價值的東西，一些對你的互動項目有利的新工具和優勢。
希望你了解更多關于如何開始使用運動作為支持可用性的設計工具。
