十二條動效體驗原則

這是一位在五年時間內為四十多個國家和上百個頂尖機構提供諮詢服務的動效設計師，總結出來的實用性動效設計原則，為提升產品體驗與可用性提供幫助。

如果你想要了解更多背景信息，建議先閱讀我的前一篇譯文《動效的基本常識》，其中介紹了動畫與動效的差異、即時與非即時的定義、動效提升可用性的四種方式（可預期、連續性、表述性、關聯性）、以及理論、手段、屬性與值之間的關係。

原文：《Creating Usability with Motion: The UX in Motion Manifesto》

未經允許請勿轉載

——

• 時間相關的原則：緩動（Easing）、偏移（Offset）和延遲（Delay）
• 關聯性相關的原則：父子關係（Parenting）
• 連續性相關的原則：過渡（Transformation）、值變（Value Change）、遮罩（Masking）、覆蓋（Overlay）、複製（Cloning）
• 時間層級相關的原則：視差（Paralax）
• 空間連續性相關的原則：景深（Obscuration）、摺疊（Dimensionality）和滑動變焦（Dolly & Zoom）

原則1：緩動

時效事件發生時，元素的行為應與用戶預期相符。

所有展示時效行為的界面元素（無論即時還是非即時），都需要緩動。緩動可以加強體驗中的自然感，並創造出符合用戶預期的連續性。迪士尼的動畫原則將其稱之為緩入緩出。

上面第一個圖例中的線性動效看起來不太好，而上面那個範例（三個相似動畫中的第一個）看上去要好很多。上面三個範例的幀數和動作事件都一樣，唯一的區別是緩動。

作為可用性相關的設計師，除了美學之外，我們要需要嚴格要求自己思考，哪個立即更能夠支持可用性？

你可以想像一種完全不符合用戶預期的緩動方式，讓可用性大大下降。合適的緩動相比起來，用戶體驗到的動效是無縫的，並且很大部分是不可見的——這其實是一件好事，以免讓用戶分心。線性動效（linear motion）看起來就過於明顯了，感覺缺少了什麼，不完整，刺眼，又讓分分心。

現在看看上面第二個圖例，動效不是無縫的，而是有設計感。我們可以注意到元素的著陸過程。總的來說還是比線性動效（linear motion）好多了。

緩動可能對可用性產生負面影響嗎？答案是肯定的，方式有很多。第一種是時間掌控不對，太慢或太快，都會打破用戶的預期，並分散注意力。並且如果你的緩動與產品整體的體驗不一致，也會產生相似的影響。

我想要告訴你的是，作為設計師的你，可以使用的緩動種類無窮無盡。當用戶觸發時，不用的緩動所帶來的預期響應都不一樣。

總結：什麼時候使用緩動？任何時候！

想要了解更多緩動相關知識，可以去看看我的文章《The irony of usability and linear motion》。

原則2：偏移與延遲

加入新的界面元素或場景時，可用與表達元素之間的關係。

本文介紹的原則中，只有兩種與迪士尼動畫原則相關，即原則1緩動與現在介紹的原則2偏移與延遲。本原則與迪士尼動畫原則中的Follow and Overlapping Action相似。然而，雖然執行手段，但是目的與效果不同。迪士尼想要的是「更有吸引力的動畫」，而界面動畫原則想要的是可用性更好的體驗。

這個原則的實用性在於它通過用自然的方式描述界面元素來讓用戶預先感知到下一步結果。上圖範例告訴用戶，上面兩條與下面一條是分開的。可能上面兩條是不可以點擊的圖文信息，下面一條是一個按鈕。

這種動效能夠讓用戶在看清楚之前，就感受到眼前的東西是什麼，它們之間是如何區分的。這種功能非常有幫助。

上面這個例子中，浮動按鈕變成了由三個按鈕組成的頭部導航。因為按鈕是依次出現的，所以它們之間的分離感能夠提升體驗上的可用性。換一種講法，在用戶看清楚這些頭部導航之前，設計師已經用戶時間差說明了元素之間的分離關係。這便有了一種與視覺設計不同的方式，來向用戶介紹界面元素。

