從設計的維度，動態設計可以分為交互動效和 Ae 動效，在這兩方面個人都有相關落地項目。但是自己感覺學得不夠系統，只是能做需求，做得還不夠好，所以最近幾天我都在學習研究 Material Design 交互動態系統規范。從整體框架和細節入手，我結合日常業務設計思考總結了幾點，也輸出了一套動效標注模板，希望對大家有幫助。

這次總結主要是分享交互動效的相關干貨，方便自己沉淀設計經驗，大綱如下：

1. 動效的作用
2. 設計原則
3. 持續時間
4. 緩動曲線
5. 動效風格
6. 動效標注

動效的作用

相信很多設計師在日常業務中都會主動挖掘機會點，來為產品增值賦能。機會點可以是交互動效，但是我們該怎樣和產品同學溝通推動才更有說服力呢？如果只是說提升用戶體驗，說服力是很弱的。因此，我深度學習了 Material Design 動態系統規范，結合界面案例總結了幾點作用：

1. 使用更愉悅，微體驗更好

比如標簽欄 tab 切換、下拉菜單出現，加入動效，符合現實場景動態，界面更加生動，還能緩解用戶對內容的枯燥感。

2. 讓不同界面的元素更具有關聯性，易于理解層級

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

3. 提供強提示的反饋和展示當前界面狀態

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

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

比如滑動打開的手勢動畫，使操作行為易于理解。

動效原則

好的交互動效，會給人愉悅的心理感受。設計過程應當遵循以下幾點原則：

1. 自然

在現實世界中，物體的速度會受到自身重量和摩擦力影響，不會突然運動，也不會突然停止，因此要使用緩動曲線，平穩過渡。

2. 及時反饋

動畫持續時間適當，響應迅速，有助于用戶了解 UI 變化。不宜太快，人的大腦容易反應不過來，處于很懵的狀態。也不宜太慢，用戶一直在等待，會產生枯燥不耐煩的心理感受。

3. 簡單明了

動畫過渡要簡單明了，保持連貫，避免多個元素交叉重疊，顯得混亂。

4. 一致性

遵循尼爾森十大交互原則中的一致性原則。整個產品應當使用統一的動效標準，比如運動速度、緩動曲線統一，使用戶體驗一致。

持續時間

在及時反饋原則上，Material Design 規范對于手機端的動畫持續時間，提供了三個層級建議：

小范圍過渡的元素，建議時間是 100ms，比如開關按鈕動畫。

中范圍過渡的元素，建議時間是 250ms，比如半屏面板展開。

大范圍過渡的元素，建議時間是 300ms，比如懸浮按鈕轉化為全屏面板。

這個時間我們只能參考，具體動畫時間還是要看界面效果來確定。

緩動曲線

緩動曲線，調整過渡元素的速度，按物理規律自然地加速或減速，這樣動畫才會顯得自然愉悅。在不同的平臺或軟件，緩動曲線可能會有不同的命名，MaterialDesign 規范定義了四種：

1. 標準曲線

標準曲線（也稱為 EaseInOut）是最常用的緩動曲線，元素從靜止開始快速加速，緩慢減速到結束。這種緩動曲線適合屏幕內的元素在屏幕內的運動，過渡自然，可以用在懸浮按鈕轉化為面板的動畫。

2. 強調曲線

強調曲線（也稱為 EaseInOut）是標準曲線的拓展，元素加速時間減短，減速時間加長，強調過渡的結束。這種動畫效果會稍微俏皮一些，對于辦公產品要慎用，也避免曲線樣式太多設計師無法清晰地區分使用。

3. 減速曲線

減速曲線（也稱為 EaseOut），元素從屏幕外快速進入并逐漸減速，在靜止時結束。這種緩動曲線可以用在半屏面板出現的動畫。快速進入，可以迅速響應用戶的操作行為；當用戶大腦收到即時反饋后，為了避免高速移動帶來的緊迫感，元素需要緩慢減速到靜止。同時，讓用戶在等待過程中可以提前識別和接收內容信息，動畫結束后可以第一時間操作。

4. 加速曲線

加速曲線（也稱為 EaseIn），元素在屏幕內靜止，逐漸加速離開屏幕。這種緩動曲線可以用在半屏面板消失的動畫。用戶操作關閉面板，表示已經不關注面板內容，這時動畫就需要快速響應，加速移動屏幕，避免用戶出現等待的焦慮感。

動效風格

設計師了解完動效原則、持續時間、緩動曲線后，當業務需要定制一套動效標準時，我們需要結合產品調性制定動效風格。工具類產品專注內容，可以使用直接、簡潔的風格；娛樂類產品，可以使用俏皮、活潑的風格。

影響動效風格主要有幾點：速度、運動路徑、緩動曲線、海拔高度，我們可以看下對比效果。

1. 持續時間 300ms 的標準緩動和 650ms 的強調緩動的對比。

2. 如果元素沿對角線移動，運動路徑可以是直線或弧形，看下對比。

3. 默認過渡和彈跳過渡的對比。

4. 默認情況下，背景內容在動畫過程是靜止的。為了動畫更生動活潑，可以調整背景內容比例來強調海拔高度。

從對比效果來看，持續時間較短、斜向移動的直線路徑、默認過渡、默認海拔高度的動畫風格直接、簡潔，及時反饋，專注內容；持續時間較長、斜向移動的弧形路徑、彈跳過渡、變化的海拔高度的動畫風格強調動畫的過程，俏皮、活潑、生動有趣。如果是辦公產品，需要克制下，不要盲目強調動畫。

動效標注

設計師完成交互動效 Demo 后，就要輸出一份動效標注交付開發實現。在實際項目中，我有遇到過一些問題：有些設計師反饋文字表格不直觀、不易編輯，有些開發同學反饋動畫曲線看不懂。為了解決這些協作問題，我結合動效標注的項目經驗、參考 Material design 規范動畫曲線和咨詢開發同學的意見，最終搭建了一個 Sketch 動效標注模板，組件化搭建編輯，比較方便。（有需要的同學可以在文末和開頭下載）

總結

以上就是我對 Material Design 交互動態系統的學習總結。理解交互動效的具體作用，我們才能更有說服力地和產品溝通推動落地。在設計過程中，我們應當遵循自然、及時反饋、簡單明了、一致性的原則，結合產品調性打磨出一套自然愉悅的動效標準。還需要注意一點，要恰當使用持續時間和緩動曲線。

由于個人還沒經歷過整套產品交互動效系統的搭建，還有許多不足之處，接下來會繼續學習！

歡迎關注作者微信公眾號：「ALEI的設計思考」