在日常的用戶交互過程中，交互動(dòng)效的存在是不可忽視的因素，而合理的交互動(dòng)效，更是可以幫助用戶理解，為用戶提供更加流暢的功能體驗(yàn)，又或者是傳遞產(chǎn)品調(diào)性。那么，如何才能做好交互動(dòng)效？本文作者從三方面進(jìn)行了解讀，一起來看。

前言

當(dāng)我們提及“動(dòng)效設(shè)計(jì)”這一詞，第一印象往往是那一類炫酷的極具視覺表現(xiàn)力的動(dòng)效，而有一類動(dòng)效，它們?nèi)绱猴L(fēng)細(xì)雨般融入了用戶交互過程的點(diǎn)滴之中，為打造符合用戶心智的流暢體驗(yàn)?zāi)鲋暙I(xiàn)，它們就是「交互動(dòng)效」。

本文將從以下三個(gè)方面展開介紹——「什么是交互動(dòng)效」「為什么要重視交互動(dòng)效」「交互動(dòng)效的設(shè)計(jì)流程和方法」，帶領(lǐng)大家了解交互動(dòng)效的基礎(chǔ)概念，以及具體的設(shè)計(jì)流程方法，希望大家看完后能夠?qū)换?dòng)效有更加清晰的認(rèn)知。

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

交互動(dòng)效指的是那些用于引導(dǎo)和響應(yīng)用戶交互行為的動(dòng)效，它們與用戶的交互行為密切相關(guān)，起到幫助用戶理解、提供操作反饋、提升感知流暢性的作用。

與視覺動(dòng)效不同的地方在于，交互動(dòng)效主要作用于產(chǎn)品的基礎(chǔ)體驗(yàn)和功能體驗(yàn)層面，為用戶營造更加自然流暢的體驗(yàn)。而視覺動(dòng)效除了在功能體驗(yàn)層面能幫助用戶降低理解成本之外，更多作用于情感體驗(yàn)，增加產(chǎn)品趣味性、傳遞產(chǎn)品調(diào)性，目的是引起用戶的情感共鳴，調(diào)動(dòng)用戶的正面情緒。

圖片▲交互動(dòng)效&視覺動(dòng)效示例

圖片▲交互動(dòng)效與視覺動(dòng)效的影響范圍差異

二、為什么要重視交互動(dòng)效？

在實(shí)際的項(xiàng)目中，交互設(shè)計(jì)師往往會(huì)先處理任務(wù)流程和頁面信息設(shè)計(jì)。在設(shè)計(jì)工作量大、時(shí)間緊張的時(shí)候，很可能遺漏掉需要增加交互動(dòng)效的細(xì)節(jié)，到點(diǎn)檢驗(yàn)收的時(shí)候才發(fā)現(xiàn)這些問題，這種情況在新人設(shè)計(jì)師中較為常見。

在驗(yàn)收階段，由于項(xiàng)目排期時(shí)間緊，開發(fā)有別的bug要改，可能沒有時(shí)間去處理動(dòng)效方面的優(yōu)化，從而導(dǎo)致了線上出現(xiàn)體驗(yàn)問題。

圖片▲驗(yàn)收階段才發(fā)現(xiàn)動(dòng)效問題的尷尬

必要的場(chǎng)景缺失動(dòng)效直接上線，可能會(huì)產(chǎn)生以下的體驗(yàn)問題：

1. 不符合預(yù)期，產(chǎn)生理解困難：交互動(dòng)效用于傳達(dá)頁面變化過程，如果過程缺失，可能會(huì)導(dǎo)致變化不符合用戶預(yù)期，使得用戶產(chǎn)生理解困難。
2. 感知卡頓：缺失必要的手勢(shì)動(dòng)效會(huì)導(dǎo)致用戶操作的不流暢，缺失必要的轉(zhuǎn)場(chǎng)動(dòng)效則會(huì)影響視覺觀感的流暢性。

