作為一名用戶體驗(yàn)設(shè)計(jì)師/視覺設(shè)計(jì)師，知道如何在什么場(chǎng)景和時(shí)間下運(yùn)用動(dòng)效來提高可用性？

下面的一些原則就是我對(duì)這個(gè)問題的回答。過去五年里，我有幸通過我的UI動(dòng)畫講座和教程來指導(dǎo)40多個(gè)國家的UX和UI設(shè)計(jì)師，以及數(shù)百家頂級(jí)品牌和設(shè)計(jì)咨詢公司。

在UI設(shè)計(jì)領(lǐng)域經(jīng)過了15年的學(xué)習(xí)及工作后，我得出了12條動(dòng)效設(shè)計(jì)法則來提升移動(dòng)應(yīng)用的用戶體驗(yàn)！ 并將它們進(jìn)行創(chuàng)新型的疊加及組合~

我將這些法則分為四個(gè)部分

一、實(shí)時(shí)與非實(shí)時(shí)的交互

二、通過動(dòng)效提升產(chǎn)品體驗(yàn)的四個(gè)方面

三、原則、技術(shù)、性質(zhì)和價(jià)值觀

四、用戶體驗(yàn)的12項(xiàng)動(dòng)效設(shè)計(jì)原則

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

區(qū)分"狀態(tài)"和"行為"是很重要的，某些東西的狀態(tài)是靜止的，就像設(shè)計(jì)稿；某些東西是基于時(shí)間動(dòng)態(tài)的。另外，所有的交互可分為實(shí)時(shí)的或非實(shí)時(shí)的，實(shí)時(shí)意味著用戶直接與用戶界面中的對(duì)象進(jìn)行交互。非實(shí)時(shí)意味著對(duì)象行為是后交互式的，他發(fā)生在操作之后，并且是過渡性的。

實(shí)時(shí)交互也被稱為是“直接操作”，因?yàn)橛脩糁苯雍徒缑鎸?duì)象進(jìn)行交互

非實(shí)時(shí)交互僅在來自用戶的輸入之后發(fā)生，并具有在當(dāng)前界面展示直至整個(gè)過程完成

二、動(dòng)效提高易用性的四種方式

這四個(gè)模塊代表了提高易用性的四項(xiàng)用戶體驗(yàn)設(shè)計(jì)方法

期待

期待分為兩個(gè)部分，用戶如何看待這個(gè)對(duì)象是什么，以及是如何呈現(xiàn)的。另外一個(gè)方式是作為一個(gè)設(shè)計(jì)師我們應(yīng)該盡量減小用戶期待的內(nèi)容與他們體驗(yàn)之間的差距。

連續(xù)性

連續(xù)性說明了用戶流程和用戶體驗(yàn)的的“一致性”。連續(xù)性可以被認(rèn)為是內(nèi)部連續(xù)性-場(chǎng)景內(nèi)的連續(xù)性-構(gòu)成總體用戶體驗(yàn)的一系列場(chǎng)景中的連續(xù)性。

敘述

敘述是用戶體驗(yàn)中導(dǎo)致時(shí)間和框架事件的線性發(fā)展，還可以被認(rèn)為是在整個(gè)用戶體驗(yàn)中連接一起的一系列事件。

關(guān)系

關(guān)系指的是界面對(duì)象之間的空間，時(shí)間和層次表示，以指導(dǎo)用戶的理解和決策。

三、原則、技術(shù)、性質(zhì)和價(jià)值觀

頂部原則、技術(shù)更深入、下面的屬性和底部的價(jià)值。

技術(shù)是原則/原則的組合的各種無限制的執(zhí)行。

屬性是創(chuàng)建動(dòng)畫的特定對(duì)象參數(shù)，這些包括（但不限于）位置、不透明度、比例、旋轉(zhuǎn)、錨點(diǎn)、顏色、筆畫寬度、形狀。

值是實(shí)際的數(shù)值屬性值，隨著時(shí)間的推移而變化，以創(chuàng)建我們所說的動(dòng)畫。

四、動(dòng)效設(shè)計(jì)的12原則

