01

寫在前面

我們的世界是一個(gè)運(yùn)動(dòng)的世界。即使在靜止的時(shí)候，樹葉也會(huì)顫抖，肺部也會(huì)擴(kuò)張。在數(shù)字產(chǎn)品設(shè)計(jì)領(lǐng)域，運(yùn)動(dòng)似乎是第二天性，是日常生活的延伸，而數(shù)字產(chǎn)品動(dòng)畫設(shè)計(jì)離不開日常生活的靈感。

交互動(dòng)畫對數(shù)字產(chǎn)品的用戶體驗(yàn)有著深刻的影響，在用戶界面體驗(yàn)中，動(dòng)作不僅僅是一個(gè)視覺裝飾；它更能夠促進(jìn)用戶對產(chǎn)品的參與，擴(kuò)大設(shè)計(jì)交流的范圍。

從理論上講，移動(dòng)UI元素很容易，只需要利用軟件定義路徑的起始點(diǎn)，但只是單純的這樣設(shè)置，你會(huì)發(fā)現(xiàn)，效果很“死板”，僵硬。在現(xiàn)實(shí)中，情況并非如此。工具和技術(shù)是必不可少的，但它們的動(dòng)作需要一些日常生活的參考，如果移動(dòng)是為了提高數(shù)字產(chǎn)品的可用性，它必須建立在適用于各種各樣的使用案例的不變的行為規(guī)則的基礎(chǔ)上。

02

寫關(guān)于運(yùn)動(dòng)設(shè)計(jì)的起源

動(dòng)畫設(shè)計(jì)和用戶體驗(yàn)的結(jié)合相對較新，其根源是迪士尼。弗蘭克·托馬斯(Frank Thomas)和奧利·約翰斯頓(Ollie Johnston)是華特迪士尼最受重視的動(dòng)畫師，也是《匹諾曹》(Pinnochio)、《小鹿斑比》(Bambi)和《幻想曲》(Fantasia)等經(jīng)典作品的重要貢獻(xiàn)者。他們的12個(gè)動(dòng)畫基本原則對電影、電視和數(shù)字內(nèi)容的動(dòng)態(tài)圖形產(chǎn)生深刻影響。

迪士尼原理是為了講故事而提煉出物理運(yùn)動(dòng)的基本法則。使繪制的角色通過移動(dòng)表達(dá)情感，使故事生動(dòng)活潑，但不能充分滿足現(xiàn)代數(shù)字產(chǎn)品對交互動(dòng)畫的需求。

動(dòng)畫專家Jorge R. Canedo Estrada根據(jù)迪士尼動(dòng)畫原理改編了《動(dòng)作設(shè)計(jì)的10個(gè)原則》。然而，如果要將這些經(jīng)驗(yàn)全面應(yīng)用于數(shù)字產(chǎn)品設(shè)計(jì)，還是需要進(jìn)行深入研究。

（動(dòng)作設(shè)計(jì)的10個(gè)原則，來源：Jorge R. Canedo Estrada）

·首先要明白

運(yùn)動(dòng)設(shè)計(jì)不僅僅是裝飾，而是行為，行為只能幫助或阻礙用戶體驗(yàn)。與UI動(dòng)效不同的是，UI動(dòng)效裝飾性更強(qiáng)一些。

下面我將用一些案例，去深入理解分析交互動(dòng)畫的原理及原則

03

寫交互動(dòng)畫設(shè)計(jì)分為兩種基本交互：實(shí)時(shí)與非實(shí)時(shí)

·實(shí)時(shí)交互

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

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

（圖片來源于：Stan Yakusevich）

·非實(shí)時(shí)交互

在用戶操作之后發(fā)生非實(shí)時(shí)交互，用戶操作后，暫停操作并觀察所產(chǎn)生的動(dòng)作行為，確認(rèn)后才能繼續(xù)。

（圖片來源于 Vitaly Rubtsov）

一、緩和

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

卡片和相應(yīng)的椅子迅速移動(dòng)，但由于放松，它們變得平穩(wěn)和可控制的停止。

（圖片來源于：Saptarshi Prakash）

二、偏移和延遲

這個(gè)加密貨幣界面一次引入了多個(gè)UI元素。它們的到來有點(diǎn)交錯(cuò)，以通知用戶元素是相關(guān)的，但又是不同的，當(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)。

（圖片來源于：Gapsy Studio）

三、鏈接

在此，藍(lán)色滑塊的位置控制背景遮罩的不透明度，燈泡周圍的發(fā)光效果的散布以及光強(qiáng)標(biāo)度的數(shù)值，將一個(gè)UI元素的屬性鏈接到其他UI元素的屬性。當(dāng)父元素中的屬性更改時(shí)，子元素的鏈接屬性也會(huì)更改。所有元素屬性可以相互鏈接。

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

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

（圖片來源于：Ayoub Kada）

四、轉(zhuǎn)換

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

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

（圖片來源于：Aaron Iker）

五、數(shù)值變化

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

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

（圖片來源于：Taras Migulko）

六、遮罩

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

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

（圖片來源于：SELECTO）

七.克隆

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

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

（圖片來源于：Ariuka）

八、隱晦

想象磨砂玻璃門。它需要交互才能打開，但是可以隱約看到門里面的動(dòng)靜，同樣的，在數(shù)字界面中可以在某種程度上，辨別另一面正在等待什么。

(圖片來源于Kyle Abarquez)

九、視差

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

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

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

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

(圖片來源于：Tubik)

十、維度

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

維度意味著UI元素的不同層面被鏈接在一起，并實(shí)現(xiàn)了無縫的屏幕過渡。

（圖片來源于：Sang Nguyen）

十一、推拉和縮放

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

推拉

推拉：當(dāng)用戶的視角靠近（或遠(yuǎn)離）UI元素時(shí)，會(huì)發(fā)生推拉。想象一下，一個(gè)人拿著相機(jī)走向一朵花，想近距離拍攝。

（圖片來源于：Yanosh）

縮放

用戶的視角無法靠近圖像，而是增加了圖像的比例。通過縮放，用戶的視角和UI元素保持不變，但是元素在用戶屏幕中的大小增加（或縮?。，F(xiàn)在想象一下，這個(gè)人呆在原地，用相機(jī)的變焦功能使畫面顯得更大。

(圖片來源于：Victor Aldabalde)

04

交互動(dòng)畫就是交流

互動(dòng)體驗(yàn)的需求在于輕快和微妙的形式，當(dāng)動(dòng)畫遵循日常生活規(guī)律時(shí)，即使是最基本的UI元素也會(huì)成為人機(jī)交互的重要媒介，那當(dāng)這些原則被忽視時(shí)，無法體現(xiàn)出自然界的特征，也就沒有任何美感

最后的嘮叨

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

作者:郭然然

來源:微信公眾號(hào):58UXD

出處
:https://mp.weixin.qq.com/s/do477HdcqT4IqUcqAS9KaQ