網(wǎng)站建設(shè)中提升產(chǎn)品體驗(yàn)的5個(gè)動(dòng)效設(shè)計(jì)發(fā)布者：本站     時(shí)間：2022-05-28 11:05:12

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

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

 

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

一方面，由于數(shù)十萬年的自然習(xí)得，讓我們對(duì)于檢測周圍的運(yùn)動(dòng)特別敏感，從而快速應(yīng)對(duì)從任何一方接近的危險(xiǎn)。

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

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

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

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

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

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

 

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

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

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

（左為京東，右為淘寶）

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

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

 

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

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

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

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

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

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

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

 

4
增加情緒的傳遞
除了功能型的用處外，還能將情感化設(shè)計(jì)以動(dòng)效形式表現(xiàn)出來，增強(qiáng)某種情緒的感覺，向用戶傳遞我們所想要表達(dá)的情緒。

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

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

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

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

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

 

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

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

（左為片刻，右為QQ）

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

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