動畫只是一種工具，原則是指導(dǎo)工具如何使用的思想，因此，原則為設(shè)計(jì)師提供了更加長遠(yuǎn)的機(jī)會。

“作為一名UI或UX設(shè)計(jì)師，我如何判斷在合適的時機(jī)和位置利用動效來創(chuàng)建可用性呢？”下面是我的答案。

在過去的5年中，我有幸指導(dǎo)過來自40多個國家的UI和UX設(shè)計(jì)師，并且在數(shù)百個頂級品牌設(shè)計(jì)咨詢公司開設(shè)與動效有關(guān)的研討會和培訓(xùn)。經(jīng)過對用戶界面動效15年的研究，我得出以下結(jié)論，有12個特定的情境可以利用動效來提升可用性。我將這些情境稱之為“UX動效的12條原則”，并且可以組合使用。

我把宣言分成了五個部分：

1. 確定UI動效的主題 – 不能僅憑自己的想法；
2. 實(shí)時與非實(shí)時交互；
3. 動效提升可用性的四種方式；
4. 原則、技術(shù)、屬性和數(shù)值；
5. UX動效中的12條原則。

一、它不僅僅是UI動畫

用戶界面動效總是被設(shè)計(jì)師理解為“UI動畫”。我不贊同這個觀點(diǎn)，我覺得在討論這個問題時先要達(dá)成一些共識。

“UI動畫”通常被設(shè)計(jì)師認(rèn)為能夠增加用戶的愉悅感，但整體沒有太多附加價值。因此，UX就好像“UI動畫”的后媽，（如有冒犯，打個比喻）總是擺在無關(guān)緊要的位置，放在最后考慮。

此外，用戶界面中的動效常常被認(rèn)為是屬于迪士尼的12動畫原理的范疇，我在自己的文章“UI動效原則- 迪士尼已經(jīng)過時了”中反駁了這一觀點(diǎn)。

在我下面的宣言中，我將詳細(xì)闡述UI動畫和“UX動效的12原則”的關(guān)系，就像房屋框架之于房屋。我的意思是，雖然房屋需要依托于物理的建造（需要框架），但如何構(gòu)造的原理卻來自于指導(dǎo)原則。

動畫只是一種工具，原則是指導(dǎo)工具如何使用的思想，因此，原則為設(shè)計(jì)師提供了更加長遠(yuǎn)的機(jī)會。大多數(shù)設(shè)計(jì)師認(rèn)為“UI動畫”是更高階的設(shè)計(jì)模式體現(xiàn)——實(shí)時與非實(shí)時的關(guān)于界面對象的行為事件。

二、實(shí)時與非實(shí)時交互

到了這個階段，區(qū)分“狀態(tài)”和“行為”非常重要。UX中某些內(nèi)容基本是靜態(tài)的，比如說一個設(shè)計(jì)組件。但行為是是暫時的，基于動作是否被觸發(fā)。界面內(nèi)容可以處于某種狀態(tài)，也可以處于某種行為。如果處于后者，那么他就與動作相關(guān)，并且能夠提升可用性。

此外，從時間層面來說，交互都可以被認(rèn)為是實(shí)時或非實(shí)時發(fā)生的。實(shí)時意味著用戶直接與界面中的對象進(jìn)行交互。非實(shí)時意味著對象的行為是滯后交互的：它發(fā)生在用戶操作之后，并且具有過渡性。

這是一個很重要的分別。

實(shí)時交互可以被認(rèn)為是“直接操縱”，用戶直接、立即與界面對象交互。界面的行為發(fā)生在用戶使用它的時候。非實(shí)時交互發(fā)生在用戶輸入之后，并且在界面過渡完成之前會暫時鎖定用戶。

明確這些區(qū)別為我們奠定了基礎(chǔ)，我們將繼續(xù)探索UX動效中的12項(xiàng)原則。

三、動效提升可用性的四種方式

以下四個方面代表用戶體驗(yàn)中交互行為提升可用性的四種方式。

