視覺設計中涉及很多細節上的體驗。尤其是動效的設計，它賦予靜態圖像以“生命”，從而幫助用戶更好地理解正在發生的事情或如何更有效地使用你的產品，這也正是動效能夠提升產品體驗感的原因。

那接下來我們就結合一些實際案例，來看提升產品體驗感的5個動效指南吧。

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

一方面，由于數十萬年的自然習得，讓我們對于檢測周圍的運動特別敏感，從而快速應對從任何一方接近的危險。

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

提升產品體驗的5個動效設計

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

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

提升產品體驗的5個動效設計

（加入動效反饋后）

2
保持動作的關聯性
在真實的物理世界中，一切動作都有它的“來源”和“去向”，這可以幫助我們很好的理解行為動作。動效也是一樣的，正確的動畫可以幫助用戶理解方向，而不會感覺內容突然發生變化。

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

提升產品體驗的5個動效設計

（左為京東，右為淘寶）

京東使用「投遞動作」強調了加車的過程，搭配上+1的圖標會讓用戶的感知更加明顯。而且無需任何文字就告訴了用戶——我已經成功把商品加入購物車了。

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

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

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

提升產品體驗的5個動效設計

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

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

而且這樣比起純文字的“免費領水果”，豐富的水果品類和更加突出的免費字樣帶來的刺激會更強烈。

而天貓超市的動效，首先是卡片運動不規律，每次進入后運動變化都不一樣；其次每個卡片都是獨立的分區信息，但用戶卻沒有選擇權，只能讓卡片自動劃走或點進去查看。如果錯過了某個分區信息，就只能退出再重新進入。

4
增加情緒的傳遞
除了功能型的用處外，還能將情感化設計以動效形式表現出來，增強某種情緒的感覺，向用戶傳遞我們所想要表達的情緒。

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

提升產品體驗的5個動效設計

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

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

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

5
避免強烈的反差
最后還有一個小點，動效有時還會作為銜接兩個畫面的過渡態，如果兩個頁面之間反差過大，眼睛受到的刺激就會較大。就像在暗處待久了，突然強光來襲的不適應感。

提升產品體驗的5個動效設計

（左為片刻，右為QQ）

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

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

成都創新互聯公司是專業的三都網站建設公司，三都接單;提供成都網站設計、成都網站建設,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行三都網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

網頁標題：提升產品體驗的5個動效設計
文章地址：http://vcdvsql.cn/article4/sgcdoe.html

成都網站建設公司_創新互聯，為您提供移動網站建設、網站內鏈、商城網站、外貿網站建設、面包屑導航、做網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