研究主題：提升動效可用性

研究對象：12條UX動效應(yīng)用法則

“作為UX/UI設(shè)計師，我該如何適當(dāng)在UX設(shè)計中加入動效？”，我總結(jié)了一些經(jīng)驗法則，可以很好地回答這個問題。在過去5年里，我的UI動畫工作室發(fā)表的教程，非常幸運可以在40多個國家/地區(qū)，以及數(shù)百個頂級品牌設(shè)計咨詢公司中指導(dǎo)UX/UI設(shè)計師們。

研究UX/UI動效超過15年后，我得出了一個結(jié)論——其實有12個規(guī)律方法來幫助提升UX動效設(shè)計。我將這些機會稱為“ 12條UX動效應(yīng)用法則”，它們可以通過多種創(chuàng)新方式進行疊加和組合使用。

我將宣言分成5部分：

-強調(diào)動效的主題；

-實時與非實時交互；

-提升動效可用性的4種方法；

-原理，技術(shù)，特性和價值；

-12條UX動效應(yīng)用法則。

動效并不是UI動畫！

設(shè)計人員通常將用戶界面中的運動主題理解為“ UI動畫”（實際上不是），所以我覺得在開始說12條原則前，有必要為大家普及下基礎(chǔ)。

 

設(shè)計人員通常將“ UI動畫”視為是讓用戶體驗更愉悅的東西，實際上并沒有增加太多價值。因此，UI動畫通常被視為UX的后兒子。另外，用戶界面動效，它被認(rèn)為屬于迪士尼的12條動畫原理范疇，我在自己的《UI Animation Principles — Disney is Dead》一文中進行了反駁。

 

在我的宣言中，我將證明UI動畫原則與“ 12 UX in Motion Principles”的關(guān)系，就像是建筑構(gòu)造和建筑風(fēng)格一樣，是各自獨立的。或者這樣理解，一個建筑結(jié)構(gòu)被物理建造后才會實際存在（施工后），但是原則理論卻能指導(dǎo)物理建造。

 

動畫就是工具，而原則是用來指導(dǎo)工具使用的，因此，原則理論對設(shè)計師的影響力更大。實際上，多數(shù)設(shè)計師經(jīng)常在UX設(shè)計中，將“ UI動畫”視為一種更高級的設(shè)計形式。

 

實時與非實時交互

區(qū)分“狀態(tài)”和“作用”很重要，UX中的大多元素是靜態(tài)的，例如設(shè)計組件。用戶體驗中的行為基本上是暫時的，是基于動作的。一個元素是被隱藏的，或正在被隱藏。如果是后者，動效的引入就可以很好地提升可用性。

 

另外，可以將交互的時間都視為實時或非實時發(fā)生。實時是指用戶直接與用戶界面中的對象進行交互。非實時意味著對象行為是事后交互的：它在用戶操作之后發(fā)生，并且是過渡的。

 

 

這是一個重要的區(qū)別。實時交互也可以被認(rèn)為是“直接操縱”，因為用戶正在直接和界面對象進行交互。用戶使用界面時，界面行為正在發(fā)生。非實時交互僅在來自用戶的輸入之后發(fā)生，并且具有將用戶短暫鎖定在用戶體驗之外的作用，直到轉(zhuǎn)換完成。認(rèn)知這些差異性，會在我們學(xué)習(xí)12項原則時發(fā)揮幫助作用。

 

提升動效應(yīng)用性的4種方法

這4點代表判斷用戶體驗可用性時的依據(jù)：

 

-預(yù)期值

分兩個方面——設(shè)計為用戶帶來的感受，以及實際呈現(xiàn)效果。換句話說，作為設(shè)計師，我們希望最大程度地減少用戶期望與他們體驗之間的差距。

 

-連續(xù)性

既代表用戶流程，也代表用戶體驗的“一致性”。可以從“內(nèi)部連續(xù)性”（場景內(nèi)的連續(xù)性）和“內(nèi)部連續(xù)性”（構(gòu)成整個用戶體驗的一系列場景內(nèi)的連續(xù)性）的角度來考慮。

 

-敘述性

是用戶體驗中事件的線性進展，一系列微妙的變化和動作串聯(lián)在一起是，就構(gòu)成了用戶體驗流程。

 

-關(guān)聯(lián)性

指導(dǎo)用戶理解和決策界面中組件之間的關(guān)系。

 

原理、技術(shù)、特性和量值

