設計一個界面動效的時候,我們需要考慮什么?

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

明確價值:動效設計能解決什么問題?

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

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 之外,我們最好還能給到前端具體的實現參數,如觸發條件、空間坐標、透明度、持續時長、延時、運動的貝塞爾曲線等,交付方式可以參考類似以下的動畫屬性分解表。

 

圖片來源:


根據項目的實際情況,還可以考慮將動效結合組件沉淀下來,形成一套帶動效規范的組件庫,之后的業務需求里直接調用即可,而不需要反復的設計開發。

 

封面設計:

原文地址:

作者:鴻影

來源:學UI網

上一篇: UI設計圖標繪制深層知識

下一篇: 微信有哪些隱藏的細節或邏輯很驚艷?

分享到: 更多
网上购彩app 炸金花百人场技巧 斗牛棋牌游戏 mg游戏是指 pt下降是什么意思 江西时时一星 pk10个人投注心得分享 天津时时开奖视频直播 双色球开奖数据excel 快三大小单双稳赚技巧必看介绍 色胆包天是指哪个生肖 广东11选5龙虎赚计划软件 047期稳赚包六肖 pt电子游戏电 重庆时时彩是合法的吗? 北京pk10投注