圖片▲動(dòng)效缺失產(chǎn)生體驗(yàn)問題例子

總的來說，不注重交互動(dòng)效將會(huì)給產(chǎn)品體驗(yàn)埋下各種體驗(yàn)問題隱患，加上進(jìn)入互聯(lián)網(wǎng)下半場(chǎng)后，互聯(lián)網(wǎng)產(chǎn)品將會(huì)更加注重設(shè)計(jì)上的精致精細(xì)度。由此來看，掌握系統(tǒng)化的動(dòng)效設(shè)計(jì)方法，已然成為設(shè)計(jì)師們的必修課。

三、交互動(dòng)效的設(shè)計(jì)流程和方法

1. 動(dòng)效評(píng)估

在設(shè)計(jì)之前，我們需要先判斷是否真的需要做動(dòng)效？不能為了做動(dòng)效而去做動(dòng)效。

1）場(chǎng)景聚焦

首先，我們需要知道，什么樣的場(chǎng)景適合做交互動(dòng)效？可以總結(jié)為以下三類場(chǎng)景：

圖片▲三種適合做交互動(dòng)效的場(chǎng)景

「場(chǎng)的變化」指的是用戶需要從產(chǎn)品中的一個(gè)「場(chǎng)」到另一個(gè)「場(chǎng)」，發(fā)生在頁面間的轉(zhuǎn)場(chǎng)、或頁面內(nèi)的轉(zhuǎn)場(chǎng)。

圖片▲「場(chǎng)的變化」相關(guān)例子

「內(nèi)容的新增或減少」指的是由于用戶的交互行為，導(dǎo)致頁面中的內(nèi)容（模塊、組件、元素等）產(chǎn)生新增或減少。

圖片▲「內(nèi)容新增/減少」相關(guān)例子

「元素的屬性變化」指的是由于用戶的交互行為，導(dǎo)致頁面中的元素屬性產(chǎn)生變化，例如位置改變、狀態(tài)變化、值變化等。

圖片▲「元素屬性變化」相關(guān)例子

2）優(yōu)先級(jí)評(píng)估

篩選出適合添加交互動(dòng)效的場(chǎng)景后，我們需要評(píng)估在這個(gè)場(chǎng)景中做動(dòng)效的優(yōu)先級(jí)。判斷做動(dòng)效的必要性，可以從以下四個(gè)維度從高到低的維度去進(jìn)行優(yōu)先級(jí)評(píng)估：

「一致性」——如果某個(gè)場(chǎng)景已經(jīng)有定義好的動(dòng)效規(guī)范，原則上需要遵循規(guī)范進(jìn)行適配，以確保全局動(dòng)效體驗(yàn)的一致性。這一個(gè)維度對(duì)于那些存在動(dòng)效語言的產(chǎn)品是非常重要的，一致性是為整體產(chǎn)品調(diào)性和品牌所服務(wù)。例如iOS在全局都保持了高度統(tǒng)一的動(dòng)效體驗(yàn)，如果某一個(gè)組件缺失了用戶習(xí)以為常的動(dòng)效，很容易被用戶感知到且產(chǎn)生對(duì)品牌的負(fù)面評(píng)價(jià)。

「幫助用戶理解」——不加動(dòng)效是否會(huì)影響用戶對(duì)當(dāng)前頁面變化的理解？如果因?yàn)槿笔?dòng)效，在元素關(guān)系、頁面層級(jí)、狀態(tài)變化上造成用戶較大的困惑，影響了用戶體驗(yàn)，那么在該場(chǎng)景下添加動(dòng)效的必要性是較大的。

「提升流暢度」——不加動(dòng)效是否會(huì)影響視覺層面和操作層面的流暢度？即視覺上是否會(huì)產(chǎn)生閃跳、突變等卡頓感，操作上是否實(shí)時(shí)反饋、符合用戶預(yù)期。

