網(wǎng)站建設中從注意力維度談動(dòng)效設計發(fā)布者：本站     時(shí)間：2022-03-26 16:03:18

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

一． 是什么吸引著(zhù)用戶(hù)的注意力？

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

從注意力維度談動(dòng)效設計

 

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

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

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

從注意力維度談動(dòng)效設計

 

 

1．相對面積大，動(dòng)效持續時(shí)間長(cháng)

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

 

從注意力維度談動(dòng)效設計

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


2.相對面積大，持續時(shí)間短

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

從注意力維度談動(dòng)效設計

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


3.相對面積小，動(dòng)效時(shí)長(cháng)短

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

從注意力維度談動(dòng)效設計

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

從注意力維度談動(dòng)效設計

 

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


4.相對面積小，動(dòng)效持續時(shí)間長(cháng)

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