1. 期望：期望分為兩個方面 – 用戶如何感知對象以及它具有怎樣的行為方式。另一方面，作為設(shè)計(jì)師，我們希望最大限度地縮小用戶期望與他們所體驗(yàn)的內(nèi)容之間的差距。
2. 連續(xù)性：連續(xù)性既代表用戶流程又表示用戶體驗(yàn)的“一致性”。連續(xù)性可以是“內(nèi)部連續(xù)性”場景內(nèi)的連續(xù)性，以及“補(bǔ)間連續(xù)性”構(gòu)成整體用戶體驗(yàn)的一系列場景中的連續(xù)性。
3. 敘事：敘事是用戶體驗(yàn)中事件基于時間/空間框架的線性進(jìn)程?？梢岳斫鉃樨灤┱麄€用戶體驗(yàn)的一系列謹(jǐn)慎的時間和事件。
4. 關(guān)系：關(guān)系是指界面對象之間的空間，時間和層次，用于引導(dǎo)用戶認(rèn)知界面和做出決策。

四、原則、技術(shù)、屬性和值

Tyler Waye老是說，“原則……是潛在的前提和突破技術(shù)功能的準(zhǔn)則，無論任何時候，這些元素都保持一致?！靶枰厣甑氖?，原則與設(shè)計(jì)無關(guān)。

因此，我們可以想象一個層次結(jié)構(gòu)，頂部是原則，下面是技術(shù)，再下面是屬性，底部是值。

1. 技術(shù)：技術(shù)是原則或者原則無限組合的應(yīng)用，我認(rèn)為技術(shù)類似于“模式”。
2. 屬性：屬性是要創(chuàng)建某類型動畫的特定對象參數(shù)，這些包括（并不限于）位置、不透明度、比例、旋轉(zhuǎn)、錨點(diǎn)、顏色、筆畫寬度、形狀等。
3. 值：值是隨時間變化的實(shí)際屬性值，用于創(chuàng)建我們稱之為“動畫”的內(nèi)容。

簡短的總結(jié)一下，我們可以假設(shè)一個遮罩原則，參考了“毛玻璃”技術(shù)，使用模糊和不透明度屬性，值分別是25px和70％的動效。現(xiàn)在我們有了描述動效的工具。但別忘了，任何動效原型都無法準(zhǔn)確獲知這些語言描述。

五、UX動效的12條原則

緩動、偏移和延遲都與時間相關(guān)。父子關(guān)系涉及到對象之間的關(guān)系。變形，值的變化、遮罩、覆蓋和克隆都與對象連續(xù)性有關(guān)；視差與時間層次有關(guān)；蒙層，多維度和鏡頭平移與縮放均與空間連續(xù)性有關(guān)。

原則1：緩動（Easing）

當(dāng)時間事件發(fā)生時，對象行為與用戶期望一致。

所有的界面對象都表現(xiàn)出時間行為（無論是實(shí)時的還是非實(shí)時的）。緩動創(chuàng)建強(qiáng)化了用戶體驗(yàn)中無縫轉(zhuǎn)換的“自然主義”，并在對象按照用戶期望的行為交互時創(chuàng)建連續(xù)性。對了，迪斯尼將此稱之為“緩進(jìn)和緩出”。

線性運(yùn)動（Linear motion）的例子，看起來有點(diǎn)糟糕。最上面的例子有緩動效果（Easing），看起來還不錯。以上三個例子都有確切的幀數(shù)并且在相同的時間內(nèi)發(fā)生。唯一的區(qū)別在于他們是否緩動。

作為關(guān)注可用性的設(shè)計(jì)師，除了美學(xué)之外，我們還需要嚴(yán)謹(jǐn)?shù)淖晕覚z視，那么哪個例子更能提升可用性？

你可以想象一個“緩和的漸變的效果”，超出用戶期望的行為會導(dǎo)致可用性變差。在適當(dāng)緩動的情況下，用戶將運(yùn)動本身視為無縫甚至無法察覺-這是一件好事，因?yàn)樗粫稚⒆⒁饬?。線性運(yùn)動則非常明顯，感受起來好像未完成，不和諧并且會分散注意力。

現(xiàn)在我要推翻前面的話，談?wù)剰椥詣有В‥lastic motion）的例子。動效似乎不夠自然流程。事實(shí)上，它更具有“設(shè)計(jì)”的感覺。我們注意到物體是如何進(jìn)場的。它似乎有些不同，但仍然比線性運(yùn)動的例子感覺更“正確”。

現(xiàn)在你能使用緩動（Easing）來提升（甚至破壞）可用性了嗎？

答案是肯定的，有幾種方法。一種方法是計(jì)時。如果你的時間太慢，或者太快，你可以打破用戶期望并分散他們的注意力。同樣，如果使用的緩動與品牌或整體體驗(yàn)不一致，這也會對用戶期望和無縫體驗(yàn)產(chǎn)生負(fù)面影響。

