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

我們的世界是運(yùn)動(dòng)之一。即使在靜止的瞬間，葉子也會(huì)發(fā)抖，肺部也會(huì)擴(kuò)張。在數(shù)字產(chǎn)品設(shè)計(jì)領(lǐng)域，運(yùn)動(dòng)似乎是第二自然，這是對(duì)日常工作的擴(kuò)展，可以毫不費(fèi)力地加以利用。

從理論上講，使UI元素移動(dòng)很容易。在預(yù)定路徑上定義點(diǎn)，然后軟件對(duì)間隙進(jìn)行補(bǔ)間。實(shí)際上，它不是那樣工作的。工具和技術(shù)是必不可少的，但它們是從原理中獲取力量的。如果要提高數(shù)字產(chǎn)品的可用性，就必須以適用于無(wú)數(shù)用例的不變行為規(guī)則為基礎(chǔ)。

運(yùn)動(dòng)設(shè)計(jì)的起源

運(yùn)動(dòng)設(shè)計(jì)與UX的結(jié)合相對(duì)較新，但其根源是迪士尼。迪斯尼原理是為了講故事而提煉出身體運(yùn)動(dòng)的基本定律。它們使繪制的角色能夠移動(dòng)和表情，但不能充分滿足現(xiàn)代用戶界面對(duì)交互運(yùn)動(dòng)的需求。

當(dāng)代設(shè)計(jì)師試圖彌合這一差距。更具說(shuō)明性的示例之一是動(dòng)畫(huà)設(shè)計(jì)的十項(xiàng)原則，這是迪士尼動(dòng)畫(huà)專(zhuān)家Jorge R. Canedo Estrada的改編作品。

在建立運(yùn)動(dòng)中用戶體驗(yàn)的原則時(shí)，可以從以下幾點(diǎn)入手

A. 從UI動(dòng)畫(huà)中區(qū)分運(yùn)動(dòng)設(shè)計(jì)

B. 闡明運(yùn)動(dòng)如何幫助可用性

C. 解開(kāi)核心運(yùn)動(dòng)行為的內(nèi)部運(yùn)作方式

運(yùn)動(dòng)不僅僅是裝飾

動(dòng)作設(shè)計(jì)不是UI動(dòng)畫(huà)的代名詞。這一點(diǎn)很關(guān)鍵，因?yàn)閁I動(dòng)畫(huà)幾乎總是被當(dāng)作一種經(jīng)過(guò)深思熟慮的外觀，而與UX沒(méi)有任何關(guān)系（除了增加魅力）。動(dòng)作不是裝飾，而是行為，行為只能幫助或阻礙用戶體驗(yàn)。

兩種互動(dòng)類(lèi)型：實(shí)時(shí)與非實(shí)時(shí)

運(yùn)動(dòng)設(shè)計(jì)涉及兩個(gè)基本交互：實(shí)時(shí)和非實(shí)時(shí)。

當(dāng)用戶在屏幕上操作UI元素時(shí)，實(shí)時(shí)交互可提供即時(shí)反饋。換句話說(shuō)，動(dòng)作行為會(huì)立即響應(yīng)用戶輸入。

用戶輸入后會(huì)發(fā)生非實(shí)時(shí)交互，這意味著用戶必須短暫暫停并觀察所產(chǎn)生的運(yùn)動(dòng)行為，然后才能繼續(xù)。

實(shí)時(shí)交互：運(yùn)動(dòng)行為會(huì)立即響應(yīng)用戶輸入。

非實(shí)時(shí)交互：交互后，用戶必須短暫等待并觀察動(dòng)作行為。

運(yùn)動(dòng)支持可用性

運(yùn)動(dòng)設(shè)計(jì)必須以四種不同的方式支持可用性。

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

B. 連續(xù)性：交互是否在整個(gè)用戶體驗(yàn)中產(chǎn)生一致的運(yùn)動(dòng)行為？

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

D. 關(guān)系： UI元素的空間，美學(xué)和層次屬性如何相互關(guān)聯(lián)并影響用戶的決策？運(yùn)動(dòng)如何影響存在的各種元素關(guān)系？

數(shù)字產(chǎn)品的12種運(yùn)動(dòng)設(shè)計(jì)原理

1.緩和

緩和模仿現(xiàn)實(shí)對(duì)象隨時(shí)間加速和減速的方式。它適用于所有顯示運(yùn)動(dòng)的UI元素。

放松的反面是線性運(yùn)動(dòng)。顯示線性運(yùn)動(dòng)的UI元素立即從固定速度變?yōu)槿伲瑥娜僮優(yōu)楣潭?。這種行為在物理世界中不存在，并且對(duì)于用戶而言似乎停滯不前。

UI卡和相應(yīng)的椅子移動(dòng)很快，但是由于緩和，它們可以平穩(wěn)且受控地停下來(lái)。

2.偏移和延遲

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

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

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

這個(gè)加密貨幣應(yīng)用程序一次引入了多個(gè)UI元素。它們的到來(lái)有些交錯(cuò)，以通知用戶這些元素是相關(guān)的，但又是截然不同的。

3.父子元素關(guān)聯(lián)

