提升產(chǎn)品體驗的5個(gè)動(dòng)效設計發(fā)布者：本站     時(shí)間：2022-05-05 09:05:03

視覺(jué)設計中涉及很多細節上的體驗。尤其是動(dòng)效的設計，它賦予靜態(tài)圖像以“生命”，從而幫助用戶(hù)更好地理解正在發(fā)生的事情或如何更有效地使用你的產(chǎn)品，這也正是動(dòng)效能夠提升產(chǎn)品體驗感的原因。

那接下來(lái)我們就結合一些實(shí)際案例，來(lái)看提升產(chǎn)品體驗感的5個(gè)動(dòng)效指南吧。

 

1
反饋當前狀態(tài)
雖然顏色和動(dòng)畫(huà)都能比較好地引起用戶(hù)的注意，但為什么還要加入動(dòng)效呢？

一方面，由于數十萬(wàn)年的自然習得，讓我們對于檢測周?chē)倪\動(dòng)特別敏感，從而快速應對從任何一方接近的危險。

另一方面，動(dòng)效其實(shí)對于視障人士來(lái)說(shuō)更加友好。下面這幅圖是正常人和視障人士看到的同一個(gè)畫(huà)面，純色彩突出的情況下視障人士是很難感知到錯誤提示的。

提升產(chǎn)品體驗的5個(gè)動(dòng)效設計

（左為正常視角，右為綠色盲視角）

在色彩突出失靈的情況下加入動(dòng)效呢？當用戶(hù)注意到這樣的抖動(dòng)動(dòng)畫(huà)時(shí)，他們立即就能理解動(dòng)作。

提升產(chǎn)品體驗的5個(gè)動(dòng)效設計

（加入動(dòng)效反饋后）

 

2
保持動(dòng)作的關(guān)聯(lián)性
在真實(shí)的物理世界中，一切動(dòng)作都有它的“來(lái)源”和“去向”，這可以幫助我們很好的理解行為動(dòng)作。動(dòng)效也是一樣的，正確的動(dòng)畫(huà)可以幫助用戶(hù)理解方向，而不會(huì )感覺(jué)內容突然發(fā)生變化。

這里用京東和淘寶為例。同樣都是加購物車(chē)的設計，兩者之間有什么差異呢？

提升產(chǎn)品體驗的5個(gè)動(dòng)效設計

（左為京東，右為淘寶）

京東使用「投遞動(dòng)作」強調了加車(chē)的過(guò)程，搭配上+1的圖標會(huì )讓用戶(hù)的感知更加明顯。而且無(wú)需任何文字就告訴了用戶(hù)——我已經(jīng)成功把商品加入購物車(chē)了。

淘寶雖然使用了文字告訴用戶(hù)，已經(jīng)成功加入了購物車(chē)，但文字還有一個(gè)理解的過(guò)程。

 

3
注意展現方式
受限于移動(dòng)設備的尺寸限制，動(dòng)效是展現更多信息的一個(gè)好方法，利用圖片/文字在有限范圍內的滾動(dòng)，從而在有限的空間范圍內展示更多的信息。

不過(guò)在展現方式這里也容易出差錯，從天貓的動(dòng)效設計里，我們可以同時(shí)看到可取和不可取之處。

提升產(chǎn)品體驗的5個(gè)動(dòng)效設計

（左為天貓超市，右為天貓）

在天貓的首頁(yè)功能板塊區有一個(gè)「免費領(lǐng)水果」(天貓超市左側)，它由3塊內容共同組成了一條完整的信息，因此用戶(hù)只需要閱讀而不需要選擇權。

而且這樣比起純文字的“免費領(lǐng)水果”，豐富的水果品類(lèi)和更加突出的免費字樣帶來(lái)的刺激會(huì )更強烈。

而天貓超市的動(dòng)效，首先是卡片運動(dòng)不規律，每次進(jìn)入后運動(dòng)變化都不一樣；其次每個(gè)卡片都是獨立的分區信息，但用戶(hù)卻沒(méi)有選擇權，只能讓卡片自動(dòng)劃走或點(diǎn)進(jìn)去查看。如果錯過(guò)了某個(gè)分區信息，就只能退出再重新進(jìn)入。

 

4
增加情緒的傳遞
除了功能型的用處外，還能將情感化設計以動(dòng)效形式表現出來(lái)，增強某種情緒的感覺(jué)，向用戶(hù)傳遞我們所想要表達的情緒。

同樣都是一鍵清除未讀消息，為什么QQ的愉悅感會(huì )更強烈一些呢？我們來(lái)看一下京東金融、QQ兩款清除未讀消息的對比。

提升產(chǎn)品體驗的5個(gè)動(dòng)效設計

（左為QQ，右為京東金融）

有看出什么差異嗎？是的，京東金融的消息清除更像是一個(gè)功能按鈕，除了消失的紅點(diǎn)沒(méi)有任何反饋。

再看QQ，除了消失的“煙霧”效果之外，那種拖拽的感覺(jué)以及逐個(gè)消失的爽感，就像一個(gè)一個(gè)捏爆泡泡紙的感覺(jué)。同樣都是一鍵清除未讀消息，有融入情感動(dòng)效的QQ反而會(huì )讓人感到更加愉悅。

 

5
避免強烈的反差
最后還有一個(gè)小點(diǎn)，動(dòng)效有時(shí)還會(huì )作為銜接兩個(gè)畫(huà)面的過(guò)渡態(tài)，如果兩個(gè)頁(yè)面之間反差過(guò)大，眼睛受到的刺激就會(huì )較大。就像在暗處待久了，突然強光來(lái)襲的不適應感。

提升產(chǎn)品體驗的5個(gè)動(dòng)效設計

（左為片刻，右為QQ）

所以動(dòng)效還應該去避免強烈的反差造成的不適應感。日簽君就比較喜歡片刻的夜間模式切換，它不是很突兀的模式切換，而是通過(guò)動(dòng)效營(yíng)造了一個(gè)日出日落的場(chǎng)景，去緩和這種刺激。反而QQ的夜間模式切換就顯得反差太大了。

五個(gè)動(dòng)效指南，你都記住了嗎？就像前面提到的，動(dòng)效不是為了炫技，每個(gè)動(dòng)效都應該有它對應的目的，幫助用戶(hù)更好地理解正在發(fā)生的事情或如何更有效地使用你的產(chǎn)品，這也正是動(dòng)效能夠提升產(chǎn)品體驗感的原因。