我希望你利用緩動打開一個充滿機(jī)會的世界。實(shí)際上，作為設(shè)計(jì)師可以在項(xiàng)目中創(chuàng)建和實(shí)施無數(shù)的“緩動”。所有這些緩動都可以與用戶觸發(fā)后獲得的期望相結(jié)合。

總結(jié)一下：何時使用緩動？一直。

原則2：偏移和延遲

在引入新元素和場景時定義對象之間的關(guān)系和層次結(jié)構(gòu)。

偏移和延遲是另一個受迪士尼動畫原理影響的UX動效原則，來自于“動作跟隨和重疊”。然而，需要注意的是，兩者雖然在執(zhí)行效果上類似，但目的和結(jié)果卻有所不同。迪士尼原理著重于創(chuàng)建“更具吸引力的動畫”，但UI動效原則強(qiáng)調(diào)創(chuàng)建好的可用性體驗(yàn)。

在上面的示例中，浮動操作按鈕（FAB）變成由三個按鈕組成的標(biāo)題導(dǎo)航元素。因?yàn)榘粹o在進(jìn)場時間上彼此“偏移”，所以最終通過它們的“分離”提升了可用性。換句話說，設(shè)計(jì)師在用戶操作之前就使用時間偏移來傳達(dá)信息：對象是分離的，完全獨(dú)立于視覺設(shè)計(jì)，十分有效的傳達(dá)了界面對象的某些性質(zhì)。

為了更好地展示它的工作原理，我列舉一個打破偏移和延遲原則的例子。

在上面的例子中，靜態(tài)的視覺頁面表示背景上有圖標(biāo)。我們假設(shè)圖標(biāo)彼此分開且表示不同的事情。但是，動效卻與此矛盾。

在時間上，每行圖標(biāo)被分成一組并且表現(xiàn)一致。它們的標(biāo)題同樣被分在一行，并且行為也一致。動效可以向用戶傳達(dá)眼睛看不到的內(nèi)容。這種情況下，我們可以說界面中對象的時間行為沒有很好的提升可用性。

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

在與多個對象交互時創(chuàng)建空間和時間的層次關(guān)系。

父子關(guān)系是一個強(qiáng)大的表示界面元素關(guān)系的原則，在上面的示例中，頂部的“子”對象的比例和位置屬性都從屬于底部的“父”對象。

父子關(guān)系是對象屬性關(guān)系的連接，通過對象關(guān)系和層次結(jié)構(gòu)來創(chuàng)建可用性。

父子關(guān)系可以使設(shè)計(jì)師更好地協(xié)調(diào)用戶界面中的時間事件，同時向用戶傳達(dá)對象關(guān)系的性質(zhì)。

回想一下，對象屬性包括以下內(nèi)容：比例、不透明度、位置、旋轉(zhuǎn)、形狀、顏色、值等。這些屬性中的任何一個都可以與其他對象的屬性產(chǎn)生關(guān)聯(lián)，從而在用戶體驗(yàn)中共同產(chǎn)生效應(yīng)。

在上面第一個的例子中，表情元素的’y軸’屬性從屬于父級圓形指示器的’x軸’屬性。當(dāng)圓形指示器沿水平軸橫向移動時，“子”元素隨之水平和垂直移動（同時使用了遮罩 – 另一個原則）。

產(chǎn)生的結(jié)果是一個同時進(jìn)行的具有分層時間的敘事框架。值得注意的是，“表情”元素產(chǎn)生了一系列“鎖定”的作用，在每個數(shù)字處，“表情”元素完整的顯現(xiàn)。盡管我們認(rèn)為這個例子中有一個微妙的“可用性欺騙”，但用戶可以無縫體驗(yàn)。

父子關(guān)系最適合展示“實(shí)時”交互。當(dāng)用戶直接操作界面對象時，設(shè)計(jì)者通過動效向用戶傳達(dá)對象之間如何關(guān)聯(lián)以及它們之間的關(guān)系。

父子關(guān)系以3種形式出現(xiàn)：“直接關(guān)系”（參見上面兩個例子，“延遲關(guān)系”和“反向關(guān)系”，見下文）。

延遲父級動畫和反向父級動畫

原則4：變形

當(dāng)對象發(fā)生變化時，創(chuàng)建連續(xù)的敘事流狀態(tài)。

關(guān)于UX動效原則中的變形已有很多文章。在某些方面，它是動畫原理中最明顯和最具穿透力的。

