動(dòng)效對產(chǎn)品的可用性體驗(yàn)有多維度的影響。在界面中動(dòng)效不僅僅是一種視覺裝飾，它能夠提升產(chǎn)品的參與度并擴(kuò)展交流的范圍。

本文追根溯源，先從動(dòng)效的起源講起，一步步推進(jìn)與產(chǎn)品、體驗(yàn)之間的關(guān)系，最后通過案例分析動(dòng)效設(shè)計(jì)的原理和應(yīng)用。一起來看看吧～

一、動(dòng)效設(shè)計(jì)的起源

動(dòng)效與用戶體驗(yàn)的結(jié)合相對較新，其根源是迪士尼動(dòng)畫設(shè)計(jì)的十二個(gè)條基本原理。迪士尼動(dòng)畫原理是為了講故事而提煉出的基本的物理運(yùn)動(dòng)規(guī)律。這些原理能讓繪制的卡通角色移動(dòng)和表演，但不能充分滿足現(xiàn)代UI界面的交互需求。

為了彌合這個(gè)差距，動(dòng)效專家Canedo Estrada改編的《動(dòng)效設(shè)計(jì)的10條原理》更適合應(yīng)用到數(shù)字產(chǎn)品設(shè)計(jì)中。

在圍繞界面元素建立用戶體驗(yàn)時(shí)，重新定位動(dòng)效原理的關(guān)鍵在于：

• 將動(dòng)效設(shè)計(jì)與UI動(dòng)畫區(qū)分開;
• 闡明動(dòng)效如何幫助可用性;
• 解開核心動(dòng)效的內(nèi)部工作機(jī)制。

二、動(dòng)效設(shè)計(jì)與用戶體驗(yàn)

在討論動(dòng)效設(shè)計(jì)的原理之前，重要的是要強(qiáng)調(diào)動(dòng)效不僅僅是裝飾，而是一種用來幫助用戶體驗(yàn)的行為。動(dòng)效設(shè)計(jì)涉及兩種基本的交互類型：實(shí)時(shí)和非實(shí)時(shí)。

 實(shí)時(shí) 

當(dāng)用戶在屏幕上點(diǎn)擊UI元素時(shí)，實(shí)時(shí)交互提供即時(shí)反饋，會(huì)對用戶的操作做出即時(shí)響應(yīng)。

 非實(shí)時(shí) 

非實(shí)時(shí)交互發(fā)生在用戶操作后，這意味著用戶需要經(jīng)過短暫的轉(zhuǎn)場才能看到結(jié)果，然后再繼續(xù)。

另外動(dòng)效設(shè)計(jì)通過四種不同的方式來提升產(chǎn)品的可用性：

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

2.連續(xù)性：交互在整個(gè)體驗(yàn)中是否發(fā)生一致的運(yùn)動(dòng)行為？

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

4.關(guān)系：UI界面的空間、美學(xué)和層級結(jié)構(gòu)如何相互關(guān)聯(lián)并影響用戶的決策？動(dòng)效如何影響各種元素的關(guān)系？

三、產(chǎn)品動(dòng)效設(shè)計(jì)原理

這里提供12種動(dòng)效設(shè)計(jì)原理的解析，每一種對應(yīng)不同的案例，從更直觀的角度來解讀抽象的原理。

1、緩動(dòng)(Easing)

緩動(dòng)效果模擬了現(xiàn)實(shí)世界中對象隨時(shí)間加速或減速的方式。它適用于所有運(yùn)動(dòng)的UI元素。下圖中的卡片和對應(yīng)的椅子移動(dòng)速度很快，但由于緩動(dòng)效果它們可以平穩(wěn)地受到控制。

2、偏移和延遲(Offset & Delay)

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

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

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

3、父子關(guān)系(Parenting)

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

在下圖中，將父元素(藍(lán)色滑塊)的位置與子元素(燈泡發(fā)光效果&光照強(qiáng)度)相關(guān)聯(lián)。當(dāng)父元素左右移動(dòng)時(shí)，子元素的發(fā)光效果的范圍和光照強(qiáng)度的數(shù)值會(huì)發(fā)生變化。

父子關(guān)系在元素間創(chuàng)建關(guān)系并建立層級結(jié)構(gòu)，允許多個(gè)元素同時(shí)與用戶交互。因此這種效果非常適用于實(shí)時(shí)交互中。

4、轉(zhuǎn)換(Transformation)

當(dāng)一種UI元素變成另一種形式時(shí)就會(huì)發(fā)生轉(zhuǎn)換。例如，轉(zhuǎn)換展示了下載的開始、中間和完成狀態(tài)——下載按鈕轉(zhuǎn)換為進(jìn)度條，進(jìn)度條轉(zhuǎn)換為完成圖標(biāo)。

