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

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

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

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

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

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

首先，實(shí)用性是第一層次，交互動(dòng)效的實(shí)用性與其使用場景相關(guān)聯(lián)。常見的動(dòng)效使用場景包括轉(zhuǎn)場、加載、引導(dǎo)、反饋等，不同場景的動(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)效評價(jià)的最高標(biāo)準(zhǔn)。

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

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

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

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

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

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

<img alt="新手科普！交互動(dòng)效基礎(chǔ)知識(shí)入門" aligncenter" src="/uploads/allimg/20220817/1-220QF9244M29.jpg"/>

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

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

動(dòng)效的認(rèn)知性是指動(dòng)效傳達(dá)信息的功能，通過動(dòng)效的形式來虛擬用戶生活經(jīng)驗(yàn)中的物體運(yùn)動(dòng)狀態(tài)，從而降低用戶使用產(chǎn)品的學(xué)習(xí)成本。動(dòng)效滿足用戶的心智模型，尤其在新的產(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í)間與曲線影響用戶對動(dòng)效的感知度、也表現(xiàn)了動(dòng)效的質(zhì)量和性格。因此，動(dòng)效的時(shí)間、速率是提示產(chǎn)品品牌差異化的關(guān)鍵因素。

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

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

運(yùn)動(dòng)時(shí)間的長短可以體現(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)曲線

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

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

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

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

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

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

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

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

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

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

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

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

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

1）夸克——簡而美的品牌定位

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

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

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

結(jié)語

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

作者：設(shè)計(jì)小問