這是關(guān)于動效設(shè)計的12條原理，一起來看看吧~

首先看下面表格：

1. 緩動（Easing）、偏移和延遲（Offset & Delay）與時間相關(guān)。
2. ?父子關(guān)系（Parenting）用于闡述元素之間的關(guān)系。
3. 變形（Transformation）、數(shù)值變化（Value Change）、遮罩（Masking）、覆蓋（Overlay）、生成（Cloning）可以加強元素自身的延續(xù)性。
4. 視差（Parallax）多用于表明元素的層級關(guān)系。
5. 蒙層（Obscuration）、多維度（Dimensionality）、鏡頭平移與縮放（Dolly & Zoom）用于表明元素與空間的關(guān)系。

原理1：緩動（Easing）

當(dāng)運動時，自然界中很少存在讓人舒適的勻速運動，并且元素運動速率的變化應(yīng)該符合用戶的預(yù)期。貼近自然，符合用戶認(rèn)知，緩入緩出。

示例一

示例二

示例一有直線運動，看起來并不好。以上所有三個例子都有相同幀數(shù)，并在相同的時間內(nèi)完成。唯一的區(qū)別在于他們的緩動不同。

若行為超出用戶期望的行為會導(dǎo)致可用性較差的交互。在適當(dāng)緩動的情況下，用戶可以體驗到自然的動效 ，它不會分散注意力。而直線運動會使用戶感覺刻意的、難以理解、未完成，并且分散注意力。

而右邊的例子，它具有“設(shè)計”的感覺，我們注意到物體是如何到達的，比直線運動的例子更加“正確”。

總結(jié)：何時使用緩動？任何時候都要使用緩動。

原理2：偏移和延遲（Offset & Delay）

利用偏移和延遲錯開元素的運動時間，表明元素之間的層級與關(guān)系。

1. 讓信息或界面元素按照秩序進退場；
2. 暗示用戶信息與界面元素之間或許存在某些區(qū)別；
3. 吸引用戶的注意力。

示例

在上面的例子中，浮動動作按鈕（FAB）轉(zhuǎn)換成由三個按鈕組成的標(biāo)題導(dǎo)航元素。因為這些按鈕在時間上相互“抵消”，所以他們最終通過“分離”來支持可用性，這告訴用戶完全獨立于視覺設(shè)計的界面中元素的本質(zhì)。

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

在上面的例子中，靜態(tài)視覺設(shè)計告訴我們背景上有圖標(biāo)，推測是這些圖標(biāo)都是相互分離的，并且做了不同的事情。但是，這個動效打破了之前的理論。

在時間上，圖標(biāo)被分組成行并且表現(xiàn)得像一個單獨的對象，它們的標(biāo)題同樣分組成行，并且也表現(xiàn)得像一個單一的對象，該動議告訴用戶除眼睛看到的東西外。在這種情況下，我們可以說時間元素行為不支持可用性。

原理3：父子關(guān)系（Parenting）

父子關(guān)系是一種強大的原則?？梢栽谟脩艚缑嬷小瓣P(guān)聯(lián)”對象。

1. 幫助用戶更好地理解它們之間的層級關(guān)系；
2. 有依據(jù)的操作反饋。

父子關(guān)系是對象屬性與其他對象屬性的鏈接，這以支持可用性的方式創(chuàng)建對象關(guān)系和層次結(jié)構(gòu)。親子關(guān)系還允許設(shè)計師在用戶界面中更好地協(xié)調(diào)時間，同時向用戶傳達對象關(guān)系的性質(zhì)。

回想一下，對象屬性包括以下內(nèi)容：比例、不透明度、位置、旋轉(zhuǎn)、形狀、顏色、數(shù)值等。這些屬性中的任何一個都可以鏈接到任何其他屬性，以在用戶體驗中創(chuàng)建協(xié)同。

示例2

在上面這個示例中，父子關(guān)系就是子元素的某個屬性的值，隨父元素的某個屬性參數(shù)的值按照一定的比例進行變化。父子關(guān)系最適合作為“實時”互動，當(dāng)用戶直接操作界面對象時，設(shè)計者通過運動向用戶傳達對象如何鏈接以及它們之間的關(guān)系。

