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

前言

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

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

一、什么是交互動效？

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

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

圖片▲交互動效&視覺動效示例

圖片▲交互動效與視覺動效的影響范圍差異

二、為什么要重視交互動效？

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

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

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

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

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

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

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

三、交互動效的設(shè)計流程和方法

1. 動效評估

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

1）場景聚焦

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

圖片▲三種適合做交互動效的場景

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

圖片▲「場的變化」相關(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)先級評估

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

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

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

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

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

圖片▲動效優(yōu)先級評估

2. 動效設(shè)計

1）動效原則

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

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

圖片▲交互動效設(shè)計原則

2）動效屬性

① 變化

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

圖片▲動效常用變化類型

② 時長

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

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

圖片▲動效復(fù)雜程度對時長的影響

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

圖片▲動效區(qū)域范圍對時長的影響

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

圖片▲動效入場/退場對時長的影響

③ 曲線

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

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

圖片▲加速曲線示意

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

圖片▲減速曲線示意

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

圖片▲緩入緩出曲線示意

3）動效編排

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

① 淡入淡出

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

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

圖片▲單向淡入淡出示意

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

圖片▲交叉淡入淡出示意

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

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

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

圖片▲錯開淡入淡出示意

② 一鏡到底

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

i）共享元素

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

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

ii）共享容器

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

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

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

原則1——盡量減少獨(dú)立移動的元素數(shù)量。多個元素運(yùn)動會爭奪并分散注意力，我們可以通過淡入淡出減少元素移動，讓注意力更聚焦。

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

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

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

iii） 共享動勢

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

▲共享動勢效果示意

③ 其它編排技巧

i）運(yùn)動路徑

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

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

ii）振蕩

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

圖片▲有無振蕩差異對比

iii）縱深變化

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

圖片▲有無縱深變化差異對比

iv）交錯

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

圖片▲通過交錯將注意力短暫地集中在每一項上

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

圖片▲通過交錯突出核心元素

3. 動效落地

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

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

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

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

手勢動效的標(biāo)注和轉(zhuǎn)場動效略有不同，因?yàn)槭謩輨有歉值男Ч幌褶D(zhuǎn)場動效是在固定的時長內(nèi)完成，因此不需要描述時長相關(guān)的參數(shù)和動效曲線，取而代之的是需要描述清楚頁面元素跟手的聯(lián)動關(guān)系。

圖片▲手勢動效標(biāo)注文檔示意

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

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

結(jié)語

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

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

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