產(chǎn)品都希望吸引用戶的注意力

在界面設(shè)計(jì)中，我們常常能看到許多產(chǎn)品以各種形式搶奪用戶注意力，比如彈窗、通知提示等，亦或者通過(guò)色彩、大小等設(shè)計(jì)方式。大部分情況下，這些搶奪注意力的方式簡(jiǎn)單粗暴，如果不能在適合的場(chǎng)景采用相應(yīng)的設(shè)計(jì)手法，不僅達(dá)不到期望的目標(biāo)，反而影響瀏覽體驗(yàn)。 

在信息量極其龐大的當(dāng)下，信息被割裂得更加碎片化，現(xiàn)在可以滿足用戶訴求的產(chǎn)品太多了，許多產(chǎn)品的拉新成本高得離譜，關(guān)鍵是拉新后，留存也是令人頭禿的問(wèn)題。

每個(gè)企業(yè)都希望自己的產(chǎn)品可以獲取更多用戶流量、提升用戶活躍，自然就需要想方設(shè)法吸引用戶注意力。這是一個(gè)酒香也怕巷子深的時(shí)代，產(chǎn)品能滿足用戶需求、有著極致優(yōu)秀的體驗(yàn)還不夠，還需要讓用戶知道你的好，讓自身產(chǎn)品吸引更多目標(biāo)用戶，是每個(gè)產(chǎn)品的愿望。

用戶注意力日漸走低

用戶的注意力也呈碎片化趨勢(shì)，很容易受到外界的影響，并且這種注意力分散的趨勢(shì)會(huì)越來(lái)越明顯?？赡苡脩羯弦幻朐诳垂娞?hào)，下一秒就打開了抖音，然后看到微信消息，點(diǎn)進(jìn)去回兩句...一天過(guò)去了，最后發(fā)現(xiàn)好像什么事都沒(méi)有干成。

這就是矛盾的地方，一方面產(chǎn)品希望留住用戶，另一方面用戶在各產(chǎn)品間反復(fù)橫跳，就是不在你的產(chǎn)品里面待著。

研究表明，用戶的注意力只能維持在 10 分鐘左右，大腦在短暫休息后可以再次集中注意力 7-10 分鐘，7-10 分鐘差不多是人對(duì)任何任務(wù)保持專注的時(shí)間上限。

用戶容易受到各種信息的影響這不假，但是如果采用錯(cuò)誤的設(shè)計(jì)方式吸引用戶，非但不能如愿以償，反而可能引起反感。

作為交互設(shè)計(jì)師，我們要了解用戶的注意力是如何被吸引的、如何通過(guò)設(shè)計(jì)在不阻礙用戶的基礎(chǔ)上適當(dāng)吸引用戶注意力、哪些場(chǎng)景不該干擾用戶注意力，這些都是我們需要面對(duì)的問(wèn)題。

用戶接收信息的方式

現(xiàn)階段，由于體驗(yàn)設(shè)備的限制，大家大部分情況下還只是與手機(jī)、電腦等設(shè)備進(jìn)行交互，此時(shí)我們接收信息的方式主要包含：視覺(jué)、聽覺(jué)、觸覺(jué)。我們借助這些感官與世界和設(shè)備交流，下面會(huì)介紹設(shè)計(jì)師該用什么方式合理獲取用戶注意力。

界面設(shè)計(jì)的組成部分主要是控件、圖標(biāo)、文字信息、色彩等組成，而要想獲取用戶注意力，設(shè)計(jì)師必須清楚哪些信息應(yīng)當(dāng)突出，哪些應(yīng)當(dāng)弱化，如果所有信息都想突出，那就相當(dāng)于沒(méi)突出。

大腦的注意力機(jī)制

大腦有兩種處理信息的注意力機(jī)制。

一種是通過(guò)視覺(jué)、聽覺(jué)、觸覺(jué)等感官獲取信息，這種機(jī)制是“自外而內(nèi)”（自下而上）的，即我們從外界感知的，此時(shí)的影響因素是外界刺激而非內(nèi)心驅(qū)動(dòng)，甚至人們自身在這個(gè)過(guò)程中都沒(méi)有發(fā)現(xiàn)被吸引了注意力。

另一種是來(lái)自我們自身的，如記憶、想法等，是由我們的主觀能動(dòng)性進(jìn)行驅(qū)動(dòng)，比如你在專注思考今晚吃什么（這真的是一件糾結(jié)的事），這是“自內(nèi)而外”（自上而下）的，沒(méi)有這種注意力，就沒(méi)法專注起來(lái)。

                

