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

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

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

我把宣言分成了五個(gè)部分：

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

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

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

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

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

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

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

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

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

這是一個(gè)很重要的分別。

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

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

三、動(dòng)效提升可用性的四種方式

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

期望：期望分為兩個(gè)方面 – 用戶如何感知對(duì)象以及它具有怎樣的行為方式。另一方面，作為設(shè)計(jì)師，我們希望最大限度地縮小用戶期望與他們所體驗(yàn)的內(nèi)容之間的差距。 連續(xù)性：連續(xù)性既代表用戶流程又表示用戶體驗(yàn)的"一致性"。連續(xù)性可以是"內(nèi)部連續(xù)性"場(chǎng)景內(nèi)的連續(xù)性，以及"補(bǔ)間連續(xù)性"構(gòu)成整體用戶體驗(yàn)的一系列場(chǎng)景中的連續(xù)性。 敘事：敘事是用戶體驗(yàn)中事件基于時(shí)間/空間框架的線性進(jìn)程。可以理解為貫穿整個(gè)用戶體驗(yàn)的一系列謹(jǐn)慎的時(shí)間和事件。 關(guān)系：關(guān)系是指界面對(duì)象之間的空間，時(shí)間和層次，用于引導(dǎo)用戶認(rèn)知界面和做出決策。 四、原則、技術(shù)、屬性和值

Tyler Waye老是說，"原則……是潛在的前提和突破技術(shù)功能的準(zhǔn)則，無論任何時(shí)候，這些元素都保持一致。"需要重申的是，原則與設(shè)計(jì)無關(guān)。

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

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

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

五、UX動(dòng)效的12條原則

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

原則1：緩動(dòng)（Easing）

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

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

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

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

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

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

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

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

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

總結(jié)一下：何時(shí)使用緩動(dòng)？一直。

原則2：偏移和延遲

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

延遲父級(jí)動(dòng)畫和反向父級(jí)動(dòng)畫

原則4：變形

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

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

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

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

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

原則5：值變化

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

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

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

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

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

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

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

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

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

原則6：遮罩

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

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

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

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

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

原則7：覆蓋

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

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

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

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

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

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

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

原則8：克隆

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

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

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

原則9：蒙層

用戶在空間上定位視覺層級(jí)中的對(duì)象或場(chǎng)景間的關(guān)系。

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

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

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

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

原則10：視差

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

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

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

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

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

原則11：多維度

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

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

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

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

折疊維度可以理解為"折疊"或"連接"三維界面對(duì)象。

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

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

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

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

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

原則12：鏡頭平移與縮放

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

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

以下三個(gè)示例代表不同情況：

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

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

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

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

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

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

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

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

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

作者：Issara Willenskomer