起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識研究Material Design交互動態系統后，總結了這6個知識點！
編輯導語：交互動效如果做得好，可以為產品賦能。這篇文章結合案例，系統梳理了交互動效設計的知識點，介紹了動效的作用和設計原則等，可以幫助大家更有說服力地和產品溝通，不妨來看看。
從設計的維度，動態設計可以分為交互動效和 Ae 動效，在這兩方面個人都有相關落地項目。但是自己感覺學得不夠系統，只是能做需求，做得還不夠好，所以最近幾天我都在學習研究?Material Design?交互動態系統規范。
從整體框架和細節入手，我結合日常業務設計思考總結了幾點，輸出了一套動效標注模板，希望對大家有幫助。
這次總結主要是分享交互動效的相關干貨，方便自己沉淀設計經驗，大綱如下：
- 動效的作用
- 設計原則
- 持續時間
- 緩動曲線
- 動效風格
- 動效標注
相信很多設計師在日常業務中都會主動挖掘機會點，來為產品增值賦能。機會點可以是交互動效，但是我們該怎樣和產品同學溝通推動才更有說服力呢？如果只是說提升用戶體驗，說服力是很弱的。因此，我深度學習了 Material Design 動態系統規范，結合界面案例總結了幾點作用：
1. 使用更愉悅，微體驗更好
比如標簽欄 tab 切換、下拉菜單出現，加入動效，符合現實場景動態，界面更加生動，還能緩解用戶對內容的枯燥感。
2. 讓不同界面的元素更具有關聯性，易于理解層級
比如收件箱消息列表和消息詳情的轉換，過渡流暢。
3. 提供強提示的反饋和展示當前界面狀態
比如鍵盤輸出完成，動畫顯示操作是否成功；列表占位符，加入動畫表示正在加載中。
4. 教育用戶，幫助用戶了解如何操作
比如滑動打開的手勢動畫，使操作行為易于理解。
二、動效原則
好的交互動效，會給人愉悅的心理感受。設計過程應當遵循以下幾點原則：
（1）自然：在現實世界中，物體的速度會受到自身重量和摩擦力影響，不會突然運動，也不會突然停止，因此要使用緩動曲線，平穩過渡。
（2）及時反饋：動畫持續時間適當，響應迅速，有助于用戶了解UI變化。不宜太快，人的大腦容易反應不過來，處于很懵的狀態。也不宜太慢，用戶一直在等待，會產生枯燥不耐煩的心理感受。
（3）簡單明了：動畫過渡要簡單明了，保持連貫，避免多個元素交叉重疊，顯得混亂。
（4）一致性：遵循尼爾森十大交互原則中的一致性原則。整個產品應當使用統一的動效標準，比如運動速度、緩動曲線統一，使用戶體驗一致。
三、持續時間
在及時反饋原則上，Material Design規范對于手機端的動畫持續時間，提供了三個層級建議：
（1）小范圍過渡的元素，建議時間是100ms，比如開關按鈕動畫。
（2）中范圍過渡的元素，建議時間是250ms，比如半屏面板展開。
（3）大范圍過渡的元素，建議時間是300ms，比如懸浮按鈕轉化為全屏面板。
這個時間我們只能參考，具體動畫時間還是要看界面效果來確定。
四、緩動曲線
緩動曲線，調整過渡元素的速度，按物理規律自然地加速或減速，這樣動畫才會顯得自然愉悅。在不同的平臺或軟件，緩動曲線可能會有不同的命名，MaterialDesign規范定義了四種：
1. 標準曲線
標準曲線（也稱為EaseInOut）是最常用的緩動曲線，元素從靜止開始快速加速，緩慢減速到結束。這種緩動曲線適合屏幕內的元素在屏幕內的運動，過渡自然，可以用在懸浮按鈕轉化為面板的動畫。
2. 強調曲線
強調曲線（也稱為EaseInOut）是標準曲線的拓展，元素加速時間減短，減速時間加長，強調過渡的結束。這種動畫效果會稍微俏皮一些，對于辦公產品要慎用，也避免曲線樣式太多設計師無法清晰地區分使用。
3. 減速曲線
減速曲線（也稱為EaseOut），元素從屏幕外快速進入并逐漸減速，在靜止時結束。這種緩動曲線可以用在半屏面板出現的動畫?？焖龠M入，可以迅速響應用戶的操作行為；當用戶大腦收到即時反饋后，為了避免高速移動帶來的緊迫感，元素需要緩慢減速到靜止。
同時，讓用戶在等待過程中可以提前識別和接收內容信息，動畫結束后可以第一時間操作。
4. 加速曲線
加速曲線（也稱為EaseIn），元素在屏幕內靜止，逐漸加速離開屏幕。這種緩動曲線可以用在半屏面板消失的動畫。用戶操作關閉面板，表示已經不關注面板內容，這時動畫就需要快速響應，加速移動屏幕，避免用戶出現等待的焦慮感。
五、動效風格
設計師了解完動效原則、持續時間、緩動曲線后，當業務需要定制一套動效標準時，我們需要結合產品調性制定動效風格。工具類產品專注內容，可以使用直接、簡潔的風格；娛樂類產品，可以使用俏皮、活潑的風格。
影響動效風格主要有幾點：速度、運動路徑、緩動曲線、海拔高度，我們可以看下對比效果。
（1）持續時間300ms的標準緩動和650ms的強調緩動的對比。
（2）如果元素沿對角線移動，運動路徑可以是直線或弧形，看下對比。
（3）默認過渡和彈跳過渡的對比。
（4）默認情況下，背景內容在動畫過程是靜止的。為了動畫更生動活潑，可以調整背景內容比例來強調海拔高度。
從對比效果來看，持續時間較短、斜向移動的直線路徑、默認過渡、默認海拔高度的動畫風格直接、簡潔，及時反饋，專注內容；持續時間較長、斜向移動的弧形路徑、彈跳過渡、變化的海拔高度的動畫風格強調動畫的過程，俏皮、活潑、生動有趣。
如果是辦公產品，需要克制，不要盲目強調動畫。
六、動效標注
設計師完成交互動效Demo后，就要輸出一份動效標注交付開發實現。
在實際項目中，我有遇到過一些問題：有些設計師反饋文字表格不直觀、不易編輯；有些開發同學反饋動畫曲線看不懂。
為了解決這些協作問題，我結合動效標注的項目經驗，參考Material design規范動畫曲線和咨詢開發同學的意見，最終搭建了一個Sketch動效標注模板，組件化搭建編輯，比較方便。
總結
以上就是我對Material Design交互動態系統的學習總結。理解交互動效的具體作用，我們才能更有說服力地和產品溝通，推動落地。在設計過程中，我們應當遵循自然、及時反饋、簡單明了、一致性的原則，結合產品調性打磨出一套自然愉悅的動效標準。還需要注意一點，要恰當地使用持續時間和緩動曲線。
作者：，微信公眾號：
原文鏈接：https://mp.weixin.qq.com/s/JckY0VQJYEU2nXje2NINGA
本文由 @ 授權發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
