服務(wù)項(xiàng)目:網(wǎng)站建設(shè)、仿站、程序開發(fā)、APP開發(fā)設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)設(shè)計(jì)、企業(yè)網(wǎng)站設(shè)計(jì)、電子商務(wù)網(wǎng)站開發(fā)、網(wǎng)站維護(hù)、網(wǎng)站推廣、UX/UI 、HTML5、CSS3、JS / Jquery ...
四川浚??萍加邢薰?></a></div>
                    <div   id=四川???萍加邢薰? title=
四川浚??萍加邢薰?(開發(fā)設(shè)計(jì)官網(wǎng))TEL : 15308000360 / QQ : 38585404

您的位置:首頁(yè) > 技術(shù)經(jīng)驗(yàn) > 設(shè)計(jì)經(jīng)驗(yàn) > 正文

從注意力維度談動(dòng)效設(shè)計(jì)
技術(shù)支持服務(wù)電話:15308000360 【7x24提供運(yùn)維服務(wù),解決各類系統(tǒng)/軟硬件疑難技術(shù)問題】

近年來(lái),隨著ios和android系統(tǒng)對(duì)于動(dòng)效設(shè)計(jì)的帶動(dòng)效應(yīng),多數(shù)產(chǎn)品對(duì)于動(dòng)效設(shè)計(jì)也越來(lái)越重視,從app引導(dǎo)頁(yè)到動(dòng)作反饋,從官網(wǎng)介紹到hover效果,動(dòng)效設(shè)計(jì)似乎已經(jīng)成為一個(gè)成功產(chǎn)品的標(biāo)配。但是動(dòng)效也不是越絢麗越好,過(guò)于絢麗的動(dòng)效對(duì)于我們的設(shè)計(jì)目標(biāo)來(lái)說(shuō)也許會(huì)適得其反,用戶可能只關(guān)注到了動(dòng)效本身,而沒有精力或時(shí)間去關(guān)注動(dòng)效要傳達(dá)的信息,而如何把握這個(gè)度,本文會(huì)從以下幾個(gè)方面來(lái)講。

一. 是什么吸引著用戶的注意力?

從看到一個(gè)頁(yè)面的瞬間開始,如果在展示面積相同的情況下,用戶的注意力會(huì)按照一個(gè)特定的順序依次被吸引:動(dòng)態(tài)>顏色>形狀。

 

簡(jiǎn)單來(lái)說(shuō),當(dāng)用戶打開一個(gè)界面,注意力首先會(huì)被動(dòng)態(tài)的物體吸引,當(dāng)動(dòng)態(tài)靜止或者是個(gè)很有規(guī)律的動(dòng)態(tài)時(shí),注意力會(huì)轉(zhuǎn)向顏色對(duì)比強(qiáng)的部分,最后才是形狀。這一過(guò)程是人在進(jìn)化過(guò)程中形成的本能反應(yīng),基本適用所有用戶。同時(shí)一個(gè)非常重要且容易被忽略的原則:用戶的注意力是有限的,而且越來(lái)越少。很可能在用戶注意到一段動(dòng)效之后,注意力和耐心已經(jīng)用盡,無(wú)法看到其他內(nèi)容就著急去下一個(gè)界面了。所以,對(duì)于動(dòng)效這樣一個(gè)非常強(qiáng)勢(shì)的工具,一定要用在希望用戶注意的部分。

二、動(dòng)效吸引注意力的核心維度

一個(gè)動(dòng)效對(duì)于用戶的注意力吸引有多強(qiáng),可以分為兩個(gè)核心維度,動(dòng)效的展現(xiàn)面積與持續(xù)時(shí)間。展現(xiàn)面積越大,動(dòng)效持續(xù)時(shí)間越長(zhǎng)(包括單一動(dòng)效與復(fù)合動(dòng)效),用戶注意力越能夠被吸引并持續(xù)。將兩個(gè)核心維度構(gòu)成一個(gè)二維圖表,形成的四個(gè)象限可以代表四類不同的動(dòng)效:

 

 

1.相對(duì)面積大,動(dòng)效持續(xù)時(shí)間長(zhǎng)

此類動(dòng)效多應(yīng)用在app的介紹頁(yè)或者官網(wǎng)的產(chǎn)品介紹頁(yè),力圖通過(guò)動(dòng)效沖擊視覺,給用戶留下深刻印象。這里由于大部分畫面都是動(dòng)態(tài),其余靜態(tài)的小部分很可能被忽視。例如,多數(shù)頁(yè)面都在圖形中加入動(dòng)效,而文字部分是靜止的,如果有信息是希望能夠通過(guò)文字表達(dá),這時(shí)就會(huì)起不到作用。用戶只能記住“炫”,至于要表達(dá)什么則基本不懂。所以這類動(dòng)效在使用時(shí),要注意是否會(huì)影響頁(yè)面信息傳達(dá)。

 

