什么是交互動(dòng)效

界面交互動(dòng)效：

用戶(hù)與界面進(jìn)行交流互動(dòng)時(shí)以動(dòng)效的形式進(jìn)行信息傳達(dá)。用戶(hù)與產(chǎn)品交流過(guò)程中，信息的傳遞是雙向的——用戶(hù)向系統(tǒng)發(fā)出操作指令，系統(tǒng)接收信號(hào)后，系統(tǒng)發(fā)出的信號(hào)以動(dòng)效或其他用戶(hù)可識(shí)別的視覺(jué)形式傳遞給用戶(hù) ，從而實(shí)現(xiàn)用戶(hù)與系統(tǒng)的雙向互動(dòng)。交互動(dòng)效是指具有交互屬性的動(dòng)效設(shè)計(jì)，發(fā)生于交互操作之后。

交互動(dòng)效的作用

通過(guò)交互動(dòng)效可以有效地進(jìn)行信息傳遞并實(shí)現(xiàn)用戶(hù)與產(chǎn)品的實(shí)時(shí)交流。同時(shí)動(dòng)效虛擬現(xiàn)實(shí)的時(shí)空感、營(yíng)造界面空間的真實(shí)性，使用戶(hù)在交互的過(guò)程中感受到操作的合理性，從而降低界面使用的學(xué)習(xí)成本。除此之外，動(dòng)效設(shè)計(jì)也能夠彰顯產(chǎn)品品牌特性與差異化。

交互動(dòng)效對(duì)產(chǎn)品的作用可以分為三個(gè)層次——

首先，實(shí)用性是第一層次，交互動(dòng)效的實(shí)用性與其使用場(chǎng)景相關(guān)聯(lián)。常見(jiàn)的動(dòng)效使用場(chǎng)景包括轉(zhuǎn)場(chǎng)、加載、引導(dǎo)、反饋等，不同場(chǎng)景的動(dòng)效的作用與目標(biāo)有所不同，具體會(huì)在后文詳細(xì)介紹給大家；其次，交互動(dòng)效的認(rèn)知性是第二層次，其幫助系統(tǒng)更有效地傳達(dá)信息；最后，審美性是認(rèn)知性和實(shí)用性基礎(chǔ)上的升華，其最能體現(xiàn)產(chǎn)品的品牌屬性，是情感化設(shè)計(jì)的有效切入點(diǎn)，也是動(dòng)效評(píng)價(jià)的最高標(biāo)準(zhǔn)。

實(shí)用性 - 提升產(chǎn)品易用性

交互動(dòng)效的核心功能是傳達(dá)信息并闡釋界面跳轉(zhuǎn)之間的邏輯，幫助用戶(hù)更好的和產(chǎn)品進(jìn)行信息互動(dòng)。交互動(dòng)效的實(shí)用性需要根據(jù)場(chǎng)景來(lái)區(qū)分，分別有轉(zhuǎn)場(chǎng)動(dòng)效、反饋動(dòng)效、加載動(dòng)效、引導(dǎo)動(dòng)效四種最常見(jiàn)的場(chǎng)景：

轉(zhuǎn)場(chǎng)動(dòng)效。轉(zhuǎn)場(chǎng)動(dòng)效是指從一個(gè)界面過(guò)渡到另一個(gè)界面的過(guò)程。轉(zhuǎn)場(chǎng)動(dòng)效幫助用戶(hù)理解界面間的層級(jí)關(guān)系，也給用戶(hù)方位感和空間感。通過(guò)轉(zhuǎn)場(chǎng)動(dòng)效用戶(hù)可以更清晰地了解產(chǎn)品的界面框架、邏輯架構(gòu)，以及界面和元素之間的空間關(guān)系并隨時(shí)感受界面和元素的空間變化。

轉(zhuǎn)場(chǎng)動(dòng)效常見(jiàn)的變化形式包括位移、變形、旋轉(zhuǎn)、縮放，下圖為您展示幾種常見(jiàn)的轉(zhuǎn)場(chǎng)形式：

反饋動(dòng)效。反饋動(dòng)效是用戶(hù)進(jìn)行某個(gè)操作之后，系統(tǒng)以動(dòng)態(tài)的形式向用戶(hù)傳達(dá)信息的過(guò)程。通過(guò)反饋動(dòng)效用戶(hù)可以了解系統(tǒng)的運(yùn)行狀態(tài)，使用戶(hù)操作移動(dòng)應(yīng)用反饋結(jié)果更加可視化，以此可以方便用戶(hù)的操縱。