從UX角度看，轉(zhuǎn)換效果告知用戶元素的狀態(tài)發(fā)生了變化并將信息傳遞給用戶，提高了用戶的認(rèn)知度。

5、數(shù)值變化(Value Change)

數(shù)值的變化(數(shù)字、文本或圖形）在數(shù)字界面中非常豐富，從銀行APP到日歷到電商網(wǎng)站的各種產(chǎn)品中都會(huì)出現(xiàn)。

在某種程度上，數(shù)據(jù)的動(dòng)態(tài)表達(dá)和交流可能會(huì)對數(shù)據(jù)的價(jià)值產(chǎn)生影響。例如下圖中的數(shù)值被動(dòng)態(tài)引入，向用戶顯示他們有能力影響數(shù)據(jù)，提升了參與活動(dòng)的意愿。

6、遮罩(Masking)

遮罩是對界面上的部分內(nèi)容進(jìn)行戰(zhàn)略性的顯示和隱藏。通過改變元素的形狀和比例，在改變元素效果的同時(shí)允許元素本身保持可識別性。因此，照片和插圖等視覺形式是理想的選擇。

從可用性的角度來看，設(shè)計(jì)師可以通過遮罩向用戶展示產(chǎn)品正在進(jìn)行一系列的交互。

7、覆蓋(Overlay)

二維空間中沒有深度，元素只能沿X或Y軸移動(dòng)，疊加在界面中創(chuàng)造出前景/背景相區(qū)分的位置關(guān)系。通過模擬深度，覆蓋可以根據(jù)用戶的需要隱藏和顯示元素。

在使用覆蓋時(shí)，信息層級結(jié)構(gòu)是重要的考慮因素。例如，用戶在筆記應(yīng)用中首先應(yīng)該看到的是筆記列表，然后使用覆蓋來顯示每個(gè)筆記的輔助選項(xiàng)，如刪除或歸檔。

8、克隆(Cloning)

克隆是將現(xiàn)有的對象拆分成新對象,這是一種突出顯示重要信息或交互選項(xiàng)的方法。

通過克隆將元素與界面相鏈接，如果元素只是突然出現(xiàn)或消失沒有關(guān)聯(lián)性，那么用戶將缺乏信心去交互。

9、模糊(Obscuration)

想象一扇磨砂玻璃門，雖然看不清門后的東西但是我們能察覺到門后事物的存在。

模糊的工作原理是一樣的。它為用戶提供提示，讓用戶意識到自己正在操作的界面之后還有其他的層級結(jié)構(gòu)。導(dǎo)航菜單、密碼屏幕和文件窗口是常見的示例。

10、視差(Parallax)

當(dāng)兩個(gè)(或更多)元素同時(shí)以不同的速度移動(dòng)時(shí)會(huì)構(gòu)成視差效果。

視差的主要目的是劃分層級結(jié)構(gòu)：

• 可交互的元素移動(dòng)速度更快，出現(xiàn)在前景中;
• 非交互式元素移動(dòng)速度較慢，退到背景中。

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

11、維度(Dimensionality)

維度使界面元素具備具多個(gè)方向的交互，這種行為是使元素看起來是可折疊、可翻轉(zhuǎn)、浮動(dòng)的或具有深度。

作為一種敘述性工具，維度意味著元素的不同側(cè)面是相互聯(lián)系的，并且可以實(shí)現(xiàn)無縫的屏幕過渡。

12、平移與縮放(Dolly & Zoom)

平移與縮放通過視角的變化能產(chǎn)生更多空間上的體驗(yàn)，逐級遞進(jìn)顯示更高級別的細(xì)節(jié)。

平移：點(diǎn)擊元素后發(fā)生距離遠(yuǎn)近的平移，用戶的視點(diǎn)會(huì)越來越接近圖像。(一個(gè)人拿著照相機(jī)走到一朵花前面近距離拍攝)

縮放：用戶的視角與圖像的距離保持不變，但圖像在屏幕中的比例會(huì)增加。(這個(gè)人站在原地不動(dòng)，只利用相機(jī)的變焦功能使花顯得更大)

四、總結(jié)——?jiǎng)有Ъ唇涣?/span>

互動(dòng)體驗(yàn)要求動(dòng)效具備敏捷和微妙的形式。堅(jiān)持動(dòng)效設(shè)計(jì)原理，即使最基本的界面元素也能成為交流的復(fù)雜媒介。

動(dòng)效設(shè)計(jì)與產(chǎn)品用戶體驗(yàn)之間的關(guān)系正在迅速成熟，而且動(dòng)效跨越了二維屏幕上元素的抽象運(yùn)動(dòng)和3D世界中對運(yùn)動(dòng)的感知之間的鴻溝。

文章來源：UI中國   作者：Clip設(shè)計(jì)夾

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)