為了更好地展示上述效果，我下面就給你一個打破這條原則的反例。

在上圖的靜態視覺設計中，背景圖上浮著一些圖標。看起來所有的圖標是互相分開的，它們分別擁有各自的功能。但是動效的表達卻發生了矛盾。

運動時，每一行圖標都成了一組，看起來一行就是一個元素。圖標的標題也是一行一行地分成了3個元素。這個動效展示的東西，與動效完成後用戶看到的東西感受完全不同。我們可以說這個例子中的界面元素的時效行為並不能對可用性產生幫助。

原則3：父子關係

當界面元素較多時，可以利用時空差異創造出可以感知到的父子繼承關係。

父子關係是將界面元素關聯起來的重要原則。上圖中，頂部子元素的尺寸和位置都與底部父元素相對應。父子關係將不同元素的屬性關聯起來，創造出關聯和繼承關係，以增強可用性。這需要設計師更好地協調事件的發生時間，以此向用戶傳達元素之間的關係。

很多元素屬性都可以創造用戶體驗的協同感，暗示元素之間的繼承關係，例如尺寸、透明度、位置、旋轉角度、形狀、顏色等。

上圖一中，氣泡表情的縱軸坐標繼承自圓形指針的橫軸坐標，它們也有父子關係。當父元素圓形指針橫向移動時，子元素氣泡表情同時進行橫向和縱向移動（同時被遮罩——另一條原則）。

父子關係原則最好是當做即時交互才能發揮出最好的作用，因為這樣用戶才能感受到對界面元素的直接掌控，設計師可以即時通過動效告訴用戶元素之間的關聯和關係

父子關係的動效分為3種形式，上面兩種屬於「直接繼承」，除此之外還有「延遲繼承」（下圖一）和「逆向繼承」（下圖二）

原則4：形變

用連貫的狀態描繪表達元素功能的改變。

關於動效體驗的形變原則，在某些方面，這可能算得上最明顯透徹的動畫理論了。

形變是最容易被識別的，主要因為它太明顯了。例如確認按鈕形變成圓圈進度條，最後又變成確認按鈕，這個例子看起來就很引人注目。形變能夠抓住人們的注意力，描繪一個完整的故事。

形變帶領用戶無縫地轉換體驗狀態，這個狀態可能是一個用戶期望的結果。用戶通過形變過程中的一個個節點，到達最終目的地。

形變能夠將體驗中可感知的分離節點，轉化成一系列無縫銜接的事件，這樣就可以更好的被用戶感知、記憶和跟蹤。

原則5：值變

當元素的值發生變化是，用動態連續的方式描述關聯關係。

數字或文本類的界面元素本身的值是可以改變的，這一點概念相對而言沒有那麼顯而易見。

數字和文本的值變因為實在是太普遍了，以至於我們遇到的時候常常意識不到，也很少鄭重地評估他們對可用性的幫助。

那麼值變時的體驗是怎樣的？如果說文本的十二條動效體驗原則的核心是體驗提升的機會點，那麼此處有3個機會點：向用戶表達數字背後的現實含義、溝通介質以及值的動態變化。

下面來看這個儀錶盤的例子：

如果描述值的界面元素（如上圖的數字）在載入的時候，其值不發生變化（上圖一），那麼用戶就會覺得這些數字是靜態的元素，功效類似「限速55km/h」的路標。

很多界面數字是反應現實數據情況的，例如收入、遊戲得分、商業指標、健身記錄等。如果使用動態的方式來表示它們（上圖二），我們就能感到它們反映的是動態變化的數據的。

而如果使用靜態的展示方式（上圖一），不單單是這種關聯感，更深層次的體驗機會點也會丟失掉。

用戶動態的方式展現變化的值，會給人一種「神經反射」。用戶感受到數據的動態特徵後，能夠感受到其意義，並聯想到與之相關的對象。這是的數值就成為了溝通用戶與關聯對象（數據背後含義）的橋樑。相對的，如果這些數值看起來是靜態的，就無法連接用戶與關聯對象，橋樑的作用自然也沒有了。

