亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

400-611-9921

當(dāng)前位置:首頁(yè) > 新聞資訊 > 建站知識(shí)
5個(gè)小技巧,用動(dòng)效提升界面的用戶體驗(yàn)就這么簡(jiǎn)單

2016-10-03

2433

動(dòng)效能講述故事。和圖片不同,動(dòng)效能夠呈現(xiàn)變化的過(guò)程,講述一段簡(jiǎn)短而有趣的故事,能夠同你進(jìn)行對(duì)話:“嘿,你該看這個(gè)按鈕了”或者“哦耶!你剛剛完成了一個(gè)操作!”不過(guò),動(dòng)效的目標(biāo)并不是單純的娛樂(lè)用戶,而是幫助用戶了解交互的效果和界面中發(fā)生的變化,讓用戶更為有效地使用你的APP。Zurb 有一句話很好的解釋了這一點(diǎn):

“我們?cè)O(shè)計(jì)的不再僅僅只是靜態(tài)的界面,實(shí)際上,我們所設(shè)計(jì)的是用戶從界面獲得內(nèi)容的過(guò)程?!?br/>
動(dòng)效廣泛運(yùn)用于網(wǎng)頁(yè)內(nèi)容和背景當(dāng)中,用來(lái)強(qiáng)化功能,提升美感:它會(huì)直接影響用戶的行為,引導(dǎo)用戶注意到特定的內(nèi)容,呈現(xiàn)狀態(tài),幫助用戶找到他們想要的內(nèi)容,達(dá)成目標(biāo)。想要借助動(dòng)效提升用戶體驗(yàn),可以參考下面的指引來(lái)進(jìn)行優(yōu)化:

加載過(guò)程不要讓用戶感到單調(diào)無(wú)聊

如果你無(wú)法縮短加載和等待的過(guò)程,那么你應(yīng)當(dāng)盡量讓用戶在等待過(guò)程中感到愉悅,這個(gè)時(shí)候的動(dòng)效基本只是在提醒用戶后臺(tái)正在加載。而幾乎所有的網(wǎng)站和APP都會(huì)碰到這樣的情況,而好的設(shè)計(jì)通常都是通過(guò)微妙而有趣的動(dòng)效,讓用戶的注意力轉(zhuǎn)移到動(dòng)效本身上,而不是被無(wú)聊的情緒所左右。下面的的案例中,設(shè)計(jì)師讓界面從基本的框架結(jié)構(gòu)開始加載,明顯地縮短了等待的主觀體驗(yàn)。

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

動(dòng)效最重要的功能之一是強(qiáng)化過(guò)渡效果,所以,它需要讓過(guò)程的起始和結(jié)束都要被明顯的呈現(xiàn)出來(lái)。一個(gè)設(shè)計(jì)良好的過(guò)度動(dòng)效應(yīng)當(dāng)合理地將用戶的注意力引導(dǎo)到需要被關(guān)注的地方。

Adrian Zumbrunnen 有個(gè)非常不錯(cuò)的案例,它展現(xiàn)了用戶點(diǎn)擊了鏈接之后,滾動(dòng)動(dòng)效是如何讓用戶明白變化過(guò)程的。對(duì)比下面硬生生的轉(zhuǎn)變和加了動(dòng)態(tài)效果之后的版本:

正如你所見,這個(gè)動(dòng)效讓用戶明白了界面的結(jié)構(gòu)和轉(zhuǎn)變的過(guò)程,有助于用戶了解下一步應(yīng)當(dāng)如何與之進(jìn)行交互。

闡明元素之間的關(guān)系

動(dòng)效還能提升用戶對(duì)界面的操控感。

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

這個(gè)案例中,動(dòng)效將用戶的注意力引導(dǎo)到了屏幕的正中央,播放和暫停兩種狀態(tài)的改變是用戶注意的焦點(diǎn)。

另外一個(gè)案例則是更為常見的浮動(dòng)按鈕,點(diǎn)擊“+”按鈕,按鈕展開其中隱藏的其他功能按鈕,而按鈕中的“+”則變化為意為編輯的鉛筆圖標(biāo)。這個(gè)圖標(biāo)變化的細(xì)節(jié)向用戶暗示了接下來(lái)會(huì)發(fā)生什么,并且明確了按鈕不同狀態(tài)下的差異。

出錯(cuò)的時(shí)候給用戶以反饋

當(dāng)用戶執(zhí)行了某個(gè)操作之后,動(dòng)效能夠強(qiáng)化這個(gè)交互所產(chǎn)生的效果。報(bào)錯(cuò),就是最常見的反饋機(jī)制之一。

下面的案例就相當(dāng)?shù)湫停粋€(gè)簡(jiǎn)單的左右晃動(dòng)的特效給用戶一種界面“正在搖頭”的感覺(jué),讓他們明白所輸入的內(nèi)容并不正確。這種擬人化的動(dòng)效讓界面充滿了真實(shí)的質(zhì)感,信息的反饋也更直覺(jué)化。

通過(guò)反饋告知用戶目標(biāo)達(dá)成

動(dòng)效不僅能夠“搖頭”還能“點(diǎn)頭”,它同樣能夠以視覺(jué)化的方式告知用戶交互所達(dá)成的結(jié)果。當(dāng)用戶操作完成之后,結(jié)果不應(yīng)當(dāng)是生硬的彈出,而是自然的過(guò)渡并呈現(xiàn)出來(lái),“展現(xiàn),而不是單純的告知”。

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

結(jié)語(yǔ)

當(dāng)你熟練運(yùn)用動(dòng)效的時(shí)候,它會(huì)成為你UI設(shè)計(jì)過(guò)程中最強(qiáng)大的工具之一。一個(gè)動(dòng)效是否合適,你確實(shí)需要花費(fèi)時(shí)間仔細(xì)思考。我們應(yīng)當(dāng)在設(shè)計(jì)之處就開始思考動(dòng)效要如何展現(xiàn),并且將它視之為界面的天然的組成部分,因?yàn)樗拇嬖诓⒉粌H僅能夠強(qiáng)化界面的視覺(jué),而且能夠優(yōu)化功能,強(qiáng)化體驗(yàn)。正如同喬布斯曾經(jīng)所說(shuō)的那樣:

“設(shè)計(jì)并不僅僅關(guān)乎視覺(jué)和感受,它要呈現(xiàn)的是事物運(yùn)作的規(guī)律。”


本文來(lái)自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天科技


標(biāo)簽:用戶體驗(yàn),廣州網(wǎng)站建設(shè)公司,廣州網(wǎng)頁(yè)設(shè)計(jì)公司,廣州網(wǎng)站設(shè)計(jì)公司

免費(fèi)咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場(chǎng)16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項(xiàng)目顧問(wèn)通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問(wèn)

信息保護(hù)中,請(qǐng)放心填寫
關(guān)閉
免費(fèi)獲取方案