- 原文作者：Issara Willenskomer
- 譯文出自：掘金翻譯計劃
- 譯者：Ruixi
- 校對者：cdpath,osirism
用動效建立的可用性：動效中的使用者體驗宣言
下面這段宣言即是我對這個問題的回答——“作為一個UX或者UI設計師，在介面中，如何在合適的時間和位置通過動效的使用來支援可用性呢？”
在過去的5年中，我有幸指導過來自40多個國家的 UX 和 UI 設計師，而且我為這些頂級品牌和設計諮詢公司帶來的建議和指導基本上都是關於 UI 動效的。
通過對使用者介面動效超過15年的研究，我得到的結論是：這裡有12種可以利用動效來支援你的 UX 專案中的可用性的具體時機。
我稱這些時機為“動效中 UX 設計的12條準則”，同時它們可以以各種創新形式來進行自由組合協作使用。
我將這份宣言拆分成5個部分：
- 解答 UI 動效的主題——不是你想象的那樣
- 實時與非實時互動
- 動效支援可用性的四種方式
- 原理、技術、效能與價值
- 動效中 UX 設計的12條準則
插播一條小廣告，如果你想要我就令人激動的動效主題以及可用性在你的會議上發言或者為你的團隊組織一個現場討論的話，請移步這裡 。如果你想要在你所在城市參加課程，來這裡 。最後，如果你想要向我諮詢你的專案，可以看看這裡 。新增到我的列表，點選這裡 。
它無關 UI 動畫
由於設計師往往認為使用者介面中的動效就是 UI 動畫——然而這是兩回事——我覺得我有必要在12條法則之前插入一段情境。
設計師們通常會覺得 UI 動效的使用可以讓使用者體驗顯得更加生動愉悅，但總體上並沒有增加什麼價值。所以呢，UI 動效總是姥姥不疼舅舅不愛的。就算有，也是排在最末位的，不足掛齒。
此外，在使用者介面語境下的動效被認為是迪士尼的12條動畫原則下的，我在《UI 動畫原則——迪士尼已死 》一文中對這一觀點進行了反駁。
UI 動效對於“動效中 UX 設計的12條法則”來說就像是建築物中的架構。我希望在我的宣言中用這個作為例項。
我的意思是，當一個結構需要實際地建立時（需要構造），決定導向建造什麼的那隻手來源於原則範疇。
動效的一切都和工具相關。原則對工具使用方法的實際應用進行指導，為設計師們提供優勢機會。
大多數設計師認為的“UI 動效”實際上也是一種高階設計手法：時效和非時效性事件中介面元素的時序表現。
實時互動 vs 非實時互動
在這個非常時刻，區分“情景”和“行為”就很重要了。UX 中的情景基本上是靜態的，就像一個設計合成品。UX 中的行為從根本上來講則是時序化的，基於運動。一個物件可以處於被遮蔽的情景中，或者被遮蔽的行為中。如果是後者，我們知道它涉及到運動，而且是能夠支援可用性的。
此外，互動中的所有時序化行為都可以被認為發生在實時或者非實時。實時意味著使用者可以直接於使用者介面中的元素進行互動。非實時意味著物件行為是後互動的：它發生在使用者動作之後，以及過渡之中。
這是一個重要的區別。
實時互動也可以理解為“直接互動”，使用者可以直接迅速地與介面物件進行互動。介面行為在使用者使用的同時發生。
非實時互動只發生在使用者輸入之後，而且有暫時鎖定使用者體驗的效果，直到過渡階段完成。
瞭解這些差異會幫助我們理解 UX 動效的 12 法則。
動效支援可用性的4種方式
這四個核心代表著時序性使用者體驗支援可用性的四種方法。
期望
期望分為兩大領域——使用者如何感知物件是什麼，以及它表現出了何種行為。換句話說，作為設計師，我們期望儘可能縮小使用者期望和使用者體驗之間的差距。
一致性
一致性代表著使用者流以及使用者體驗的“一致”。一致性也可以理解為“內部一致性”——場景內和場景間的一致。一系列場景的一致性構成了使用者體驗。
敘述
敘述是使用者體驗中時間框架內事件的線性進展。它可以被認為是一系列被認真考慮以連線整個使用者體驗的時刻和事件。
關聯
關係是指空間，時間，和層次表示之間引導使用者理解和決策的介面物件。
準則、技術、特性和值
Tyler Waye 這話就和他之前寫過的一樣好：“準則……是提升技術的基本功能前提和潛在規則。無論發生了什麼，這些元素都保持一致。” 重申，原則是不可知的設計。
這樣，我們可以想象一個層次結構：準則位於頂層，技術在下一層，接著是效能，最下層的則是值。
技術可以認為是原則或原則組合的各種無限制的執行。我覺得技術類似於“風格”。
特性則是特定的物件因素來將技術轉化為現實。這些包括（但不限於）位置、不透明度、比例、旋轉角度、定位點、色彩、筆畫寬度、形狀等等。
值是隨時間而變化的實際數值屬性值，用以建立我們所稱的“動畫”。
所以在這裡先停一下（再往前說一點），我們可以說一個假想的動畫參考是利用遮罩和“毛玻璃”技術：模糊 25px，不透明度 70%。
現在我們有些可利用的工具。更重要的是，有些語言工具對於任何其他特殊原型工具來說都是不可知的。
UX 動效中的12原理
緩動、偏移和延遲都和時間有關。父子關係涉及到的物件關係。變形、值變化、遮罩、覆蓋和生成都與物件一致性有關。視差與時態層次有關。蒙層，多維化以及鏡頭平移與縮放都與空間一致性有關。
原理1:緩動
當時序事件發生時，物件行為與使用者期望一致。
所有介面物件表現出時間的行為（無論是實時或非實時），都很舒緩。緩動營造並加強使用者體驗的“自然主義”內在，並在物件表現符合使用者期待時營造出一種統一連續的感覺。順便一說，迪士尼把這叫做“緩進緩出”。
左邊有直線運動的例子看起來很“糟糕”。上面的第一個有緩動動效的例子看起來“很好”。 上述三個例子都有相同數量的幀，而且時長完全相同。唯一的區別就是它們的舒緩度。
作為設計師來思考可用性，我們需要對自身嚴格要求，提出疑問，美感角度之外，哪個例子對可用性支援來說更好？我這裡呈現的例子是一定程度的擬物設計更為自然舒緩。你可以想象一個“緩動梯度”，即低於使用者期望的行為導致更差的可用性互動。在恰當的緩動的動效案例中，使用者體驗動效本身是不著痕跡的，幾乎難以察覺——這很棒，因為它不會因此而分散注意力。線性運動很明顯，感覺也有一些……不完善，不和諧，讓人分神。
現在我將在這裡徹底反駁我（剛才）的觀點，談談右邊的例子。動效並不是不著痕跡的。實際上，它的感覺是被“設計”過的。我們注意到這個物件是如何停頓的。它給人的感覺很不一樣，然而它還是比直線運動的例子感覺上更“對勁”。
你能在不再支援（甚至破壞）可用性的狀況下依然堅持利用緩動嗎？答案是會。而且有很多種方法。一種是設定時間。如果你的時間設定得太慢（大概借用一下 Pasquele ），或者太快，體驗就會被破壞，而且分散掉使用者的注意力。同理，如果你的緩動效果偏離了品牌或者是綜合體驗的話，也會對體驗和無縫感帶來負面影響。
我想給你看的是一個在提到緩動之時充滿機會的世界。也有字面意思上的“舒緩”，作為一個設計師，你可以在無數專案中進行實踐。所有的這些寬鬆都有自己在使用者觸發時有自己期望的響應。
總結：什麼時候使用緩動方式？任何時候。
原理2:分隔&延遲
在引入新元素和場景時定義物件關係和層次結構。
分隔和延遲是 UI 動畫兩大原則中的第二個，它深受迪士尼動畫原則的影響，這裡出自“動作跟隨與重疊。”
這一點很重要，值得注意。然而，這種操作在執行中也有相似之處，目的和結果不同。迪士尼的原則指匯出了“更吸引人的動畫”，而 UI 動效原則引導了更具可用性的體驗。
這個原則的作用是可以通過告知使用者介面中介面的性質來預先進行成功設定。上面提到的敘述是：上面兩個物件是統一的，底層的則是分開的。也許前兩個物件會是一個非互動的影像或者文字，而底層物件是個按鈕。
甚至在使用者瞭解這些物件都是什麼之前，設計師們已經通過動效傳達給 ta 了：這些物件都是“分開的”。這就很厲害了。
Credit: InVision
在上面的例子中，浮動按鈕（FAB）成了包含三個按鈕的主導航元素。因為按鈕之間相互“獨立”，它們最終通過自己的“獨立”來支援可用性。換言之，設計師在利用時間本身來說明——甚至在使用者瞭解這些物件都是什麼之前——這些物件是相互獨立的。這有告知使用者介面中物件部分性質的效果，完全獨立於視覺設計。
為了更好地給你展示它是如何工作的，我會給你舉一個沒有依照分隔與延遲原則的例子。
Credit: Jordi Verdu
在上述案例中，靜態的視覺設計告訴我們背景上有圖示。假設圖示都是分開的，有不同的功能。但動畫和這個是矛盾的。
圖示被暫時分組成行而且被認為是單一的物件。它們的標題也同樣被列為行，也表現為單一物件。這個動畫告訴使用者的是眼睛看不到的東西。在這中情況下，我們可以說，這時此介面中的物件不可用。
原理3:父子關係
在多個物件互動時創造時間和空間層次關係。
父子關係是一個意義重大的原則——“串聯”使用者介面中的物件。在上面的例子中，頂部的“比例”和“定位點”屬性或者底部的“子物件”，以及“父物件”都是如此。
父子關係是物件屬性與其它物件屬性的連線。這可以建立物件關係和層次結構，以支援可用性。
父子關係還可以讓設計師們能夠在向使用者穿搭物件關係性質的時候更好的協呼叫戶介面中的時間事件。
再想想那些包括以下這些在內的物件屬性——比例、透明度、定位點、旋轉角度、形狀、顏色、數值屬性，等等。這些屬性中的任何一個都可以與其它屬性連線，並在使用者體驗中營造出協調的情景。
Credit: Andrew J Lee , Frank Rapacciuolo
在上面左邊的例子中，“面”元素的“y 軸”屬性就是圓指標“x 軸”屬性的“子級”。當圓指標沿水平方向運動時，它的“子元素”沿水平方向垂直移動(while being Masked—another Principle)。
其結果是同一層次同一時空的描述框架同時發生。 值得注意的是，“面”的物件數值都被分別 “鎖定”，“面”是完全不可見的。使用者體會到了無縫的感覺，儘管在這個例子中我們可以說這是一個微妙的“可用性騙局”。
繼承性功能最好作為實時互動。當使用者直接操縱介面物件時，就是設計者在通過動畫與使用者交流——物件是如何連線的，以及它們之間是何種關係。
父子關係有三種形式：“直接聯絡”（看上面的兩個例子），“延遲的聯絡”，和“相反的聯絡”（往下看）。
延遲的聯絡 (Credit: AgenceMe ) 和 相反的聯絡 (Credit: AgenceMe )
原理4:變形
在物件作用發生變化時，建立一個連續的敘事流狀態。
很多人已經寫過了 UX 動效原則中的“變形”。在某些方面，這是最明顯最容易被看到的動畫原則。
變形非常明顯，因為它很突出。我們可以看到一個“提交”按鈕的形狀變成了一個橫向的進度條，並且最終變成了確認檢查的標誌。它抓住了我們的注意，講述了一個事件，並最終完成。
Credit: Colin Garven
變形的作用是在不同的 UX 狀態或者“這是”（就像這是一個按鈕，這是一個橫向進度條，這是一個複選標記）之間為使用者提供無縫過渡。這最終都會導致預期的結果。使用者被安排通過這些功能來達到最終目的。
“模組”的變化產生的影響適當地將使用者體驗中的關鍵時間點分離成為一個無縫和連續的事件序列。這種無縫的體驗會帶來更好的使用者感知，記憶，以及後續行為。
原理5:數值變化
當值的主體發生變化時，產生動態的、連續的敘事關係。
基於文字的介面物件，即數字和文字，可以改變它們的值。這就是“難以察覺的尋常“中的一個。
文字和數字的變化太過常見，以至於它們可以在我們未曾區分並謹慎評估它們在支援可用性中的角色的時候就被它們越過了。
那麼，值發生變化時的使用者體驗是什麼？在使用者體驗中，UX 動效的12法則是支援可用性的有利條件。這裡的三個條件連線使用者與資料背後的現實，有代理的意思，以及值本身的動態特性。
我們看看 dashboard 的例子。
當基於數值的介面物件在沒有數值變化時載入，傳遞給使用者的數字是靜態物件。它們就像是顯示限速每小時55英里的油漆標誌牌。
數字和值都是事實發生的事件的表徵。這個事實可以是時間、收入、遊戲分數、商業指標、運動跟蹤。我們通過動畫來區分的是動態的“值的主體”，以及那些反映了動態值的集合的某些東西。
這種關係不僅失去了靜態物件的視覺價值，也失去了一個更深層次的有利條件。
當我們採用基於動態值的形式來進行動態系統陳述的時候，它觸發了一種“神經反饋”。使用者掌握了他們的資料的動態屬性。現在可以通過授權代理來改變這些數值。當值為靜態的時候，它與其背後的事實聯絡較少，使用者失去了代理權。
Credit: Barthelemy Chalvet, Gal Shir , Unknown
在實時和非實時事件中都可能出現數值變化。在實時事件中，使用者與物件互動來更改值。在非實時事件中，比如載入和轉換，值的變化來源不靠使用者的輸入來反映動態敘述。
原理6:遮罩
在功能取決於物件或組的哪一部分顯示或隱藏時創造一個介面物件或者一組物件的連續性。
遮罩請求的表現可以被認為是物件的形狀和它的功能之間的關係。
因為設計師們對靜態設計的情景下對這招很熟悉，我們應當區別 UX 動效準則“遮罩”出現的時間。作為一種表現，而非狀態。
利用顯示和隱藏物件來使用時序化，功能的連續，以及無縫轉換。這也有保持敘事流的效果。
Credit: Anish Chandran
在上面的例子中，頂部圖片的形狀和位置發生了變化，而非內容，它變成了一張專輯。這具有改變物件為何物的作用，同時保留被掩蓋的內容——相當巧妙的把戲。它是非實時發生的，作為一個變化，在使用者動作之後才回被啟用。
記住，UI 動畫原則的出現具有時序性，通過對連續性、敘事性、相互關聯和期望來支援可用性。在上面所提到的內容裡，當物件本身保持不變的時候，也會有邊界和位置，而這兩個要素則決定了物件是什麼。
原理7:覆蓋
在分層物件的位置有關聯的時候營造敘事和視覺的平面物件空間關係。
覆蓋通過允許使用者利用平面排序功能克服空間層次的缺乏來支援可用性。
為了安全著陸，覆蓋讓設計師通過動畫來聯絡位置相關的排在後面或者前面的非3D空間中的物件。
Credit: Bady, Javi Pérez
在左邊的案例中，前景物件滑到了右側來顯示背後的附加物件的位置。而在右邊的案例中，整個場景向下滑動來顯示附加的內容和選項（同時還利用了分隔和延遲的準則來傳達照片物件的特徵）。
某種程度上來說，作為設計師，“層”的概念實在是不言自明。利用層和層的概念來做設計對於我們來說已經被深深內化了。然而，我們必須小心區別“創造”和“使用”的過程。
作為不斷從事“創造”過程的設計師，我們對我們所設計的物件的每個部分（包括被隱藏的部分）都很瞭解。但作為使用者，那些視覺和認知層次上都不可見的部分是定義和實踐。
覆蓋原則允許設計師表達“Z 軸”定位層之間的關係，以促使空間定位到他們的使用者。
原理8:生成
在新的物件產生和消失的時候，創造連續性，關聯，和敘事。
在當前場景中建立新的物件時(來自當前物件)，敘事性地解釋其外觀尤為重要。在這份宣言中，我強調了建立一個敘事框架的物件起源和出發的重要性。僅僅是對不同明度的調整達不到這種效果。遮罩、生成、以及數值的變化是三種基於可用性來產生強烈敘事性的方法。
Credit: Jakub Antalík , Jakub Antalík , Unknown
在上面的三個例子中，新的物件是在使用者的注意力集中在這些物件上時，以現有的主要物件（為基準）建立的。這兩個方法——注意力的引導，然後引導眼睛通過生成新的物件——具有溝通的清晰和明確的事件鏈的有力作用：動作“X”導致了建立新的子物件的“Y”結果。
原理9: 蒙層
允許使用者空間層次而不是在主視覺層次中定位自己的物件或場景的關係。
和 UX 相關的動效原理中的遮罩類似，蒙層同樣作為一個靜態的暫時現象。
這可能會讓那些沒有短暫思考經驗的設計師感到混亂——就是在時刻之間的時刻。設計師通常所做的設計是螢幕到螢幕或任務到任務。可以將蒙層看做是遮蔽的行為，而非被遮蔽的狀態。靜態設計代表被遮的狀態。引入時間給我們一個物體被遮的行為。
Credit: Virgil Pana, Apple
從上面兩個例子中，我們可以看到，看起來像透明物體或覆蓋物的蒙層，也是一個同時涉及多個屬性的即時互動。
其中的模糊效果和減少物件整體的透明度設計到各種常見的技術。使使用者理解這是她正在操作的一個另外的非主要情景——是另一個世界，就在她的的主物件層次之後。
蒙層使設計者能夠在使用者體驗中對單一統一的視野，或目標導向進行補充。
原理10:視差
在使用者滾動介面時創造視覺空間層次。
“視差”作為一個 UX 動效原理之一，指介面中的不同物件以不同的速度移動。
視差允許使用者專注於主要行動和內容，同時保持設計的完整性。背景元素在一個視差事件中為使用者“提供”感知和認知。設計師可以使用視差分離出即時內容從環境或支援的內容。
Credit: Austin Neill, Michael Sevilla
這對使用者的影響，是明確定義持續時間的互動，各種物件的關係。前景物件，或移動“更快”的物件被認為離使用者“更近”。同樣，背景物件或物件移動“慢”被認為是“更遠”。
設計人員可以利用時間來建立這些關係，告訴使用者介面中的哪個物件具有更高的優先順序。因此，將背景或非互動元素進一步“推回”是很有意義的。
不僅使用者感知的介面物件在視覺設計中具有層次區分，這種層次結構現在可以利用來讓使用者在意識到設計內容之前掌握使用者體驗的本意。
原理11：多維化
當新的物件的產生和消失的時候提供了一個空間敘事框架。
使用者體驗的關鍵是連續性的現象，以及對位置的感知。
多維化提供了克服使用者體驗的二維世界，非邏輯的有力途徑。
人類非常善於利用空間框架來引導現實世界和數字世界中的體驗。提供空間的起源和偏離參考有助於加強使用者在使用者體驗中的心理模型。
此外，多維化原則在同一平面上的物體存在缺乏深度，發生在其它物件的“前面”或“後面”（的問題）上克服了視覺平面中的分層悖論。
多維化以三種方式呈現——摺紙維度，浮動維度，以及物件維度。
摺紙維度可以被認為是在“摺疊”或“翻轉”三維介面物件。
Examples of Origami Dimensionality (Credit: Eddie Lobanovskiy , Virgil Pana)
由於多個物件被組合成“摺紙”結構，隱藏的物件仍然可以被稱為“存在的”，即使它們在空間上是不可見的。這有效地將使用者體驗作為一個連續的空間事件：使用者導航，建立一個執行環境中的互動模型，還有介面物件本身的時間特性。
浮動維度 給介面物件一個空間的起點和消失，使互動模式的更直觀且保持高度敘事。
浮動維度的例子 (Credit: Virgil Pana )
在上面的例子中，維度是通過使用3D“卡片”實現的。這提供了一個支援視覺化設計的強大敘事框架。敘事是延長卡片“翻轉”訪問額外的內容和互動性。維度是引入新的元素，儘量減少突發性的有力途徑。
物件維度帶來有真正的深度和形式的三維物件。
Examples of Object Dimensionality (Credit: Issara Willenskomer , Creativedash )
在這裡，多個二維層被安排在三維空間，以形成真正的三維物件。他們的維度顯示在實時和非實時的過渡時刻。物件維度的作用是使用者開發基於非可見空間位置的物件效用的敏銳意識。
原理12：鏡頭平移與縮放
在導航介面物件和空間時保留連續性和空間敘述性。
鏡頭平移與縮放是電影的概念中的相機和相關物體的運動，而畫面本身的大小在畫面上平穩地從長鏡頭變為特寫鏡頭（反之亦然）。
在某些情況下，這是不可能的。比如物件縮放，物體在 3D 空間中朝著攝影機移動，或者是攝影機在 3D 空間中向著物體移動（參見下方參考）。下面的三個例子說明了可能的情況。
這是移動攝像，縮放，或是攝像機的運動嗎？
這種，是將“移動影像”和“變焦”的例子進行了分別處理。但類似的，他們也涉及連續元素和景深變化，滿足了 UX 的動效設計原理：他們通過運動支援可用性。
左邊的兩個影像是移動攝像，而右邊的影像是變焦。
移動攝像 是一個電影術語，適用於攝像機運動，無論是向或遠離物件 (它也適用於水平的“跟蹤”運動，但在可用性情景中的相關性較小)。
Credit: Apple
在 UX 的空間中，這個動作可以指觀眾視角的改變，也可以指當物件改變位置時保持靜止狀態。移動攝像原理通過連續性和敘事，無縫過渡介面物件和目的地支援可用性。移動攝影還可以結合維度原理，從而產生更多更深入的空間體驗並傳達給使用者當前檢視的“前面”或“後面”的領域或內容。
變焦 是指既沒有透視也不是物體在空間上移動的事件，而是指物件本身的縮放（或者我們看它的角度導致影像放大）。這傳達給觀者，額外的介面物件是“內部”其他物件或場景的感覺。
Credit: Apple
它可以無縫轉換——實時或是非實時——來支援可用性。這種無縫使用移動攝影和變焦原理在創造空間的心理模型的情況下是很強大的。
如果你已經讀到了這裡，那麼恭喜！這真是個野蠻的宣言。我希望這些載入的 gif 沒有讓你的瀏覽器陷入癱瘓。我也真的希望你找到一些對自己有價值的東西，一些對你的互動專案有利的新工具和優勢。
希望你瞭解更多關於如何開始使用運動作為支援可用性的設計工具。
最後再插個廣告：如果你想要我就令人激動的動效主題以及可用性在你的會議上發言或者為你的團隊組織一個現場討論的話，請移步這裡。如果你想要在你所在城市參加課程，來這裡。最後，如果你想要向我諮詢你的專案，可以看看這裡。新增到我的列表，點選這裡。
這份宣言離不開來自亞馬遜的 Kateryna Sitner 慷慨耐心的貢獻和不斷的反饋——非常感謝！特別緻謝 Alex Chang，他的頭腦風暴和堅持給了我莫大的支援，感謝來自微軟的 Bryan Mamaril 的一雙慧眼，感謝 Jeremey Hanson 的筆記編輯整理，感謝瘋狂的 UI 動效大師 Eric Braff，Artefact 的 Rob Girling 的多年信任，Matt Silverman 在 After Effects 會議上鼓動人心的講話，良心室友 Bradley Munkowitz 為我帶來 UI 設計的靈感，Pasquale D’Silva 關於動效的令人吃驚的文章，Rebecca Ussai Henderson對 UI 在編排方面的精彩論述, Adrian Zumbrunnen 在 UI 編排領域的佳作，Wayne Greenfield 還有 Christian Brodin 不斷推動我進步的策劃兄弟。還有你們，不斷創造靈性 gif 的成千上萬的 UI 動畫師們。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃。