編輯導(dǎo)語(yǔ)：交互動(dòng)效如果做得好，可以為產(chǎn)品賦能。這篇文章結(jié)合案例，系統(tǒng)梳理了交互動(dòng)效設(shè)計(jì)的知識(shí)點(diǎn)，介紹了動(dòng)效的作用和設(shè)計(jì)原則等，可以幫助大家更有說服力地和產(chǎn)品溝通，不妨來看看。

從設(shè)計(jì)的維度，動(dòng)態(tài)設(shè)計(jì)可以分為交互動(dòng)效和 Ae 動(dòng)效，在這兩方面?zhèn)€人都有相關(guān)落地項(xiàng)目。但是自己感覺學(xué)得不夠系統(tǒng)，只是能做需求，做得還不夠好，所以最近幾天我都在學(xué)習(xí)研究?Material Design?交互動(dòng)態(tài)系統(tǒng)規(guī)范。

從整體框架和細(xì)節(jié)入手，我結(jié)合日常業(yè)務(wù)設(shè)計(jì)思考總結(jié)了幾點(diǎn)，輸出了一套動(dòng)效標(biāo)注模板，希望對(duì)大家有幫助。

這次總結(jié)主要是分享交互動(dòng)效的相關(guān)干貨，方便自己沉淀設(shè)計(jì)經(jīng)驗(yàn)，大綱如下：

1. 動(dòng)效的作用
2. 設(shè)計(jì)原則
3. 持續(xù)時(shí)間
4. 緩動(dòng)曲線
5. 動(dòng)效風(fēng)格
6. 動(dòng)效標(biāo)注

一、動(dòng)效的作用

相信很多設(shè)計(jì)師在日常業(yè)務(wù)中都會(huì)主動(dòng)挖掘機(jī)會(huì)點(diǎn)，來為產(chǎn)品增值賦能。機(jī)會(huì)點(diǎn)可以是交互動(dòng)效，但是我們?cè)撛鯓雍彤a(chǎn)品同學(xué)溝通推動(dòng)才更有說服力呢？如果只是說提升用戶體驗(yàn)，說服力是很弱的。因此，我深度學(xué)習(xí)了 Material Design 動(dòng)態(tài)系統(tǒng)規(guī)范，結(jié)合界面案例總結(jié)了幾點(diǎn)作用：

1. 使用更愉悅，微體驗(yàn)更好

比如標(biāo)簽欄 tab 切換、下拉菜單出現(xiàn)，加入動(dòng)效，符合現(xiàn)實(shí)場(chǎng)景動(dòng)態(tài)，界面更加生動(dòng)，還能緩解用戶對(duì)內(nèi)容的枯燥感。

2. 讓不同界面的元素更具有關(guān)聯(lián)性，易于理解層級(jí)

比如收件箱消息列表和消息詳情的轉(zhuǎn)換，過渡流暢。

3. 提供強(qiáng)提示的反饋和展示當(dāng)前界面狀態(tài)

比如鍵盤輸出完成，動(dòng)畫顯示操作是否成功；列表占位符，加入動(dòng)畫表示正在加載中。

4. 教育用戶，幫助用戶了解如何操作

比如滑動(dòng)打開的手勢(shì)動(dòng)畫，使操作行為易于理解。

二、動(dòng)效原則

好的交互動(dòng)效，會(huì)給人愉悅的心理感受。設(shè)計(jì)過程應(yīng)當(dāng)遵循以下幾點(diǎn)原則：

（1）自然：在現(xiàn)實(shí)世界中，物體的速度會(huì)受到自身重量和摩擦力影響，不會(huì)突然運(yùn)動(dòng)，也不會(huì)突然停止，因此要使用緩動(dòng)曲線，平穩(wěn)過渡。

（2）及時(shí)反饋：動(dòng)畫持續(xù)時(shí)間適當(dāng)，響應(yīng)迅速，有助于用戶了解UI變化。不宜太快，人的大腦容易反應(yīng)不過來，處于很懵的狀態(tài)。也不宜太慢，用戶一直在等待，會(huì)產(chǎn)生枯燥不耐煩的心理感受。