「引導(dǎo)注意力」——頁面中的元素是否需要通過動(dòng)效來引導(dǎo)用戶的注意力？會(huì)不會(huì)對(duì)用戶造成不必要的打擾？有時(shí)候產(chǎn)品會(huì)出于業(yè)務(wù)訴求希望通過動(dòng)效的手段來引導(dǎo)用戶注意力，達(dá)到業(yè)務(wù)的目標(biāo)，但是我們需要站在用戶的角度去思考用戶的注意力是否應(yīng)該被引導(dǎo)，不讓動(dòng)效成為對(duì)用戶的干擾。

圖片▲動(dòng)效優(yōu)先級(jí)評(píng)估

2. 動(dòng)效設(shè)計(jì)

1）動(dòng)效原則

設(shè)計(jì)原則用于指導(dǎo)我們?cè)O(shè)計(jì)動(dòng)效的方向，確保不偏離正確的方向。結(jié)合行業(yè)內(nèi)的各類動(dòng)效規(guī)范的設(shè)計(jì)原則，我們總結(jié)出以下六個(gè)通用性較高的設(shè)計(jì)原則：

1. 舒適：動(dòng)效需要符合現(xiàn)實(shí)世界的物理屬性，貼近用戶的心智認(rèn)知，感知上舒適、同時(shí)兼具視覺美感。
2. 高效：高效響應(yīng)并減少過長(zhǎng)的位移和時(shí)間，使動(dòng)效觸達(dá)不拖沓。
3. 流暢：不卡、不閃、不跳，幀率穩(wěn)定、響應(yīng)及時(shí)、跟手操作是動(dòng)效流暢體驗(yàn)的基礎(chǔ)要求
4. 統(tǒng)一：同個(gè)產(chǎn)品內(nèi)的動(dòng)效體驗(yàn)感知統(tǒng)一，體現(xiàn)在相同的控件動(dòng)效保持一致、相似的動(dòng)效編排一致。
5. 簡(jiǎn)單清晰：界面元素運(yùn)動(dòng)盡可能少且簡(jiǎn)潔，減少路徑及不必要的元素，確保動(dòng)效過程清晰、重點(diǎn)突出。
6. 克制有度：控制出現(xiàn)頻率，不增加額外操作，不干擾用戶，確保動(dòng)效有意義。

圖片▲交互動(dòng)效設(shè)計(jì)原則

2）動(dòng)效屬性

① 變化

一個(gè)完整的動(dòng)效是由不同元素的不同變化組成的，常見的變化類型有：位移、透明度、大小、旋轉(zhuǎn)、3D旋轉(zhuǎn)…

圖片▲動(dòng)效常用變化類型

② 時(shí)長(zhǎng)

小于200ms的動(dòng)效不易被感知，多于1000ms（1s）則讓用戶感到緩慢，交互動(dòng)效時(shí)長(zhǎng)一般在200ms-500ms之間，我們?cè)谠O(shè)計(jì)時(shí)長(zhǎng)時(shí)，可以從以下幾個(gè)因素進(jìn)行考慮：

i）復(fù)雜程度：復(fù)雜的動(dòng)畫比簡(jiǎn)單的動(dòng)畫需要更多的時(shí)間來表達(dá)。

圖片▲動(dòng)效復(fù)雜程度對(duì)時(shí)長(zhǎng)的影響

ii）區(qū)域范圍：動(dòng)效運(yùn)動(dòng)在一定的范圍內(nèi)進(jìn)行，小范圍內(nèi)比大范圍的運(yùn)動(dòng)所用的時(shí)間相對(duì)更短。

圖片▲動(dòng)效區(qū)域范圍對(duì)時(shí)長(zhǎng)的影響

iii）入場(chǎng)/退場(chǎng)：一般來說，退場(chǎng)的動(dòng)效時(shí)長(zhǎng)要比入場(chǎng)短，讓用戶更把注意力放在后續(xù)的內(nèi)容中。