示例4

原理4：變形（Transformation）

在運動原理“變形”中已經(jīng)寫了很多有關(guān)UX的文章。在某些方面，它是動畫原理中最明顯和最引人注意的。變形是最明顯的，主要是因為它脫穎而出?！疤峤弧卑粹o將形狀變?yōu)閺较蜻M度條，并最終改變形狀以成為標(biāo)記，吸引了我們的注意力。

1. 告知用戶元素的狀態(tài)或作用發(fā)生了改變；
2. 高效地將信息傳遞給用戶。

示例1

變形所做的是通過不同實物變形（在這是一個按鈕，這是一個徑向進度條）無縫地轉(zhuǎn)換用戶，最終產(chǎn)生期望的結(jié)果，用戶已經(jīng)通過這些功能到達最終目的地。轉(zhuǎn)換將用戶體驗中的關(guān)鍵時刻認(rèn)知分離成無縫連續(xù)的一系列事件，這種無縫結(jié)果可提高用戶的認(rèn)知度，保證時間和連貫性。

原理5：數(shù)值變化（Value Change）

基于文本的界面對象（即數(shù)字和文本）可以連續(xù)更改它們的值，清晰看到數(shù)值的增多或減少。

我們來看一下用戶儀表板的例子：

示例1

示例2

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

當(dāng)我們使用基于運動的價值形式來表示動態(tài)系統(tǒng)時，它激活了一種“神經(jīng)反饋”，掌握數(shù)據(jù)動態(tài)特性的用戶現(xiàn)在可以改變這些價值觀。當(dāng)這些值是靜態(tài)的時候，與這些值背后的現(xiàn)實的聯(lián)系就會減少。比如：支付寶中的余額，余額的增多或減少。

示例4

示例5

數(shù)值變化既可以發(fā)生在實時活動中，也可以發(fā)生在非實時活動中。在實時事件中，用戶正在與對象交互以更改值。在非實時事件中，例如：加載器和轉(zhuǎn)換，這些值在沒有用戶輸入的情況下發(fā)生變化以反映動態(tài)敘述。

原理6：遮罩（Masking）

在上面的例子中，標(biāo)題圖像改變了邊界的形狀和位置，但不改變內(nèi)容，并成為一個專輯。這具有改變對象的效果，同時保留遮罩內(nèi)的內(nèi)容 – 這是一個相當(dāng)巧妙的技巧。這發(fā)生在非實時，作為轉(zhuǎn)換，在用戶采取行動后激活。

請記住，UI動畫原則暫時出現(xiàn)并通過連續(xù)性、敘述、關(guān)系和期望來支持可用性。在上面的參考文獻中，雖然物體本身保持不變，但它也有邊界和位置，而這兩個因素決定了物體是什么。

原理7：覆蓋（Overlay）

覆蓋通過允許用戶能讓本來有限的空間被更好的利用起來，利用扁平化設(shè)計來闡述兩個相互獨立的元素的位置關(guān)系。

示例中：前景物體向右滑動以顯示其他背景物體的位置。我們用圖層進行設(shè)計，圖層的概念深入內(nèi)部。作為設(shè)計師，我們需要非常熟悉我們正在設(shè)計的所有對象（包括隱藏片段）。然而，作為用戶，這些不可見的部分是定義和實踐，隱藏在視覺和認(rèn)知上。

原理8：生成（Cloning）

當(dāng)元素被生成時，表達元素與元素之間的連續(xù)性。這種動畫能夠非常清晰地表達因某個操作而產(chǎn)生的一個或數(shù)個事件發(fā)生，以及它們之間的關(guān)系。

在以上三個示例中，在用戶注意力集中在這些對象的時間內(nèi)，從現(xiàn)有元素對象創(chuàng)建新對象，引導(dǎo)注意力，然后通過創(chuàng)建一個克隆的新對象來引導(dǎo)。具有傳達清晰明確的事件：該行為“x”具有“y”的結(jié)果創(chuàng)建新的子對象。

