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

• 時間相關(guān)的原則：緩動（Easing）、偏移（Offset）和延遲（Delay）
• 關(guān)聯(lián)性相關(guān)的原則：父子關(guān)系（Parenting）
• 連續(xù)性相關(guān)的原則：過渡（Transformation）、值變（Value Change）、遮罩（Masking）、覆蓋（Overlay）、復(fù)制（Cloning）
• 時間層級相關(guān)的原則：視差（Paralax）
• 空間連續(xù)性相關(guān)的原則：景深（Obscuration）、折疊（Dimensionality）和滑動變焦（Dolly & Zoom）

原則1：緩動

時效事件發(fā)生時，元素的行為應(yīng)與用戶預(yù)期相符。

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

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

作為可用性相關(guān)的設(shè)計師，除了美學(xué)之外，我們要需要嚴(yán)格要求自己思考，哪個立即更能夠支持可用性？

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

現(xiàn)在看看上面第二個圖例，動效不是無縫的，而是有設(shè)計感。我們可以注意到元素的著陸過程?？偟膩碚f還是比線性動效（linear motion）好多了。

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

我想要告訴你的是，作為設(shè)計師的你，可以使用的緩動種類無窮無盡。當(dāng)用戶觸發(fā)時，不用的緩動所帶來的預(yù)期響應(yīng)都不一樣。

總結(jié)：什么時候使用緩動？任何時候！

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

原則2：偏移與延遲

加入新的界面元素或場景時，可用與表達(dá)元素之間的關(guān)系。

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

這個原則的實(shí)用性在于它通過用自然的方式描述界面元素來讓用戶預(yù)先感知到下一步結(jié)果。上圖范例告訴用戶，上面兩條與下面一條是分開的。可能上面兩條是不可以點(diǎn)擊的圖文信息，下面一條是一個按鈕。

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

上面這個例子中，浮動按鈕變成了由三個按鈕組成的頭部導(dǎo)航。因?yàn)榘粹o是依次出現(xiàn)的，所以它們之間的分離感能夠提升體驗(yàn)上的可用性。換一種講法，在用戶看清楚這些頭部導(dǎo)航之前，設(shè)計師已經(jīng)用戶時間差說明了元素之間的分離關(guān)系。這便有了一種與視覺設(shè)計不同的方式，來向用戶介紹界面元素。

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

在上圖的靜態(tài)視覺設(shè)計中，背景圖上浮著一些圖標(biāo)。看起來所有的圖標(biāo)是互相分開的，它們分別擁有各自的功能。但是動效的表達(dá)卻發(fā)生了矛盾。

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

原則3：父子關(guān)系

當(dāng)界面元素較多時，可以利用時空差異創(chuàng)造出可以感知到的父子繼承關(guān)系。

父子關(guān)系是將界面元素關(guān)聯(lián)起來的重要原則。上圖中，頂部子元素的尺寸和位置都與底部父元素相對應(yīng)。父子關(guān)系將不同元素的屬性關(guān)聯(lián)起來，創(chuàng)造出關(guān)聯(lián)和繼承關(guān)系，以增強(qiáng)可用性。這需要設(shè)計師更好地協(xié)調(diào)事件的發(fā)生時間，以此向用戶傳達(dá)元素之間的關(guān)系。

很多元素屬性都可以創(chuàng)造用戶體驗(yàn)的協(xié)同感，暗示元素之間的繼承關(guān)系，例如尺寸、透明度、位置、旋轉(zhuǎn)角度、形狀、顏色等。

上圖一中，氣泡表情的縱軸坐標(biāo)繼承自圓形指針的橫軸坐標(biāo)，它們也有父子關(guān)系。當(dāng)父元素圓形指針橫向移動時，子元素氣泡表情同時進(jìn)行橫向和縱向移動（同時被遮罩——另一條原則）。

父子關(guān)系原則最好是當(dāng)做即時交互才能發(fā)揮出最好的作用，因?yàn)檫@樣用戶才能感受到對界面元素的直接掌控，設(shè)計師可以即時通過動效告訴用戶元素之間的關(guān)聯(lián)和關(guān)系

父子關(guān)系的動效分為3種形式，上面兩種屬于“直接繼承”，除此之外還有“延遲繼承”（下圖一）和“逆向繼承”（下圖二）

原則4：形變

用連貫的狀態(tài)描繪表達(dá)元素功能的改變。

關(guān)于動效體驗(yàn)的形變原則，在某些方面，這可能算得上最明顯透徹的動畫理論了。

形變是最容易被識別的，主要因?yàn)樗黠@了。例如確認(rèn)按鈕形變成圓圈進(jìn)度條，最后又變成確認(rèn)按鈕，這個例子看起來就很引人注目。形變能夠抓住人們的注意力，描繪一個完整的故事。