這兩種注意力并沒(méi)有孰好孰壞之分，都在我們生活中起到至關(guān)重要的作用。區(qū)分這兩種處理信息的機(jī)制并不難，問(wèn)題主要出現(xiàn)在我們了解這個(gè)有什么作用？

那當(dāng)然是有用的，舉個(gè)簡(jiǎn)單的例子：

馬蜂窩的首頁(yè)是內(nèi)容信息推薦，用戶在這個(gè)場(chǎng)景中，如果是瀏覽首頁(yè)的旅游地點(diǎn)信息流，沒(méi)有攜帶特別明確的目的，就會(huì)更容易受到信息流推薦的影響，比如有吸引的圖片、標(biāo)題、按鈕等，都很容易吸引用戶，此時(shí)的注意力屬于“自外而內(nèi)”的。

此時(shí)設(shè)計(jì)形式以圖片為主，文字在界面中的占比相對(duì)較小，起輔助作用，在這種場(chǎng)景下，圖片相比于文字更容易吸引用戶。

而如果你想去成都旅游，于是你搜索了成都，想看看成都相關(guān)的游記，這時(shí)情況就不同了，因?yàn)槟阍谒阉鲿r(shí)具備了比較明確的目的。

你會(huì)關(guān)注搜索的內(nèi)容哪些是和成都相關(guān)并且你感興趣的，此時(shí)你注意力可能在搜索結(jié)果是不是能滿足需求，這時(shí)注意力屬于“自內(nèi)而外”的。

因此，頁(yè)面設(shè)計(jì)的關(guān)鍵就不是整些花里胡哨的操作，而是讓用戶便于高效搜尋，比如把你的搜索關(guān)鍵詞高亮突出，信息采用高效的列表排列。

說(shuō)到這里，我們了解到了注意力的“自下而上”是被動(dòng)的（外界的刺激），“自上而下”是主動(dòng)的（個(gè)人意愿），而且針對(duì)這兩種不同的注意力機(jī)制，有不同的設(shè)計(jì)方式。

這次我們主要講的是：外界刺激下的“自下而上”的注意力類型，討論哪些設(shè)計(jì)可以更快、更直接、更合理地獲得人們注意力。

設(shè)計(jì)“顯著線索”

人們每天醒來(lái)就要與外界進(jìn)行各種“溝通”，只要一走出門，就是面對(duì)外界的各種變化和信息，觸覺(jué)的、視覺(jué)的、嗅覺(jué)的...所以人們不可能注意到所有事物，比如馬路上的車在跑，你可能只會(huì)關(guān)注到法拉利。

一般來(lái)說(shuō)，人們更傾向于關(guān)注事物的顯著特征，比如顏色和大小，心理學(xué)家稱之為“顯著線索”（salient cue）。人們的注意力有限，所以大腦會(huì)關(guān)注比較重要的、差異化的信息。

人們不擅長(zhǎng)區(qū)分細(xì)節(jié)信息，因?yàn)樵诖蠖鄶?shù)情況下，顯著線索已經(jīng)足以幫助信息之間的差異。不信，你看看下面哪個(gè)是小米的新 logo，拿來(lái)檢測(cè)視力，用的都說(shuō)好！

所以，不要指望用戶一定會(huì)關(guān)注你界面中設(shè)計(jì)的關(guān)鍵信息，你所認(rèn)為的“顯著線索”對(duì)用戶來(lái)說(shuō)未必很明顯。如果你擔(dān)心人們會(huì)過(guò)濾某些信息，可以嘗試用以下的方式吸引他們的注意力。

大腦有自身的信息處理注意機(jī)制，我們需要了解其基本運(yùn)作規(guī)律，在設(shè)計(jì)中更好突出我們的重點(diǎn)信息，弱化次要信息，在合理吸引用戶注意力的同時(shí)，盡可能降低對(duì)用戶的干擾。

視覺(jué)

視覺(jué)是一切感覺(jué)之首，大腦的大量資源都用于接收和解析眼睛見到的信息，上文講到，差異化的信息更容易吸引注意力。在設(shè)計(jì)中，有許多種方式可以達(dá)到這種效果，從視覺(jué)的角度看，有顏色對(duì)比、大小對(duì)比、形狀對(duì)比、清晰度對(duì)比、陰影對(duì)比、運(yùn)用圖片、動(dòng)態(tài)信息等方式。

1、顏色對(duì)比