原理9：蒙層（Obscuration）

與覆蓋原理中的用戶體驗類似，蒙層既是靜態(tài)現(xiàn)象，也是時間現(xiàn)象。不完全蓋住，簡單的不透明度漸變往往不會達到這個結(jié)果，通常利用模糊或者變暗保留可視性。

上面示例中，模糊看起來像透明對象或疊加層，也是一種涉及多個屬性的時間交互，各種常見的技術(shù)涉及模糊效果和整體對象透明度的減少。用戶意識到她正在操作的另一個非主要上下文，還有另一個世界，就像它在主要對象層次結(jié)構(gòu)“后面”一樣，遮擋使設(shè)計師能夠補償用戶體驗中的單一統(tǒng)一視野或“客觀視圖”。

原理10：視差（Parallax）

作為運動原理中的UX的“視差”描述了以不同速率運動，構(gòu)成不同的視差效果。視差允許用戶專注于主要操作和內(nèi)容，同時保持設(shè)計完整性，在視差效果表現(xiàn)空間中個元素的位置及層級關(guān)系，引導(dǎo)用戶去關(guān)注應(yīng)該應(yīng)該關(guān)注的地方。

這對用戶的影響是為了明確界定交互的持續(xù)時間，對象關(guān)系，前景對象或“更快”移動的對象對用戶來說顯得“更接近”。同樣，移動“較慢”的背景對象或?qū)ο蟊灰暈椤案h”。設(shè)計人員可以使用時間本身來創(chuàng)建這些關(guān)系，告訴用戶界面中的哪些對象具有更高的優(yōu)先級。因此，將背景或非互動元素進一步推回是有道理的。

不僅用戶感知的界面超出一個層次，其在視覺設(shè)計決定的，但現(xiàn)在這個層次可以利用用是自覺意識到在設(shè)計之前的用戶體驗內(nèi)容。

原理11：多維化（Dimensionality）

用戶體驗的關(guān)鍵是連續(xù)性和位置，將界扁平化的界面元素多維化，表達空間中個元素的位置及層級關(guān)系。維度提供了一種強大的方法來克服用戶體驗的平坦性和非邏輯性，人類非常擅長利用空間框架在現(xiàn)實世界和數(shù)字體驗中進行導(dǎo)航。維度以三種方式呈現(xiàn)：折紙維度、浮動維度和對象維度。

浮動維度為界面對象提供了空間起源和離開，使得交互模型更加直觀和高度敘述；對象維度導(dǎo)致具有真實深度和形式的維度對象。

這里，多個2D層被安排在3D空間中以形成真實的三維物體。它們的維度在實時和非實時過渡顯示，對象維度的用途是，用戶基于不可見的空間位置開發(fā)對象實用程序的敏銳意識。

原理12：鏡頭平移與縮放（Dolly & Zoom）

• 鏡頭平移：被拍攝物保持靜止而鏡頭移動或鏡頭保持靜止，而被攝物體進行遠離或接近鏡頭的前后移動。
• 鏡頭縮放：鏡頭與被攝物體在位置上保持靜止，而被攝物自身進行縮放。

在某些情況下，無法判斷對象是否正在縮放，是否在3D空間中朝向相機移動，或者如果相機正朝3D空間中的對象移動（請參見下面的參考資料）。

以下三個例子說明了可能的情況：

前兩張圖像是放大的，而最后的圖像是放大的。

在UX中，空間運動可以引用觀看者視角的變化，或者當(dāng)對象改變位置時視角保持靜止。還可以結(jié)合維度原則，從而產(chǎn)生更多空間體驗，更深入，并向用戶傳達當(dāng)前視圖“前”或“后”的其他區(qū)域或內(nèi)容。并且滿足運動原則中用戶體驗的要求：它們通過運動支持可用性。

原文作者：Issara Willenskomer

原文鏈接：https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

譯文作者：VisualCC

譯文鏈接：https://www.jianshu.com/p/0efbd3db9f4b

本文由 @VisualCC 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議