形變帶領(lǐng)用戶無縫地轉(zhuǎn)換體驗(yàn)狀態(tài)，這個狀態(tài)可能是一個用戶期望的結(jié)果。用戶通過形變過程中的一個個節(jié)點(diǎn)，到達(dá)最終目的地。

形變能夠?qū)Ⅲw驗(yàn)中可感知的分離節(jié)點(diǎn)，轉(zhuǎn)化成一系列無縫銜接的事件，這樣就可以更好的被用戶感知、記憶和跟蹤。

原則5：值變

當(dāng)元素的值發(fā)生變化是，用動態(tài)連續(xù)的方式描述關(guān)聯(lián)關(guān)系。

數(shù)字或文本類的界面元素本身的值是可以改變的，這一點(diǎn)概念相對而言沒有那么顯而易見。

數(shù)字和文本的值變因?yàn)閷?shí)在是太普遍了，以至于我們遇到的時候常常意識不到，也很少鄭重地評估他們對可用性的幫助。

那么值變時的體驗(yàn)是怎樣的？如果說文本的十二條動效體驗(yàn)原則的核心是體驗(yàn)提升的機(jī)會點(diǎn)，那么此處有3個機(jī)會點(diǎn)：向用戶表達(dá)數(shù)字背后的現(xiàn)實(shí)含義、溝通介質(zhì)以及值的動態(tài)變化。

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

如果描述值的界面元素（如上圖的數(shù)字）在加載的時候，其值不發(fā)生變化（上圖一），那么用戶就會覺得這些數(shù)字是靜態(tài)的元素，功效類似“限速55km/h”的路標(biāo)。

很多界面數(shù)字是反應(yīng)現(xiàn)實(shí)數(shù)據(jù)情況的，例如收入、游戲得分、商業(yè)指標(biāo)、健身記錄等。如果使用動態(tài)的方式來表示它們（上圖二），我們就能感到它們反映的是動態(tài)變化的數(shù)據(jù)的。

而如果使用靜態(tài)的展示方式（上圖一），不單單是這種關(guān)聯(lián)感，更深層次的體驗(yàn)機(jī)會點(diǎn)也會丟失掉。

用戶動態(tài)的方式展現(xiàn)變化的值，會給人一種“神經(jīng)反射”。用戶感受到數(shù)據(jù)的動態(tài)特征后，能夠感受到其意義，并聯(lián)想到與之相關(guān)的對象。這是的數(shù)值就成為了溝通用戶與關(guān)聯(lián)對象（數(shù)據(jù)背后含義）的橋梁。相對的，如果這些數(shù)值看起來是靜態(tài)的，就無法連接用戶與關(guān)聯(lián)對象，橋梁的作用自然也沒有了。

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

原則6：遮罩

如果一個界面元素的不同的展示方式對于不同的功能，那么讓展示方式的變化過程具有連續(xù)性。

遮罩行為的問題可以理解成元素形狀與功能之間的關(guān)系。

雖然設(shè)計師們在做靜態(tài)設(shè)計時就對遮罩有所了解，但需要區(qū)分的是動效體驗(yàn)原則中的遮罩是隨著時間而發(fā)生的行為，而不是禁止的狀態(tài)。

這種連續(xù)無縫地遮住或露出元素區(qū)域的方式，也能創(chuàng)造連續(xù)的描述性。

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

記住，界面動畫的原理與時間緊密相關(guān)，通過持續(xù)性、描述性、關(guān)聯(lián)性與可預(yù)期這四種方式來成為可用性的支柱。上述的例子中，盡管元素的內(nèi)容前后保持不變，但是輪廓和位置決定了它是什么。

原則7：覆蓋

用堆疊元素的相對位置來描述它們的扁平空間關(guān)系。

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

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

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

對設(shè)計師來說，在一定程度上，“層”的概念是非常明確的，我們做的設(shè)計本身就是有層級的。但是必須要明確分清的是，“繪制”與“利用”并不相同。因?yàn)槲覀冊O(shè)計師通過長時間地“繪制”層級，對所設(shè)計的一切元素（包括被隱藏的信息）都十分了解。然而對于用戶來說，被隱藏的元素必須被定義出來，或者經(jīng)過嘗試，才能夠看到并了解。

總的來說，覆蓋原則讓設(shè)計師能夠通過層級之間的Z軸位置關(guān)系，像用戶傳達(dá)空間方位。

原則8：復(fù)制

當(dāng)新的元素從已有元素復(fù)制出來時，用連貫的方式描述其關(guān)聯(lián)關(guān)系。

當(dāng)新的元素在當(dāng)前場景（從存在的元素）被創(chuàng)造出來時，描述其形態(tài)十分重要。在這篇文章里，我要強(qiáng)調(diào)的是描述元素的產(chǎn)生和分離至關(guān)重要。要做到這一點(diǎn)，單純的透明度漸強(qiáng)漸弱是不夠的。像遮罩、復(fù)制和翻轉(zhuǎn)這些動效原則都需要根基于強(qiáng)烈的形式感。

