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

首先看下面表格：

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

原理1：緩動(dòng)（Easing）

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

示例一

示例二

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

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

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

總結(jié)：何時(shí)使用緩動(dòng)？任何時(shí)候都要使用緩動(dòng)。

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

利用偏移和延遲錯(cuò)開元素的運(yùn)動(dòng)時(shí)間，表明元素之間的層級(jí)與關(guān)系。

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

示例

在上面的例子中，浮動(dòng)動(dòng)作按鈕（FAB）轉(zhuǎn)換成由三個(gè)按鈕組成的標(biāo)題導(dǎo)航元素。因?yàn)檫@些按鈕在時(shí)間上相互“抵消”，所以他們最終通過“分離”來支持可用性，這告訴用戶完全獨(dú)立于視覺設(shè)計(jì)的界面中元素的本質(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)議告訴用戶除眼睛看到的東西外。在這種情況下，我們可以說時(shí)間元素行為不支持可用性。

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

父子關(guān)系是一種強(qiáng)大的原則。可以在用戶界面中“關(guān)聯(lián)”對(duì)象。

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

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

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

示例2

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

示例4

原理4：變形（Transformation）

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

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

示例1

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

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

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

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

示例1

示例2

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

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

示例4

示例5

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

原理6：遮罩（Masking）

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

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

原理7：覆蓋（Overlay）

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

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

原理8：生成（Cloning）

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

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

原理9：蒙層（Obscuration）

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

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

原理10：視差（Parallax）

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

這對(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)一步推回是有道理的。

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

原理11：多維化（Dimensionality）

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

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

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

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

• 鏡頭平移：被拍攝物保持靜止而鏡頭移動(dòng)或鏡頭保持靜止，而被攝物體進(jìn)行遠(yuǎn)離或接近鏡頭的前后移動(dòng)。
• 鏡頭縮放：鏡頭與被攝物體在位置上保持靜止，而被攝物自身進(jìn)行縮放。

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

以下三個(gè)例子說明了可能的情況：

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

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

原文作者：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é)議