圖片▲動(dòng)效入場(chǎng)/退場(chǎng)對(duì)時(shí)長(zhǎng)的影響

③ 曲線

曲線與時(shí)長(zhǎng)相互配合產(chǎn)?運(yùn)動(dòng)的韻律感。調(diào)整曲線能使物體實(shí)現(xiàn)加速和減速，?不是以恒定的速率運(yùn)動(dòng)。在自然定律下，物體不會(huì)突然開始或停止移動(dòng)，它們需要一定的時(shí)間來加速和減速。以下是三種常用的曲線類型：

i）加速曲線：適用原本在視線中的物體，需要消失或退場(chǎng)，逐漸加速符合退場(chǎng)行為特征，例如彈窗/浮層退出、卡片刪除等。

圖片▲加速曲線示意

ii）減速曲線：適用原本在視線外的物體，需要出現(xiàn)或進(jìn)場(chǎng)，逐漸減速符合進(jìn)場(chǎng)行為特征，例如彈窗/浮層出現(xiàn)、頁面進(jìn)入等。

圖片▲減速曲線示意

iii）緩入緩出曲線：先加速后減速，適用于運(yùn)動(dòng)前后始終在用戶視線范圍內(nèi)的物體，符合物體啟動(dòng)和停止的真實(shí)規(guī)律，例如圖片縮放、tab切換、開關(guān)等。

圖片▲緩入緩出曲線示意

3）動(dòng)效編排

動(dòng)效屬性是針對(duì)單個(gè)元素進(jìn)行設(shè)置的，那么如何對(duì)多個(gè)元素進(jìn)行動(dòng)效組合和編排？下面提供一些動(dòng)效編排的技巧：

① 淡入淡出

淡入淡出是通過透明度變化來實(shí)現(xiàn)過渡轉(zhuǎn)場(chǎng)，也是最簡(jiǎn)潔實(shí)用、最常見的一種類型。其分為「單向淡入淡出」、「交叉淡入淡出」和「錯(cuò)開淡入淡出」。

i）單向淡入淡出：在前后層疊的場(chǎng)景中，只有前景元素進(jìn)行淡入或淡出動(dòng)作，下方元素?zé)o變化。

圖片▲單向淡入淡出示意

ii）交叉淡入淡出：存在退場(chǎng)元素與進(jìn)場(chǎng)元素的場(chǎng)景下，一個(gè)淡入視野，另一個(gè)淡出。在整個(gè)過程中，會(huì)存在兩個(gè)元素和它們后面的內(nèi)容同時(shí)可見的時(shí)候。

圖片▲交叉淡入淡出示意

如果退場(chǎng)元素和入場(chǎng)元素在視覺樣式或者布局結(jié)構(gòu)上差異較大，交叉淡入淡出可能會(huì)帶來視覺上的混亂，這時(shí)候可適當(dāng)錯(cuò)開出場(chǎng)元素淡出和進(jìn)場(chǎng)元素淡入的時(shí)機(jī)。

圖片▲可通過錯(cuò)開元素進(jìn)出場(chǎng)時(shí)機(jī)避免帶來視覺混亂

iii）錯(cuò)開淡入淡出：在入場(chǎng)元素淡入之前，將退場(chǎng)元素完全淡出。這種方式可以規(guī)避視覺上出現(xiàn)重疊元素，但是可能會(huì)造成有一瞬間出現(xiàn)容器內(nèi)容為空的情況。

圖片▲錯(cuò)開淡入淡出示意

② 一鏡到底

一鏡到底是通過共享元素、容器和動(dòng)勢(shì)來進(jìn)行轉(zhuǎn)場(chǎng)過渡的一種編排方式，有助于提升用戶操作任務(wù)的效率，增強(qiáng)視覺的流暢感，是轉(zhuǎn)場(chǎng)設(shè)計(jì)中重點(diǎn)推薦的編排方法。

i）共享元素