加載動(dòng)效。加載動(dòng)效常用于應(yīng)用系統(tǒng)還在運(yùn)行狀態(tài)的場(chǎng)景，其主要的目的是利用動(dòng)效的表現(xiàn)形式降低用戶(hù)的等待感。如下圖的 Bilibili 加載動(dòng)效，延緩用戶(hù)等待的同時(shí)強(qiáng)調(diào)品牌形象。

引導(dǎo)動(dòng)效。引導(dǎo)用戶(hù)操作的動(dòng)效是引導(dǎo)動(dòng)效，常用在新手引導(dǎo)。引導(dǎo)動(dòng)效的主要目的是通過(guò)運(yùn)動(dòng)的元素來(lái)吸引用戶(hù)注意，達(dá)到引導(dǎo)用戶(hù)操作的目的，如下圖美團(tuán)商品頁(yè)的紅包動(dòng)效：

認(rèn)知性 - 更有效地傳達(dá)信息

動(dòng)效的認(rèn)知性是指動(dòng)效傳達(dá)信息的功能，通過(guò)動(dòng)效的形式來(lái)虛擬用戶(hù)生活經(jīng)驗(yàn)中的物體運(yùn)動(dòng)狀態(tài)，從而降低用戶(hù)使用產(chǎn)品的學(xué)習(xí)成本。動(dòng)效滿(mǎn)足用戶(hù)的心智模型，尤其在新的產(chǎn)品和功能設(shè)計(jì)中這一點(diǎn)尤為重要。下圖是華為手機(jī)充電時(shí)的動(dòng)效，利用運(yùn)動(dòng)的圓點(diǎn)模擬電流進(jìn)行充電的動(dòng)效。

動(dòng)效的審美性-提升產(chǎn)品品牌

1. 時(shí)間與速率體現(xiàn)運(yùn)動(dòng)物體的質(zhì)感與性格

動(dòng)效設(shè)計(jì)的兩個(gè)核心參數(shù)是運(yùn)動(dòng)時(shí)間和運(yùn)動(dòng)速率，時(shí)間與曲線(xiàn)影響用戶(hù)對(duì)動(dòng)效的感知度、也表現(xiàn)了動(dòng)效的質(zhì)量和性格。因此，動(dòng)效的時(shí)間、速率是提示產(chǎn)品品牌差異化的關(guān)鍵因素。

1）運(yùn)動(dòng)時(shí)間

元素變換時(shí)，速度要適度，既不能太慢避免用戶(hù)等待，也不能太快導(dǎo)致用戶(hù)無(wú)法及時(shí)識(shí)別信息。界面中最優(yōu)的動(dòng)效時(shí)長(zhǎng)是 200-500ms，而手機(jī)界面中最合適的時(shí)長(zhǎng)是 200-300ms。

運(yùn)動(dòng)時(shí)間的長(zhǎng)短可以體現(xiàn)物體運(yùn)動(dòng)的性格和質(zhì)感，從而影響整個(gè)產(chǎn)品的品牌調(diào)性。運(yùn)動(dòng)時(shí)間越少，運(yùn)動(dòng)越敏捷越能傳達(dá)出一種效率感；時(shí)間越多，運(yùn)動(dòng)越遲緩越傳達(dá)出穩(wěn)重感。

2）運(yùn)動(dòng)速率和緩動(dòng)曲線(xiàn)

動(dòng)效的運(yùn)動(dòng)速率是表現(xiàn)動(dòng)效質(zhì)感的另一個(gè)重要因素，動(dòng)效設(shè)計(jì)中常用“位移 – 時(shí)間”運(yùn)動(dòng)曲線(xiàn)來(lái)表達(dá)運(yùn)動(dòng)速率：橫軸表示時(shí)間，縱軸表示在一個(gè)方向上的位移。

在現(xiàn)實(shí)生活環(huán)境中物體的運(yùn)動(dòng)都遵循著物理規(guī)律，帶有阻力的緩動(dòng)曲線(xiàn)可以營(yíng)造真實(shí)、自然的感覺(jué)?？梢酝ㄟ^(guò)調(diào)節(jié)動(dòng)效的緩動(dòng)曲線(xiàn)來(lái)模仿真實(shí)物理世界的這些運(yùn)動(dòng)狀態(tài)，從而表現(xiàn)運(yùn)動(dòng)主體的質(zhì)感。

常用的緩動(dòng)曲線(xiàn)有標(biāo)準(zhǔn)曲線(xiàn)、減速運(yùn)動(dòng)曲線(xiàn)、加速運(yùn)動(dòng)曲線(xiàn)、彈跳運(yùn)動(dòng)曲線(xiàn)四種類(lèi)型，緩動(dòng)曲線(xiàn)也可以組合使用。