泰勒·韋恩（Tyler Waye）寫道：“原理……是產(chǎn)生各種技術(shù)的基本前提和功能規(guī)則。無論發(fā)生什么，這些要素都保持一致。”我們可以設(shè)想一個層次結(jié)構(gòu)，其中“原則”在頂部，“技術(shù)”在第二，接下來是“內(nèi)容”，“量值”在最底部。可以將技術(shù)視為把原則實際執(zhí)行的一種呈現(xiàn)手法，類似于我們常說的“設(shè)計風(fēng)格”。

 

“屬性”是特定對象的參數(shù)，這些參數(shù)會被動畫化以創(chuàng)建該技術(shù)。這些包括（但不限于）位置，不透明度，比例，旋轉(zhuǎn)，錨點，顏色，筆劃寬度，形狀等。“量值”是實際的數(shù)字屬性值，它們會隨時間變化以創(chuàng)建所謂的“動畫”。

 

比如，設(shè)計一個飛機降落的動效，我們可以使用“模糊原理”，模糊和不透明度調(diào)至25px和70％。現(xiàn)在我們有了一些可以使用的工具。更重要的是，這些語言工具與任何特定的原型工具無關(guān)。

 

12條UX動效應(yīng)用法則

緩動，偏移和延遲與定時有關(guān)；處理與對象關(guān)系有關(guān)；變換，數(shù)值變化，遮罩，疊加和復(fù)制都與對象連續(xù)性有關(guān)；視差與時間層次有關(guān)。模糊度，維度和滑動變焦都與空間連續(xù)性有關(guān)。

 

原則1：緩動

發(fā)生即時事件時，對象行為符合用戶期望。

 

 

所有（實時或非實時）的動效都非常緩和。這種設(shè)計輕松搭建了一種自然舒適的氛圍，也有一種連續(xù)感。順便提一句，迪士尼將其稱為“慢進慢出”。

 

 

左側(cè)示例的線性運動，看起來很好像糟糕。第一個示例沒有很強的動效，但呈現(xiàn)出來的也很流暢。以上三個示例都有確切的幀數(shù)，并且演示的時間相同，唯一的區(qū)別是動效的緩和程度。

 

作為關(guān)注可用性的設(shè)計師，除了美學(xué)之外，我們還需要多提出質(zhì)疑，哪個示例更能提升可用性？我在這里介紹的情況是緩動固有的特點。在適當(dāng)緩動情況下，用戶會感覺動作本身是無縫的并且在很大程度上是不可見的，這是一件好事，因為它不會分散注意力。線性運動明顯可見，并且感覺不完整且分散注意力。

 

我們再來看右邊的示例，它也不并不是天衣無縫的。實際上，它具有明顯的“設(shè)計”感，我們會注意到物體是如何著陸的，但與左側(cè)線性運動示例相比，它仍然感覺“更正確”。

 

我想向您開放的是一個輕松的運動世界。作為設(shè)計師，您實際上可以在項目中創(chuàng)建和實現(xiàn)無限的“緩動”。所有這些放松都有自己的期望響應(yīng)，它們會在用戶中觸發(fā)。

 

原理2：偏移和延遲

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

 

 

“偏移與延遲”受迪斯尼動畫原理影響，本例中為“跟隨并重疊動作”。

但是，重要的是要注意，方法雖然類似，但目的和結(jié)果卻不同。迪斯尼的《原理》可產(chǎn)生“更具吸引力的動畫”，而《UI動畫》的原理則可產(chǎn)生更多可用的體驗。

 

這一原則的效用在于，它通過“告訴”用戶界面中對象的性質(zhì)，預(yù)先為用戶設(shè)置成功的條件。上面參考中的敘述是頂部的兩個對象是一組，而底部則是分開的。頂部的兩個對象可以是非交互的圖像和文本，而底部的對象可以是按鈕。

 

甚至在用戶注冊這些對象是什么之前，設(shè)計人員就已經(jīng)通過運動告知這些對象是“分離的”。

 

Credit: InVision

 

在上圖示例中，懸浮按鈕（FAB）轉(zhuǎn)換成了包含三個按鈕的標(biāo)題導(dǎo)航元素。由于按鈕在時間上彼此“偏移”，因此最終通過“分離”來提升可用性。換句話說，設(shè)計人員是在利用時間本身來說（甚至在用戶注冊對象之前）對象是分開的。這可以讓用戶完全獨立于視覺設(shè)計，了解界面中對象的特性。

 

以下是一個示例：

 

Credit: Jordi Verdu

 