共享元素是轉(zhuǎn)場(chǎng)前后持續(xù)存在的界面元素，是在轉(zhuǎn)場(chǎng)發(fā)生后希望用戶關(guān)注到的焦點(diǎn)元素，它增強(qiáng)了轉(zhuǎn)場(chǎng)的連續(xù)感。

圖片▲共享元素轉(zhuǎn)場(chǎng)示意

ii）共享容器

當(dāng)一組元素在過渡時(shí)包含明確的邊界，可使用容器來讓轉(zhuǎn)換過程有連續(xù)感。容器通過大小、高度、圓角等屬性進(jìn)行補(bǔ)間過渡轉(zhuǎn)換，容器內(nèi)的元素可通過淡入淡出或共享元素的手法進(jìn)行過渡。

圖片▲共享容器轉(zhuǎn)場(chǎng)示意

在使用共享容器轉(zhuǎn)場(chǎng)時(shí)，有以下原則需要注意：

原則1——盡量減少獨(dú)立移動(dòng)的元素?cái)?shù)量。多個(gè)元素運(yùn)動(dòng)會(huì)爭(zhēng)奪并分散注意力，我們可以通過淡入淡出減少元素移動(dòng)，讓注意力更聚焦。

圖片▲原則1：避免過多獨(dú)立移動(dòng)的元素

原則2—— 避免焦點(diǎn)元素在運(yùn)動(dòng)過程中和其他元素重疊。焦點(diǎn)元素和其他元素運(yùn)動(dòng)軌跡重疊會(huì)產(chǎn)生雜亂無章的過渡，同樣地，可以用淡入淡出來簡(jiǎn)化運(yùn)動(dòng)。

圖片▲原則2：避免焦點(diǎn)元素運(yùn)動(dòng)軌跡和其它元素重疊

iii） 共享動(dòng)勢(shì)

無法通過補(bǔ)間變化來實(shí)現(xiàn)柔和過渡，可以提取出可用的共享轉(zhuǎn)換屬性，來實(shí)現(xiàn)前后的平滑過渡。常用的共享運(yùn)動(dòng)屬性有位移、縮放、旋轉(zhuǎn)等。

▲共享動(dòng)勢(shì)效果示意

③ 其它編排技巧

i）運(yùn)動(dòng)路徑

如果轉(zhuǎn)場(chǎng)中的元素沿對(duì)角線移動(dòng)，線形運(yùn)動(dòng)路徑具有簡(jiǎn)單而實(shí)用的風(fēng)格，而弧形運(yùn)動(dòng)路徑則創(chuàng)造了更加強(qiáng)調(diào)和戲劇性的風(fēng)格。

圖片▲線形和弧形運(yùn)動(dòng)路徑差異對(duì)比

ii）振蕩

一般情況下，轉(zhuǎn)場(chǎng)動(dòng)效在到達(dá)終點(diǎn)時(shí)會(huì)結(jié)束。當(dāng)添加振蕩時(shí)，過渡路徑至少超過其端點(diǎn)一次，然后反向返回端點(diǎn)。振蕩可以用來表達(dá)一種更加俏皮和充滿活力的過渡風(fēng)格。

圖片▲有無振蕩差異對(duì)比

iii）縱深變化

一般情況下，背景內(nèi)容在容器變換過渡期間保持靜態(tài)?？梢酝ㄟ^動(dòng)畫背景內(nèi)容的比例來強(qiáng)調(diào)縱深變化。這種通過強(qiáng)調(diào)前景和背景內(nèi)容之間的距離，使過渡看起來更加生動(dòng)。

圖片▲有無縱深變化差異對(duì)比

iv）交錯(cuò)

一般情況下，入場(chǎng)元素會(huì)打包為一個(gè)組進(jìn)行處理?！附诲e(cuò)」是指通過對(duì)組中的元素應(yīng)用短延遲，創(chuàng)建一種級(jí)聯(lián)效果，將注意力非常短暫地集中在組中的每個(gè)元素或個(gè)別元素上。