如果設(shè)計(jì)師想吸引用戶進(jìn)行某個(gè)操作，顏色一定是最常用的手法，但這里的關(guān)鍵在于，加強(qiáng)顏色的對(duì)比，而非整個(gè)界面都用重點(diǎn)色突出。沒(méi)有對(duì)比，就沒(méi)有傷害，顏色也一樣，沒(méi)有對(duì)比，就沒(méi)有突出。

下圖中，美團(tuán)外賣“我的”界面，盡管“我的功能”、“我的服務(wù)”、“更多推薦”都是采用黃色高亮色，但由于缺少對(duì)比，所以在這幾個(gè)模塊中，并沒(méi)有哪個(gè)功能顯得更為突出。其次，一屏之內(nèi)，出現(xiàn)了 8 個(gè)小紅點(diǎn)，看起來(lái)更像是在玩消消樂(lè)，用戶看了，也不知道先點(diǎn)哪個(gè)后點(diǎn)哪個(gè)，那么干脆就不點(diǎn)了吧，如此一來(lái)，反而達(dá)不到預(yù)期的效果。

反觀懂車帝的界面，突出高亮顯示的功能，只有“發(fā)布”、“任務(wù)中心”，界面相比起美團(tuán)更清爽，減少了許多視覺(jué)壓力，此時(shí)用戶更容易聚焦到對(duì)應(yīng)的功能。

2、文字大小、粗細(xì)對(duì)比

我們常能看到網(wǎng)上的鄙視甲方的話，甲方說(shuō)標(biāo)題一定要大！要粗！但實(shí)際上，一般情況下，加強(qiáng)元素的大小、粗細(xì)對(duì)比，能夠豐富設(shè)計(jì)的層次，人們的視覺(jué)總是更容易受到更大視覺(jué)面積的影響，因此文字大小、粗細(xì)對(duì)比確實(shí)能夠讓用戶的視覺(jué)有非常清晰的聚焦點(diǎn)。

在大廠的設(shè)計(jì)中，我們能看到非常多設(shè)計(jì)都是遵循這種理念，比如 Apple、小米等。

apple 官網(wǎng)

小米官網(wǎng)

3、形狀、結(jié)構(gòu)對(duì)比

看看下面的圖片，你會(huì)注意到什么元素？

是的，我們的注意力會(huì)很自然地聚焦在差異性的圖形上，而忽略相同的視覺(jué)信息。形狀結(jié)構(gòu)差異性，在引導(dǎo)用戶視覺(jué)瀏覽動(dòng)線上，也是常用的手法。

以知乎為例，在知乎會(huì)員頁(yè)中，列表整體上均以左圖右文的形式展示，在這種相同結(jié)構(gòu)下，用戶瀏覽動(dòng)線相對(duì)比較統(tǒng)一，而界面中間配置了 banner 圖片，在結(jié)構(gòu)上形成了差異化，則更容易在視覺(jué)上形成突出效果。所以，就算這張圖片換成小圖，或者其他的結(jié)構(gòu)形式，也同樣可以達(dá)到區(qū)分的效果。

4、清晰/模糊對(duì)比

當(dāng)清晰的物體和模糊的物體放在一起時(shí)，人們會(huì)先注意到輪廓清晰的物體，而模糊的信息則容易形成背景。

iOS 是模糊效果運(yùn)用最多也是效果最好的系統(tǒng)，這種效果不僅使界面整體更沉浸，減少頁(yè)面層級(jí)變化的視覺(jué)割裂感，還能將邊緣輪廓清晰的內(nèi)容凸顯出來(lái)。

5、陰影對(duì)比

陰影效果可以讓元素在原有界面的 Z 軸方向上進(jìn)行突出，可以與界面其他未添加陰影效果的元素有明顯區(qū)分，在視覺(jué)層級(jí)上更高。

在 Material design 上，陰影被用來(lái)體現(xiàn)元素層級(jí)高度，陰影大小反映 Z 軸的卡片高度。感知上距離界面越高，陰影越大。

以美團(tuán)會(huì)員頁(yè)為例，頂部的會(huì)員卡片由于加上陰影效果，信息層級(jí)上顯得更高。

6、圖片的表現(xiàn)力更強(qiáng)

毋庸置疑，圖片信息相比于文字信息，更能吸引用戶的注意力，因?yàn)槿藗儗?duì)于圖像識(shí)別能力幾乎是與生俱來(lái)的，有時(shí)候圖片傳遞信息會(huì)比文字更快速、更直接。許多信息（比如情緒、氛圍感）很難靠文字傳遞，恰巧這些正是圖片最輕松傳達(dá)的。