在上面的例子中，靜態(tài)視覺設(shè)計告訴我們在背景上有圖標(biāo)。假設(shè)這些圖標(biāo)都是彼此獨立的，并且做著不同的事情。

 

圖標(biāo)被分組為行，并且表現(xiàn)得像單個對象。它們的標(biāo)題同樣被分組為行，并且表現(xiàn)得像單個對象。動效告訴用戶這些界面元素不是她的眼睛所看到的。在這種情況下，我們可以說界面中對象的時間行為并沒有提升可用性。

原則3：創(chuàng)建關(guān)聯(lián)性

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

 

 

這是一項強大的原理，可“關(guān)聯(lián)”用戶界面中的對象。在上面的示例中，頂部或“子級”對象的“ scale”和“ position”屬性作為底部或“父級”對象的“ position”屬性的父級。

 

處理對象屬性與其他對象屬性的鏈接，創(chuàng)建對象關(guān)系和層次結(jié)構(gòu)。

還可以使設(shè)計人員更好地協(xié)調(diào)用戶界面中的時間，同時與用戶交流對象關(guān)系的本質(zhì)。回想一下，對象的“屬性”包括以下內(nèi)容：“比例”，“不透明度”，“位置”，“旋轉(zhuǎn)”，“形狀”，“顏色”，“值”等。這些屬性中的任何一個都可以鏈接到其他任何屬性，以在用戶體驗中創(chuàng)造協(xié)同作用。

 

Credit: Andrew J Lee, Frank Rapacciuolo

 

在左側(cè)示例中，“表情”元素的“ y軸”是圓形指示器，也是“ x軸”的父級。當(dāng)圓形指示器元素沿水平軸移動時，其“子級”元素沿水平和垂直方向移動（同時被遮罩）。此功能最好可以“實時”互動，當(dāng)用戶直接操作界面對象時，設(shè)計人員通過動效與用戶溝通，將其聯(lián)系起來。

 

創(chuàng)建關(guān)聯(lián)有3種形式：“直接關(guān)聯(lián)”（請參見上面的兩個“延遲”示例，“反向”示例，請參見下文）。

 

 

延遲和反向

原則4：變換

對象實用程序更改時，創(chuàng)建連續(xù)的敘述流狀態(tài)。

 

 

關(guān)于運動原理“轉(zhuǎn)換”中的UX的文章已經(jīng)很多。在某些方面，它是動畫原理中最明顯和最深刻的部分。

 

轉(zhuǎn)換是最容易識別的，主要是因為它效果很突出。我們注意到，“提交”按鈕將形狀更改為徑向進度條，最后再次將形狀更改為確認(rèn)復(fù)選標(biāo)記。它完整的展示了一個功能，并引起了用戶注意。

 

Credit: Colin Garven

 

變換所做的是無縫地將用戶轉(zhuǎn)換為不同的UX狀態(tài)或“是”（如這是一個按鈕，這是一個放射狀的進度條，這是一個復(fù)選標(biāo)記），引導(dǎo)成所需的結(jié)果。通過這些功能空間將用戶吸引到了最終目的地。

 

轉(zhuǎn)換的作用是將用戶體驗中的關(guān)鍵時刻從認(rèn)知上“分塊”為一系列無縫且連續(xù)的事件。這種無縫性可以提高用戶的感知度，留存率和任務(wù)成功率。

原則5：量值變化

當(dāng)量值主體發(fā)生變化時，創(chuàng)建動態(tài)且連續(xù)的敘事關(guān)系。

 

 

基于文本的界面對象（即數(shù)字和文本）可以更改其值。這是那些“難以捉摸的明顯”概念之一。

 

 

文本和數(shù)字更改非常常見，以至于它們繞過我們，而我們卻沒有給他們帶來區(qū)別和嚴(yán)謹(jǐn)性，以評估它們在提升可用性方面的作用。

 

那么，當(dāng)值改變時用戶會經(jīng)歷什么？在用戶體驗中，運動中的12個用戶體驗原則是提升可用性的機會。這里的三個機會是將用戶與數(shù)據(jù)背后的現(xiàn)實，代理的概念以及價值本身的動態(tài)性質(zhì)聯(lián)系起來。

 

讓我們看一下用戶儀表板的示例。

 

 

當(dāng)數(shù)字值未進行加載時，用戶看到的數(shù)字對象是靜態(tài)的。它們就像涂漆的標(biāo)志，顯示時速限制為55英里/小時。

 

