鴻影：坦白來說，雖然我之前在項目里做過一些小動效嘗試，但一直沒有什么系統(tǒng)的方法和原則指導(dǎo)，大多在原型軟件里憑「感覺」隨意調(diào)調(diào)了事，而說不清楚為什么要做成這樣。剛好最近有在和團隊的小伙伴們一起進行動效設(shè)計的研究與實踐，對動效設(shè)計的價值、原則和實現(xiàn)交付開始有了更多的了解，在本文中淺薄地總結(jié)一下。

明確價值：動效設(shè)計能解決什么問題？

設(shè)計的本質(zhì)是解決問題，動效設(shè)計自然也不例外，當(dāng)打算在界面中加入動效元素時，我們應(yīng)該先明確清楚動效設(shè)計的價值所在，而不只是出于對「酷炫」或者「潮流」的盲目追求。從商業(yè)價值和體驗價值兩個角度，大概總結(jié)如下：

1. 商業(yè)價值

通過動效設(shè)計可以更好地吸引用戶注意力，提升用戶對內(nèi)容的點擊探索欲。比如說，當(dāng)我們在業(yè)務(wù)上非常希望用戶去觸發(fā)某個互動入口時，除了在視覺上進行強調(diào)，也可以給這個互動入口在合適的時機加上合適的動畫（比如從屏幕邊緣飛入、旋轉(zhuǎn)出現(xiàn)、發(fā)光閃爍等），使之更容易被用戶注意到、產(chǎn)生可交互的認知，進而觸發(fā)交互行為。案例：以下 App 里圖片上標(biāo)簽的圓點有擴散動效，點擊可以查看所有相關(guān)的聚合內(nèi)容。

△ App名稱：nice

通過動效設(shè)計可以提升用戶使用時的舒適度，或者制造一些「小驚喜」讓用戶產(chǎn)生快感和滿足感，使用戶感到不那么枯燥，從而達到提升用戶使用黏性，更好地留住用戶的目的，甚至還可以吸引用戶主動進行傳播，擴大產(chǎn)品影響力。案例：下面這個 App 中，當(dāng)完成一件任務(wù)的時候，會出現(xiàn)滿屏彩紙片飛舞的動效，帶給用戶驚喜和成就感。

△ App名稱：微習(xí)慣

通過動效設(shè)計可以輔助視覺元素更好地傳達產(chǎn)品品牌味道，成為產(chǎn)品設(shè)計語言的重要構(gòu)成之一，加強與競品的差異化，強化用戶對產(chǎn)品品牌的感知。案例：Google 的 Material Design。

具體到指標(biāo)上，可以通過 UV 點擊率、留存率、滿意度、認知度、輿情反饋等來進行綜合驗證和衡量，評估動效設(shè)計是否達到了效果。

2. 體驗價值

動效設(shè)計可以描述當(dāng)前情境，更清晰地體現(xiàn)內(nèi)容元素之間的邏輯和層級關(guān)系，幫助用戶理解上下文、知道當(dāng)前所在位置。

動效設(shè)計可以引導(dǎo)用戶的操作瀏覽，給用戶以明確的方向感，而不是對下一步該看什么、做什么感到不知所措。

動效設(shè)計可以促進用戶的情感體驗，緩解用戶的焦慮情緒（比如等待期間）、制造驚喜等。

動效設(shè)計提供當(dāng)前的狀態(tài)反饋，加強用戶對操作行為的感知，給用戶以可控的感覺。

遵循原則：動效應(yīng)該是自然、和諧、可用的

不是簡單地動起來、或者憑感覺調(diào)兩下就叫動效設(shè)計，動效設(shè)計應(yīng)該有其基礎(chǔ)原則。在此主要從物理規(guī)律、品牌調(diào)性、可用性三方面進行總結(jié)。

1. 物理規(guī)律

動效設(shè)計應(yīng)該是自然的、貼近現(xiàn)實生活的，元素的運動軌跡應(yīng)該符合真實世界的物理規(guī)律，這樣能讓用戶更快地認知、理解和接受，而不是感到突兀和不協(xié)調(diào)。比如元素從可視區(qū)域外進場是逐漸減速的 ease out 曲線，從可視區(qū)域內(nèi)離場是逐漸加速的 ease in 曲線，都是符合我們的物理常識的（想象一下，一個元素從界面中向下掉到界面外，是不是像真實世界里的自由落體運動），在決定一個元素的運動曲線時，不妨從物理世界中尋找隱喻，比如設(shè)計一個元素點擊出現(xiàn)、然后上升消失的過程，可以參考氫氣球的上浮使用加速運動曲線。