緩動(dòng)、抵消延遲和時(shí)間有關(guān)，轉(zhuǎn)換、價(jià)值變化、蒙版、覆蓋和克隆都與物體的連續(xù)性相關(guān)。視差與事件相關(guān)。

原則1：緩動(dòng)

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

所有呈現(xiàn)時(shí)間行為(無論實(shí)時(shí)還是非實(shí)時(shí))的界面交互都很容易，緩動(dòng)創(chuàng)造并強(qiáng)化了用戶體驗(yàn)無縫連接所固有的"自然屬性"，并按照用戶期望的行為方式形成一個(gè)連續(xù)流暢的交互體驗(yàn)，稱之為"慢進(jìn)緩出"

上邊線性運(yùn)動(dòng)的動(dòng)效交互，是比較糟糕的體驗(yàn)。頂部的第一個(gè)緩動(dòng)動(dòng)效例子，看起來很好。以上所有三個(gè)例子都有確切的幀數(shù)，并且在相同的時(shí)間內(nèi)完成。唯一的區(qū)別在于他們的緩動(dòng)方式。

作為提升產(chǎn)品易用性體驗(yàn)的設(shè)計(jì)師，除了視覺外，我們還需要關(guān)注全鏈路用戶體驗(yàn)，哪個(gè)方式能提升更多可用性？

其中行為超出用戶期望的行為會(huì)導(dǎo)致可用性較差的用戶體驗(yàn)。在適當(dāng)緩動(dòng)方式下，用戶可以體驗(yàn)到動(dòng)作本身的無縫且基本不可見 - 這是一件好事，因?yàn)樗粫?huì)分散注意力。直線運(yùn)動(dòng)顯然是明顯的，感覺不知何故，未完成，分散注意力？

緩動(dòng)動(dòng)效方式在用戶體驗(yàn)中經(jīng)常使用。

原則2:?偏移和延遲

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

這個(gè)原則的實(shí)用性在于，它通過“告訴”用戶關(guān)于界面中對(duì)象的性質(zhì)的事情，預(yù)先設(shè)定了用戶成功的起因。上述參考文獻(xiàn)中的敘述是，頂部兩個(gè)物體是聯(lián)合的，底部物體是分開的。也許前兩個(gè)對(duì)象可能是一個(gè)非交互式圖像和文本，而底部對(duì)象是一個(gè)按鈕。

甚至在用戶了解這些物體之前，設(shè)計(jì)師已經(jīng)通過她的通過運(yùn)動(dòng)傳達(dá)了物體在某種程度上是“分離的”，這是非常強(qiáng)大的。

在上面的例子中，浮動(dòng)動(dòng)作按鈕（FAB）轉(zhuǎn)換成由三個(gè)按鈕組成的標(biāo)題導(dǎo)航元素。 因?yàn)榘粹o在時(shí)間上交錯(cuò)呈現(xiàn)，所以它們最終通過有步驟的呈現(xiàn)來體現(xiàn)交互邏輯。換言之，設(shè)計(jì)師使用時(shí)間自己說 - 即使在用戶了解之前 - 交互是分開的。 這具有告訴用戶完全獨(dú)立于視覺設(shè)計(jì)的一部分界面中對(duì)象的本質(zhì)。

為了更好地向您展示這是如何工作的，我將向您展示一個(gè)打破偏移和延遲原理的示例。

在上面的例子中，靜態(tài)視覺設(shè)計(jì)告訴我們背景上有圖標(biāo)。 推測(cè)是這些圖標(biāo)都是相互分離的， 但是，這個(gè)動(dòng)效與此相矛盾。

在時(shí)間上，圖標(biāo)被分組成行并且表現(xiàn)得像一個(gè)單獨(dú)的對(duì)象。 它們的標(biāo)題同樣分組成行，并且也表現(xiàn)得像一個(gè)單一的對(duì)象。 ?在這種情況下，我們可以說這種動(dòng)效是違背了用戶體驗(yàn)。

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

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

父子關(guān)系是一種強(qiáng)大的原則，可以在用戶界面中“關(guān)聯(lián)”對(duì)象。在上面的例子中，上面子對(duì)象的“縮放”和“位置”和下面的父對(duì)象的“位置”屬性相關(guān)聯(lián)；父子關(guān)系是對(duì)象屬性和其他對(duì)象屬性的鏈接，以易用性創(chuàng)建對(duì)象關(guān)系和層次結(jié)構(gòu)。

