中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

1. 商業價值

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

△ App名稱：nice

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

App名稱：微習慣

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

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

2. 體驗價值

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

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

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

動效設計提供當前的狀態反饋，加強用戶對操作行為的感知，給用戶以可控的感覺。

遵循原則：動效應該是自然、和諧、可用的

不是簡單地動起來、或者憑感覺調兩下就叫動效設計，動效設計應該有其基礎原則。在此主要從物理規律、品牌調性、可用性三方面進行總結。

1. 物理規律

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

2. 品牌調性

動效的風格和節奏應該是符合產品的品牌調性的，和競品相比有個性和差異化的，而不是與之南轅北轍。比如一個基調為青春活力的產品，可以使用更多的彈性阻尼動效曲線，但如果將其用在一個基調為沉穩可靠的產品上，就會顯得很不協調。

3. 可用性

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

實現交付：保證最終上線的效果

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

1. 可行性驗證

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

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

2. 實現交付

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

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

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

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

本文由人人都是產品經理專欄作家 @鴻影?原創發布于人人都是產品經理?。未經許可,禁止轉載。