變形非常明顯，因?yàn)樗滞怀?。一個“提交”按鈕改變形狀成為一個圓形進(jìn)度條，最后再次改變形狀成為一個確認(rèn)標(biāo)記，我們很容易注意到。它吸引了我們的注意力，講述了一個故事，到最終完成。

變形的作用是將用戶無縫轉(zhuǎn)換到不同的交互狀態(tài)或視覺（比如這是一個按鈕，這是一個圓形進(jìn)度條，這是一個確認(rèn)標(biāo)記），最終會產(chǎn)生預(yù)期的結(jié)果。用戶被這些功能元素吸引，達(dá)到最終目的。

變形可以將“模塊”中分離的關(guān)鍵時間點(diǎn)轉(zhuǎn)換為無縫且連續(xù)的一系列事件。這種無縫轉(zhuǎn)換可以提高用戶的認(rèn)知，記憶和后續(xù)行為。

原則5：值變化

當(dāng)數(shù)值發(fā)生變化時，創(chuàng)造一種動態(tài)和連續(xù)的敘事關(guān)系。

基于文本的界面對象，即數(shù)字和文本，可以更改其數(shù)值，這是“不易察覺的顯性”概念之一。

文本和數(shù)字的變化十分常見，以至于我們很少留意它們的區(qū)別和嚴(yán)謹(jǐn)?shù)卦u估他們在創(chuàng)建可用性方面的作用。

那么當(dāng)數(shù)值發(fā)生變化時，用戶感受如何？在用戶體驗(yàn)中，UX動效的12條原則是創(chuàng)建可用性的機(jī)會。這里同樣有三個機(jī)會可以將用戶與數(shù)據(jù)背后的真實(shí)環(huán)境，代表的概念以及數(shù)值本身的動態(tài)聯(lián)系起來。我們來看一下用戶儀表盤的例子。

當(dāng)數(shù)值加載而沒有“值變化”時，對用戶來說數(shù)字是靜態(tài)對象，它們就好像路邊展示限速55英里/小時的油漆標(biāo)志。

數(shù)字和值代表真實(shí)環(huán)境中的事物，可能是時間，收入，游戲分?jǐn)?shù)，商業(yè)指標(biāo)，健身追蹤指數(shù)等，我們通過動效來區(qū)分“數(shù)值”是否是動態(tài)的，是一種數(shù)據(jù)集合。

這種關(guān)系不僅會因視覺的靜態(tài)而丟失，我們還會丟失更深層次的關(guān)系。

當(dāng)我們用動態(tài)數(shù)值來表現(xiàn)某種動態(tài)系統(tǒng)時，它會激活“神經(jīng)反饋”。用戶對動態(tài)數(shù)據(jù)具有掌控感，認(rèn)為自己有權(quán)改變數(shù)值。當(dāng)數(shù)值是靜態(tài)時，數(shù)值背后的現(xiàn)實(shí)聯(lián)系減少，用戶失去了掌控感。

值變化原則可以在實(shí)時和非實(shí)時事件中發(fā)生。在實(shí)時事件中，用戶與對象交互更改數(shù)值。在非實(shí)時事件（例如加載器和轉(zhuǎn)換）中，數(shù)值無需用戶輸入自動改變。

原則6：遮罩

設(shè)定某個對象或組的局部狀態(tài)是否顯示或隱藏，創(chuàng)建連續(xù)性。

遮罩可以理解為對象的形狀與其功能之間的關(guān)系。因?yàn)樵O(shè)計(jì)師十分熟悉靜態(tài)界面中的遮罩，所以我們有必要將動效中的遮罩加以區(qū)分，遮罩是一種行為，而不是狀態(tài)。

通過顯示和隱藏對象的區(qū)域，功能以連續(xù)且無縫的方式轉(zhuǎn)換，起到保持?jǐn)⑹铝鞯男Ч?/p>

在上面的示例中，圖像沒有改變，但是通過改變邊界的形狀和位置，變成了專輯的樣子。即改變了對象，同時在遮罩內(nèi)保留了內(nèi)容 – 這是一個相當(dāng)巧妙的技巧。這是一種非實(shí)時的轉(zhuǎn)換，在用戶執(zhí)行操作后激活。

請記住，UI動效原則基于時間，通過連續(xù)性，敘事，關(guān)系和用戶期望來創(chuàng)建可用性。在上面的參考示例中，雖然對象沒有變化，但它的邊界和位置，這兩個因素共同進(jìn)行信息的傳達(dá)。