以 App Store 為例，當(dāng)圖片與文字放置在一起的時(shí)候，圖片的吸睛效果會(huì)比文字更強(qiáng)。盡管圖片并非在頁(yè)面最上方，用戶未必會(huì)第一時(shí)間知道這是一張什么內(nèi)容的圖片，但知道視覺(jué)有一張圖片，視覺(jué)吸引到該處的概率會(huì)更大。

此外，人們對(duì)于圖片中人臉的識(shí)別更為突出，據(jù)研究，在大腦有一處特殊區(qū)域，專門用來(lái)識(shí)別人臉，稱為梭形臉部區(qū)，可以讓人臉識(shí)別繞過(guò)通常的視覺(jué)解析渠道，從而得到快速識(shí)別。

7、動(dòng)態(tài)信息

視覺(jué)對(duì)運(yùn)動(dòng)物體有一種特殊的處理機(jī)制，當(dāng)視線中出現(xiàn)了運(yùn)動(dòng)物體，眼睛就會(huì)不由自主地轉(zhuǎn)向運(yùn)動(dòng)物體，視覺(jué)焦點(diǎn)中心也隨之移至運(yùn)動(dòng)物體，這是反射性注意。在設(shè)計(jì)中，合理地使用動(dòng)態(tài)設(shè)計(jì)效果，能夠很輕松地引導(dǎo)用戶注意力。

以下面優(yōu)酷信息流為例，界面中的動(dòng)態(tài)圖片更容易獲取用戶的視覺(jué)注意力。

視頻也是動(dòng)態(tài)信息的一種呈現(xiàn)形式，在視覺(jué)媒介中，按照吸引用戶注意力的程度排序，分別是：視頻、圖片、純文字，視頻由于本身的動(dòng)態(tài)特性，在對(duì)靜態(tài)信息的對(duì)比中，吸引注意力的效果尤為明顯。

在手機(jī)上，許多產(chǎn)品都會(huì)采用視頻作為宣傳的形式，視頻能夠承載較大的信息量，同時(shí)傳達(dá)的效果又直截了當(dāng)。

聽覺(jué)

聽覺(jué)在設(shè)備中的運(yùn)用也很頻繁，常見有提示音、鬧鐘等，比如支付寶、微信在收款時(shí)，也有收錢的提示音。

特別是在手機(jī)上使用聲音作為交互的某種反饋時(shí)，需要注意選擇恰當(dāng)?shù)穆曇?，避免引起用戶反感，在聲音的使用上要?jǐn)慎。

固定的聲音（如鈴聲）對(duì)于用戶而言可以形成條件反射，下課鈴聲響了，你會(huì)意識(shí)到是下課了；鬧鐘響了，你會(huì)意識(shí)到今天又是元?dú)鉂M滿的一天。需要注意的是，倘若聲音的出現(xiàn)與用戶沒(méi)有存在關(guān)聯(lián)，久而久之，這種聲音就容易被用戶忽略。

對(duì)于視障人士而言，聲音還是接收信息的主要渠道，比如 iPhone 的旁白功能，此時(shí)用戶操作的注意力會(huì)集中在對(duì)聲音的感知。

觸覺(jué)

與觸覺(jué)相關(guān)的接收信息方式主要是振動(dòng)，在與設(shè)備交互功能中，人們對(duì)于振動(dòng)反饋的要求越來(lái)越高。在手機(jī)設(shè)備領(lǐng)域，許多廠商開始有意識(shí)地采用更好的振動(dòng)馬達(dá)，目前就是提升振動(dòng)反饋。

振動(dòng)也是在關(guān)鍵節(jié)點(diǎn)吸引用戶注意力，當(dāng)用戶操作成功、失誤的時(shí)候，給予輕微的振動(dòng)反饋，能夠加強(qiáng)用戶對(duì)當(dāng)前狀態(tài)的感知。

內(nèi)容信息

1、信息專注性

一次只做一件事，盡管許多人認(rèn)為自己可以一腦多用，同時(shí)處理多件事，但是研究表明，人們?cè)诖蟛糠智闆r下，很難同時(shí)完成多個(gè)任務(wù)。大家在一定有時(shí)會(huì)遇到很煩躁的情況，比如一下子要做設(shè)計(jì)，一下子又要開會(huì)，時(shí)間被分散，注意力無(wú)法集中。同樣是，當(dāng)用戶面對(duì)復(fù)雜的界面時(shí)，也會(huì)出現(xiàn)這種情況。

在設(shè)計(jì)界面時(shí)，倘若界面有太多干擾項(xiàng)，就會(huì)增加用戶的認(rèn)知成本，無(wú)法快速辨別該執(zhí)行什么操作。

