動效能講述故事。和圖片不同，動效能夠呈現(xiàn)變化的過程，講述一段簡短而有趣的故事，能夠同你進行對話：“嘿，你該看這個按鈕了”或者“哦耶！你剛剛完成了一個操作！”不過，動效的目標并不是單純的娛樂用戶，而是幫助用戶了解交互的效果和界面中發(fā)生的變化，讓用戶更為有效地使用你的APP或網(wǎng)頁。Zurb 有一句話很好的解釋了這一點：
“我們設計的不再僅僅只是靜態(tài)的界面，實際上，我們所設計的是用戶從界面獲得內(nèi)容的過程。”
動效廣泛運用于網(wǎng)頁內(nèi)容和背景當中，用來強化功能，提升美感：它會直接影響用戶的行為，引導用戶注意到特定的內(nèi)容，呈現(xiàn)狀態(tài)，幫助用戶找到他們想要的內(nèi)容，達成目標。想要借助動效提升用戶體驗，可以參考下面的指引來進行優(yōu)化：

加載過程不要讓用戶感到單調無聊

如果你無法縮短加載和等待的過程，那么你應當盡量讓用戶在等待過程中感到愉悅，這個時候的動效基本只是在提醒用戶后臺正在加載。而幾乎所有的網(wǎng)站和APP都會碰到這樣的情況，而好的設計通常都是通過微妙而有趣的動效，讓用戶的注意力轉移到動效本身上，而不是被無聊的情緒所左右。

不要讓狀態(tài)改變過于生硬

動效最重要的功能之一是強化過渡效果，所以，它需要讓過程的起始和結束都要被明顯的呈現(xiàn)出來。一個設計良好的過度動效應當合理地將用戶的注意力引導到需要被關注的地方。

Adrian Zumbrunnen 有個非常不錯的案例，它展現(xiàn)了用戶點擊了鏈接之后，滾動動效是如何讓用戶明白變化過程的。對比下面硬生生的轉變和加了動態(tài)效果之后的版本：
正如你所見，這個動效讓用戶明白了界面的結構和轉變的過程，有助于用戶了解下一步應當如何與之進行交互。
闡明元素之間的關系

動效還能提升用戶對界面的操控感。

正如同下面的案例所展示的，一個菜單按鈕隨著平滑的動效展開為一個播放控制界面，隨后點擊返回，又收縮為一個按鈕。這個特效不僅僅讓界面看起來神奇無比，而且告知了用戶按鈕的實際功能。有意思的是，這個動效還強調了播放和暫停兩種狀態(tài)的差別，兩者可以互相變化，而不會共存。

這個案例中，動效將用戶的注意力引導到了屏幕的正中央，播放和暫停兩種狀態(tài)的改變是用戶注意的焦點。
另外一個案例則是更為常見的浮動按鈕，點擊“+”按鈕，按鈕展開其中隱藏的其他功能按鈕，而按鈕中的“+”則變化為意為編輯的鉛筆圖標。這個圖標變化的細節(jié)向用戶暗示了接下來會發(fā)生什么，并且明確了按鈕不同狀態(tài)下的差異。
出錯的時候給用戶以反饋

當用戶執(zhí)行了某個操作之后，動效能夠強化這個交互所產(chǎn)生的效果。報錯，就是最常見的反饋機制之一。

下面的案例就相當?shù)湫?，一個簡單的左右晃動的特效給用戶一種界面“正在搖頭”的感覺，讓他們明白所輸入的內(nèi)容并不正確。這種擬人化的動效讓界面充滿了真實的質感，信息的反饋也更直覺化。

通過反饋告知用戶目標達成

動效不僅能夠“搖頭”還能“點頭”，它同樣能夠以視覺化的方式告知用戶交互所達成的結果。當用戶操作完成之后，結果不應當是生硬的彈出，而是自然的過渡并呈現(xiàn)出來，“展現(xiàn)，而不是單純的告知”。

在下面 Stripe 的案例中，用戶點擊“支付”之后，一個簡單微妙的動效聯(lián)通了“支付”和“支付成功”兩種狀態(tài)，這個時候，動效賦予了支付這個操作一種輕松寫意的感覺，是一種讓用戶欣賞甚至沉迷的細節(jié)體驗。
結語

當你熟練運用動效的時候，它會成為你UI設計過程中最強大的工具之一。一個動效是否合適，你確實需要花費時間仔細思考。我們應當在設計之處就開始思考動效要如何展現(xiàn)，并且將它視之為界面的天然的組成部分，因為它的存在并不僅僅能夠強化界面的視覺，而且能夠優(yōu)化功能，強化體驗。正如同喬布斯曾經(jīng)所說的那樣：

文章標題：如何用動效提升界面的用戶體驗
地址分享：http://jinyejixie.com/news20/190270.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、自適應網(wǎng)站、網(wǎng)站收錄、App開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站導航

廣告

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