編輯導(dǎo)語(yǔ)：設(shè)計(jì)師在設(shè)計(jì)的時(shí)候，很容易發(fā)揮想象力、天馬行空的對(duì)產(chǎn)品進(jìn)行美化，但是往往脫離了對(duì)用戶使用感的考慮，從而使用戶接收不到設(shè)計(jì)師想要表達(dá)的信息。于是，你可能會(huì)抱怨：為什么我設(shè)計(jì)的界面，用戶找不到重點(diǎn)呢？或許，這篇文章可以解決你的疑惑。

很多設(shè)計(jì)師在進(jìn)行信息設(shè)計(jì)的時(shí)候，通?？恐杏X(jué)和曾經(jīng)嘗試過(guò)的經(jīng)驗(yàn)進(jìn)行信息美化。但是當(dāng)我們遇到需要對(duì)信息設(shè)計(jì)進(jìn)行解釋的時(shí)候，理由通常很蒼白。你無(wú)法說(shuō)出為什么用戶能夠快速高效的瀏覽信息，只是覺(jué)得又大、又粗、又硬哦不是，又鮮艷的信息能夠被識(shí)別。所以今天我們就要來(lái)聊一聊，為什么。

首先給大家介紹一些經(jīng)過(guò)研究之后的數(shù)據(jù)結(jié)論：

人類視野的空間分辨率從中央向邊緣減少。我們?nèi)祟惷恐谎劬哂?00萬(wàn)左右的視錐細(xì)胞，它們?cè)谌搜壑械姆植际?strong>越靠近中央凹的區(qū)域越密集。而另外一個(gè)研究證明，邊界視覺(jué)的信息在被傳遞到大腦之前是經(jīng)過(guò)壓縮的，而中央凹的視覺(jué)則不會(huì)。大概就是下2圖這個(gè)意思。

然后有同學(xué)會(huì)問(wèn)，既然我們的邊界視覺(jué)那么差，當(dāng)用戶在瀏覽界面信息的時(shí)候，為什么給用戶3秒鐘時(shí)間看界面他還是能夠記住頁(yè)面中的一些信息呢或者會(huì)說(shuō)為什么我們?cè)跒g覽的時(shí)候它不像下圖那樣只有一小圈是高清而邊上的文字是模糊的呢。

這其實(shí)是因?yàn)?strong>大腦通過(guò)一個(gè)比較粗獷的方式，基于我們的預(yù)期，給視野進(jìn)行填充，大腦也會(huì)命令你的眼睛對(duì)邊上的信息進(jìn)行細(xì)節(jié)采樣。所以這是一個(gè)很快速的過(guò)程。

為什么有的人能夠一目十行就是，他的大腦能幫他補(bǔ)充的更多，或者說(shuō)他的中央凹面積大。

但是有一個(gè)實(shí)驗(yàn)是，我們通過(guò)眼動(dòng)測(cè)試，當(dāng)用戶的中央凹停留在一篇文章中的一個(gè)地方時(shí)，這個(gè)文字顯示的是正確的，但是隨著中央凹的移動(dòng)，他周圍的文字會(huì)進(jìn)行隨機(jī)的變化，他雖然能夠成功的完成閱讀，但是速度大幅下降。

比如大家看一下下面這個(gè)頁(yè)面的區(qū)域

當(dāng)我們掃完這個(gè)頁(yè)面也就2-3秒，但是如果你沒(méi)有把中央凹停留在一個(gè)信息上的時(shí)候，其實(shí)都是靠大腦對(duì)我們的預(yù)期進(jìn)行的補(bǔ)充。而真實(shí)的情況是，你們并沒(méi)有發(fā)現(xiàn)頁(yè)面中錯(cuò)誤的地方。

言歸正傳，為什么你的信息用戶總是看不見(jiàn)呢。我們又要講到邊界視覺(jué)。我們的設(shè)計(jì)如果不考慮邊界視覺(jué)，那么就會(huì)影響到能夠被識(shí)別的信息。那么邊界視覺(jué)到底有什么用呢？

01 引導(dǎo)中央凹

我們剛才說(shuō)了中央凹的重要性，那么我們?cè)谑裁磿r(shí)候會(huì)把中央凹放到我們要看的信息上呢？其實(shí)就是依靠我們的邊界視覺(jué)。

邊界視覺(jué)引導(dǎo)中央凹，它幫助中央凹捕捉關(guān)鍵信息。我舉個(gè)例子，大家在查看一個(gè)食品包裝的生產(chǎn)日期的時(shí)候是怎么尋找的呢，大家的眼睛不斷的在搜索，而邊界視覺(jué)是提供了低分辨率的線索，幫助大腦，控制眼睛以線索的發(fā)現(xiàn)順序進(jìn)行移動(dòng)。

02 捕捉運(yùn)動(dòng)元素

邊界視覺(jué)可以非?？焖俚牟蹲降竭\(yùn)動(dòng)的物體，所以在界面設(shè)計(jì)中，無(wú)法放置在核心位置的元素但又需要用戶去注意到的時(shí)候，通常就會(huì)使用動(dòng)效。