父子元素關(guān)聯(lián)將一個(gè)UI元素的屬性鏈接到其他UI元素的屬性。當(dāng)父元素中的屬性更改時(shí)，子元素的鏈接屬性也會(huì)更改。所有元素屬性可以相互鏈接。

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

父子元素關(guān)聯(lián)會(huì)在UI元素之間創(chuàng)建關(guān)系，建立層次結(jié)構(gòu)，并允許多個(gè)元素立即與用戶進(jìn)行通信。因此，關(guān)聯(lián)在實(shí)時(shí)交互中使用時(shí)影響最大。

藍(lán)色滑塊的位置控制背景遮罩的不透明度，燈泡周?chē)陌l(fā)光效果的散布以及光強(qiáng)度標(biāo)度的數(shù)值。

4.轉(zhuǎn)型

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

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

轉(zhuǎn)換表示下載的開(kāi)始，中間和完成。

5.數(shù)據(jù)變化

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

值的變化傳達(dá)了數(shù)據(jù)表示的動(dòng)態(tài)性質(zhì)，并告知用戶數(shù)據(jù)是交互式的，并且可能會(huì)受到一定程度的影響。當(dāng)沒(méi)有動(dòng)靜地引入值時(shí)，用戶參與數(shù)據(jù)的意愿降低。

動(dòng)態(tài)引入值以向用戶顯示他們有能力影響數(shù)據(jù)。

6.遮罩

遮罩是UI元素各部分的戰(zhàn)略性揭示和隱藏。通過(guò)更改元素外圍的形狀和比例，遮罩會(huì)發(fā)出信號(hào)，表示實(shí)用性發(fā)生了變化，同時(shí)允許元素本身保持可識(shí)別性。因此，理想的選擇是諸如照片和插圖之類(lèi)的詳細(xì)視覺(jué)效果。

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

遮罩用于從圖像捕獲到上傳到在線店面中的過(guò)渡。

7.疊加

在2D空間中，沒(méi)有深度，UI元素只能沿X軸或Y軸移動(dòng)。疊加會(huì)在UI的2D空間中產(chǎn)生前景色/背景色的錯(cuò)覺(jué)。通過(guò)模擬深度，覆蓋可以根據(jù)用戶需要隱藏和顯示元素。

使用重疊時(shí)，信息層次結(jié)構(gòu)是一個(gè)重要的考慮因素。例如，用戶在做筆記應(yīng)用程序中應(yīng)該首先看到的是他們的筆記列表。然后，可以使用滑動(dòng)來(lái)公開(kāi)每個(gè)消息的輔助選項(xiàng)，例如刪除或存檔。

重疊式運(yùn)動(dòng)可讓用戶快速歸檔或刪除此記事應(yīng)用中的條目。

8.克隆

克隆是一種運(yùn)動(dòng)行為，其中一個(gè)UI元素拆分為其他元素。這是突出顯示重要信息或交互選項(xiàng)的聰明方法。

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

用戶可以放心地單擊彩色圓圈，因?yàn)樗鼈冿@然源自“添加注釋”圖標(biāo)。

9.模糊

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

它為用戶提供了一個(gè)界面，該界面要求進(jìn)行交互，同時(shí)顯示要跟隨的屏幕提示。導(dǎo)航菜單，密碼屏幕和文件夾/文件窗口是常見(jiàn)的示例。

模糊處理為用戶提供了重要的互動(dòng)方式，同時(shí)讓他們保持產(chǎn)品敘事的方向。

10.視差

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

A. 交互式元素移動(dòng)速度更快，并顯示在前景中。

B. 非交互式元素的移動(dòng)速度變慢并退回到背景。

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

使用視差時(shí)，最重要的交互式元素移動(dòng)最快，而非交互式元素移動(dòng)較慢并退回到背景。

11.維度

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

作為一種敘事設(shè)備，維度意味著UI元素的不同側(cè)面被鏈接在一起，并實(shí)現(xiàn)了無(wú)縫的屏幕過(guò)渡。

維度意味著2D UI元素具有多個(gè)交互方面，就像物理世界中的對(duì)象一樣。

12.變焦

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

A. 滾動(dòng)：滾動(dòng)視角發(fā)生在用戶的角度更接近（或遠(yuǎn)離）UI元素時(shí)。想象一下，一個(gè)拿著照相機(jī)的人走到一朵花前要近距離拍攝。

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

滾動(dòng)：用戶的視點(diǎn)似乎越來(lái)越接近背景圖像。

縮放：用戶的視角不會(huì)更接近圖像。而是圖像的比例會(huì)增加。

運(yùn)動(dòng)就是溝通

互動(dòng)體驗(yàn)的需求運(yùn)動(dòng)在其所有的輕快和微妙的形式。當(dāng)堅(jiān)持運(yùn)動(dòng)設(shè)計(jì)原則時(shí)，即使最基本的UI元素也成為人類(lèi)交流的復(fù)雜媒介。當(dāng)這些原理被忽略時(shí)，運(yùn)動(dòng)就體現(xiàn)了自然界所沒(méi)有的特征。

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

文章來(lái)源：站酷    作者：DuiaDesign

藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)