值變的理論既可以是即時，也可以是非即時發生的。如果是即時事件，用戶一邊進行操作一邊改變數值。如果是非即時事件，像是載入或過渡，數值在沒有用戶參與的情況下自動變化。

原則6：遮罩

如果一個界面元素的不同的展示方式對於不同的功能，那麼讓展示方式的變化過程具有連續性。

遮罩行為的問題可以理解成元素形狀與功能之間的關係。

雖然設計師們在做靜態設計時就對遮罩有所了解，但需要區分的是動效體驗原則中的遮罩是隨著時間而發生的行為，而不是禁止的狀態。

這種連續無縫地遮住或露出元素區域的方式，也能創造連續的描述性。

上例中，頭圖通過形狀和位置的改變成為了唱片。在不改變元素內容的情況下，通過遮罩來改變元素本身，相當不錯的技巧。這個例子屬於非即時事件，在用戶操作之後才發生。

記住，界面動畫的原理與時間緊密相關，通過持續性、描述性、關聯性與可預期這四種方式來成為可用性的支柱。上述的例子中，儘管元素的內容前後保持不變，但是輪廓和位置決定了它是什麼。

原則7：覆蓋

用堆疊元素的相對位置來描述它們的扁平空間關係。

覆蓋通過堆疊排序來彌補扁平空間缺乏層次的問題，以此提高體驗可用性。

再直白一點，就是在一個非三維的平面空間里，通過排列元素之間的上下關係來傳遞它們的相對位置的動效。

上圖一中，前景元素滑到右邊露出背景元素。上圖二中，整個界面向下滑動露出列表和選項（同時使用移動和延遲原則來描述照片之間的獨立性）。

對設計師來說，在一定程度上，「層」的概念是非常明確的，我們做的設計本身就是有層級的。但是必須要明確分清的是，「繪製」與「利用」並不相同。因為我們設計師通過長時間地「繪製」層級，對所設計的一切元素（包括被隱藏的信息）都十分了解。然而對於用戶來說，被隱藏的元素必須被定義出來，或者經過嘗試，才能夠看到並了解。

總的來說，覆蓋原則讓設計師能夠通過層級之間的Z軸位置關係，像用戶傳達空間方位。

原則8：複製

當新的元素從已有元素複製出來時，用連貫的方式描述其關聯關係。

當新的元素在當前場景（從存在的元素）被創造出來時，描述其形態十分重要。在這篇文章里，我要強調的是描述元素的產生和分離至關重要。要做到這一點，單純的透明度漸強漸弱是不夠的。像遮罩、複製和翻轉這些動效原則都需要根基於強烈的形式感。

上面的三個例子中，當用戶集中注意力在主體元素上時，新的元素從主體元素上被創造出來。這雙重動作（先引導注意力，然後通過複製將實現導向新元素）能夠明確信息地將事件傳達出來：由「X」動作引發創造新元素的「Y」動作。

原則9：景深

允許用戶瞥得到非主要元素或場景。

與前面說過的遮罩原則類似，景深原則既可以是靜止的，也可以具有時效性。

如果有些設計師對於時效性難以理解，那麼可以把它想像成兩種狀態之間的過渡。很多人是按照一屏接著一屏或一個任務接著一個任務的方式做設計的。現在你需要做的是把景深想像成一個變化的過程，而不是靜止的狀態。靜態設計只能表現出元素變朦朧的狀態，加上時效後就變成了元素變朦朧的行為。

上面兩個例子中我們可以看到景深原則（看起來也像是被透明元素覆蓋）也可以用作多個元素的即時交互。

這個原則的很多實現手段都涉及到模糊效果和透明覆蓋，這讓用戶了解到不屬於操作主體的大環境——主要元素之後的層次結構，那裡還有另一個世界。

設計師可以使用景深原則來在用戶體驗中提供一個全局或客觀的視圖。

原則10：視差

當用戶滾動界面時，在平面創造出空間層次。

「視差」在動效體驗原則中描述的是界面元素以不同的速度運動。

時差在保持原本設計的完整性的前提下，讓用戶聚焦於主要操作和內容。時差事件中，用戶對背景元素的感知會被弱化。設計師可以通過這一原則將即時性的內容從環境或支撐內容中分離出來。