在上面第一個(gè)例子中，Y軸屬性表情(子)隨著X軸數(shù)值(父)變化而變化；其結(jié)果是一個(gè)同時(shí)發(fā)生的層級(jí)式交互框架；父子關(guān)系最適合作為“實(shí)時(shí)”互動(dòng)表達(dá)方式，設(shè)計(jì)師通過動(dòng)效向用戶傳達(dá)對(duì)象如何鏈接以及他們之間的關(guān)系。父子關(guān)系有三種形式：“直接父子關(guān)系”(參考上面兩個(gè)例子，“延遲父子關(guān)系”和“反父子關(guān)系”)

原則四：變換

當(dāng)對(duì)象變換時(shí)，創(chuàng)建一個(gè)連續(xù)的動(dòng)效過程。

在用戶體驗(yàn)中，動(dòng)效原理“變換”已經(jīng)有大量的文章，變換屬性動(dòng)效是非常明顯的；“提交”按鈕變換成徑向進(jìn)度條，并最終從形狀轉(zhuǎn)化為確認(rèn)按鈕。整個(gè)交互過程一氣呵成，完整講述了一個(gè)故事～

“變換”是通過不同的用戶體驗(yàn)狀態(tài)或者“是”（無論是否為按鈕，還是一個(gè)徑向進(jìn)度條，還是確認(rèn)標(biāo)記）無縫地傳達(dá)給用戶，給予用戶期望達(dá)到的效果。用戶已經(jīng)通過這些功能完成了他的目的。變換具有“分模塊”的效果，在用戶體驗(yàn)中的幾個(gè)關(guān)鍵認(rèn)知點(diǎn)分離并形成完美無縫連接的動(dòng)畫。這種無縫銜接的用戶體驗(yàn)提高了用戶的認(rèn)知、時(shí)間上的連貫性。

原則5:?數(shù)值變化

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

基于數(shù)字和文本的界面，在設(shè)計(jì)中很常見；以至于我們沒有嚴(yán)格區(qū)分以提升整體用戶體驗(yàn)，那么，當(dāng)數(shù)值發(fā)生變化時(shí)，用戶會(huì)感知什么？在用戶體驗(yàn)中，12項(xiàng)設(shè)計(jì)原則用于提升整體產(chǎn)品的易用性及體驗(yàn)；這里應(yīng)該將用戶及數(shù)據(jù)背后的真實(shí)情況、設(shè)計(jì)理念、數(shù)值變化三者聯(lián)系起來~

我們看看下面的dashboard的例子。

當(dāng)界面中的數(shù)值沒有變化時(shí)，傳達(dá)給用戶的這些數(shù)字是靜態(tài)對(duì)象，他們就像顯示55英里每小時(shí)的速度極限的彩繪標(biāo)志。

數(shù)字和價(jià)值是現(xiàn)實(shí)中發(fā)生的事物的表征，這種現(xiàn)實(shí)可能是時(shí)間、收入、游戲成績、商業(yè)指標(biāo)、健身數(shù)據(jù)等等，我們通過動(dòng)態(tài)的動(dòng)畫區(qū)分“數(shù)值”是動(dòng)態(tài)的，數(shù)值反映了動(dòng)態(tài)價(jià)值集合的某些東西。

當(dāng)我們基于動(dòng)效的價(jià)值形式來表示動(dòng)態(tài)數(shù)值時(shí)，它激活了一種“神經(jīng)反饋”，用戶可以通過掌控?cái)?shù)據(jù)的動(dòng)態(tài)特性來改變這些值，并為自己所用，當(dāng)這些數(shù)值時(shí)靜態(tài)的，這些數(shù)值與其他的聯(lián)系就會(huì)減少，并且用戶對(duì)他是失控的。

原則6:?蒙版

當(dāng)app中的某個(gè)模塊顯示或者隱藏，在界面交互中使用蒙版的方法表現(xiàn)交互的連續(xù)性。

