動效在交互方案中的 5 種作用
產品設計中,動效往往被視為提升用戶體驗的神奇元素。然而,動效的真正價值遠不止于視覺上的“酷炫”。它是交互設計中的一部分,能夠引導用戶注意力、提供操作反饋、表達界面結構關系等。
提起動效,很多設計師可能首先想到的是「酷炫」。一個應用有了動效,好像就會在設計上顯得更「高級」。
有一次,我在上課,講到「完整的交互方案應該包含的內容」,其中把動效放在了最末尾的位置。
有個同學提問:我們領導認為動效是交互中最重要的。老師為什么說,交互是最不重要的呢?
這是個很好的問題。
提起交互,很多人會誤以為「那些頁面上能動的部分,就是交互的部分」。
其實這是對交互的極大誤解。
交互的本質,是通過理解需求,找到業務上的目標,以及用戶使用這個功能的體驗訴求,然后用最合理的方案去實現這個需求。
所以,交互的核心是通過方案來解決問題。
動效,是交互方案中很小的一部分。它主要是為了讓方案的體驗更流暢,讓用戶在使用的時候更容易理解「當前發生了什么」的一種手段。
這就好比,一個電影,最關鍵的是劇本;如果劇本很爛(比如《小時代》圖片),即使里面特效天花亂墜,那依然不妨礙它是一部爛片。
關于動效的作用,我搜索了幾個比較權威的設計規范。
其中,谷歌的 Material Design 規范里,對動效的作用,解釋得最為清楚。
谷歌認為,動效有以下 5 種作用:
一、引導用戶的注意力
比如 Things App 中,點擊右下角的懸浮按鈕,會出現新建一條待辦的動效。這個動效,是引導用戶的注意力:
從懸浮按鈕 ?? 新的待辦,自然流暢
二、用戶完成操作的反饋
這一點運用的很多,比如小紅書的點贊操作:點擊點贊按鈕,展現動效
??3.
三、表達元素/頁面間的結構關系和空間關系
比如在淘寶app 里,點擊「立即購買」按鈕,從下向上出現「訂單確認」的浮層。
這里,浮層的動效,保證了用戶可以理解浮層與原來頁面的空間關系(浮層在上,頁面在下)。
四、加載時間的掩護
這種也很常見,比如我們經常遇到的「加載中」提示。
在愛奇藝 app 中,點擊某個視頻,進入視頻詳情頁,會展現「正在全力加載」的動效,為內容的加載預留更多時間
五、展現產品個性,突出細節美,愉悅用戶?
在得到 app 中,下拉刷新的時候,展現它的 IP,貓頭鷹。
貓頭鷹眨眼又扭頭,展現了產品的品牌個性。
以上介紹了動效的 5 種作用。
本文由人人都是產品經理作者【沐風】,微信公眾號:【沐風的UX充電站】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協議。
- 目前還沒評論,等你發揮!