數(shù)字和值表示現(xiàn)實中正在發(fā)生的事情。現(xiàn)實可能是時間，收入，游戲得分，業(yè)務(wù)指標(biāo)，健身跟蹤等。我們通過運動來區(qū)分的是“量值主體”是動態(tài)的，而這些量值反映的是該動態(tài)價值集中的某些東西。

 

這種關(guān)系不僅會被視覺上包含價值的靜態(tài)對象所迷失，而且還會失去另一個更深層次的機會。

 

 

Credit: Barthelemy Chalvet, Gal Shir, Unknown

原則6：遮罩

當(dāng)通過顯示或隱藏對象或組的哪一部分確定實用程序時，在接口對象或?qū)ο蠼M中創(chuàng)建連續(xù)性。

 

 

遮蓋對象的行為可以被認(rèn)為是遮蓋對象形狀與效果之間的關(guān)系。

因為設(shè)計師們熟悉靜態(tài)設(shè)計中的遮蓋，我們有必要同UX運動原理“屏蔽”做區(qū)分，因為它是以一個行為動作發(fā)生，而不是作為一個狀態(tài)。

 

通過暫時使用對象的顯示和隱藏區(qū)域，效用以連續(xù)和無縫的方式轉(zhuǎn)換。這也具有保留敘述流的效果。

 

Credit: Anish Chandran

 

在示例中，頁眉變成相冊時會更改邊界形狀和位置，但不會更改內(nèi)容。既改變了圖像的效果，同時將內(nèi)容保留在蒙版中——這是個相當(dāng)巧妙的技巧。這是非實時發(fā)生的，是一種過渡，在用戶執(zhí)行某個操作后即被激活。

 

請記住，UI動畫原理是暫時出現(xiàn)的，并通過連續(xù)性、敘述、關(guān)系和期望來提升可用性。在上述參考中，對象本身不變，但也具有邊界和位置，這兩個因素最決定設(shè)計的樣子。

原則7：覆蓋

當(dāng)分層對象依賴于位置時，在視覺平地中創(chuàng)建與空間的關(guān)系。

 

 

疊加層通過允許用戶利用平地排序?qū)傩裕瑏砜朔强臻g層次結(jié)構(gòu)的缺乏，從而提升可用性。為了使飛機稍微降落，Overlay允許設(shè)計人員使用運動來傳達(dá)與位置有關(guān)的對象，這些對象存在于非3D空間中其他對象的后面或前面。

 

Credit: Bady, Javi Pérez

 

在左側(cè)的示例中，前景對象向右滑動以顯示其他背景對象的位置。在右側(cè)的示例中，整個場景向下滑動以顯示其他內(nèi)容和選項（同時使用“偏移與延遲原理”傳達(dá)對象的個性）。在一定程度上，作為設(shè)計師，“層次”的概念是如此明顯以至于不言而喻。

原則8：克隆

當(dāng)新對象出現(xiàn)和分開時，創(chuàng)建連續(xù)性、關(guān)系和敘述。

 

 

在當(dāng)前場景中（以及從當(dāng)前對象中）創(chuàng)建新對象時，以敘述方式說明它們的外觀非常重要。在此宣言中，我強烈主張為對象的起源和離開創(chuàng)建敘事框架的重要性。

 

簡單的不透明褪色往往無法達(dá)到此效果。遮罩，克隆和維度是三種基于可用性的方法，可以產(chǎn)生很棒的使用體驗。

 

Credit: Jakub Antalík, Jakub Antalík, Unknown

原則9：模糊

允許用戶在空間上定位自己與對象或場景的關(guān)系，而非在視覺層次。

 

 

與“蒙版運動原理”中的UX相似，“模糊化”既作為靜態(tài)現(xiàn)象又作為暫時現(xiàn)象存在。這可能會使沒有時間思考經(jīng)驗的設(shè)計師（即瞬間之間的瞬間）感到困惑。設(shè)計人員通常按屏幕設(shè)計或按任務(wù)設(shè)計。認(rèn)為遮蔽是被遮蓋的行為，而不是被遮蓋的狀態(tài)。靜態(tài)設(shè)計表示被遮蓋的狀態(tài)，引入時間可以使我們了解物體被遮擋的行為。

 

Credit: Virgil Pana, Apple

 

從以上兩個示例中，我們可以看到，看起來像透明對象或疊加層的遮擋也是一種涉及時間上多個屬性的交互。各種常見的技術(shù)包括模糊效果和降低整體對象透明度，使用戶知道她正在操作的其他非主要內(nèi)容，即在主要對象層次結(jié)構(gòu)“之后”存在的世界。

