設計一個界面動效的時候，我們需要考慮什麼？
本篇通過動效設計的研究與實踐，帶你瞭解動效設計的價值、原則和實現交付。
鴻影：坦白來說，雖然我之前在項目裏做過一些小動效嘗試，但一直沒有什麼系統的方法和原則指導，大多在原型軟件裏憑「感覺」隨意調調了事，而說不清楚爲什麼要做成這樣。剛好最近有在和團隊的小夥伴們一起進行動效設計的研究與實踐，對
開始有了更多的瞭解，在本文中淺薄地總結一下。
明確價值：動效設計能解決什麼問題？
設計的本質是解決問題，動效設計自然也不例外，當打算在界面中加入動效元素時，我們應該先明確清楚動效設計的價值所在，而不只是出於對「酷炫」或者「潮流」的盲目追求。從商業價值和體驗價值兩個角度，大概總結如下：
1. 商業價值
通過動效設計可以更好地吸引用戶注意力，提升用戶對內容的點擊探索欲。比如說，當我們在業務上非常希望用戶去觸發某個互動入口時，除了在視覺上進行強調，也可以給這個互動入口在合適的時機加上合適的動畫（比如從屏幕邊緣飛入、旋轉出現、發光閃爍等），使之更容易被用戶注意到、產生可交互的認知，進而觸發交互行爲。案例：以下 App 裏圖片上標籤的圓點有擴散動效，點擊可以查看所有相關的聚合內容。
△ App名稱：nice
通過動效設計可以提升用戶使用時的舒適度，或者製造一些「小驚喜」讓用戶產生快感和滿足感，使用戶感到不那麼枯燥，從而達到提升用戶使用黏性，更好地留住用戶的目的，甚至還可以吸引用戶主動進行傳播，擴大產品影響力。案例：下面這個 App 中，當完成一件任務的時候，會出現滿屏彩紙片飛舞的動效，帶給用戶驚喜和成就感。
△ App名稱：微習慣
通過動效設計可以輔助視覺元素更好地傳達產品品牌味道，成爲產品設計語言的重要構成之一，加強與競品的差異化，強化用戶對產品品牌的感知。案例：Google 的 Material Design。
具體到指標上，可以通過 UV 點擊率、留存率、滿意度、認知度、輿情反饋等來進行綜合驗證和衡量，評估動效設計是否達到了效果。
2. 體驗價值
動效設計可以描述當前情境，更清晰地體現內容元素之間的邏輯和層級關係，幫助用戶理解上下文、知道當前所在位置。
動效設計可以引導用戶的操作瀏覽，給用戶以明確的方向感，而不是對下一步該看什麼、做什麼感到不知所措。
動效設計可以促進用戶的情感體驗，緩解用戶的焦慮情緒（比如等待期間）、製造驚喜等。
動效設計提供當前的狀態反饋，加強用戶對操作行爲的感知，給用戶以可控的感覺。
遵循原則：動效應該是自然、和諧、可用的
不是簡單地動起來、或者憑感覺調兩下就叫動效設計，動效設計應該有其基礎原則。在此主要從物理規律、品牌調性、可用性三方面進行總結。
1. 物理規律
動效設計應該是自然的、貼近現實生活的，元素的運動軌跡應該符合真實世界的物理規律，這樣能讓用戶更快地認知、理解和接受，而不是感到突兀和不協調。比如元素從可視區域外進場是逐漸減速的 ease out 曲線，從可視區域內離場是逐漸加速的 ease in 曲線，都是符合我們的物理常識的（想象一下，一個元素從界面中向下掉到界面外，是不是像真實世界裏的自由落體運動），在決定一個元素的運動曲線時，不妨從物理世界中尋找隱喻，比如設計一個元素點擊出現、然後上升消失的過程，可以參考氫氣球的上浮使用加速運動曲線。
2. 品牌調性
動效的風格和節奏應該是符合產品的品牌調性的，和競品相比有個性和差異化的，而不是與之南轅北轍。比如一個基調爲青春活力的產品，可以使用更多的彈性阻尼動效曲線，但如果將其用在一個基調爲沉穩可靠的產品上，就會顯得很不協調。
3. 可用性
界面動效設計同樣需要遵循基礎的可用性原則。比如不能讓用戶產生多餘的等待，影響到用戶操作的效率；比如保證體驗的一致性，相似交互觸發的動效應該有統一的規範和邏輯，而不是花樣百出造成用戶認知錯亂；比如不能大幅影響到產品性能，產生嚴重的掉幀、卡頓等。
實現交付：保證最終上線的效果
保證設計方案的還原度是一個用戶體驗設計師的基本素養之一，要記住：用戶永遠只會通過最終的線上效果來評判你的設計好壞，而不會在意你的設計稿做得有多完美。
1. 可行性驗證
與其等到辛苦設計製作了一個酷炫的 Demo，拿給前端一看才知道根本實現不了，只能匆匆準備 Plan B，不如在更早的階段就通過口頭描述/分鏡頭草圖/低保真原型等低成本手段和前端溝通方案的可行性，確認怎樣的效果可行後，再進一步細化設計方案。
我最近參與的一個項目裏，需要設計一個下拉載入新頁面的動效，當時我們考慮到新頁面裏有豐富的宇宙元素，產生了做一個火箭下拉鬆手發射載入效果的靈感。但是因爲應用是基於 HTML5 而非 Native 的，對一些效果比如弧形曲線的實現沒有把握，所以就用紙筆簡單地畫了幾個關鍵分鏡頭的草圖，然後去和前端溝通，瞭解到哪些效果不能實現、共同討論確定具備可行性的方案之後，再細化具體的設計。
2. 實現交付
這裏涉及到設計語言和前端語言的對接，光口頭描述想要怎樣怎樣的效果，其實很難傳達到位，前端還是按照自己的感覺做，最終出來的效果質量很難保證，額外增加了很多反覆溝通的成本。
最直觀的溝通方式是直接給前端 Demo 演示，在動效 Demo 製作工具上面，現在市場上的選擇可謂五花八門，網上相關的文章介紹也很多，本文就不再贅述了。如果讓我推薦的話，從上手速度和製作效率的角度推薦 Principle，從可行性和對接前端的角度則推薦可以直接輸出 HTML 文件的 Hype3，當設計一個基於 HTML5 的動效時，前端可以直接從中獲取想要的參數，節省更多溝通成本。
但是僅僅交付 Demo 的話，尤其是不能直接從中獲取關鍵參數的 .mov 或 .gif 格式的 Demo，前端僅憑肉眼還原，很容易造成一些細節的遺漏。所以除了關鍵幀圖示、Demo 之外，我們最好還能給到前端具體的實現參數，如觸發條件、空間座標、透明度、持續時長、延時、運動的貝塞爾曲線等，交付方式可以參考類似以下的動畫屬性分解表。
根據項目的實際情況，還可以考慮將動效結合組件沉澱下來，形成一套帶動效規範的組件庫，之後的業務需求裏直接調用即可，而不需要反覆的設計開發。