原文地址：https://medium.com/@ux_in_motion
翻譯校對(duì):小草、風(fēng)清寒
Tips
本文比較長(zhǎng)~~比較干，閱讀時(shí)請(qǐng)耐心
本文值得看三遍！~看三遍！~看三遍！
底部有個(gè)小彩蛋等著大家哦
動(dòng)效有多重要？那是太重要了！如果現(xiàn)在APP沒(méi)有動(dòng)效，你肯定會(huì)感覺(jué)少了點(diǎn)什么，比如最簡(jiǎn)單的加載動(dòng)畫(huà)得有吧。動(dòng)效的重要性在于將交互、視覺(jué)過(guò)渡處理的更加細(xì)膩，而且能夠承載更多的信息，比如iOS動(dòng)效、MD動(dòng)效等（如果iOS動(dòng)畫(huà)不行，我也不會(huì)買(mǎi)蘋(píng)果~~哈哈）。
在過(guò)去的5年里，我的UI動(dòng)畫(huà)教程，很榮幸地指導(dǎo)了40多個(gè)國(guó)家的數(shù)百個(gè)頂級(jí)品牌和設(shè)計(jì)咨詢(xún)公司的UX＆UI設(shè)計(jì)師。他們將這些動(dòng)畫(huà)設(shè)計(jì)原則很好的運(yùn)用到實(shí)踐當(dāng)中，取得了很好的市場(chǎng)反饋。
在過(guò)去的15年里，我一直在研究動(dòng)態(tài)的圖形界面設(shè)計(jì)，將這15年來(lái)的研究成果，凝練出12個(gè)最為重要的動(dòng)效設(shè)計(jì)原則（下文有詳細(xì)闡述），以便更好的用到實(shí)踐項(xiàng)目中去。
我稱(chēng)這些原則是“動(dòng)效十二原則”，它們可以通過(guò)無(wú)數(shù)創(chuàng)新的方式進(jìn)行疊加和組合。
由于內(nèi)容較多，我把文章分為下面這5部分，進(jìn)行深入的闡述：
解決UI動(dòng)畫(huà)的主題 - 不是你想的那樣
實(shí)時(shí)與非實(shí)時(shí)互動(dòng)
動(dòng)效支持可用性的四種方式
原則，技術(shù)，特性和值
UX動(dòng)效的12個(gè)原則
動(dòng)效，并不是全部關(guān)于UI動(dòng)效滴~
可能有的同學(xué)覺(jué)得，動(dòng)效都是用在UI上的，因?yàn)樵诮缑嬖O(shè)計(jì)中關(guān)于動(dòng)效的的一些設(shè)計(jì)常常被設(shè)計(jì)師理解為是一種“UI動(dòng)效”，然而并不是這樣的?！癠I動(dòng)畫(huà)”通常被設(shè)計(jì)師認(rèn)為是增強(qiáng)產(chǎn)品用戶(hù)體驗(yàn)更好的手段，其實(shí)呢，在總體上并沒(méi)有增加其他的一些價(jià)值。 因此，UI動(dòng)畫(huà)通常被視為UX中可有可無(wú)的東西，所以沒(méi)有受到很大重視。
另外呢，有些人把UI設(shè)計(jì)中的動(dòng)效理解為是迪斯尼“動(dòng)畫(huà)原理”的一種，對(duì)此我是很不認(rèn)同的，為此我還發(fā)表過(guò)一篇文章（“UI動(dòng)畫(huà)原理 - 迪士尼已經(jīng)死了”），用來(lái)反駁這種觀點(diǎn)（文章，我們后面再整理下，跟大家放出來(lái)）。
我要闡述的“12個(gè)UX動(dòng)效原理”中的作用，就如同建筑中的結(jié)構(gòu)框架一樣重要。我的意思是，當(dāng)一個(gè)結(jié)構(gòu)需要物理上存在（也就需要構(gòu)建起一個(gè)結(jié)構(gòu)）時(shí)，決定如何構(gòu)建的方法論指導(dǎo)就來(lái)自于某些“原則”。
還有就是，動(dòng)效可能更多的是關(guān)于工具的使用，而原則是指導(dǎo)工具實(shí)際使用的方法。因此，“原則”為設(shè)計(jì)人員提供了很多設(shè)計(jì)方法論方面的指導(dǎo)。
大多數(shù)設(shè)計(jì)師認(rèn)為“UI動(dòng)畫(huà)”實(shí)際上是執(zhí)行更高的設(shè)計(jì)模式，也就是在發(fā)生實(shí)時(shí)和非實(shí)時(shí)事件的時(shí)候發(fā)生的一種銜接行為。下面就說(shuō)說(shuō)這兩者的關(guān)系
實(shí)時(shí)與非實(shí)時(shí)交互的運(yùn)用
在這個(gè)時(shí)候，區(qū)分“靜態(tài)”和“動(dòng)態(tài)”是很重要的。在UI中，某些東西的狀態(tài)基本上是靜態(tài)的，就像設(shè)計(jì)組合一樣。 在UX中的有些東西的行為基本上是動(dòng)態(tài)的，通過(guò)一種動(dòng)效表現(xiàn)出來(lái)。 一個(gè)對(duì)象可能處于被屏蔽的狀態(tài)，也可能是被屏蔽的行為。 如果是后者，我們知道涉及動(dòng)效，并且可以提高可用性。
此外，交互的所有時(shí)間方面都可以被認(rèn)為是實(shí)時(shí)的或非實(shí)時(shí)的。 實(shí)時(shí)意味著用戶(hù)直接與用戶(hù)界面中的對(duì)象進(jìn)行交互。 非實(shí)時(shí)意味著對(duì)象行為是互動(dòng)后的：它是在用戶(hù)操作之后發(fā)生的，并且是過(guò)渡的。
實(shí)時(shí)動(dòng)效
非實(shí)時(shí)動(dòng)效
實(shí)時(shí)交互也可以作為“直接操作”，因?yàn)橛脩?hù)現(xiàn)在正直接與界面對(duì)象進(jìn)行交互。 界面的行為表示用戶(hù)正在使用它。
非實(shí)時(shí)交互僅在用戶(hù)輸入后發(fā)生，并且具有將用戶(hù)短暫地鎖定直到用戶(hù)體驗(yàn)的效果轉(zhuǎn)換完成。
這些區(qū)別我們會(huì)運(yùn)用到“UX的12個(gè)動(dòng)效原則”的當(dāng)中。
提高可用性的四種動(dòng)效方式
這四大支撐性論點(diǎn)代表用戶(hù)體驗(yàn)的時(shí)間行為提高可用性的四種方式。
期望
期望分為兩個(gè)方面 - 用戶(hù)如何看待對(duì)象是什么，以及它的行為。 另一種說(shuō)法是，作為設(shè)計(jì)師，我們希望最大限度地減少用戶(hù)期望的與所經(jīng)歷的之間的差距。
連續(xù)性
連續(xù)性說(shuō)明用戶(hù)流程和用戶(hù)體驗(yàn)的“一致性”。 連續(xù)性可以被認(rèn)為是在“內(nèi)部連續(xù)性” - 場(chǎng)景中的連續(xù)性以及“連續(xù)性”之間 - 構(gòu)成整個(gè)用戶(hù)體驗(yàn)的一系列場(chǎng)景中的連續(xù)性。
敘述
敘述事件線(xiàn)性發(fā)展用戶(hù)體驗(yàn)結(jié)果的時(shí)間/空間框架。這可以被認(rèn)為在整個(gè)用戶(hù)體驗(yàn)中連接在一起的一系列分離的時(shí)間和事件。
關(guān)系
關(guān)系是指引導(dǎo)用戶(hù)理解和決策的界面對(duì)象之間的空間，表示時(shí)間和層次。
原則、技術(shù)、屬性和價(jià)值觀
泰勒·韋恩（Tyler Waye）說(shuō)：“原則...是功能的基礎(chǔ)前提和規(guī)則，產(chǎn)生了許多技術(shù)。 這些要素?zé)o論發(fā)生什么事情要保持一致?！爸貜?fù)一遍，原則與設(shè)計(jì)無(wú)關(guān)。
從那里,我們可以想象一個(gè)層次結(jié)構(gòu)與原理在頂部，,技術(shù)進(jìn)一步下降,在底部下面的屬性,值。
技術(shù)可以被認(rèn)為是不同的和無(wú)限的執(zhí)行原則和/或相結(jié)合的原則。我認(rèn)為技術(shù)是類(lèi)似于“風(fēng)格”。
屬性是用于創(chuàng)建該技術(shù)的特定對(duì)象參數(shù)。 這些（包括但不限于）位置，不透明度，比例，旋轉(zhuǎn)，錨點(diǎn)，顏色，行程寬度，形狀等。
值的實(shí)際數(shù)值屬性值隨著時(shí)間變化，我們稱(chēng)之為“動(dòng)畫(huà)”。
所以這里停一下(超前一點(diǎn)),我們可以說(shuō)一個(gè)假設(shè)的UI動(dòng)畫(huà)引用是使用遮蔽原理和模糊的玻璃的技術(shù)影響的，模糊和不透明屬性值分別25 px和70%。
現(xiàn)在我們有一些工具可以使用。 更重要的是，這些語(yǔ)言工具對(duì)任何具體的原型工具都是不可知的。
UX動(dòng)效的12個(gè)原則
在動(dòng)效設(shè)計(jì)中，緩動(dòng)、偏移、延遲與都與時(shí)間有關(guān)； 繼承關(guān)系到對(duì)象關(guān)系、 轉(zhuǎn)換、數(shù)值變化、蒙層、覆蓋和克隆都與物體連續(xù)性； 視差與時(shí)間層次有關(guān)； 蒙層、維度、移動(dòng)攝影和縮放都與空間連續(xù)性有關(guān)。
原則1：緩動(dòng)
當(dāng)事件在某個(gè)時(shí)間發(fā)生時(shí)，對(duì)象行為與用戶(hù)期望要一致。
表現(xiàn)出按照時(shí)間操作的所有界面對(duì)象（無(wú)論是實(shí)時(shí)還是非實(shí)時(shí)），要緩動(dòng)哦。 緩動(dòng)創(chuàng)造和加強(qiáng)了用戶(hù)體驗(yàn)的無(wú)縫銜接固有的“自然主義”，當(dāng)用戶(hù)期望他們的行為時(shí)，創(chuàng)造出一種連續(xù)感。 順便說(shuō)一下，迪士尼把這個(gè)稱(chēng)為“慢快慢”。
圖一：線(xiàn)性動(dòng)畫(huà)
圖二：彈性動(dòng)畫(huà)
圖一的例子是直線(xiàn)運(yùn)動(dòng)，看起來(lái)不夠順滑，圖二例子動(dòng)作平緩，看起來(lái)還不錯(cuò)，上面的例子都有確切的幀數(shù)，并且在相同的時(shí)間內(nèi)發(fā)生。唯一的區(qū)別在于他們的緩動(dòng)程度。
除了美學(xué)以外，設(shè)計(jì)師還應(yīng)該關(guān)注可用性，我們需要不斷地問(wèn)我們自己，哪個(gè)例子更能支持可用性？
我在這里介紹的這個(gè)例子是一定程度上固定的緩動(dòng)動(dòng)效。你可以想象一個(gè)“緩動(dòng)梯度”，即低于用戶(hù)期望的行為導(dǎo)致能用的交互比較少。在適當(dāng)?shù)木弰?dòng)情況下，用戶(hù)體驗(yàn)運(yùn)動(dòng)本身是看不見(jiàn)的?無(wú)縫銜接-這是一件好事，它并非會(huì)使你分心。直線(xiàn)運(yùn)動(dòng)是明顯的，感覺(jué)有點(diǎn)偏離，好像沒(méi)有完成的感覺(jué)。
在談?wù)撚疫叺睦訒r(shí)我與自己完全矛盾， 動(dòng)效不是無(wú)縫的。 事實(shí)上，它具有“設(shè)計(jì)”的感覺(jué)， 我們注意到物體如何停止，感覺(jué)不一樣，但仍然比線(xiàn)性運(yùn)動(dòng)的例子更好。
你可以采用緩動(dòng)設(shè)計(jì)，還是不支持（或者更壞的情況是破壞）可用性？ 答案是肯定的，有幾種方法。 一種方式是按照時(shí)間來(lái)安排，如果你的時(shí)間太慢或者太快，你可以打破期望并分散用戶(hù)注意力。 同樣，如果緩動(dòng)設(shè)計(jì)與品牌或整體經(jīng)驗(yàn)不一致，這也可能對(duì)用戶(hù)預(yù)期和無(wú)縫銜接產(chǎn)生負(fù)面影響。
我想在打開(kāi)你世界的時(shí)候緩動(dòng)動(dòng)效，當(dāng)談到緩動(dòng)的動(dòng)效理論時(shí)，你作為一個(gè)設(shè)計(jì)師可以運(yùn)用到項(xiàng)目中去。所有這些困難有自己的期望并在用戶(hù)觸發(fā)時(shí)響應(yīng)。
如果你要問(wèn)，何時(shí)使用緩動(dòng)？ 答案是“總是”，緩動(dòng)在動(dòng)效里無(wú)處不在。
原則2：偏移和延遲
在引入新元素和場(chǎng)景時(shí)，定義對(duì)象關(guān)系和層次結(jié)構(gòu)。
第二個(gè)原則偏移和延遲“運(yùn)動(dòng)原理”是受迪斯尼動(dòng)畫(huà)的影響，在這種情況下應(yīng)該是“追隨和重疊動(dòng)作”。
然而，要注意的是，雖然在實(shí)際的運(yùn)用中類(lèi)似，但目的和結(jié)果不同。 雖然“迪斯尼原則”導(dǎo)致“動(dòng)畫(huà)更具吸引力”，但“UI動(dòng)畫(huà)原則”可以提供更多可用的體驗(yàn)。
這個(gè)原則的用途是通過(guò)“告訴”用戶(hù)關(guān)于銜接中對(duì)象性質(zhì)的一些事情，它有意識(shí)的引導(dǎo)用戶(hù)成功設(shè)置。 上述參考文獻(xiàn)中的敘述是前兩個(gè)對(duì)象是統(tǒng)一的，底部對(duì)象是分開(kāi)的。 也許前兩個(gè)對(duì)象可能是非交互式圖像和文本，而底部對(duì)象是一個(gè)按鈕。
即使在用戶(hù)注冊(cè)了這些對(duì)象之前，設(shè)計(jì)人員已經(jīng)通過(guò)動(dòng)效通知了用戶(hù)對(duì)象在某種程度上是“分離的”，這是非常強(qiáng)大的。
為了更好地展示這是如何運(yùn)作的，如下展示一個(gè)錯(cuò)誤的偏移和延遲原理的示例。
在上面的例子中，靜態(tài)視覺(jué)設(shè)計(jì)告訴我們，背景上有圖標(biāo)。 假設(shè)這些圖標(biāo)是彼此分開(kāi)的，并且做不同的事情。 不過(guò)，這個(gè)動(dòng)效是矛盾的。
時(shí)間上，圖標(biāo)被分組成行，并且像單個(gè)對(duì)象一樣。 他們的標(biāo)題同樣被分組成行，也表現(xiàn)得像一個(gè)單一的對(duì)象。 這個(gè)動(dòng)效告訴用戶(hù)，除了她的眼睛所看到的東西以外。 在這種情況下，我們可以說(shuō)銜接的對(duì)象過(guò)渡不支持可用性。
原則3：繼承關(guān)系
與多個(gè)對(duì)象交互時(shí)，創(chuàng)建空間和時(shí)間的層次。
繼承關(guān)系是在用戶(hù)界面中“關(guān)聯(lián)”對(duì)象的重要原則。 在上面的例子中，頂部'子'對(duì)象的'縮放'和'位置'屬性被父對(duì)象作為底部'父'對(duì)象的'位置'屬性。
繼承關(guān)系是將對(duì)象的屬性與其他對(duì)象的屬性的鏈接。 這將以支持可用性的方式創(chuàng)建對(duì)象關(guān)系和層次結(jié)構(gòu)。
繼承關(guān)系還允許設(shè)計(jì)師更好地協(xié)調(diào)用戶(hù)界面中的時(shí)間事件，同時(shí)向用戶(hù)傳達(dá)對(duì)象關(guān)系的性質(zhì)。
回想一下，對(duì)象屬性包括以下 - 縮放、不透明度、位置、旋轉(zhuǎn)、形狀、顏色，值等。這些屬性可以與任何其他屬性創(chuàng)建同一時(shí)間的用戶(hù)體驗(yàn)。
在上面左邊的例子中，'臉'元素的'y軸'屬性是父對(duì)象圓指示符'x軸'屬性的'子'。 當(dāng)圓形指示元素沿著水平軸移動(dòng)時(shí)，其“子”元素隨水平和垂直移動(dòng)（同時(shí)被屏蔽 - 另一原則）。
結(jié)果是同時(shí)發(fā)生的等級(jí)時(shí)間敘事框架。 值得注意的是，因?yàn)椤澳槨睂?duì)象作為一系列“鎖定”，在每個(gè)數(shù)字上，“臉”完整可見(jiàn)而不是部分可見(jiàn)。 用戶(hù)完整地體驗(yàn)到這一點(diǎn)，盡管我們可以在這個(gè)例子中提出一個(gè)微妙的“可用性欺騙”理論。
繼承關(guān)系功能最好作為“實(shí)時(shí)”互動(dòng)。 當(dāng)用戶(hù)直接操作界面對(duì)象時(shí)，設(shè)計(jì)者通過(guò)動(dòng)效告知用戶(hù) - 如何鏈接對(duì)象以及它們之間的關(guān)系。
父子關(guān)系發(fā)生在三種形式：“直接發(fā)生父子關(guān)系”（見(jiàn)上文兩個(gè)例子，“延遲父子”和“子反養(yǎng)父”，見(jiàn)以下示例）。
原則4：變形
當(dāng)對(duì)象的使用狀態(tài)改變時(shí)，創(chuàng)建一個(gè)連續(xù)的過(guò)渡效果。
在“運(yùn)動(dòng)原理”的變形中，已經(jīng)有很多關(guān)于用戶(hù)體驗(yàn)的內(nèi)容，在某些方面，它是動(dòng)效原理中最明顯和最為透徹的。
轉(zhuǎn)型是最明顯的，主要是因?yàn)樗摲f而出。 我們注意到，一個(gè)“提交”按鈕改變形狀成為徑向進(jìn)度條，最后再次改變形狀，成為確認(rèn)復(fù)選標(biāo)記。 它抓住了我們的注意力，講述了一個(gè)故事，并已經(jīng)完成了。
變形是用戶(hù)通過(guò)不同的用戶(hù)體驗(yàn)狀態(tài)完美地轉(zhuǎn)換或'是'（因?yàn)檫@是一個(gè)按鈕，這是一個(gè)徑向進(jìn)度條，這是一個(gè)復(fù)選標(biāo)記），最終出現(xiàn)用戶(hù)期望的結(jié)果。 用戶(hù)已經(jīng)通過(guò)這些功能空間到達(dá)最終目的地。
變形關(guān)鍵時(shí)刻具有將用戶(hù)體驗(yàn)中的“分塊”分離成一個(gè)完美連接的一系列事件。 這種完美性具有更好的用戶(hù)意識(shí)，保留和跟蹤。
原則5：數(shù)值變化
當(dāng)數(shù)值得主體發(fā)生變化時(shí)，創(chuàng)造動(dòng)態(tài)和連續(xù)的敘事關(guān)系。
基于文本的界面對(duì)象，也就是數(shù)字和文本，可以更改其值。 這是“難以捉摸的明顯的”概念之一。
文本和數(shù)字變化很常見(jiàn)，以至于通過(guò)我們的區(qū)別和嚴(yán)謹(jǐn)來(lái)評(píng)估它們?cè)谔嵘脩?hù)體驗(yàn)方面的作用
那么當(dāng)數(shù)值變化時(shí)，用戶(hù)能體驗(yàn)到什么？ 在用戶(hù)體驗(yàn)中，UX中的12個(gè)動(dòng)效原則是有提升用戶(hù)體驗(yàn)的時(shí)機(jī)的。這里的三個(gè)時(shí)機(jī)是連接用戶(hù)背后的真實(shí)數(shù)據(jù),代理的概念,和數(shù)值本身的動(dòng)態(tài)特性。
我們來(lái)看一個(gè)用戶(hù)信息界面的例子。
圖一：靜態(tài)數(shù)值
圖二：動(dòng)態(tài)數(shù)值
當(dāng)用戶(hù)界面的數(shù)值沒(méi)有更改時(shí)，傳達(dá)給用戶(hù)的是數(shù)字是靜態(tài)對(duì)象。 它們就像畫(huà)面上顯示的速度55/MPH一樣。
數(shù)字和數(shù)值是現(xiàn)實(shí)中發(fā)生的事情的代表。 這個(gè)現(xiàn)實(shí)可能是時(shí)間、收入、游戲分?jǐn)?shù)、業(yè)務(wù)指標(biāo)、健身跟蹤等。我們通過(guò)動(dòng)效區(qū)分的是“值主體”是動(dòng)態(tài)的，值反映了動(dòng)態(tài)的值的集合。
這種關(guān)系不僅是沒(méi)有了視覺(jué)上包含值的靜態(tài)對(duì)象，而且也沒(méi)有了表達(dá)另一個(gè)更深層次意思的機(jī)會(huì)。
當(dāng)我們以動(dòng)效為基礎(chǔ)的值形式表現(xiàn)時(shí)，它激活了一種“神經(jīng)反饋”。用戶(hù)掌握其數(shù)據(jù)的動(dòng)態(tài)性質(zhì)，導(dǎo)致現(xiàn)在可以改變這些值，并有權(quán)成為代理。 當(dāng)這些值是靜態(tài)的時(shí)候，與值背后的現(xiàn)實(shí)有很少的聯(lián)系，而用戶(hù)失去了代理。
值變化原則可以在實(shí)時(shí)和非實(shí)時(shí)事件中發(fā)生。 在實(shí)時(shí)事件中，用戶(hù)正在與對(duì)象交互以改變值。 在非實(shí)時(shí)事件（如加載器和轉(zhuǎn)換）中，值將隨著用戶(hù)輸入而改變，以反映動(dòng)態(tài)敘述。
原則6：遮罩
當(dāng)確定實(shí)用程序的對(duì)象或組的哪個(gè)部分被顯示或隱藏時(shí)，在界面中創(chuàng)建連續(xù)性動(dòng)效。
屏蔽詢(xún)問(wèn)的操作，可以被認(rèn)為是對(duì)象的形狀和它的實(shí)用性之間的關(guān)系。
因?yàn)樵O(shè)計(jì)師熟悉靜態(tài)設(shè)計(jì)背景下的“遮罩”，所以我們需要將用戶(hù)體驗(yàn)中的動(dòng)效原理“遮罩”區(qū)分，作為一種行為而不是一種狀態(tài)。
通過(guò)臨時(shí)在對(duì)象區(qū)域揭示和隱藏，界面以連續(xù)和完美的方式轉(zhuǎn)換。 這也具有保存連續(xù)過(guò)渡的效果。
在上述示例中，標(biāo)題圖像改變了邊界的形狀和位置，而不是內(nèi)容，并且變成了專(zhuān)輯。 這具有改變對(duì)象為什么效果，同時(shí)又保留了所需要的內(nèi)容 - 一個(gè)相當(dāng)完美的技巧。 這種情況發(fā)生在非實(shí)時(shí)（作為轉(zhuǎn)換），在用戶(hù)操作后激活。
記住，UI動(dòng)效原理在時(shí)間上發(fā)生，并通過(guò)連續(xù)性，敘述，關(guān)系和期望來(lái)提高可用性。 在上述參考文獻(xiàn)中，雖然對(duì)象本身保持不變，但它也具有邊界和位置，這兩個(gè)因素決定了對(duì)象是什么。
原則7：覆蓋
當(dāng)分層對(duì)象位置在一起時(shí)，在視覺(jué)平面，創(chuàng)建過(guò)渡和對(duì)象空間關(guān)系。
疊加通過(guò)讓用戶(hù)利用界面排序的屬性來(lái)克服缺乏非空間層次結(jié)構(gòu)來(lái)提升用戶(hù)體驗(yàn)。
為了界面能夠平滑的進(jìn)入，疊加允許設(shè)計(jì)師使用動(dòng)效來(lái)表達(dá)非3D空間中的對(duì)象位置在其他人之前或背后。
在左側(cè)的示例中，前景對(duì)象向右滑動(dòng)以顯示背后對(duì)象的位置。 在右側(cè)的示例中，整個(gè)場(chǎng)景向下滑動(dòng)以顯示其他內(nèi)容和選項(xiàng)（同時(shí)使用偏移和延遲原理來(lái)傳達(dá)照片對(duì)象的個(gè)性）。
在一定程度上，作為設(shè)計(jì)師，“層”的想法很明確，不言而喻。 我們用層次設(shè)計(jì)，層次的概念深深地理解。 但是，我們必須在做的過(guò)程中小心使用。
作為一直從事“制作”過(guò)程的設(shè)計(jì)師，我們非常熟悉正在設(shè)計(jì)的所有對(duì)象（包括隱藏的部分）。 然而，作為用戶(hù)，這些不可見(jiàn)的部分是通過(guò)定義和實(shí)踐，隱藏在視覺(jué)和認(rèn)知上。
疊加原則允許設(shè)計(jì)師在“z軸”定位層之間傳達(dá)關(guān)系，并在這樣做時(shí)，向用戶(hù)表示空間方向。
原則8：克隆
當(dāng)新的物體出現(xiàn)和離開(kāi)時(shí)，創(chuàng)造連續(xù)性、關(guān)系和過(guò)渡。
在當(dāng)前場(chǎng)景（和當(dāng)前對(duì)象）中創(chuàng)建新對(duì)象時(shí)，重要的是敘述它們的外觀。 在這個(gè)理論中，我強(qiáng)烈主張建立一個(gè)對(duì)象出現(xiàn)和離開(kāi)的敘事框架的重要性。 簡(jiǎn)單的不透明度漸變往往不能達(dá)到這個(gè)結(jié)果。 遮罩，復(fù)制和維度是三種產(chǎn)生強(qiáng)烈敘述基于用戶(hù)體驗(yàn)的方法。
在上述三個(gè)示例中，在用戶(hù)注意力集中在這些對(duì)象的時(shí)間內(nèi)，從主要對(duì)象創(chuàng)建新對(duì)象。 這種雙重方法 - 引導(dǎo)注意力，然后引導(dǎo)視線(xiàn)創(chuàng)建一個(gè)復(fù)制的新對(duì)象 - 具有準(zhǔn)確傳達(dá)和明確連續(xù)時(shí)間敘述的強(qiáng)大影響：此操作”X“包含創(chuàng)建的新對(duì)象”Y“
原則9：蒙層
允許用戶(hù)在空間上定位與自己不在主視覺(jué)層次結(jié)構(gòu)中的對(duì)象或場(chǎng)景的關(guān)系。
與“動(dòng)效原理”中的用戶(hù)體驗(yàn)類(lèi)似，蒙層作為靜態(tài)和暫時(shí)的現(xiàn)象都是放在一起的。
對(duì)于那些沒(méi)有時(shí)間思考的設(shè)計(jì)師，也就是片刻之間，這可能令人困惑。 設(shè)計(jì)師通常將界面設(shè)計(jì)為界面或完成任務(wù)。 認(rèn)為蒙層是被遮擋的行為，而不是被遮擋的狀態(tài)。 靜態(tài)設(shè)計(jì)表示被蒙層的狀態(tài)。 引入時(shí)間給了我們一個(gè)對(duì)象被蒙層的行為。
從上面的兩個(gè)例子中，我們可以看到，看起來(lái)像透明對(duì)象或疊加層的遮蔽也是一個(gè)涉及多個(gè)屬性的時(shí)間交互。
各種常見(jiàn)的技術(shù)包括模糊效果和降低整體對(duì)象的透明度。 用戶(hù)知道還有一個(gè)額外的非主要背景，如果她操作就會(huì)知道還有另一個(gè)她想要看見(jiàn)的主要對(duì)象層次結(jié)構(gòu)。
遮蔽允許設(shè)計(jì)師在用戶(hù)體驗(yàn)中補(bǔ)充一個(gè)統(tǒng)一的視圖或“客觀視圖”。
原則10 :視差
當(dāng)用戶(hù)滾動(dòng)時(shí)，在視覺(jué)中創(chuàng)建空間層次結(jié)構(gòu)。
視差，作為動(dòng)效原理中的用戶(hù)體驗(yàn)，描述了以不同速率移動(dòng)的不同銜接對(duì)象。視差允許用戶(hù)關(guān)注主要操作和內(nèi)容，同時(shí)保持設(shè)計(jì)的完整性。在視差事件中，背景元素“消退”和對(duì)用戶(hù)認(rèn)識(shí)界面動(dòng)效的過(guò)程。設(shè)計(jì)人員可以利用視差從環(huán)境中分離出即時(shí)性?xún)?nèi)容或使內(nèi)容完整。
這對(duì)用戶(hù)的影響,是要清楚地定義交互的持續(xù)時(shí)間、各種對(duì)象關(guān)系。前面對(duì)象或向用戶(hù)顯示“更快”的對(duì)象。類(lèi)似地,移動(dòng)‘較慢’的背景對(duì)象或?qū)ο蟊徽J(rèn)為是“進(jìn)一步的”。
設(shè)計(jì)師可以利用時(shí)間本身創(chuàng)建這些關(guān)系,告訴用戶(hù)界面中的哪些對(duì)象具有更高的優(yōu)先級(jí)。因此,進(jìn)一步出現(xiàn)背景或非交互元素是有意義的.
用戶(hù)不僅將銜接對(duì)象視為現(xiàn)在具有層次結(jié)構(gòu)之外的層次結(jié)構(gòu),而且還可以利用這種層次結(jié)構(gòu)使用戶(hù)在有意識(shí)地了解設(shè)計(jì)/內(nèi)容之前掌握用戶(hù)體驗(yàn)的本質(zhì)。
原則11：維度
當(dāng)新對(duì)象出現(xiàn)和離開(kāi)時(shí)，提供空間敘述框架。
用戶(hù)體驗(yàn)至關(guān)重要的是連續(xù)性和位置感。維度提供了一種有效的方式來(lái)克服用戶(hù)體驗(yàn)中的非邏輯的平面。人類(lèi)非常擅長(zhǎng)使用空間框架在現(xiàn)實(shí)世界和數(shù)字體驗(yàn)中進(jìn)行導(dǎo)航。空間起點(diǎn)和離開(kāi)有助于加強(qiáng)用戶(hù)在UX中的位置的心理模型，為用戶(hù)提供參考。
另外，維度原理克服了視覺(jué)平面中的分層悖論，其中不存在深度的物體存在于同一平面上，而是發(fā)生在“其他物體的前面或后面”。維度呈現(xiàn)出三種方式 - 折紙維度、浮動(dòng)維度和對(duì)象維度。折紙維度可以考慮“折疊”或“鉸接”三維銜接對(duì)象。
折紙維度示例（來(lái)源：Eddie Lobanovskiy，Virgil Pana）
因?yàn)槎鄠€(gè)對(duì)象被組合成“折紙”結(jié)構(gòu)，所以隱藏的對(duì)象仍然可以被稱(chēng)為“存在”，即使看不到它們。這有效地將用戶(hù)體驗(yàn)呈現(xiàn)為用戶(hù)在交互模型本身以及界面對(duì)象本身的時(shí)間行為中導(dǎo)航和創(chuàng)建操作上下文的連續(xù)空間事件。
浮動(dòng)維度為界面對(duì)象提供了一個(gè)空間進(jìn)入和離開(kāi)，使得交互模型的敘述直觀而準(zhǔn)確。
浮動(dòng)維度示例（來(lái)源：維吉爾·帕納）
在上面的例子中，維度是通過(guò)使用3D翻轉(zhuǎn)實(shí)現(xiàn)的。這提供了強(qiáng)大的敘事框架，支持視覺(jué)設(shè)計(jì)。通過(guò)“翻轉(zhuǎn)”卡訪(fǎng)問(wèn)附加內(nèi)容和交互性來(lái)擴(kuò)展敘述。維度可以是以突然最小化的方式引入新元素的方法。
對(duì)象維度使對(duì)象在維度轉(zhuǎn)換中具有真正的深度和形式。
對(duì)象維度的例子（Credit：Issara Willenskomer，Creativedash）
這里，在3D空間中布置多個(gè)2D層以形成真實(shí)的維度對(duì)象。它們的維度在實(shí)時(shí)和非實(shí)時(shí)過(guò)渡時(shí)被展開(kāi)。對(duì)象維度的實(shí)用性是用戶(hù)根據(jù)看不到的空間位置開(kāi)發(fā)敏銳的對(duì)象實(shí)用意識(shí)。
原則12：移動(dòng)攝影和縮放
在導(dǎo)航界面的對(duì)象空間中，用于保持連續(xù)性和空間過(guò)渡轉(zhuǎn)換。
移動(dòng)攝影和變焦是指涉及與攝影機(jī)相關(guān)的物體運(yùn)動(dòng)的電影概念，并且?guī)袌D像本身的維度從長(zhǎng)鏡頭順利地變化到近景（或反之亦然）。
在某些情況下，如果物體在3D空間中朝向攝影機(jī)移動(dòng)，或者如果攝影機(jī)正在3D空間中朝向物體移動(dòng)，則不可能判斷物體是否變焦。以下三個(gè)例子說(shuō)明了可能的情況：
圖層是否變形，放大或攝影機(jī)移動(dòng)？
因此，將“攝影機(jī)”和“縮放”作為單獨(dú)的實(shí)例，但類(lèi)似的處理是適當(dāng)?shù)?，因?yàn)樗鼈兩婕斑B續(xù)元素和元素轉(zhuǎn)換，并且滿(mǎn)足動(dòng)效原理中UX的要求：它們通過(guò)動(dòng)效提升用戶(hù)體驗(yàn)。
左側(cè)的兩個(gè)圖像正在移動(dòng)，而右側(cè)的圖像正在縮放
移動(dòng)攝影是電影術(shù)語(yǔ)，適用于攝影機(jī)運(yùn)動(dòng)遠(yuǎn)離或靠近一個(gè)拍攝目標(biāo)（它也適用于水平“跟蹤”運(yùn)動(dòng)，但在用戶(hù)體驗(yàn)環(huán)境中較不相關(guān)）。
示例：蘋(píng)果
空間在UX中，這種運(yùn)動(dòng)既是可以指向觀察者視角的變化，或者靜態(tài)對(duì)象更改位置。移動(dòng)攝影原則通過(guò)連續(xù)性和敘述，在銜接對(duì)象和目的地之間的無(wú)縫銜接來(lái)提升用戶(hù)體驗(yàn)。
移動(dòng)攝影還可以納入維度原則，從而產(chǎn)生更多的空間體驗(yàn)，更深入的內(nèi)容，并向用戶(hù)傳達(dá)當(dāng)前視圖中“前方”或“后面”的其他區(qū)域或內(nèi)容。
縮放是指視角和對(duì)象都不在空間上移動(dòng)的事件，而是對(duì)象本身在縮放（或者我們的視圖正在減少，導(dǎo)致圖像放大）。這向觀察者傳達(dá)了附加的銜接對(duì)象在其他對(duì)象或場(chǎng)景內(nèi)部。
示例：蘋(píng)果
這允許無(wú)縫轉(zhuǎn)換，實(shí)時(shí)和非實(shí)時(shí)支提升用戶(hù)體驗(yàn)。移動(dòng)攝影＆變焦原理中使用的這種完美銜接在創(chuàng)建空間心理模型方面是相當(dāng)強(qiáng)大的。
正文到此結(jié)束。
-彩蛋時(shí)刻到啦-
聯(lián)系客服