原則10：視差

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

 

 

作為運動原理中的UX，“視差”描述了以不同速率運動的不同界面對象。

使用視差，用戶可以在保持設(shè)計完整性的同時專注于主要動作和內(nèi)容。背景元素會為用戶在知覺和認(rèn)知上“消失”。

 

Credit: Austin Neill, Michael Sevilla

 

 

這對用戶的影響是，在使用期間清楚地定義各種對象關(guān)系。前景對象或移動“快速”的對象在用戶面前顯示的“更近”。同樣，背景物體或“移動較慢”的物體也被視為“離得更遠(yuǎn)”。

 

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

原則11：維度

當(dāng)新對象出現(xiàn)和離開時，提供空間敘事框架。

 

 

對用戶體驗至關(guān)重要的是連續(xù)性現(xiàn)象以及位置感。維度提供了一種強大的邏輯方式來克服用戶覺得平庸的體驗。人類非常善于使用空間框架在現(xiàn)實世界和數(shù)字體驗中導(dǎo)航。提供空間維度的出現(xiàn)及消失的參考點，有助于增強用戶對于位置的感知。

 

此外，維度原則克服了視覺平面中的分層悖論，出現(xiàn)在其他對象的“前面”或“后面”。維度以三種方式呈現(xiàn)：折紙維度，浮動維度和對象維度。折紙的維數(shù)可以用“折疊”或“鉸接”式的三維界面對象來考慮。

 

折紙維度示例

 

由于將多個對象組合為“折紙”結(jié)構(gòu)，因此即使看不見隱藏對象，在空間上仍可以說它們“存在”。這有效地將用戶體驗呈現(xiàn)為連續(xù)的空間事件，用戶可以在交互模型本身以及界面對象本身完成操作。

 

浮動維度為接口對象提供了空間的起源和偏離，使交互模型直觀且具有很強的敘事性。

 

浮動維數(shù)示例

 

在上面的示例中，維度是通過使用3D“卡片”來實現(xiàn)的。這提供了支持視覺設(shè)計的強大敘事框架。通過“翻轉(zhuǎn)”卡片來擴展敘述，以訪問其他內(nèi)容和交互性。

 

維度是一種強大的引入新元素的方法，可以最小地降低突發(fā)性。維度系數(shù)會讓交互對象具有更模擬真實感。

 

對象維數(shù)示例

 

多個2D層在3D空間中排列形成真實尺寸的對象，它們的維度是在實時和非實時過渡時刻顯示的。物體維數(shù)指使用者在不可見的空間位置上產(chǎn)生對物體效用的敏銳意識。

原則12：Dolly＆Zoom

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

 

 

移動（Dolly）和變焦（Zoom）是電影概念，指的是與相機有關(guān)的對象的運動，并且圖像本身在幀中的大小從遠(yuǎn)攝到近攝平滑地變化（反之亦然）。

 

在某些情況下，無法判斷對象是否正在縮放，它是否正在朝3D空間中的相機移動或相機是否朝著3D空間中的對象移動，以下三個示例說明了可能的情況。

 

圖層是在搖動，縮放還是在移動相機？

 

將“移動”和“縮放”的實例視為獨立的，因為它們涉及連續(xù)變換，并且滿足運動原理中用戶體驗的要求：它們通過運動來提升可用性。

 

左邊的兩個圖像是鏡頭滑動縮放，而右邊的圖像變焦縮放

 

多莉（Dolly）是一個電影術(shù)語，適用于推進或遠(yuǎn)離對象的相機運動（它也適用于水平“跟蹤”運動，但在可用性方面不那么重要）。

 

Credit: Apple

 

在UX中，在空間上，此運動指的是觀察者視角的變化，也可能是指在對象更改位置時保持靜態(tài)的視角。多莉原理通過連續(xù)性和敘述性，來無縫過度對象目標(biāo)。多莉還可以結(jié)合“尺寸原則”，從而獲得更多空間體驗和更多的深度，向用戶傳達(dá)當(dāng)前視圖“前”或“后”的其他區(qū)域。

 

縮放指的是既不是透視也不是物體在空間上的移動，而是物體本身在縮放（或者我們的視野正在縮小，從而導(dǎo)致圖像放大）。這向用戶傳達(dá)對象所在“內(nèi)部”區(qū)域的信息。