動效在交互方案中的 5 種作用

0 評論 1611 瀏覽 3 收藏 5 分鐘

產品設計中,動效往往被視為提升用戶體驗的神奇元素。然而,動效的真正價值遠不止于視覺上的“酷炫”。它是交互設計中的一部分,能夠引導用戶注意力、提供操作反饋、表達界面結構關系等。

提起動效,很多設計師可能首先想到的是「酷炫」。一個應用有了動效,好像就會在設計上顯得更「高級」。

有一次,我在上課,講到「完整的交互方案應該包含的內容」,其中把動效放在了最末尾的位置。

有個同學提問:我們領導認為動效是交互中最重要的。老師為什么說,交互是最不重要的呢?

這是個很好的問題。

提起交互,很多人會誤以為「那些頁面上能動的部分,就是交互的部分」。

其實這是對交互的極大誤解。

交互的本質,是通過理解需求,找到業務上的目標,以及用戶使用這個功能的體驗訴求,然后用最合理的方案去實現這個需求。

所以,交互的核心是通過方案來解決問題。

動效,是交互方案中很小的一部分。它主要是為了讓方案的體驗更流暢,讓用戶在使用的時候更容易理解「當前發生了什么」的一種手段。

這就好比,一個電影,最關鍵的是劇本;如果劇本很爛(比如《小時代》圖片),即使里面特效天花亂墜,那依然不妨礙它是一部爛片。

關于動效的作用,我搜索了幾個比較權威的設計規范。

其中,谷歌的 Material Design 規范里,對動效的作用,解釋得最為清楚。

谷歌認為,動效有以下 5 種作用:

一、引導用戶的注意力

比如 Things App 中,點擊右下角的懸浮按鈕,會出現新建一條待辦的動效。這個動效,是引導用戶的注意力:

從懸浮按鈕 ?? 新的待辦,自然流暢

二、用戶完成操作的反饋

這一點運用的很多,比如小紅書的點贊操作:點擊點贊按鈕,展現動效

??3.

三、表達元素/頁面間的結構關系和空間關系

比如在淘寶app 里,點擊「立即購買」按鈕,從下向上出現「訂單確認」的浮層。

這里,浮層的動效,保證了用戶可以理解浮層與原來頁面的空間關系(浮層在上,頁面在下)。

四、加載時間的掩護

這種也很常見,比如我們經常遇到的「加載中」提示。

在愛奇藝 app 中,點擊某個視頻,進入視頻詳情頁,會展現「正在全力加載」的動效,為內容的加載預留更多時間

五、展現產品個性,突出細節美,愉悅用戶?

在得到 app 中,下拉刷新的時候,展現它的 IP,貓頭鷹。

貓頭鷹眨眼又扭頭,展現了產品的品牌個性。

以上介紹了動效的 5 種作用。

本文由人人都是產品經理作者【沐風】,微信公眾號:【沐風的UX充電站】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!