由于設(shè)計(jì)師對(duì)于靜態(tài)設(shè)計(jì)中的蒙版很熟悉，因此我們應(yīng)該將蒙版動(dòng)效中的體驗(yàn)設(shè)計(jì)，作為動(dòng)作行為而不是狀態(tài)區(qū)分開來。

通過時(shí)間來揭示隱藏對(duì)象的區(qū)域，以連續(xù)和無縫的方式過度，完整的表述了整個(gè)流程的過程~

在上面的例子中，標(biāo)題圖像改變了形狀和位置，但是內(nèi)容沒變，并變成了一個(gè)專輯。改變了內(nèi)容呈現(xiàn)的效果，同時(shí)保留了蒙版里的內(nèi)容-這是一個(gè)相當(dāng)巧妙地技巧，這發(fā)生在非實(shí)時(shí)交互狀態(tài)下，當(dāng)用戶操作后進(jìn)行場(chǎng)景轉(zhuǎn)換。

請(qǐng)記住，UI動(dòng)畫原則通過連續(xù)性、敘述、關(guān)系和期望來提升整體用戶體驗(yàn)，在上面的界面中，雖然物體本身保持不變，但是他的形狀和位置，而這兩個(gè)因素決定了這個(gè)物體是什么。

原則7:?覆蓋

當(dāng)分層對(duì)象取決于位置時(shí)，在視覺平面中創(chuàng)建敘事和空間關(guān)系

為了讓覆蓋層更好的呈現(xiàn)，覆蓋層允許設(shè)計(jì)師使用通過運(yùn)動(dòng)的方式在非3D空間中與其他后面或者前面的元素有一個(gè)良好的互動(dòng)。

在上面第一個(gè)例子中，上面的整個(gè)元素右滑顯示其他更多的操作。在下面的例子中，整個(gè)場(chǎng)景向下滑動(dòng)以顯示額外的其他內(nèi)容和選項(xiàng)(同時(shí)使用偏移和延遲原則傳達(dá)照片的獨(dú)立性)

在一定程度上，作為設(shè)計(jì)師，"層"的想法是如此明顯以至于不言而喻。我們使用圖層進(jìn)行設(shè)計(jì)，圖層的概念深入人心。但是，我們必須小心去區(qū)分“設(shè)計(jì)執(zhí)行”與“設(shè)計(jì)理想”。

作為一個(gè)執(zhí)行層面的設(shè)計(jì)師，我們非常熟悉我們正在設(shè)計(jì)的所有對(duì)象（包括隱藏的片段）。然而，作為用戶，這些不可兼得部分也是被定義的，隱藏在視覺和認(rèn)知上。覆蓋原則允許設(shè)計(jì)師定于"Z軸”與圖層的關(guān)系，并在此促進(jìn)其用戶對(duì)于空間的認(rèn)知。

原則7:?克隆

當(dāng)新元素分離并且創(chuàng)造連續(xù)性，關(guān)系和故事

在當(dāng)前場(chǎng)景（以及當(dāng)前對(duì)象）中創(chuàng)建新對(duì)象時(shí)。重要的是去描述它們的外觀，在這套設(shè)計(jì)原則中，我據(jù)理力爭為元素的的結(jié)合和分離創(chuàng)造敘事框架。簡單的不透明度漸變往往達(dá)不到好的效果，蒙版、克隆和緯度是三種提高產(chǎn)品體驗(yàn)的方法。

在這個(gè)宣言中，我強(qiáng)烈地爭論為物體的起源和離開創(chuàng)造敘事框架的重要性。 簡單的不透明度漸變往往不會(huì)達(dá)到這個(gè)結(jié)果。 掩蔽，克隆和維度是三種基于可用性的方法來產(chǎn)生強(qiáng)烈的敘述。

在上面的三個(gè)示例中，在用戶注意力集中在這些元素的時(shí)間里，從現(xiàn)有的元素創(chuàng)建新的對(duì)象，這種雙重方法-引導(dǎo)注意力，然后通過創(chuàng)建一個(gè)克隆的新元素來引導(dǎo)視覺注意力，具有傳達(dá)清晰而明確的時(shí)間關(guān)系：該行為'x'具有結(jié)果'y' 創(chuàng)建新的子對(duì)象。

