編輯導(dǎo)語：對于一個產(chǎn)品來說，界面設(shè)計(jì)是吸引用戶的一種好方式，用戶在打開APP時首先看到的就是主界面，主界面的色彩、排版、內(nèi)容等等方式是否能讓用戶記憶是非常重要的；本文作者分享了關(guān)于產(chǎn)品中的交互分析，我們一起來了解一下。

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

在界面設(shè)計(jì)中，我們常常能看到許多產(chǎn)品以各種形式搶奪用戶注意力，比如彈窗、通知提示等，亦或者通過色彩、大小等設(shè)計(jì)方式。

大部分情況下，這些搶奪注意力的方式簡單粗暴，如果不能在適合的場景采用相應(yīng)的設(shè)計(jì)手法，不僅達(dá)不到期望的目標(biāo)，反而影響瀏覽體驗(yàn)。

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

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

二、用戶注意力日漸走低

用戶的注意力也呈碎片化趨勢，很容易受到外界的影響，并且這種注意力分散的趨勢會越來越明顯。可能用戶上一秒在看公眾號，下一秒就打開了抖音，然后看到微信消息，點(diǎn)進(jìn)去回兩句…一天過去了，最后發(fā)現(xiàn)好像什么事都沒有干成。

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

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

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

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

三、用戶接收信息的方式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

六、視覺

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

1. 顏色對比

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

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

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

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

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

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

apple 官網(wǎng)：

小米官網(wǎng)：

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

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

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

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

4. 清晰/模糊對比

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

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

5. 陰影對比

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

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

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

6. 圖片信息

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

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

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

7. 動態(tài)信息

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

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

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

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

七、聽覺

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

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

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

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

八、觸覺

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

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

九、內(nèi)容信息

1. 信息專注性

一次只做一件事，盡管許多人認(rèn)為自己可以一腦多用，同時處理多件事，但是研究表明，人們在大部分情況下，很難同時完成多個任務(wù)；大家在一定有時會遇到很煩躁的情況，比如一下子要做設(shè)計(jì)，一下子又要開會，時間被分散，注意力無法集中。

同樣是，當(dāng)用戶面對復(fù)雜的界面時，也會出現(xiàn)這種情況。

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

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

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

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

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

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

2. 信息精簡性

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

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

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

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

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

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

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

盡管另外一方面，這些信息也可能限制了我們發(fā)現(xiàn)更多其他的信息。

十、結(jié)語

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

在設(shè)計(jì)中，無論是無法讓用戶集中注意力，還是到處都在搶占注意力，都不算是好設(shè)計(jì)；作為設(shè)計(jì)師，我們需要了解如何合理吸引用戶注意力，以兼顧用戶體驗(yàn)和商業(yè)化。

人們大多通過視覺、聽覺、觸覺與設(shè)備進(jìn)行交互，同時從信息設(shè)計(jì)的角度也進(jìn)行了分析。

希望可以幫助到大家！

本文由 @熱風(fēng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議