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

明確價(jià)值：動(dòng)效設(shè)計(jì)能解決什么問(wèn)題？

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

1. 商業(yè)價(jià)值

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

△ App名稱(chēng)：nice

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

App名稱(chēng)：微習(xí)慣

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

具體到指標(biāo)上，可以通過(guò) UV 點(diǎn)擊率、留存率、滿(mǎn)意度、認(rèn)知度、輿情反饋等來(lái)進(jìn)行綜合驗(yàn)證和衡量，評(píng)估動(dòng)效設(shè)計(jì)是否達(dá)到了效果。

2. 體驗(yàn)價(jià)值

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

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

動(dòng)效設(shè)計(jì)可以促進(jìn)用戶(hù)的情感體驗(yàn)，緩解用戶(hù)的焦慮情緒（比如等待期間）、制造驚喜等。

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

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

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

1. 物理規(guī)律

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

2. 品牌調(diào)性

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

3. 可用性

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

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

保證設(shè)計(jì)方案的還原度是一個(gè)用戶(hù)體驗(yàn)設(shè)計(jì)師的基本素養(yǎng)之一，要記?。河脩?hù)永遠(yuǎn)只會(huì)通過(guò)最終的線(xiàn)上效果來(lái)評(píng)判你的設(shè)計(jì)好壞，而不會(huì)在意你的設(shè)計(jì)稿做得有多完美。

1. 可行性驗(yàn)證

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

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

2. 實(shí)現(xiàn)交付

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

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

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

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

本文由人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家 @鴻影?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?。未經(jīng)許可,禁止轉(zhuǎn)載。