Motion設(shè)計對數(shù)字產(chǎn)品的用戶體驗產(chǎn)生了深遠(yuǎn)的影響，但如果界面元素沒有表現(xiàn)出基本的Motion Design原理，可用性則會受到損害。在用戶界面的上下文中，Motion不僅僅是視覺裝飾，它是一種強大的力量，可增強產(chǎn)品參與度，并擴(kuò)展設(shè)計交流的范圍。

我們的世界是一種動態(tài)的方式。即使在靜止的瞬間，葉子也會發(fā)抖，肺部也會擴(kuò)張。在數(shù)字產(chǎn)品設(shè)計領(lǐng)域中，動態(tài)似乎是第二自然，它是日常功能的擴(kuò)展，在做設(shè)計的時候我們需要合理地加以利用。

從理論上講，使UI移動很容易，在預(yù)定路徑上定義點，然后用軟件對間隙進(jìn)行補間。實際上它不僅那么簡單，工具和技術(shù)是必不可少的，但是動畫設(shè)計依然有一套需要遵守的規(guī)則，用于提高數(shù)字產(chǎn)品的可用性。

01?Motion Design的起源

Motion Design和UX的結(jié)合相對較新，但其根源是迪士尼。Frank Thomas和Ollie Johnston是迪士尼最有價值的動畫師，是Pinnochio，Bambi和Fantasia等經(jīng)典小說的重要貢獻(xiàn)者。直到今天他們的12項Motion基本原理在電影，電視和數(shù)字內(nèi)容的動態(tài)圖形中仍然十分具有影響力。

迪斯尼原理是為了講故事而提煉出身體動畫的基本定律。它們使繪制的角色能夠移動和擁有表情，但不能充分滿足現(xiàn)代用戶界面對交互運動的需求。

下圖中是迪士尼動畫專家Jorge R. Canedo Estrada改編的Motion Design十項原則，如果應(yīng)用到數(shù)字產(chǎn)品設(shè)計中，我們需要根據(jù)自己具體的項目進(jìn)行改進(jìn)。

圍繞交互式UI元素（及其UX意義）重新定位Motion原理的是Issara Willenskomer的UX in Motion Manifesto，它的深度令人吃驚，UXD接下來將結(jié)合他的原則為同學(xué)們詳細(xì)解讀一下12條交互動畫設(shè)計的原則。

02?12種交互設(shè)計原則

1.Easing

緩和模仿現(xiàn)實對象隨時間加速和減速的方式，它適用于所有顯示motion的UI元素。

Easing的反面是線性motion。顯示線性motion的UI元素立即從固定速度變?yōu)槿伲瑥娜僮優(yōu)楣潭ā＿@種行為在現(xiàn)實世界中不存在，對用戶而言似乎停滯不前。

2.Offset?&?Delay

當(dāng)多個UI元素同時并快速移動時，用戶傾向于將它們組合在一起，而忽略了每個元素可能具有其自身功能的可能性。

偏移和延遲會在同時移動的UI元素之間創(chuàng)建層次結(jié)構(gòu)，并傳達(dá)它們相關(guān)但又不同的信息。元素的時序，速度和間距不是完全同步，而是交錯排列，從而產(chǎn)生微妙的“一個接一個”的效果。

當(dāng)用戶在屏幕之間漫游時，偏移和延遲表明存在多個交互選項。

3.Parenting

Parenting將一個UI元素的屬性鏈接到其他UI元素的屬性。當(dāng)父元素中的屬性更改時，子元素的鏈接屬性也會更改。所有元素屬性可以相互鏈接。

例如，父元素的位置可以綁定到子元素的比例。當(dāng)父元素移動時，子元素的大小會增加或減小。

Parenting會在UI元素之間創(chuàng)建關(guān)系，建立層次結(jié)構(gòu)，并允許多個元素立即與用戶通信。因此，Parenting在實時交互中使用時影響最大。

4.Transformation

當(dāng)一個UI元素變成另一個UI元素時，將發(fā)生轉(zhuǎn)換。例如，下載按鈕轉(zhuǎn)換為進(jìn)度條，轉(zhuǎn)換為完成圖標(biāo)。