原則九：遮蔽

用戶在空間上明確前后對(duì)象或場(chǎng)景的關(guān)系。

與前面的運(yùn)動(dòng)蒙版類似，遮蔽既是靜態(tài)現(xiàn)象又是暫?，F(xiàn)象。

這可能會(huì)讓那些暫時(shí)沒有經(jīng)驗(yàn)思考的設(shè)計(jì)師感到困惑 - 也就是時(shí)刻之間的瞬間。 設(shè)計(jì)師通常為屏幕而設(shè)計(jì)或者為任務(wù)而設(shè)計(jì)，將遮蔽視為被遮蔽的行為，而不是被遮蔽的狀態(tài)。 靜態(tài)設(shè)計(jì)表示被遮擋的狀態(tài)。 時(shí)間讓我們看到被遮蔽的對(duì)象的行為。

從上面的例子中，我們可以看到，模糊看起來像透明對(duì)象或疊加層，也是一種涉及多個(gè)屬性的時(shí)間交互。

各種常見的技術(shù)涉及模糊效果和整體對(duì)象透明度的減少。 用戶意識(shí)到她正在操作的另一個(gè)模塊 - 還有另一個(gè)世界，就像它在主要對(duì)象層次結(jié)構(gòu)“后面”一樣。

遮擋使設(shè)計(jì)人員能夠補(bǔ)償用戶體驗(yàn)中的單一統(tǒng)一視野或“客觀視圖”。

原則十：視差

用戶滾動(dòng)時(shí)在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)。

“視差”描述了在界面中不同元素以不同速率移動(dòng)的動(dòng)效設(shè)計(jì)原則

視差允許用戶專注于主要操作和內(nèi)容同時(shí)保證設(shè)計(jì)完整性，用戶在感知和認(rèn)知上對(duì)背景元素相對(duì)于前景元素產(chǎn)生相對(duì)“后退”的效果，設(shè)計(jì)師可以使用視差從環(huán)境或支持性內(nèi)容分離出即時(shí)性內(nèi)容。

這對(duì)用戶的影響是為了明確界定交互的持續(xù)時(shí)間，各種對(duì)象關(guān)系。 前景對(duì)象或“更快”移動(dòng)的對(duì)象對(duì)用戶來說顯得更“接近”。同樣，移動(dòng)“更慢”的背景對(duì)象或?qū)ο蟊灰暈椤案h(yuǎn)”。

設(shè)計(jì)人員可以使用時(shí)間本身來創(chuàng)建這些關(guān)系，以告訴用戶界面中的哪些對(duì)象具有更高的優(yōu)先級(jí)。 因此，將背景或非互動(dòng)元素進(jìn)一步“后退”是有道理的。

用戶不僅將界面對(duì)象視為具有超出視覺設(shè)計(jì)中確定的層次，而且現(xiàn)在可以利用該層次來使用戶在有意識(shí)地了解用戶體驗(yàn)的設(shè)計(jì)/ 內(nèi)容。

原則十一：多維度

當(dāng)新元素出現(xiàn)或者分離的時(shí)候提供完整的空間敘事框架

用戶體驗(yàn)的關(guān)鍵是連續(xù)性和位置

多維度提供了一種強(qiáng)大的方法來克服用戶體驗(yàn)的平穩(wěn)的非邏輯性。

人類非常擅長利用空間框架在現(xiàn)實(shí)世界和數(shù)字體驗(yàn)中進(jìn)行導(dǎo)航.提供空間出現(xiàn)和消失有助于強(qiáng)化用戶在UX中的用戶心智模型。

另外，維度原理克服了視覺中的分層悖論，其中缺乏深度的物體存在于同一平面上，但是發(fā)生在“其他物體的前面”或“后面”。

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

這只維度可以被認(rèn)為是“折疊”、“鉸鏈”三維界面對(duì)象

因?yàn)槎鄠€(gè)物體被組合成“折紙”結(jié)構(gòu)，隱藏的物體在空間上仍然可以說是“存在”，即使他們不可見，這有效的將用戶體驗(yàn)作為連續(xù)的空間事件，用戶在交互模型中導(dǎo)航并進(jìn)行交互操作，以及在界面對(duì)象本身的時(shí)間行為中進(jìn)行交互。浮動(dòng)維度為界面對(duì)象提供了空間的出線和消失，使得交互模型更具直觀性和高度敘事性。