原則7：覆蓋

當(dāng)分層對象存在位置依賴時，在二維平面中創(chuàng)建敘事和對象的空間關(guān)系。

覆蓋通過在二維平面建立空間層次來創(chuàng)建可用性。

為了顯得平滑自然，設(shè)計(jì)師可以利用動效傳達(dá)非3D空間中存在位置依賴的上下層對象。

在左側(cè)的示例中，前景對象向右滑動顯示出下層對象。在右側(cè)的示例中，整個場景向下滑動顯示出剩余內(nèi)容和選項(xiàng)（同時使用“偏移和延遲”來傳達(dá)照片的屬性）。

作為設(shè)計(jì)師，“圖層”的概念不言自明。我們使用圖層進(jìn)行設(shè)計(jì)，層的概念深入人心。但是，我們必須仔細(xì)區(qū)分“創(chuàng)作”和“使用”。

作為持續(xù)參與“創(chuàng)作”的設(shè)計(jì)師，我們非常熟悉正在設(shè)計(jì)的對象（包括隱藏的部分）。然而，作為用戶，那些視覺和認(rèn)知上隱藏的內(nèi)容需要加以理解和實(shí)踐應(yīng)用。

設(shè)計(jì)師通過覆蓋原則在“z軸”間傳達(dá)信息，使用戶有了空間概念。

原則8：克隆

當(dāng)新的對象產(chǎn)生和消失時，創(chuàng)造連續(xù)性，關(guān)系和敘事。

在當(dāng)前場景（或當(dāng)前對象）中創(chuàng)建新對象時，展示外觀十分重要。在這份宣言中，我論證了通過對象的產(chǎn)生和消失創(chuàng)建敘事框架的重要性。簡單的不透明度漸變往往無法達(dá)到效果。遮罩，克隆和多維度是三種基于可用性的具有強(qiáng)烈敘事效果的手法。

在上面的示例中，當(dāng)用戶的注意力集中在界面上，從現(xiàn)有的對象中產(chǎn)生新對象，視線被引導(dǎo)，這種雙重手法，能夠傳達(dá)強(qiáng)烈、清晰且明確的事件序列感：行為“x”產(chǎn)生了結(jié)果“y”：子對象的產(chǎn)生。

原則9：蒙層

用戶在空間上定位視覺層級中的對象或場景間的關(guān)系。

類似于UX原則中的遮罩，蒙層既是靜態(tài)又是時間行為。

對于那些常常設(shè)計(jì)頁面間或任務(wù)中的轉(zhuǎn)換，沒有短暫思考時間體驗(yàn)的設(shè)計(jì)師，可能會感到困惑。將蒙層視為遮擋的行為，而不是被遮擋的狀態(tài)。靜態(tài)展示被遮擋的狀態(tài)。引入時間會讓我們看到物體被遮擋的行為。

從上面的兩個例子中，我們可以看出，類似透明的蒙層是一種涉及多個屬性的時間相互作用。常見的做法還包括模糊效果和整體透明度的降低，用戶能夠看到操作對象之后的其他內(nèi)容。

設(shè)計(jì)師可在獨(dú)占視圖中使用蒙層來增加附屬信息。

原則10：視差

當(dāng)用戶滾動界面時，在二維平面創(chuàng)建空間層次結(jié)構(gòu)。

UX動效原則中的“視差”展示了以不同速度移動的界面對象。視差使用戶專注于主要操作和內(nèi)容，同時保持設(shè)計(jì)完整性。在視差事件中，背景元素在用戶的感知和認(rèn)知上“后退”，設(shè)計(jì)師可以使用視差將即時內(nèi)容與環(huán)境內(nèi)容或附屬內(nèi)容分開。

對象之間的關(guān)系在交互的持續(xù)時間內(nèi)明確傳達(dá)給用戶，前景對象或“更快”移動的對象對用戶顯示為“更近”。同樣，背景對象或移動“較慢”的對象被視為“更遠(yuǎn)”。

設(shè)計(jì)師使用時間來定義這些關(guān)系，告訴用戶哪些對象具有更高的優(yōu)先級，因此，將背景或非交互元素向后“推”是有意義的。

用戶不僅將界面對象視為視覺設(shè)計(jì)中確定的層次結(jié)構(gòu)，而且利用該層次結(jié)構(gòu)使用戶預(yù)先感受到界面對象的性質(zhì)和屬性。

原則11：多維度