那么我們要怎么做才能讓用戶關(guān)注到關(guān)鍵信息呢？

1. 將信息盡量放在中央凹或者中央凹邊上能夠被預(yù)期的位置

在小紅書(shū)很早的一個(gè)版本中，當(dāng)用戶進(jìn)行點(diǎn)贊操作后，反饋消息在頂部顯示，讓用戶無(wú)法察覺(jué)和關(guān)注到。因?yàn)檫吔缫曈X(jué)都無(wú)法捕捉。所以當(dāng)用戶在進(jìn)行操作時(shí)，如果需要將狀態(tài)、文字告知用戶，就需要顯示在用戶能預(yù)期以及能被邊界視覺(jué)捕捉到的位置。

2. 使用圖標(biāo)、圖片的形式標(biāo)記出關(guān)鍵信息

比如在一大段的文本中，用戶無(wú)法快速的查看內(nèi)容標(biāo)題，我們就可以在標(biāo)題前使用圖標(biāo)、圖片的形式進(jìn)行標(biāo)記，讓邊界視覺(jué)獲取到信息之后在大腦中產(chǎn)生預(yù)期模型。

3. 使用動(dòng)態(tài)效果吸引用戶注意

動(dòng)態(tài)效果能夠快速被捕捉，甚至引導(dǎo)用戶的視線。比如馬蜂窩在底部進(jìn)行點(diǎn)贊后通過(guò)動(dòng)效引導(dǎo)用戶，告知用戶該點(diǎn)贊是為用戶而贊，同時(shí)讓用戶的視線又回到了頂部，可能增加用戶的停留時(shí)間。

4. 使用高亮的顏色來(lái)吸引用戶的邊界視覺(jué)進(jìn)行捕捉

由于邊界視覺(jué)的搜索是線性的，所以我們必須將重點(diǎn)的信息進(jìn)行高亮顯示，比如警告的紅色，可點(diǎn)擊的藍(lán)色等。

在這里再補(bǔ)充一個(gè)我總結(jié)出來(lái)的規(guī)律，不一定對(duì)，但是我的猜測(cè)。

大家可以看到，下方的知乎話題界面，一進(jìn)入界面我們的邊界視覺(jué)立馬給我們進(jìn)行信息捕捉，所以首先被關(guān)注到的是呈現(xiàn)藍(lán)色的文字、圖片、圖標(biāo)等。

這里大家發(fā)現(xiàn)一個(gè)問(wèn)題沒(méi)有？

為什么在這個(gè)界面中上方的兩個(gè)按鈕不用色塊的形式做呢？例如右邊這樣，很多同學(xué)在這里第一反應(yīng)是這個(gè)按鈕太重了！很突兀！為什么很突兀？既然要引導(dǎo)用戶為什么不做的重一點(diǎn)呢？那有同學(xué)又會(huì)說(shuō)這樣設(shè)計(jì)會(huì)干擾用戶對(duì)其他信息的瀏覽，那么為什么會(huì)干擾對(duì)其他信息的瀏覽呢？

我的猜測(cè)來(lái)了！

我猜測(cè)人眼的中央凹視錐細(xì)胞會(huì)根據(jù)界面中信息的重要程度進(jìn)行調(diào)整，也就是說(shuō)不同程度的強(qiáng)化會(huì)讓邊界視覺(jué)的捕捉能力下降。像右側(cè)的色塊按鈕讓中央凹的視覺(jué)細(xì)胞更加聚集，而導(dǎo)致邊界視覺(jué)的范圍也大幅縮小，所以你們看左邊界面覺(jué)得信息優(yōu)先級(jí)很清晰，但是右側(cè)的就會(huì)覺(jué)得我只看到了兩個(gè)大按鈕，而其他的信息都沒(méi)有被捕捉到。

那繼續(xù)思考一下，什么時(shí)候能用大色塊的按鈕呢？很多電商平臺(tái)的購(gòu)物都是大按鈕，這個(gè)難道不會(huì)讓用戶的邊界視覺(jué)受影響嗎？

大家發(fā)現(xiàn)一個(gè)規(guī)律沒(méi)有，有大按鈕的頁(yè)面基本上圖片、圖標(biāo)都很多，而一般都是文字的頁(yè)面，通常都不會(huì)出現(xiàn)大按鈕，因?yàn)槌霈F(xiàn)了就會(huì)被噴太突兀了！！

這就是因?yàn)榇蟀粹o在沒(méi)有其他更高層級(jí)信息的配合下讓邊界視覺(jué)捕捉范圍降低了，如果都是高層級(jí)的信息，那么邊界視覺(jué)的捕捉范圍就會(huì)“一視同仁”。

所以，為了讓一個(gè)界面的按鈕不突兀，一種方法是用和它相似級(jí)別的元素進(jìn)行輔助展示，另一種方法就是降低該按鈕的視覺(jué)引導(dǎo)層級(jí)。

以上，謝謝

＃專欄作家＃

應(yīng)駿，人人都是產(chǎn)品經(jīng)理專欄作家，公眾號(hào)：應(yīng)謀鬼計(jì)（shejishiyj）

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

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