標(biāo)準(zhǔn)曲線(xiàn)（緩入緩出）

開(kāi)始和結(jié)束處為靜止，沒(méi)有加速和減速。標(biāo)準(zhǔn)曲線(xiàn)比較適用于運(yùn)動(dòng)主體均在界面中的動(dòng)效，例如卡片移動(dòng)、選項(xiàng)卡切換、圖片縮放、加載動(dòng)效等：

減速運(yùn)動(dòng)曲線(xiàn)（緩出）

運(yùn)動(dòng)主體從最高速開(kāi)始，并逐漸減小的速度即為減速曲線(xiàn)。這個(gè)動(dòng)效的出現(xiàn)場(chǎng)景常常代表運(yùn)動(dòng)主體進(jìn)入屏幕的時(shí)候：

加速運(yùn)動(dòng)曲線(xiàn)

速度從 0 開(kāi)始，逐漸加速完成運(yùn)動(dòng)的曲線(xiàn)稱(chēng)之為加速曲線(xiàn)。這種運(yùn)動(dòng)速度形式一般用于對(duì)象離開(kāi)屏幕的動(dòng)效：

彈跳運(yùn)動(dòng)曲線(xiàn)：

物體向一個(gè)方向加速運(yùn)動(dòng)，之后反向減速運(yùn)動(dòng)達(dá)到最高處開(kāi)始繼續(xù)返回之前的方向加速運(yùn)動(dòng)。利用彈跳曲線(xiàn)模擬出小球落地的運(yùn)動(dòng)速度表現(xiàn)物體的“彈性”質(zhì)感。比如手機(jī)鎖屏?xí)r，屏幕落下的彈跳：

2. 兩個(gè)品牌風(fēng)格各異的案例介紹

現(xiàn)如今市場(chǎng)上很多移動(dòng)應(yīng)用同質(zhì)化嚴(yán)重，可以通過(guò)提升交互動(dòng)效的審美性來(lái)實(shí)現(xiàn)品牌差異化，同時(shí)給用戶(hù)一種愉快的用戶(hù)體驗(yàn)。表現(xiàn)動(dòng)效的審美功能需要考慮產(chǎn)品的品牌定位、也要考慮用戶(hù)的特征。

1）夸克——簡(jiǎn)而美的品牌定位

比如夸克瀏覽器以“簡(jiǎn)而美”的品牌定位，目標(biāo)是打造簡(jiǎn)潔、高效的搜索體驗(yàn)。動(dòng)效設(shè)計(jì)速度較快從而突出“高效”這一屬性；運(yùn)動(dòng)形式較為單一，符合極簡(jiǎn)化的產(chǎn)品品牌定位，也為用戶(hù)提供一個(gè)高效快捷的使用環(huán)境；在語(yǔ)音識(shí)別頁(yè)，利用線(xiàn)條這一視覺(jué)元素突出精簡(jiǎn)感。

2）每日故宮——莊重典雅的國(guó)風(fēng)品牌

然而，以傳統(tǒng)與古風(fēng)定位的每日故宮 APP，在動(dòng)效設(shè)計(jì)上采用全然不同的風(fēng)格。選取日歷、祥云、月明圓缺來(lái)作為產(chǎn)品的主要視覺(jué)符號(hào)，轉(zhuǎn)場(chǎng)動(dòng)效速度遲緩，突出莊重感；轉(zhuǎn)場(chǎng)變化方式多采用透明度變化，宛若古代水墨畫(huà)暈染的朦朧感......產(chǎn)品的視覺(jué)設(shè)計(jì)與動(dòng)效設(shè)計(jì)呈現(xiàn)婉轉(zhuǎn)優(yōu)雅，展示出品牌沉穩(wěn)、莊重的感覺(jué)。

結(jié)語(yǔ)

本文向大家介紹了交互動(dòng)效的基礎(chǔ)概念，并從交互動(dòng)效的實(shí)用性、認(rèn)知性、審美性幾個(gè)方面分析其對(duì)產(chǎn)品體驗(yàn)的影響。交互動(dòng)效是用戶(hù)與產(chǎn)品進(jìn)行信息交流的橋梁，也是提升移動(dòng)應(yīng)用產(chǎn)品情感化的重要表現(xiàn)形式。從品牌傳遞再到體驗(yàn)優(yōu)化設(shè)計(jì)師們需對(duì)動(dòng)效細(xì)節(jié)進(jìn)行不斷的打磨，筆者將會(huì)在下一期為大家?guī)?lái)“設(shè)計(jì)師如何進(jìn)行系統(tǒng)地交互動(dòng)效設(shè)計(jì)”的分享。

歡迎關(guān)注作者微信公眾號(hào)：