當(dāng)新的對象產(chǎn)生和消失時，創(chuàng)造空間敘事框架。

對用戶體驗(yàn)至關(guān)重要的是連續(xù)性和空間感，多維度能夠消除二維空間內(nèi)用戶體驗(yàn)的非邏輯。

人類非常擅長使用空間框架在現(xiàn)實(shí)世界和數(shù)字體驗(yàn)中進(jìn)行導(dǎo)航。提供空間起點(diǎn)和引導(dǎo)有助于加強(qiáng)用戶的心理模型。另外，多維度原則避免了二維平面中的分層悖論，在缺少深度的同一平面內(nèi)，對象可以出現(xiàn)在其他對象的“前面”或“后面”。

維度以三種方式呈現(xiàn)：折疊維度、浮動維度和對象維度。

折疊維度可以理解為“折疊”或“連接”三維界面對象。

因?yàn)槎鄠€對象被組合成“折疊”結(jié)構(gòu)，所以隱藏的對象在空間上仍然可以說是“存在的”，即使它們不可見。多維度原則有效地傳達(dá)導(dǎo)航間的連續(xù)事件，在交互行為中創(chuàng)建操作的情境。

浮動維度為界面對象提供空間起點(diǎn)和終點(diǎn)，使交互模型具有直觀性和高度敘述性。

在上面的例子中，多維度是通過使用3D卡片實(shí)現(xiàn)的。這是一個強(qiáng)大的視覺設(shè)計(jì)敘事框架，通過“翻轉(zhuǎn)”卡片來擴(kuò)展其他內(nèi)容的訪問性和交互性。

多維度是降低突兀感引入新元素的有效方式；對象維度能夠建立具有真實(shí)深度和形式的對象。

現(xiàn)在多個2D圖層布置在3D空間中以形成真實(shí)的尺寸對象，他們的維度在實(shí)時和非實(shí)時過渡時被展示，對象維度使用戶在不可見的空間位置建立對功能的敏銳認(rèn)知。

原則12：鏡頭平移與縮放

在導(dǎo)航和界面間保持連續(xù)性和空間敘述。

鏡頭平移與縮放是電影概念，指的是相機(jī)周圍物體的移動，圖像本身的大小從長鏡頭到近景鏡頭平滑地變化（反之亦然）。在某些情況下，如果物體在3D空間中朝相機(jī)移動，或者相機(jī)在3D空間中朝物體移動，則無法判斷物體是否變焦（參見下面的參考文獻(xiàn)）。

以下三個示例代表不同情況：

是圖層平移、縮放還是相機(jī)移動？

因此，將“平移”和“縮放”的實(shí)例視為單獨(dú)且相似比較恰當(dāng)，因?yàn)樗鼈兩婕斑B續(xù)元素和視圖轉(zhuǎn)換，并且滿足動效原則中的要求：通過動效創(chuàng)建可用性。

左邊的圖像是平移，而右邊的圖像是縮放

平移是一個電影術(shù)語，適用于靠近或遠(yuǎn)離物體的相機(jī)移動（它也適用于水平“跟蹤”運(yùn)動，但在可用性情境中不太相關(guān)）。

在用戶體驗(yàn)中，這種動效可以指觀察者視角的變化，也可以指對象改變位置時保持靜止的視角。鏡頭平移原則通過連續(xù)和敘事創(chuàng)建可用性，在界面對象和目的之間無縫轉(zhuǎn)換。鏡頭平移還可以結(jié)合多維度原則，產(chǎn)生更多空間體驗(yàn)，甚至向用戶傳達(dá)當(dāng)前視圖“前面”或“后面”的其他內(nèi)容。

縮放指的是透視和對象靜止的事件，對象本身在縮放（或者我們對它的視圖正在減小，導(dǎo)致圖像放大），向觀察者傳達(dá)了界面對象嵌套的信息。

鏡頭平移與縮放可以在實(shí)時與非實(shí)時狀態(tài)下無縫轉(zhuǎn)換來創(chuàng)建可用性，在創(chuàng)建空間心理模型時，此原則非常強(qiáng)大。

如果你看到文章的這里，恭喜你，我希望瀏覽器加載出了所有的GIF，也非常希望你有所收獲，將新知識應(yīng)用在交互項(xiàng)目中。

希望你了解有關(guān)“如何利用動效創(chuàng)建可用性的設(shè)計(jì)工具”的更多信息。

作者：Issara Willenskomer

本文由 @?one點(diǎn)設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議