從注意力維度談動效設(shè)計

轉(zhuǎn)載贊2 收藏7 評論

舉報 2014-11-20

掃描,分享朋友圈

來源：百度 MUX

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

一．是什么吸引著用戶的注意力？

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

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

二、動效吸引注意力的核心維度

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

1．相對面積大，動效持續(xù)時間長

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

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

2.相對面積大，持續(xù)時間短

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