從UX的角度來看，轉(zhuǎn)換是一種向用戶顯示其相對于目標(biāo)的狀態(tài)（系統(tǒng)狀態(tài)的可見性）的有效方法。當(dāng)UI元素之間的進(jìn)度鏈接到帶有開頭和結(jié)尾的過程（例如，下載文件）時，這特別有用。

5.Value?Change

在數(shù)字界面中，價值表示（數(shù)字，基于文本或圖形的表示）豐富，出現(xiàn)在從銀行應(yīng)用程序到個人日歷到電子商務(wù)站點的產(chǎn)品中。由于這些表示與實際存在的數(shù)據(jù)集相關(guān)，因此它們可能會發(fā)生變化。

價值的變化傳達(dá)了數(shù)據(jù)表示的motion性質(zhì)，并告知用戶數(shù)據(jù)是交互式的，并且可能會受到一定程度的影響。如果不加變動地引入值，用戶參與數(shù)據(jù)的意愿就會降低。

6.Masking

遮罩是UI元素各部分的戰(zhàn)略性揭示和隱藏。通過更改元素外圍的形狀和比例，遮罩會發(fā)出信號，指示效果發(fā)生變化，同時允許元素本身保持可識別性。因此，理想的選擇是像照片和插圖這樣的詳細(xì)視覺效果。

從可用性的角度來看，設(shè)計人員可以實施屏蔽以向用戶顯示他們正在進(jìn)行一系列的交互。

7.Overlay

在2D空間中，沒有深度，UI元素只能沿X或Y軸移動。疊加會在UI的2D空間中產(chǎn)生前景/背景區(qū)別的錯覺。通過模擬深度，覆蓋可以根據(jù)用戶需要隱藏和顯示元素。

使用重疊時，信息層次結(jié)構(gòu)是重要的考慮因素。例如，用戶在做筆記應(yīng)用程序中應(yīng)該首先看到的是他們的筆記列表。然后，覆蓋可用于為每個消息（如Delete或Archive）顯示輔助選項。

8.Cloning

克隆是一種Motion行為，其中一個UI元素拆分為其他元素。這是突出顯示重要信息或交互選項的明智方法。

當(dāng)UI元素在界面中實現(xiàn)時，它們需要一個清晰的起點來鏈接到屏幕上已經(jīng)存在的元素。如果元素只是無處不在而突然爆發(fā)或消失，則用戶將缺乏進(jìn)行自信交互所需的上下文。

9.Obscuration

想象一個磨砂玻璃門。它需要交互才能打開，但是可以（在某種程度上）辨別另一端正在等待什么。

模糊處理的方式就和磨砂玻璃相同。它為用戶提供了一個界面，該界面要求進(jìn)行交互，同時顯示要跟隨的屏幕提示。導(dǎo)航菜單，密碼屏幕和文件夾/文件窗口是常見的示例。

10.Parallax

當(dāng)兩個（或多個）UI元素同時移動但速度不同時，將顯示視差，目的是建立層次結(jié)構(gòu)。

?交互式元素移動速度更快，并顯示在前景中。

?非交互式元素移動速度變慢并退回到背景。

視差引導(dǎo)用戶使用交互式UI元素，同時允許非交互式元素保留在屏幕上并保持設(shè)計統(tǒng)一性。

11.Dimensionality

維度使UI元素似乎具有多個交互方面，就像物理世界中的對象一樣。通過使元素看起來像是可折疊的，可翻轉(zhuǎn)的，浮動的或具有逼真的深度屬性而實現(xiàn)的。

作為一種敘事設(shè)備，尺寸暗示著UI元素的不同面被鏈接在一起并實現(xiàn)了無縫的屏幕過渡。

12.Dolly &?Zoom

滾動和縮放允許用戶在空間上“遍歷” UI元素或增加其比例以顯示更多細(xì)節(jié)。