圖片▲通過交錯(cuò)將注意力短暫地集中在每一項(xiàng)上

交錯(cuò)還有可以用于強(qiáng)調(diào)頁面元素，將需要強(qiáng)調(diào)的頁面核心操作或元素在其他元素入場(chǎng)完畢后完成入場(chǎng)，能夠吸引用戶注意力，完成視覺引導(dǎo)。

圖片▲通過交錯(cuò)突出核心元素

3. 動(dòng)效落地

盡管我們把動(dòng)效設(shè)計(jì)得再精美，最終還是要靠開發(fā)大哥們把它還原出來。交互動(dòng)效需要開發(fā)通過代碼來實(shí)現(xiàn)，因此動(dòng)效標(biāo)注如何讓開發(fā)看得懂且能理解，就尤為重要。

這里推薦大家使用參數(shù)化的表格來進(jìn)行標(biāo)注，轉(zhuǎn)場(chǎng)動(dòng)效的標(biāo)注文檔中需要包括以下要素：

1. 動(dòng)效demo附件：方便開發(fā)直接查看整體的動(dòng)效效果。
2. 觸發(fā)條件：說明動(dòng)效發(fā)生的條件，即用戶通過什么行為觸發(fā)該動(dòng)效。
3. 元素示意：將動(dòng)效中發(fā)生變化的元素進(jìn)行拆解，通過圖示清晰示意。
4. 變化屬性：元素的什么屬性發(fā)生，例如透明度、位置、大小等等。
5. 動(dòng)效時(shí)間：「延遲開始時(shí)間」表示元素從觸發(fā)條件發(fā)生后延遲多長(zhǎng)時(shí)間開始執(zhí)行，「持續(xù)時(shí)長(zhǎng)」表示該變化持續(xù)發(fā)生多長(zhǎng)時(shí)間。
6. 變化值&貝塞爾曲線：描述屬性具體的變化值范圍，以及相應(yīng)使用的貝塞爾曲線參數(shù)。

圖片▲轉(zhuǎn)場(chǎng)動(dòng)效標(biāo)注文檔示意

手勢(shì)動(dòng)效的標(biāo)注和轉(zhuǎn)場(chǎng)動(dòng)效略有不同，因?yàn)槭謩?shì)動(dòng)效是跟手的效果，不像轉(zhuǎn)場(chǎng)動(dòng)效是在固定的時(shí)長(zhǎng)內(nèi)完成，因此不需要描述時(shí)長(zhǎng)相關(guān)的參數(shù)和動(dòng)效曲線，取而代之的是需要描述清楚頁面元素跟手的聯(lián)動(dòng)關(guān)系。

圖片▲手勢(shì)動(dòng)效標(biāo)注文檔示意

在動(dòng)效驗(yàn)收的時(shí)候，如果發(fā)現(xiàn)有還原問題，那么可以將沒有按照設(shè)計(jì)標(biāo)注來做的地方在表格中圈出來，幫助開發(fā)快速定位問題，提高溝通效率。

圖片▲在驗(yàn)收環(huán)節(jié)運(yùn)用標(biāo)注文檔定位問題

結(jié)語

交互動(dòng)效作為提升產(chǎn)品精致精細(xì)度的必不可少的要素之一，也是作為設(shè)計(jì)師不可或缺的技能，本文給大家講解了從動(dòng)效評(píng)估-動(dòng)效設(shè)計(jì)-動(dòng)效落地的全流程方法，希望能對(duì)大家了解交互動(dòng)效、上手交互動(dòng)效設(shè)計(jì)有一定的幫助。當(dāng)我們希望給用戶帶來不一樣的驚喜和極致體驗(yàn)時(shí)，不妨試一試從交互動(dòng)效入手。

參考資料及部分示例圖來源：

1. material.io/design/motion
2. developer.harmonyos.com