以 App Store 和潮汐為例，下面這兩個(gè)頁(yè)面都可以看出信息的專注性，App Store 以卡片形式清晰呈現(xiàn)每一個(gè)專注或應(yīng)用；潮汐首頁(yè)只突出了底部的四個(gè)操作。這些都讓用戶盡可能減少無(wú)謂的信息干擾，專注于當(dāng)前界面的操作。

你以為我講了 App store 和潮汐的例子就完了嗎？上面的 App 由于定位和商業(yè)化程度的不同，才有了這種簡(jiǎn)約的設(shè)計(jì)形式，大多數(shù)設(shè)計(jì)師面對(duì)的界面是產(chǎn)品極力要求把所有信息都在一屏之內(nèi)塞得滿滿當(dāng)當(dāng)。

面對(duì)商業(yè)化，許多設(shè)計(jì)師可能會(huì)認(rèn)為毫無(wú)有心無(wú)力，但是日常處理復(fù)雜的信息量才是許多設(shè)計(jì)師的常態(tài)，大部分業(yè)務(wù)由于商業(yè)化等原因，都會(huì)往界面塞進(jìn)更多內(nèi)容。

交互設(shè)計(jì)師除了了解產(chǎn)品功能，還需要考慮如何組織、轉(zhuǎn)移這些復(fù)雜的信息，如果信息組織得當(dāng)，也可以強(qiáng)化重點(diǎn)功能模塊，合理引導(dǎo)用戶的注意力。

以貓眼為例，首頁(yè)承載著功能入口和電影資源推薦等功能，但是通過(guò)合理的信息布局，仍然可以使界面結(jié)構(gòu)變得清晰。

2、信息精簡(jiǎn)性

Krug 可用性第三定律提到：去掉每個(gè)頁(yè)面上一半的文字，然后把剩下的文字再去掉一半。

盡管上述提到的定律有點(diǎn)夸張，但是，繁雜、多余的信息文案，確實(shí)會(huì)讓用戶花費(fèi)更多時(shí)間理解，當(dāng)用戶無(wú)法快速了解內(nèi)容信息時(shí)，注意力就容易漂移。在設(shè)計(jì)時(shí)，設(shè)計(jì)師尤其要記住，在保證信息完整性的前提下，盡可能讓文案更加簡(jiǎn)短，做到讓用戶快速領(lǐng)會(huì)到設(shè)計(jì)所表達(dá)的意思。

信息易讀性，是獲取注意力的基本，用戶是懶惰的，不要期待用戶會(huì)在如何了解你的產(chǎn)品這種事情上花費(fèi)太多時(shí)間。

以下圖為例，左邊文案“你必須先登錄才能提交訂單”明顯就不如“登錄并提交”來(lái)得直觀，在交互文案中，要格外注意信息表達(dá)的精簡(jiǎn)性，當(dāng)然不能以犧牲表達(dá)的信息完整性為代價(jià)。

3、信息相關(guān)性

內(nèi)容相關(guān)性，即推薦的內(nèi)容與用戶相關(guān)，許多內(nèi)容型產(chǎn)品，通過(guò)算法等方式，根據(jù)用戶的偏好進(jìn)行內(nèi)容推薦。

抖音視頻推薦、頭條資訊推薦、網(wǎng)易云歌單推薦、淘寶商品推薦...你會(huì)發(fā)現(xiàn)，我們生活在一個(gè)所有資訊信息與我們相關(guān)性極高的世界，因?yàn)樗麄兺扑]算法，很大程度上就是基于我們歷史行為而推薦的，如果是不相關(guān)的信息，我們可能壓根就不會(huì)看，我們被這些信息吸引注意力，這些信息確實(shí)幫助我們降低了篩選的成本。盡管另外一方面，這些信息也可能限制了我們發(fā)現(xiàn)更多其他的信息。

結(jié)語(yǔ)

本文介紹了注意力的主要類型：“自外而內(nèi)”、“自內(nèi)而外”，并且就“自下而上”的注意力類型進(jìn)行了分析。

在設(shè)計(jì)中，無(wú)論是無(wú)法讓用戶集中注意力，還是到處都在搶占注意力，都不算是好設(shè)計(jì)。作為設(shè)計(jì)師，我們需要了解如何合理吸引用戶注意力，以兼顧用戶體驗(yàn)和商業(yè)化。人們大多通過(guò)視覺(jué)、聽覺(jué)、觸覺(jué)與設(shè)備進(jìn)行交互，同時(shí)從信息設(shè)計(jì)的角度也進(jìn)行了分析。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷   作者：熱風(fēng)_

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)