?Dolly：Dolly發(fā)生在用戶的角度更接近（或遠(yuǎn)離）UI元素時。想象一下，一個拿著照相機(jī)走到一朵花的人近距離拍攝。

?Zoom：使用縮放時，用戶的視點和UI元素保持固定，但是該元素在用戶屏幕內(nèi)的大小增加（或減?。，F(xiàn)在，假設(shè)該人保持姿勢并使用相機(jī)的變焦功能使花朵顯得更大。

03?Motion Design的重點

1.Motion不僅僅是裝飾

Motion Design不是UI動畫的同義詞。這一點很關(guān)鍵，因為UI動畫幾乎總是被當(dāng)作一種經(jīng)過深思熟慮的裝飾，而與UX無關(guān)（除了增加魅力）。Motion不是裝飾，而是行為，行為只能幫助或阻礙用戶體驗。

2.兩種互動類型：實時與非實時

Motion Design涉及兩個基本交互：實時和非實時。

?當(dāng)用戶在屏幕上操縱UI元素時，實時交互可提供即時反饋。換句話說，motion行為會立即響應(yīng)用戶輸入。

?在用戶輸入之后發(fā)生非實時交互，這意味著用戶必須短暫暫停并觀察所產(chǎn)生的motion行為，然后才能繼續(xù)。

3.關(guān)注可用性

可用性一直是motion design中一直在強調(diào)的東西，主要通過下列幾個方面來實現(xiàn)。

?期望：當(dāng)用戶與UI元素交互時，他們期望看到哪些運動行為？運動是否符合預(yù)期或引起混亂？

?連續(xù)性：交互是否在整個用戶體驗中產(chǎn)生一致的運動行為？

?敘述：交互及其觸發(fā)的動作行為是否與滿足用戶意圖的事件的邏輯進(jìn)程相關(guān)聯(lián)？

?關(guān)系：UI元素的空間，美學(xué)和層次結(jié)構(gòu)屬性如何相互關(guān)聯(lián)并影響用戶的決策？運動如何影響存在的各種元素關(guān)系？

互動體驗需要各種靈巧形式的動作。當(dāng)堅持Motion Design原則時，即使最基本的UI元素也成為人類交流的復(fù)雜媒介。當(dāng)這些原理被忽略時，Motion就體現(xiàn)了自然界所沒有的特征。沒有任何美學(xué)上的輝煌可以克服由此帶來的笨拙。

Motion Design與數(shù)字產(chǎn)品UX之間的關(guān)系正在迅速成熟。原則上的Motion方法可以防止過度依賴趨勢，工具和技術(shù)的短暫使用。更好的是，它跨越了2D屏幕上元素的抽象運動與3D世界中運動感知之間的鴻溝。

更多知識干貨以及其他海外留學(xué)的資訊可以關(guān)注UXD交互工業(yè)產(chǎn)品設(shè)計分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE?
對于設(shè)計初學(xué)者，完成從0開始創(chuàng)作幾乎是不可能的，就像學(xué)習(xí)過程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫，這些素材庫能幫助同學(xué)們完成最初的設(shè)計想法積累，基于這樣的基礎(chǔ)再進(jìn)行個性化的創(chuàng)作，最終才能做出高質(zhì)量的作品集。全球院校最新作品集免費拿！添加小助手即可獲?。?/p>

UXD交互工業(yè)產(chǎn)品設(shè)計學(xué)院是尤克斯國際旗下的一家專注于交互、服務(wù)、工業(yè)、產(chǎn)品設(shè)計專業(yè)的頂級設(shè)計學(xué)院。除了一對一設(shè)計課、基礎(chǔ)技能課程、小組課題、設(shè)計評圖、聯(lián)合教學(xué)外，我們提供不定主題的公開課和內(nèi)部小組課，教學(xué)計劃課程由三大部分組成，包括基礎(chǔ)軟件技能教學(xué)、設(shè)計理論系統(tǒng)講座、申請必備知識解析等。

本文版權(quán)歸UXD尤克斯所有

部分圖片來自于網(wǎng)絡(luò)

如有侵權(quán)請與我們聯(lián)系