作者網(wǎng)址：Issara Willenskomer
原文地址：Creating Usability with Motion: The UX in Motion Manifesto
譯者：mantfly
此文由非專(zhuān)業(yè)人士翻譯自Medium，仍在不斷修訂中。如有錯(cuò)誤，歡迎指正。
下面的文章回答了這個(gè)問(wèn)題——“作為一個(gè)視覺(jué)或者交互設(shè)計(jì)師，何時(shí)何地能讓動(dòng)效提供可用性?！?/p>
過(guò)去五年，我十分榮幸可以通過(guò)我的UI動(dòng)畫(huà)教程訓(xùn)練和指導(dǎo)來(lái)自40多個(gè)國(guó)家數(shù)百個(gè)頂尖品牌和設(shè)計(jì)咨詢公司的視覺(jué)和交互設(shè)計(jì)師。
在15年用戶界面的動(dòng)效研究中，我總結(jié)出在交互設(shè)計(jì)的項(xiàng)目中用動(dòng)效提供可用性的12個(gè)具體因素。
我把這12個(gè)因素叫做“交互動(dòng)效的12個(gè)原理”并且他們可以以各種創(chuàng)新的方式疊加合并。
我把文章分為5個(gè)部分：
1、定位 UI 動(dòng)效的核心——不是通常認(rèn)為的
2、實(shí)時(shí)和非實(shí)時(shí)交互
3、4個(gè)讓動(dòng)效提供可用性的方法
4、原理、技巧、屬性和值
5、交互動(dòng)效中的12個(gè)原理
（中間引導(dǎo)略）
這與UI動(dòng)效無(wú)關(guān)
設(shè)計(jì)師普遍認(rèn)為的界面上的動(dòng)效是UI 動(dòng)效，然而并不是，我認(rèn)為需要在介紹12條原理前必須交代一下環(huán)境。
設(shè)計(jì)師認(rèn)為“UI 動(dòng)效”的典型之處是讓用戶體驗(yàn)更愉悅，但總的來(lái)說(shuō)缺少價(jià)值。因此，UI動(dòng)效像是UX的后續(xù)。要用的話，通常是最終的一步。
在我的指南中，我認(rèn)為UI動(dòng)效對(duì)于12個(gè)交互動(dòng)效原理就像是建筑的骨架。
當(dāng)一個(gè)骨架需要實(shí)際建造出來(lái)，建造出來(lái)的指南來(lái)自建域的原理。
動(dòng)效都是關(guān)于工具。原理是指導(dǎo)工具使用想法的實(shí)際應(yīng)用，提供給設(shè)計(jì)師機(jī)會(huì)優(yōu)勢(shì)。
大多數(shù)設(shè)計(jì)師認(rèn)為UI動(dòng)效是一種更高階的設(shè)計(jì)形態(tài)：界面對(duì)象從靜態(tài)到動(dòng)態(tài)的時(shí)間行為。
實(shí)時(shí)和非實(shí)時(shí)交互
這里關(guān)鍵是，區(qū)分狀態(tài)和行為非常重要。交互中的狀態(tài)最基本是靜態(tài)，比如設(shè)計(jì)排版。交互中的行為最基本是時(shí)間且基于動(dòng)效。一個(gè)對(duì)象可以是某種狀態(tài)或者行為。如果是后者，我們知道動(dòng)效起到實(shí)用性。
另外，所有的交互在時(shí)間上可以是實(shí)時(shí)也可以是非實(shí)時(shí)的。實(shí)時(shí)意味著用戶可以在界面直接與對(duì)象交互。非實(shí)時(shí)意味著對(duì)象行為是滯后的：發(fā)生在用戶行為之后變化。
這是非常重要的區(qū)別。
實(shí)時(shí)交互也可以認(rèn)為是“直接操作”，用戶與界面交互直接而快速。界面行為在用戶使用時(shí)發(fā)生。
非實(shí)時(shí)交互發(fā)生在用戶輸入之后，即刻鎖定用戶的用戶體驗(yàn)直到轉(zhuǎn)變完成。
在繼續(xù)認(rèn)識(shí)交互動(dòng)效12個(gè)原理的時(shí)候，認(rèn)識(shí)到這些區(qū)別是有好處的。
動(dòng)效的可用性的四種方式
這四個(gè)要點(diǎn)表明了用戶體驗(yàn)的時(shí)間行為提供可用性的四種方式。
預(yù)期
預(yù)期分為兩個(gè)部分——用戶如何認(rèn)知對(duì)象的存在和行為。換種說(shuō)法，作為設(shè)計(jì)師，我們想最小化用戶的期待和用戶體驗(yàn)之間的差距。
連續(xù)
連續(xù)表示用戶流程和用戶體驗(yàn)的一致性。連續(xù)可以是在某一個(gè)場(chǎng)景內(nèi)部的連續(xù)性，也可以是組成整個(gè)用戶體驗(yàn)的一系列場(chǎng)景之間的連續(xù)性。
流程
流程是在用戶體驗(yàn)從時(shí)間\空間的框架之下事件的線性流程。這可以將整個(gè)用戶體驗(yàn)過(guò)程中將一系列離散的時(shí)刻和事件連接起來(lái)。
關(guān)系
關(guān)系是指界面對(duì)象之間的時(shí)間、空間和層次表現(xiàn)，引導(dǎo)用戶理解和決策。
原理、方法、屬性和值
Tyler Waye說(shuō)“原理是……功能的基本前提和規(guī)則，從中產(chǎn)生大量的技巧。無(wú)論發(fā)生了什么這些原理都保持不變?！彼粩嘀貜?fù)，原理與設(shè)計(jì)無(wú)關(guān)。
從這里，我們可以想出一個(gè)層次結(jié)構(gòu)，原理在最頂層，方法下一層，屬性再下一層，值在最底層。
方法可以認(rèn)為是各種無(wú)限制的原理的執(zhí)行或者結(jié)合。我認(rèn)為方法跟風(fēng)格類(lèi)似。
屬性是可以活用來(lái)創(chuàng)造技巧的具體對(duì)象的參數(shù)。這些包括（不僅僅）位置、透明度、比例、旋轉(zhuǎn)、角度、顏色、描邊寬度、形狀等等。
值是屬性的實(shí)際數(shù)值，它可以隨時(shí)間變化來(lái)建立我們所說(shuō)的“動(dòng)畫(huà)”。
所以要飛機(jī)降落（超前一點(diǎn)），我們可以說(shuō)一個(gè)虛擬的UI動(dòng)畫(huà)參考是用遮蔽原理，方法是“模糊玻璃”，屬性是模糊度和透明度，數(shù)值分別是25px和70%。
目前我們可以使用一些工具。更重要的是，這些語(yǔ)言工具與任何特定的原型工具無(wú)關(guān)。
交互動(dòng)效中的12個(gè)原理
緩動(dòng)、偏移和延遲是關(guān)于時(shí)間。
父級(jí)是關(guān)于對(duì)象關(guān)系。
變換、改變值、蒙板、疊加和克隆是關(guān)于對(duì)象連續(xù)性。
?視差是關(guān)于時(shí)間層次。
遮擋、維度、移動(dòng)和縮放是關(guān)于空間的連續(xù)性。
原理1：緩動(dòng)
當(dāng)時(shí)間事件發(fā)生時(shí)，對(duì)象的行為符合用戶預(yù)期。
所有的界面對(duì)象展現(xiàn)了時(shí)間行為（無(wú)論實(shí)時(shí)或非實(shí)時(shí)），緩動(dòng)。緩動(dòng)創(chuàng)造且加強(qiáng)了固有的人性化流暢的用戶體驗(yàn)，并且創(chuàng)造一種對(duì)象與用戶所預(yù)期的一致時(shí)的連續(xù)性。順便說(shuō)下，迪士尼把這稱為“緩入緩出”。
這里第一個(gè)例子有線性運(yùn)動(dòng)，看起來(lái)很糟糕。最上面那個(gè)粒子有緩動(dòng)，看起來(lái)很不錯(cuò)。上面三個(gè)例子都有確切的幀數(shù)且發(fā)生在相同的時(shí)間內(nèi)。唯一不同的是他們的緩動(dòng)效果。
設(shè)計(jì)師關(guān)心的是可用性，我們需要嚴(yán)謹(jǐn)，問(wèn)自己，除去美學(xué)，哪個(gè)例子更支持可用性？
我要表明的是某種程度的設(shè)計(jì)在緩動(dòng)中是固有的。你可以想象一個(gè)緩動(dòng)梯度，其中超出用戶期望的行為可導(dǎo)致交互的可用性減少。適當(dāng)?shù)木弰?dòng)動(dòng)效讓用戶隱形使用動(dòng)效本身——不會(huì)使用戶分心。線性動(dòng)效在視覺(jué)上感受明顯、分散、未完成、突兀且分散注意。
現(xiàn)在我將完全推翻自己并討論一下第二個(gè)例子。這個(gè)動(dòng)效并不連續(xù)。實(shí)際上，有種刻意的感覺(jué)。我們注意到對(duì)象是如何到達(dá)的。這感覺(jué)很不同，但這仍然感覺(jué)比線性動(dòng)效更“正確”。
在運(yùn)用緩動(dòng)的同時(shí)能否讓它違背（或者更糟糕的是破壞）可用性？答案是能，有很多種方法。一種是速度。如果速度太慢（借用自Pasquele）或太快，你可以打破用戶期望，分散用戶注意力。類(lèi)似的，如果你的緩動(dòng)效果與品牌或者整個(gè)體驗(yàn)不一致的話，這也會(huì)對(duì)用戶期望和流暢性有消極影響。
我想說(shuō)的是涉及到緩動(dòng)動(dòng)效的場(chǎng)景有很多。作為設(shè)計(jì)師你可以創(chuàng)造無(wú)限多的“緩動(dòng)”并且執(zhí)行到你的項(xiàng)目中。所有的這些緩動(dòng)能夠在用戶那里觸發(fā)所預(yù)期的回應(yīng)。
總的來(lái)說(shuō)：什么時(shí)候用緩動(dòng)？一直。
在我的緩動(dòng)假說(shuō)文章中你可以了解更多：可用性和線性動(dòng)效的另類(lèi)說(shuō)。
原理2：偏移和延遲
介紹新的元素和場(chǎng)景時(shí)要定義對(duì)象關(guān)系和層級(jí)。
偏移和延遲是唯二的受迪士尼動(dòng)效原則影響的第二個(gè)交互動(dòng)效原理，從這里看“跟進(jìn)和重疊的行為”。
然而，重要的是要注意在實(shí)現(xiàn)的時(shí)候，雖然過(guò)程相似，目的和結(jié)果卻不同。迪士尼的動(dòng)畫(huà)原則是為了更吸引人，UI動(dòng)效原則是為了更有用的體驗(yàn)。
這個(gè)原則的作用是他事前有意識(shí)地告訴用戶界面中對(duì)象的本質(zhì)。上面的給到的參考圖的流程是上面兩個(gè)對(duì)象連接在一起而與下面的對(duì)象分開(kāi)。也許上面兩個(gè)對(duì)象是非交互式的圖像和文本而下面的對(duì)象是一個(gè)按鈕。
在用戶意識(shí)到這些對(duì)象是什么之前，設(shè)計(jì)師已經(jīng)告訴他們，這個(gè)動(dòng)效表明對(duì)象是分開(kāi)的。這個(gè)很強(qiáng)大。
在上面的例子中， 浮動(dòng)按鈕（FAB）轉(zhuǎn)變成了頂部導(dǎo)航元素，包含了三個(gè)按鈕。由于按鈕暫時(shí)是分離的，他們分開(kāi)是可用的。換一種說(shuō)法，設(shè)計(jì)師用時(shí)間告訴用戶——在用戶注意到對(duì)象之前，對(duì)象就是分離的。這對(duì)用戶的影響，完全獨(dú)立于視覺(jué)設(shè)計(jì)，是界面中對(duì)象的本質(zhì)。
為了更好地展現(xiàn)它如何起作用，我會(huì)展現(xiàn)給你打破偏移&延遲原理的例子。
上面的例子中，靜態(tài)的視覺(jué)設(shè)計(jì)告訴我們背景上有很多圖標(biāo)。可以知道這些圖標(biāo)互相分離并且表示不同的事物。然而，動(dòng)效卻與之矛盾。
現(xiàn)在是，圖標(biāo)分為幾行，每行一個(gè)對(duì)象。文字也分為幾行，每行也像是一個(gè)對(duì)象。這個(gè)動(dòng)效告訴用戶的東西并不是用戶看到的。在這個(gè)例子中，我們可以說(shuō)這些對(duì)象在界面中的時(shí)間行為不提供可用性。
原理3：父級(jí)
在處理一繁復(fù)的對(duì)象時(shí)，可以創(chuàng)造空間和時(shí)間層級(jí)關(guān)系。
父級(jí)是一個(gè)很強(qiáng)力的原理，可以將界面中的對(duì)象聯(lián)系起來(lái)。在上面的例子中，上一個(gè)對(duì)象（或者說(shuō)子級(jí)對(duì)象）的縮放和位置屬性與下面的對(duì)象（或者說(shuō)父級(jí)對(duì)象）綁定在一起。
父級(jí)是對(duì)象與對(duì)象的連接。這種創(chuàng)造對(duì)象關(guān)系和層級(jí)的方法提供可用性。
父級(jí)也可以讓設(shè)計(jì)師更好調(diào)整用戶界面中的時(shí)間事件，同時(shí)給用戶傳達(dá)對(duì)象關(guān)系的本質(zhì)。
回想下對(duì)象屬性包括下面這些——縮放、透明度、位置、旋轉(zhuǎn)、形狀、顏色、值等等。任何屬性都可以與其他屬性連接創(chuàng)造出的界面中的協(xié)同時(shí)刻。
上面第一個(gè)例子，人臉的y軸屬性是下面的圓形指示標(biāo)的子級(jí)。當(dāng)圓形指示標(biāo)在水平軸上移動(dòng)時(shí)，它的子元素跟著它水平且垂直移動(dòng)（用蒙版——另一個(gè)原理）。
結(jié)果是一個(gè)時(shí)間層次上的流程框架同時(shí)發(fā)生。值得注意的是對(duì)象的“臉”像一系列的“鎖”，“臉”是完整的但不是部分可見(jiàn)，用戶可以流暢體驗(yàn)，即使我們可以在其中發(fā)現(xiàn)有一個(gè)微妙的可用性騙局。
父級(jí)作為實(shí)時(shí)的交互來(lái)用是最好的。當(dāng) 用戶對(duì)對(duì)象直接操作時(shí)，設(shè)計(jì)師可以通過(guò)動(dòng)效與用戶交流——對(duì)象如何連接以及他們之間的關(guān)系。
父級(jí)以三種形式出現(xiàn)：“直接連接”（看上面兩個(gè)例子），“延遲連接”和“反向連接”（看下面）。
原理4：轉(zhuǎn)變
當(dāng)對(duì)象作用變化時(shí)，創(chuàng)造一個(gè)連續(xù)狀態(tài)的流程圖。
上面已經(jīng)寫(xiě)到很多關(guān)于動(dòng)效原則“轉(zhuǎn)變”中的交互。在某些方面，它是最顯然和透徹的動(dòng)效原則。
轉(zhuǎn)變是最易識(shí)別最主要的因?yàn)樗茱@眼。一個(gè)提交按鈕變化形狀成為了一個(gè)圓形進(jìn)度條最后又變形成一個(gè)對(duì)勾，這我們注意到了。它吸引我們注意，講述一個(gè)故事并完成。
轉(zhuǎn)變?cè)诓煌慕换顟B(tài)中流暢轉(zhuǎn)化用戶思維或者是（比如這是一個(gè)按鈕，這是一個(gè)圓形進(jìn)度條，這是一個(gè)對(duì)勾），最終導(dǎo)致一個(gè)預(yù)期的結(jié)果。用戶通過(guò)這些功能空間吸引而到達(dá)目的地。
轉(zhuǎn)變將用戶體驗(yàn)認(rèn)知不同的關(guān)鍵時(shí)刻轉(zhuǎn)變成流暢的連續(xù)的一系列事件。這里的流暢性使用戶更好的意識(shí)、保留和跟進(jìn)。
原則5：數(shù)值變化
當(dāng)數(shù)值主體變化時(shí)創(chuàng)建一個(gè)動(dòng)態(tài)的連續(xù)流程關(guān)系。
文本是界面對(duì)象的基礎(chǔ)，那就是說(shuō)數(shù)字和文本可以改變他們的值。這是難以捉摸的概念之一。
文本和數(shù)字的改變很常見(jiàn)，所以我們常常忽略去評(píng)估他們?cè)谔峁┛捎眯陨系慕巧?/p>
當(dāng)數(shù)值變化的時(shí)候用戶體驗(yàn)到什么？在用戶體驗(yàn)中，12個(gè)交互動(dòng)效原則是提供可用性的因素。這里的三個(gè)因素將用戶與現(xiàn)實(shí)連接：數(shù)據(jù)、代理概念和數(shù)值的自然動(dòng)態(tài)變化。
我們看看一個(gè)用戶的儀表例子。
當(dāng)界面對(duì)象的數(shù)值出現(xiàn)時(shí)沒(méi)有數(shù)值變化，那么這個(gè)傳達(dá)給用戶的是這個(gè)數(shù)字是靜態(tài)對(duì)象。他們就像畫(huà)上的標(biāo)志顯示限速55公里每小時(shí)。
數(shù)字和值代表了真實(shí)正發(fā)生的事情?？梢允菚r(shí)間、收入、游戲分?jǐn)?shù)、業(yè)務(wù)指標(biāo)、健身追蹤等等。我們區(qū)分動(dòng)效就是看數(shù)值主體是動(dòng)態(tài)的并且數(shù)值可以從動(dòng)態(tài)數(shù)值中反映一些東西。
不僅僅這個(gè)關(guān)系流失了靜態(tài)對(duì)象的靜態(tài)數(shù)值?，另一個(gè)更深層次的因素也丟失了。
當(dāng)我們以基礎(chǔ)動(dòng)態(tài)數(shù)值的形式采用動(dòng)態(tài)系統(tǒng)，它會(huì)觸發(fā)一種“神經(jīng)反饋”。用戶掌握了動(dòng)態(tài)數(shù)據(jù)之后便會(huì)改變這些值并授權(quán)成為管理者。當(dāng)這些值是靜態(tài)的，那么這些數(shù)值背后與現(xiàn)實(shí)聯(lián)系更少，用戶便會(huì)失去管理權(quán)。
數(shù)值變化原則可以是實(shí)時(shí)或非實(shí)時(shí)事件。在實(shí)時(shí)事件中，用戶可以與對(duì)象交互改變數(shù)值。在非實(shí)時(shí)事件中，比如說(shuō)加載和轉(zhuǎn)場(chǎng)，在沒(méi)有用戶輸入時(shí)數(shù)值同樣可以變化反映一個(gè)動(dòng)態(tài)的流程。
原則6：蒙板
當(dāng)可用性體現(xiàn)在部分對(duì)象、組合顯示或者隱藏，界面對(duì)象或?qū)ο蠼M創(chuàng)建連續(xù)性。
蒙版的行為可以體現(xiàn)對(duì)象的形狀和作用之間關(guān)系。
由于設(shè)計(jì)師在靜態(tài)設(shè)計(jì)的環(huán)境中對(duì)蒙版很熟悉，有必要區(qū)分一下交互動(dòng)效原則中的蒙版，它隨時(shí)間發(fā)生，作為一個(gè)動(dòng)作而不是一個(gè)狀態(tài)。
通過(guò)展現(xiàn)和遮蔽對(duì)象的區(qū)域，以一種連續(xù)無(wú)縫的方式轉(zhuǎn)變。它也有保留敘事流的效果。
上面的例子中，頭部的圖像改變了形狀和位置但沒(méi)有改變內(nèi)容，變成了一個(gè)專(zhuān)輯。這改變了對(duì)象本身，而蒙版中保留了內(nèi)容——一個(gè)簡(jiǎn)潔的技巧。這個(gè)轉(zhuǎn)變是非實(shí)時(shí)的，在用戶操作之后激活。
記住，UI動(dòng)效原則在時(shí)間上發(fā)生并通過(guò)連續(xù)性、流程、關(guān)系和期望提供可用性。在上面的引用中，雖然對(duì)象本身保持不變，但它也有邊界和位置，這兩個(gè)因素決定了對(duì)象是什么。
原則7：覆蓋
當(dāng)分層對(duì)象依賴位置，在可視化平面中創(chuàng)建流程和對(duì)象空間關(guān)系。
覆蓋通過(guò)允許用戶利用面的順序來(lái)克服空間層次的缺失。
覆蓋允許設(shè)計(jì)師使用動(dòng)效來(lái)傳達(dá)在對(duì)象前后的位置關(guān)系。
第一個(gè)例子，上層對(duì)象滑到右邊展現(xiàn)額外的下層對(duì)象。右邊的例子，整個(gè)場(chǎng)景下滑展現(xiàn)了額外的內(nèi)容和選項(xiàng)（同時(shí)使用了偏移和延遲來(lái)區(qū)分圖片對(duì)象）
某種程度上，作為一個(gè)設(shè)計(jì)師，圖層的概念如此明確不言而喻。我們根據(jù)圖層來(lái)設(shè)計(jì)，圖層的概念已經(jīng)根深蒂固。然而，我們必須區(qū)分“做”和“用”的過(guò)程。
作為設(shè)計(jì)師不斷地“做”設(shè)計(jì)，我們非常熟悉我們?cè)O(shè)計(jì)的對(duì)象的各個(gè)部分（包括隱藏的部分）。然而作為用戶，這些不可見(jiàn)的部分是定義和實(shí)踐，隱藏了表面和深層次的理解。
疊加原理允許設(shè)計(jì)師通過(guò)z軸方向的圖層位置來(lái)建立聯(lián)系，給用戶提供空間。
原理8：克隆
當(dāng)新對(duì)象產(chǎn)生和分離，創(chuàng)建連續(xù)性、關(guān)系和流程。
在當(dāng)前場(chǎng)景（從當(dāng)前對(duì)象）創(chuàng)建新對(duì)象時(shí)，說(shuō)明他們的外觀很重要。在這篇文章中，我認(rèn)為創(chuàng)建一個(gè)對(duì)象流程圖表示起始和分離非常重要。簡(jiǎn)單的透明度變化褪色并不能實(shí)現(xiàn)。遮蓋、克隆和維度這三個(gè)基本的方法能產(chǎn)生強(qiáng)大的效果。
在上面三個(gè)例子中，當(dāng)用戶注意力集中在主對(duì)象中，新對(duì)象從中產(chǎn)生。這兩個(gè)部分相交——然后將我們的注意力轉(zhuǎn)移到新的克隆對(duì)象——對(duì)于傳達(dá)一系列清晰的事件有很大影響：行為x給結(jié)果y一個(gè)新的子對(duì)象。
原理9：遮蔽
允許用戶空間上定位關(guān)不在主視覺(jué)層次結(jié)構(gòu)中的對(duì)象或場(chǎng)景。
和蒙版的原理相似，遮蔽有靜態(tài)和動(dòng)態(tài)兩種存在方式。這讓沒(méi)有經(jīng)驗(yàn)的設(shè)計(jì)師很疑惑——時(shí)刻之間的時(shí)刻。設(shè)計(jì)師通常做的是從屏幕到屏幕或者從任務(wù)到任務(wù)的設(shè)計(jì)。把遮蔽想成是一種行為而不是狀態(tài)。一個(gè)靜態(tài)設(shè)計(jì)代表被遮蔽的狀態(tài)。引入時(shí)間概念告訴我們我們一個(gè)對(duì)象被遮蔽的行為。
從上面兩個(gè)例子來(lái)看，我們發(fā)現(xiàn)遮蔽像是虛化對(duì)象或者覆蓋，也是一個(gè)涉及多個(gè)屬性的時(shí)間交互。
各種常見(jiàn)技術(shù)涉及模糊效果和減少整體對(duì)象的透明度。用戶可以意識(shí)到他操作的對(duì)象，在主要對(duì)象下面的。
設(shè)計(jì)師利用模糊彌補(bǔ)一個(gè)簡(jiǎn)單的統(tǒng)一視角或者對(duì)象視角。
原理10：視差
當(dāng)用戶滾動(dòng)的頁(yè)面的時(shí)候在視覺(jué)上創(chuàng)建空間層次。
視差作為交互原理描述了不同的界面對(duì)象以不同速率移動(dòng)。
視差讓用戶專(zhuān)注主要操作和內(nèi)容同時(shí)保持設(shè)計(jì)的完整性。在一個(gè)視差事件中，背景元素在視覺(jué)上和認(rèn)知上“消退”。設(shè)計(jì)師可以用視差區(qū)分直接內(nèi)容與外部或支持性內(nèi)容。
這對(duì)用戶的影響是明確定義交互的持續(xù)時(shí)間和各種對(duì)象關(guān)系。前景對(duì)象或者移動(dòng)更快的對(duì)象對(duì)用戶來(lái)說(shuō)更近。同樣，后景對(duì)象或者移動(dòng)較慢的對(duì)象更遠(yuǎn)。
設(shè)計(jì)師可以創(chuàng)建這些關(guān)系，利用時(shí)間告訴用戶哪些對(duì)象在界面中優(yōu)先級(jí)更高。因此有必要將背景或者無(wú)交互元素推地更遠(yuǎn)。
用戶感知到界面對(duì)象在視覺(jué)設(shè)計(jì)之上有更高的層級(jí)，同時(shí)這個(gè)層級(jí)可以讓用戶在意識(shí)到設(shè)計(jì)/內(nèi)容之前掌握到用戶體驗(yàn)的性質(zhì)。
原理11：維度
當(dāng)新對(duì)象產(chǎn)生和分離時(shí)，提供一個(gè)空間敘事框架。
用戶體驗(yàn)的關(guān)鍵是連續(xù)的現(xiàn)象以及方位的感知。
維度提供了一個(gè)強(qiáng)大的方式來(lái)克服平面化的非邏輯的用戶體驗(yàn)。
人們非常善于利用空間框架在現(xiàn)實(shí)世界和數(shù)碼世界中通行。提供空間起點(diǎn)和分離參照有助于加強(qiáng)用戶在交互中的心理模型。
此外，維度原理解決了在視覺(jué)平面上的圖層悖論：對(duì)象沒(méi)有厚度而存在在同一個(gè)平面上卻會(huì)出現(xiàn)在其他對(duì)象的前后。
維度以三種方式存在——折疊維度、浮層維度和對(duì)象維度。
折疊維度可以認(rèn)為是依靠折疊或者鏈接三個(gè)維度的界面對(duì)象。
由于復(fù)雜的對(duì)象合并到折疊結(jié)構(gòu)中，隱藏的對(duì)象可以說(shuō)是存在的，在空間上他們是可見(jiàn)的。這個(gè)有效地將用戶體驗(yàn)呈現(xiàn)為一個(gè)連續(xù)的空間事件，用戶不僅在交互模型中而且在界面對(duì)象的時(shí)間行為中指引和創(chuàng)建一個(gè)操作環(huán)境。
浮層維度給界面對(duì)象一個(gè)空間的起始和分離，使交互模型直觀而明了。
在上面的例子中，維度實(shí)現(xiàn)通過(guò)使用3D卡片。這個(gè)提供了一個(gè)強(qiáng)有力的流程框架來(lái)支撐視覺(jué)設(shè)計(jì)。流程通過(guò)翻轉(zhuǎn)卡片獲得額外的內(nèi)容和交互得以擴(kuò)展。維度是一個(gè)引入新元素同時(shí)減少突兀的很強(qiáng)大的方式。
對(duì)象維度使得有真實(shí)厚度和形式的對(duì)象空間化。
這里，多個(gè)二維圖層排列在三維空間中形成真實(shí)的空間對(duì)象。他們的維度顯示在實(shí)時(shí)和非實(shí)時(shí)的過(guò)渡時(shí)刻。對(duì)象維度的實(shí)用性是用戶對(duì)對(duì)象建立起敏銳的感知基于無(wú)形的空間位置。
原理12：推拉和縮放
當(dāng)操作界面對(duì)象和空間時(shí)保持連續(xù)性和空間敘事。
推拉和縮放是電影術(shù)語(yǔ)表示對(duì)象和相機(jī)之間的相對(duì)運(yùn)動(dòng)，圖像本身在框中的大小從遠(yuǎn)到進(jìn)緩慢變化（反之亦然）。
在特定的環(huán)境中，很難說(shuō)一個(gè)對(duì)象是否縮放，如果它在3D空間里向攝像機(jī)移動(dòng)，或者如果攝像機(jī)向物體移動(dòng)（看下面的例子）。下面三個(gè)例子描繪了可能的場(chǎng)景。
因此，推進(jìn)和縮放雖然相似但有區(qū)分，在涉及到連續(xù)的元素和場(chǎng)景變換，或者滿足交互要求的動(dòng)效原理：他們通過(guò)動(dòng)效提供可用性。
推進(jìn)是一個(gè)電影術(shù)語(yǔ)，用于相機(jī)相對(duì)或者遠(yuǎn)離一個(gè)物體的運(yùn)動(dòng)（也用于水平跟蹤運(yùn)動(dòng)，但是在實(shí)際環(huán)境中不太相關(guān)）。
用戶體驗(yàn)中的空間，這種運(yùn)動(dòng)既可以指用戶視角的改變或者視角沒(méi)變而是對(duì)象改變了位置。推近的原理通過(guò)連續(xù)性和可用性的敘述提供可用性，界面對(duì)象和終點(diǎn)之間無(wú)縫過(guò)渡。推進(jìn)可以結(jié)合維度原理創(chuàng)建更有空間和厚度的體驗(yàn)，在當(dāng)前界面的前后給用戶傳達(dá)額外的范圍和內(nèi)容。
縮放指的不是視角或者對(duì)象空間移動(dòng)，而是對(duì)象本身的縮放（或者我們的視野變小導(dǎo)致圖片變大）。這個(gè)告訴用戶額外的界面對(duì)象在其他對(duì)象或場(chǎng)景 內(nèi)部。
這是無(wú)縫轉(zhuǎn)變——包括實(shí)時(shí)和非實(shí)時(shí)——提供可用性。當(dāng)創(chuàng)建空間的精神上的模型，無(wú)縫性的推進(jìn)和縮放原理的會(huì)相當(dāng)強(qiáng)大。
如果你讀到這里，恭喜你！這是一篇粗暴的指南。我希望所有的gif加載后不會(huì)讓你的瀏覽器崩潰。我也希望你們能獲得一些價(jià)值和一些新的工具并且運(yùn)用到你的交互項(xiàng)目中。
我鼓勵(lì)你們學(xué)習(xí)更多關(guān)于如何開(kāi)始使用動(dòng)效作為設(shè)計(jì)工具去提供可用性。
（宣傳略）
作者網(wǎng)址：Issara Willenskomer
原文地址：Creating Usability with Motion: The UX in Motion Manifesto