上面的三個例子中，當(dāng)用戶集中注意力在主體元素上時，新的元素從主體元素上被創(chuàng)造出來。這雙重動作（先引導(dǎo)注意力，然后通過復(fù)制將實(shí)現(xiàn)導(dǎo)向新元素）能夠明確信息地將事件傳達(dá)出來：由“X”動作引發(fā)創(chuàng)造新元素的“Y”動作。

原則9：景深

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

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

如果有些設(shè)計師對于時效性難以理解，那么可以把它想象成兩種狀態(tài)之間的過渡。很多人是按照一屏接著一屏或一個任務(wù)接著一個任務(wù)的方式做設(shè)計的?，F(xiàn)在你需要做的是把景深想象成一個變化的過程，而不是靜止的狀態(tài)。靜態(tài)設(shè)計只能表現(xiàn)出元素變朦朧的狀態(tài)，加上時效后就變成了元素變朦朧的行為。

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

這個原則的很多實(shí)現(xiàn)手段都涉及到模糊效果和透明覆蓋，這讓用戶了解到不屬于操作主體的大環(huán)境——主要元素之后的層次結(jié)構(gòu)，那里還有另一個世界。

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

原則10：視差

當(dāng)用戶滾動界面時，在平面創(chuàng)造出空間層次。

“視差”在動效體驗(yàn)原則中描述的是界面元素以不同的速度運(yùn)動。

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

這種動效讓用戶在交互操作期間，明確區(qū)分出各種元素之間的關(guān)系。前景元素，或者說移動得“更快”的元素對用戶來說，感覺更近一些。同樣，背景元素，后者說移動得“更慢”的元素對用戶來說，感覺更遠(yuǎn)一些。

設(shè)計師們能夠僅利用時間，就創(chuàng)造出元素之間的關(guān)聯(lián)關(guān)系，以此告訴用戶界面中的什么東西更加重要。這就是為什么有必要讓那些背景類的，或是沒有交互屬性的元素給人感覺更遠(yuǎn)一些。

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

原則11：翻轉(zhuǎn)

通過具有空間架構(gòu)的描述方式來表現(xiàn)新元素的產(chǎn)生與離場。

用戶體驗(yàn)的關(guān)鍵在于連續(xù)性與方位感。

翻轉(zhuǎn)原則能夠大大改變扁平、缺乏邏輯性用戶體驗(yàn)。

人類都很擅長通過空間框架來引導(dǎo)虛擬和現(xiàn)實(shí)世界的體驗(yàn)。具有空間感的產(chǎn)生和離場動作可以幫助增強(qiáng)用戶在體驗(yàn)中的方位感。

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

表現(xiàn)翻轉(zhuǎn)有三種方式——折疊翻轉(zhuǎn)、浮動翻轉(zhuǎn)和對象翻轉(zhuǎn)。

折疊翻轉(zhuǎn)可以理解成三維界面元素的折頁或旋轉(zhuǎn)。

因?yàn)檎郫B過程將多個元素擠壓到消失，所以被隱藏的元素依舊可以說是“存在的”，盡管空間上不可見。這就有效地將用戶體驗(yàn)渲染成連續(xù)的空間事件，期間不論是交互操作，還是交互元素的即時動作，都能夠引導(dǎo)用戶感受得到。

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

上面的例子中，翻轉(zhuǎn)動過通過3D卡片表現(xiàn)出來。這樣的架構(gòu)為視覺設(shè)計加強(qiáng)了表現(xiàn)力，其中通過滑動卡片來查看其余內(nèi)容或者實(shí)現(xiàn)互動操作。翻轉(zhuǎn)能夠?yàn)樾略氐某霈F(xiàn)提供流暢的過渡。

對象翻轉(zhuǎn)能夠給元素帶來具有真實(shí)的深度和形狀。

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

原則12：滑動變焦

用連續(xù)的空間描述來引導(dǎo)界面元素和空間。

滑動變焦是關(guān)于鏡頭下元素移動的電影概念，即影像中圖片由遠(yuǎn)及近（或者由近及遠(yuǎn)）。

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

下面三張圖分別表現(xiàn)了上例的三種可能性。

滑動是一個描述攝像頭靠近或遠(yuǎn)離物體的電影術(shù)語（雖然有時也指橫向追蹤移動，但是不適用于這里）。

變焦指的是在角度或元素不進(jìn)行空間移動的情況下，元素本身的放大縮?。ɑ蛘哒f因?yàn)橐暯堑目s小，導(dǎo)致圖片看起來更大）。這讓觀看者感覺眼前的界面元素處于更多元素或更大的場景之內(nèi)的。

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

——

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

鼓勵你學(xué)習(xí)更多關(guān)于使用動效提升體驗(yàn)的知識。

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

譯者：Z Yuhan

譯文地址：https://zhuanlan.zhihu.com/p/27791356?group_id=867741656047308801

本文由 @Z Yuhan 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。