（3）簡(jiǎn)單明了：動(dòng)畫過渡要簡(jiǎn)單明了，保持連貫，避免多個(gè)元素交叉重疊，顯得混亂。

（4）一致性：遵循尼爾森十大交互原則中的一致性原則。整個(gè)產(chǎn)品應(yīng)當(dāng)使用統(tǒng)一的動(dòng)效標(biāo)準(zhǔn)，比如運(yùn)動(dòng)速度、緩動(dòng)曲線統(tǒng)一，使用戶體驗(yàn)一致。

三、持續(xù)時(shí)間

在及時(shí)反饋原則上，Material Design規(guī)范對(duì)于手機(jī)端的動(dòng)畫持續(xù)時(shí)間，提供了三個(gè)層級(jí)建議：

（1）小范圍過渡的元素，建議時(shí)間是100ms，比如開關(guān)按鈕動(dòng)畫。

（2）中范圍過渡的元素，建議時(shí)間是250ms，比如半屏面板展開。

（3）大范圍過渡的元素，建議時(shí)間是300ms，比如懸浮按鈕轉(zhuǎn)化為全屏面板。

這個(gè)時(shí)間我們只能參考，具體動(dòng)畫時(shí)間還是要看界面效果來確定。

四、緩動(dòng)曲線

緩動(dòng)曲線，調(diào)整過渡元素的速度，按物理規(guī)律自然地加速或減速，這樣動(dòng)畫才會(huì)顯得自然愉悅。在不同的平臺(tái)或軟件，緩動(dòng)曲線可能會(huì)有不同的命名，MaterialDesign規(guī)范定義了四種：

1. 標(biāo)準(zhǔn)曲線

標(biāo)準(zhǔn)曲線（也稱為EaseInOut）是最常用的緩動(dòng)曲線，元素從靜止開始快速加速，緩慢減速到結(jié)束。這種緩動(dòng)曲線適合屏幕內(nèi)的元素在屏幕內(nèi)的運(yùn)動(dòng)，過渡自然，可以用在懸浮按鈕轉(zhuǎn)化為面板的動(dòng)畫。

2. 強(qiáng)調(diào)曲線

強(qiáng)調(diào)曲線（也稱為EaseInOut）是標(biāo)準(zhǔn)曲線的拓展，元素加速時(shí)間減短，減速時(shí)間加長(zhǎng)，強(qiáng)調(diào)過渡的結(jié)束。這種動(dòng)畫效果會(huì)稍微俏皮一些，對(duì)于辦公產(chǎn)品要慎用，也避免曲線樣式太多設(shè)計(jì)師無法清晰地區(qū)分使用。

3. 減速曲線

減速曲線（也稱為EaseOut），元素從屏幕外快速進(jìn)入并逐漸減速，在靜止時(shí)結(jié)束。這種緩動(dòng)曲線可以用在半屏面板出現(xiàn)的動(dòng)畫。快速進(jìn)入，可以迅速響應(yīng)用戶的操作行為；當(dāng)用戶大腦收到即時(shí)反饋后，為了避免高速移動(dòng)帶來的緊迫感，元素需要緩慢減速到靜止。

同時(shí)，讓用戶在等待過程中可以提前識(shí)別和接收內(nèi)容信息，動(dòng)畫結(jié)束后可以第一時(shí)間操作。

4. 加速曲線

加速曲線（也稱為EaseIn），元素在屏幕內(nèi)靜止，逐漸加速離開屏幕。這種緩動(dòng)曲線可以用在半屏面板消失的動(dòng)畫。用戶操作關(guān)閉面板，表示已經(jīng)不關(guān)注面板內(nèi)容，這時(shí)動(dòng)畫就需要快速響應(yīng)，加速移動(dòng)屏幕，避免用戶出現(xiàn)等待的焦慮感。