因?yàn)槎鄠€(gè)物體被組合成'折紙'結(jié)構(gòu)，隱藏的物體在空間上仍然可以說是'存在'，即使它們不可見。 這有效地將用戶體驗(yàn)呈現(xiàn)為連續(xù)的空間事件，用戶在交互模型本身中導(dǎo)航并創(chuàng)建操作上下文，以及在界面對(duì)象本身的時(shí)間行為中創(chuàng)建操作上下文。

浮動(dòng)維度為界面對(duì)象提供了空間的起源和離開，使得交互模型更具直觀性和高度敘述性。

在上面的案例中,浮動(dòng)是通過卡片來實(shí)現(xiàn)的。這提供了交互框架以支持視覺設(shè)計(jì)。通過翻轉(zhuǎn)卡片來擴(kuò)展訪問額外的內(nèi)容和交互性，

在上面的例子中，Dimensionality是通過使用3D'cards'來實(shí)現(xiàn)的，這提供了一個(gè)強(qiáng)大的敘述框架來支持視覺設(shè)計(jì)。 通過“翻轉(zhuǎn)”卡片來擴(kuò)展敘述以訪問額外的內(nèi)容和交互性。維度可以是以最小化突然性的方式引入新元素的方式。

上面的例子中，多個(gè)2D層被安排在3D空間中以形成真實(shí)的三維物體。 它們的維度在實(shí)時(shí)和非實(shí)時(shí)過渡時(shí)刻顯示。

原則十二: 放大&縮小

導(dǎo)航界面對(duì)象和空間時(shí)保持連續(xù)性和空間交互框架。

縮放是涉及相機(jī)相關(guān)的物體移動(dòng)的電影概念，并且?guī)袌D像本身的大小從長鏡頭變?yōu)榻模ǚ粗嗳唬?/p>

在某些情況下，無法判斷對(duì)象是否正在縮放，是否在3D空間中朝向相機(jī)移動(dòng)，或者如果相機(jī)正朝3D空間中的對(duì)象移動(dòng)（請(qǐng)參見下面的參考資料）。 以下三個(gè)例子說明了可能的情況。

因此，將“放大”和“縮小”的實(shí)例視為獨(dú)立但類似的實(shí)例是適當(dāng)?shù)模驗(yàn)樗鼈兩婕斑B續(xù)元素連續(xù)轉(zhuǎn)換，提升了整體產(chǎn)品的易用性。

放大是一個(gè)電影術(shù)語，適用于朝向或遠(yuǎn)離主體的相機(jī)移動(dòng)（它也適用于水平“跟蹤”移動(dòng)，但在可用性方面不太相關(guān)）。

在UX中，空間運(yùn)動(dòng)可以引用觀看者視角的變化，或者當(dāng)對(duì)象改變位置時(shí)視角保持靜止。 ?縮放原則在接口對(duì)象和目的地之間無縫轉(zhuǎn)換，提升整體用戶體驗(yàn)。 縮放還可以結(jié)合維度原則，從而產(chǎn)生更多空間體驗(yàn)，更深入，并向用戶傳達(dá)當(dāng)前視圖“前”或“后”的其他區(qū)域或內(nèi)容。

縮放是指透視和對(duì)象都不是空間移動(dòng)的事件，而是對(duì)象本身正在縮放（或我們對(duì)它的視圖正在減小，導(dǎo)致圖像放大）。 這向觀察者傳達(dá)了額外的界面對(duì)象在其他對(duì)象或場(chǎng)景“內(nèi)部”。

無縫過渡的良好用戶體驗(yàn) - 無論是實(shí)時(shí)還是非實(shí)時(shí)。 放大＆縮小原則中使用的這種無縫性在創(chuàng)建空間心理模型時(shí)非常有用。

我希望以上一些設(shè)計(jì)原則能夠?qū)δ阌兴鶈l(fā)，在APP設(shè)計(jì)中靈活的運(yùn)用。