這種動效讓用戶在交互操作期間，明確區分出各種元素之間的關係。前景元素，或者說移動得「更快」的元素對用戶來說，感覺更近一些。同樣，背景元素，後者說移動得「更慢」的元素對用戶來說，感覺更遠一些。

設計師們能夠僅利用時間，就創造出元素之間的關聯關係，以此告訴用戶界面中的什麼東西更加重要。這就是為什麼有必要讓那些背景類的，或是沒有交互屬性的元素給人感覺更遠一些。

這樣做不但能夠讓用戶領略到超越平面設計的層次感，還可以讓他們在注意到設計和內容之前，感受就得到自然的體驗。

原則11：翻轉

通過具有空間架構的描述方式來表現新元素的產生與離場。

用戶體驗的關鍵在於連續性與方位感。

翻轉原則能夠大大改變扁平、缺乏邏輯性用戶體驗。

人類都很擅長通過空間框架來引導虛擬和現實世界的體驗。具有空間感的產生和離場動作可以幫助增強用戶在體驗中的方位感。

除此之外，翻轉原則能夠改善扁平界面存在的通病，即元素不是沒有深度地相互疊加，而是有上下層次的相互覆蓋。

表現翻轉有三種方式——摺疊翻轉、浮動翻轉和對象翻轉。

摺疊翻轉可以理解成三維界面元素的折頁或旋轉。

因為摺疊過程將多個元素擠壓到消失，所以被隱藏的元素依舊可以說是「存在的」，儘管空間上不可見。這就有效地將用戶體驗渲染成連續的空間事件，期間不論是交互操作，還是交互元素的即時動作，都能夠引導用戶感受得到。

浮動翻轉讓界面元素的產生和離場具有空間感，使交互模式更加直觀且具有高度的描述性。

上面的例子中，翻轉動過通過3D卡片表現出來。這樣的架構為視覺設計加強了表現力，其中通過滑動卡片來查看其餘內容或者實現互動操作。翻轉能夠為新元素的出現提供流暢的過渡。

對象翻轉能夠給元素帶來具有真實的深度和形狀。

這種方式將2D平面在3D控制項里組合拼裝成具有真實體感的對象，其展示過程可以是即時的，也可以是非即時的。對象翻轉的作用在於能夠讓用戶快速通過看不見的空間方位產生對元素功能的感知。

原則12：滑動變焦

用連續的空間描述來引導界面元素和空間。

滑動變焦是關於鏡頭下元素移動的電影概念，即影像中圖片由遠及近（或者由近及遠）。

有時候，你無法判斷是元素在變大，還是元素在3D空間向前移動，或是在3D空間中攝像頭在向前移動（如下面的例子）。

下面三張圖分別表現了上例的三種可能性。

滑動是一個描述攝像頭靠近或遠離物體的電影術語（雖然有時也指橫向追蹤移動，但是不適用於這裡）。

變焦指的是在角度或元素不進行空間移動的情況下，元素本身的放大縮小（或者說因為視角的縮小，導致圖片看起來更大）。這讓觀看者感覺眼前的界面元素處於更多元素或更大的場景之內的。

這種方式可以通過無縫的過渡（無論即時或非即時）來提升可用性。用無縫的方式表現滑動變焦原則，能夠創造出很棒的空間感。

——

如果你看到了這裡，那麼說聲祝賀！這篇宣言有點野，希望這麼多GIF沒有崩壞你的瀏覽器。我也希望你從中有所收穫，能在交互項目中運用一些新的工具和支撐。

鼓勵你學習更多關於使用動效提升體驗的知識。

再次，如果你想要我在你的會議上發表演講、為你的團隊提供工作坊的現場指導，請前往這裡。如果你希望在你的城市參加相關課程，請前往這裡。如果你想找我做項目諮詢，可以去這裡。郵件訂閱「可用性與動效」的相關文章，請前往這裡。

——

譯者Z Yuhan：這篇又長又難的東西終於翻完了。如果你看起來覺得有些不解，可以看上篇《動效的基本常識》，都是譯自原文《Creating Usability with Motion: The UX in Motion Manifesto》

未經允許請勿轉載