Reebok Fall/Winter ’14 Lookbook 頁(yè)面中,整個(gè)頁(yè)面都有長(zhǎng)時(shí)間動(dòng)態(tài)效果,用戶注意力基本停留在頁(yè)面中的人物動(dòng)作上。而其中的產(chǎn)品展示部分,雖然也有動(dòng)效引導(dǎo),但用戶的注意力都在想看完所有場(chǎng)景上,沒有多余的注意力給頁(yè)面中的產(chǎn)品。不過(guò),這樣的頁(yè)面安排在傳統(tǒng)企業(yè)網(wǎng)頁(yè)中是常見也合理的。因?yàn)檫@個(gè)頁(yè)面的核心目的就是品牌宣傳,讓用戶感受到Reebook是多么酷的一個(gè)運(yùn)動(dòng)品牌,根本也沒指望頁(yè)面中的產(chǎn)品鏈接能夠帶來(lái)多少銷量。而多數(shù)互聯(lián)網(wǎng)產(chǎn)品的此類頁(yè)面還要解決功能闡述,所以要慎重設(shè)計(jì)。


2.相對(duì)面積大,持續(xù)時(shí)間短

動(dòng)效展示面積大,時(shí)間卻比較短,是希望用戶注意集中在動(dòng)態(tài)部分一瞬間即可,這類動(dòng)效設(shè)計(jì)師都比較熟悉,多用于界面之間的切換。大范圍短時(shí)間的動(dòng)效很難看清,所以這類動(dòng)效更多為展現(xiàn)界面之間的空間關(guān)系。值得關(guān)注的是,由于用戶會(huì)不自主關(guān)注動(dòng)態(tài)部分,所以即將出現(xiàn)的界面應(yīng)該是動(dòng)態(tài)的,這樣注意力會(huì)順暢銜接到后出現(xiàn)界面,否則會(huì)出現(xiàn)“注意力跳躍”。

在如上界面中,側(cè)邊欄的展開過(guò)程就會(huì)出現(xiàn)“注意力跳躍”。在點(diǎn)擊側(cè)邊欄按鈕后,用戶注意力會(huì)集中在整個(gè)界面向右移動(dòng),而后隨著動(dòng)畫的結(jié)束,注意力還要回到底層的深色界面,導(dǎo)致了視覺流的不流暢。


3.相對(duì)面積小,動(dòng)效時(shí)長(zhǎng)短

此類動(dòng)效可以用“輕”來(lái)描述,通常是來(lái)進(jìn)行比較“輕”引導(dǎo)、反饋和提示。核心是不希望打斷主流程,而又能輕微吸引一下注意力,情感化設(shè)計(jì)也最適合在此發(fā)揮。

亞馬遜客戶端點(diǎn)擊搜索后,菜單按鈕會(huì)向右移動(dòng),返回按鈕隨之進(jìn)入。這里的動(dòng)效稍微提示了一下“返回”的出現(xiàn),同時(shí)又沒有搶走用戶對(duì)搜索的注意力,恰到好處。

 

在Shine中的loading動(dòng)效是一個(gè)小人在不斷游泳。而 Google搜索App中,如果切換到橫屏再切換回來(lái),logo就會(huì)好像被你弄歪一樣。這些小動(dòng)效都為產(chǎn)品的情感化起到了很好的作用。


4.相對(duì)面積小,動(dòng)效持續(xù)時(shí)間長(zhǎng)

一個(gè)較小面積上會(huì)長(zhǎng)時(shí)間存在動(dòng)態(tài)效果去吸引用戶注意,這意味著此處的動(dòng)態(tài)效果本身是非常重要的,值得用戶保持關(guān)注,此類基本都與用戶此時(shí)關(guān)注的功能直接相關(guān)。

雅虎天氣中的風(fēng)車轉(zhuǎn)動(dòng),美樂時(shí)光的動(dòng)態(tài)按鈕,都是體現(xiàn)了產(chǎn)品功能或狀態(tài),這樣的動(dòng)效雖然一直持續(xù)的吸引注意,但是由于面積較小,所以并不會(huì)對(duì)其他功能使用產(chǎn)生過(guò)多干擾。動(dòng)效的展現(xiàn)面積會(huì)非常需要好好斟酌。


三、總結(jié)

動(dòng)效是最?yuàn)Z人眼球的工具之一,正確的使用會(huì)在與用戶的對(duì)話中起到很好的引導(dǎo)。不過(guò)也正因?yàn)樗膹?qiáng)勢(shì),所以一定要梳理好設(shè)計(jì)目標(biāo),不要讓其變?yōu)楦蓴_,畢竟用戶的注意力和時(shí)間都變得越來(lái)越少,我們要做的是更合理的利用動(dòng)效來(lái)傳達(dá)我們的信息。



上一篇:網(wǎng)站導(dǎo)航設(shè)計(jì)模式的重要意義
下一篇:網(wǎng)頁(yè)設(shè)計(jì)首屏圖文混排的10大技巧

相關(guān)熱詞搜索:動(dòng)效設(shè)計(jì)