五、動(dòng)效風(fēng)格

設(shè)計(jì)師了解完動(dòng)效原則、持續(xù)時(shí)間、緩動(dòng)曲線后，當(dāng)業(yè)務(wù)需要定制一套動(dòng)效標(biāo)準(zhǔn)時(shí)，我們需要結(jié)合產(chǎn)品調(diào)性制定動(dòng)效風(fēng)格。工具類產(chǎn)品專注內(nèi)容，可以使用直接、簡(jiǎn)潔的風(fēng)格；娛樂類產(chǎn)品，可以使用俏皮、活潑的風(fēng)格。

影響動(dòng)效風(fēng)格主要有幾點(diǎn)：速度、運(yùn)動(dòng)路徑、緩動(dòng)曲線、海拔高度，我們可以看下對(duì)比效果。

（1）持續(xù)時(shí)間300ms的標(biāo)準(zhǔn)緩動(dòng)和650ms的強(qiáng)調(diào)緩動(dòng)的對(duì)比。

（2）如果元素沿對(duì)角線移動(dòng)，運(yùn)動(dòng)路徑可以是直線或弧形，看下對(duì)比。

（3）默認(rèn)過渡和彈跳過渡的對(duì)比。

（4）默認(rèn)情況下，背景內(nèi)容在動(dòng)畫過程是靜止的。為了動(dòng)畫更生動(dòng)活潑，可以調(diào)整背景內(nèi)容比例來強(qiáng)調(diào)海拔高度。

從對(duì)比效果來看，持續(xù)時(shí)間較短、斜向移動(dòng)的直線路徑、默認(rèn)過渡、默認(rèn)海拔高度的動(dòng)畫風(fēng)格直接、簡(jiǎn)潔，及時(shí)反饋，專注內(nèi)容；持續(xù)時(shí)間較長(zhǎng)、斜向移動(dòng)的弧形路徑、彈跳過渡、變化的海拔高度的動(dòng)畫風(fēng)格強(qiáng)調(diào)動(dòng)畫的過程，俏皮、活潑、生動(dòng)有趣。

如果是辦公產(chǎn)品，需要克制，不要盲目強(qiáng)調(diào)動(dòng)畫。

六、動(dòng)效標(biāo)注

設(shè)計(jì)師完成交互動(dòng)效Demo后，就要輸出一份動(dòng)效標(biāo)注交付開發(fā)實(shí)現(xiàn)。

在實(shí)際項(xiàng)目中，我有遇到過一些問題：有些設(shè)計(jì)師反饋文字表格不直觀、不易編輯；有些開發(fā)同學(xué)反饋動(dòng)畫曲線看不懂。

為了解決這些協(xié)作問題，我結(jié)合動(dòng)效標(biāo)注的項(xiàng)目經(jīng)驗(yàn)，參考Material design規(guī)范動(dòng)畫曲線和咨詢開發(fā)同學(xué)的意見，最終搭建了一個(gè)Sketch動(dòng)效標(biāo)注模板，組件化搭建編輯，比較方便。

總結(jié)

以上就是我對(duì)Material Design交互動(dòng)態(tài)系統(tǒng)的學(xué)習(xí)總結(jié)。理解交互動(dòng)效的具體作用，我們才能更有說服力地和產(chǎn)品溝通，推動(dòng)落地。在設(shè)計(jì)過程中，我們應(yīng)當(dāng)遵循自然、及時(shí)反饋、簡(jiǎn)單明了、一致性的原則，結(jié)合產(chǎn)品調(diào)性打磨出一套自然愉悅的動(dòng)效標(biāo)準(zhǔn)。還需要注意一點(diǎn)，要恰當(dāng)?shù)厥褂贸掷m(xù)時(shí)間和緩動(dòng)曲線。

作者：ALEI，微信公眾號(hào)：ALEI的設(shè)計(jì)思考

原文鏈接：https://mp.weixin.qq.com/s/JckY0VQJYEU2nXje2NINGA

本文由 @ALEI 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議