2. 品牌調(diào)性

動效的風(fēng)格和節(jié)奏應(yīng)該是符合產(chǎn)品的品牌調(diào)性的，和競品相比有個性和差異化的，而不是與之南轅北轍。比如一個基調(diào)為青春活力的產(chǎn)品，可以使用更多的彈性阻尼動效曲線，但如果將其用在一個基調(diào)為沉穩(wěn)可靠的產(chǎn)品上，就會顯得很不協(xié)調(diào)。

3. 可用性

界面動效設(shè)計同樣需要遵循基礎(chǔ)的可用性原則。比如不能讓用戶產(chǎn)生多余的等待，影響到用戶操作的效率；比如保證體驗的一致性，相似交互觸發(fā)的動效應(yīng)該有統(tǒng)一的規(guī)范和邏輯，而不是花樣百出造成用戶認知錯亂；比如不能大幅影響到產(chǎn)品性能，產(chǎn)生嚴重的掉幀、卡頓等。

實現(xiàn)交付：保證最終上線的效果

保證設(shè)計方案的還原度是一個用戶體驗設(shè)計師的基本素養(yǎng)之一，要記?。河脩粲肋h只會通過最終的線上效果來評判你的設(shè)計好壞，而不會在意你的設(shè)計稿做得有多完美。

1. 可行性驗證

與其等到辛苦設(shè)計制作了一個酷炫的 Demo，拿給前端一看才知道根本實現(xiàn)不了，只能匆匆準(zhǔn)備 Plan B，不如在更早的階段就通過口頭描述/分鏡頭草圖/低保真原型等低成本手段和前端溝通方案的可行性，確認怎樣的效果可行后，再進一步細化設(shè)計方案。

我最近參與的一個項目里，需要設(shè)計一個下拉載入新頁面的動效，當(dāng)時我們考慮到新頁面里有豐富的宇宙元素，產(chǎn)生了做一個火箭下拉松手發(fā)射載入效果的靈感。但是因為應(yīng)用是基于 HTML5 而非 Native 的，對一些效果比如弧形曲線的實現(xiàn)沒有把握，所以就用紙筆簡單地畫了幾個關(guān)鍵分鏡頭的草圖，然后去和前端溝通，了解到哪些效果不能實現(xiàn)、共同討論確定具備可行性的方案之后，再細化具體的設(shè)計。

2. 實現(xiàn)交付

這里涉及到設(shè)計語言和前端語言的對接，光口頭描述想要怎樣怎樣的效果，其實很難傳達到位，前端還是按照自己的感覺做，最終出來的效果質(zhì)量很難保證，額外增加了很多反復(fù)溝通的成本。

最直觀的溝通方式是直接給前端 Demo 演示，在動效 Demo 制作工具上面，現(xiàn)在市場上的選擇可謂五花八門，網(wǎng)上相關(guān)的文章介紹也很多，本文就不再贅述了。如果讓我推薦的話，從上手速度和制作效率的角度推薦 Principle，從可行性和對接前端的角度則推薦可以直接輸出 HTML 文件的 Hype3，當(dāng)設(shè)計一個基于 HTML5 的動效時，前端可以直接從中獲取想要的參數(shù)，節(jié)省更多溝通成本。

但是僅僅交付 Demo 的話，尤其是不能直接從中獲取關(guān)鍵參數(shù)的 .mov 或 .gif 格式的 Demo，前端僅憑肉眼還原，很容易造成一些細節(jié)的遺漏。所以除了關(guān)鍵幀圖示、Demo 之外，我們最好還能給到前端具體的實現(xiàn)參數(shù)，如觸發(fā)條件、空間坐標(biāo)、透明度、持續(xù)時長、延時、運動的貝塞爾曲線等，交付方式可以參考類似以下的動畫屬性分解表。

根據(jù)項目的實際情況，還可以考慮將動效結(jié)合組件沉淀下來，形成一套帶動效規(guī)范的組件庫，之后的業(yè)務(wù)需求里直接調(diào)用即可，而不需要反復(fù)的設(shè)計開發(fā)。

「動效設(shè)計三步走」

1. 先學(xué)會分析：《動效丨七何分析法幫你全面分析界面動效》
2. 動效設(shè)計方法：《改善你的UX設(shè)計！值得參考的四個動效使用方法》
3. 提升用戶體驗：《5個小技巧，用動效提升界面的用戶體驗就這么簡單》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com