編輯導(dǎo)讀：給你一張圖，你首先會(huì)看到什么？有資料顯示，人會(huì)優(yōu)先注意的內(nèi)容：動(dòng)效、鮮艷的顏色、大小、人臉、顯著信息、食物等。而作為產(chǎn)品設(shè)計(jì)者，我們可以運(yùn)用視覺(jué)流，把注意力吸引到重要的事件上。本文作者對(duì)此展開(kāi)分析，與你分享。

在某個(gè)時(shí)間點(diǎn)上，這才是我們眼睛真正看到的世界 ↓

“這什么鬼？”

——面對(duì)上面的說(shuō)法和圖片，我猜你可能有這樣類(lèi)似的想法。

但對(duì)視覺(jué)系統(tǒng)的研究已經(jīng)證明：我們的視覺(jué)系統(tǒng)呈現(xiàn)的整個(gè)畫(huà)面里，只有中間很小一個(gè)部分是清晰的，而其他部分非常模糊。

這和視網(wǎng)膜里的“中央凹”有關(guān)，而中央凹帶來(lái)的是中央視野，我在前面的文章里提到過(guò)，中央視野是投射在我們視網(wǎng)膜中央凹區(qū)域的畫(huà)面，而投射在中央凹之外的畫(huà)面清晰度會(huì)迅速降低，基本上等于我們隔著沾滿(mǎn)霧氣的浴室玻璃看出去一樣。

就像上面的那張圖一樣。

所以，我們能夠無(wú)障礙的看這個(gè)世界，是視覺(jué)系統(tǒng)在時(shí)間上的連續(xù)性構(gòu)成的：中央凹之外的周邊視覺(jué)信息會(huì)不斷的引導(dǎo)眼球運(yùn)動(dòng)，從而使中央視野快速的瀏覽以補(bǔ)全整個(gè)視野。

拋開(kāi)界面，其實(shí)我們不需要去設(shè)計(jì)“視覺(jué)流”，因?yàn)檠矍蜻\(yùn)動(dòng)是下意識(shí)的，不需要我們意識(shí)的投入，也不需要我們進(jìn)行控制。比如閱讀的時(shí)候大多數(shù)人習(xí)慣從左到右從上到下。

但界面的本質(zhì)是一個(gè)人機(jī)觸點(diǎn)（《人機(jī)交流的觸點(diǎn)AUI》），它傳遞信息，也有所期望，所以這里的“視覺(jué)流”，是指界面設(shè)計(jì)對(duì)于用戶(hù)視覺(jué)的引導(dǎo)。

如果回歸到中央視野的概念，就是界面通過(guò)設(shè)計(jì)來(lái)引導(dǎo)用戶(hù)下意識(shí)的眼動(dòng)行為，以達(dá)到更好的信息傳達(dá)目的。

有很多書(shū)或文章里談到過(guò)，人會(huì)優(yōu)先注意的內(nèi)容：動(dòng)效、鮮艷的顏色、大小、人臉、顯著信息、食物、性等。

其實(shí)我們可以從兩方面理解：

1）人們更關(guān)注對(duì)比度

相比起其他部分，哪個(gè)部分最特別，我們會(huì)下意識(shí)的注意它。比如在一行文字中較大的那個(gè)字：

和文字本身的大和小沒(méi)有關(guān)系，我們更關(guān)注的是對(duì)比度，顏色、形狀、甚至動(dòng)效也是一樣的，如果不考慮認(rèn)知影響，視野里所有具有顯著性特征的不同都會(huì)被自動(dòng)注意到，這是自動(dòng)發(fā)生的。

我們的注意力會(huì)下意識(shí)留意與眾不同的內(nèi)容，越與眾不同，越受到關(guān)注。對(duì)比度，是我們下意識(shí)會(huì)注意到的內(nèi)容所擁有的表現(xiàn)形式，究其來(lái)源，則是下面的第二點(diǎn)。

2）由進(jìn)化帶來(lái)的天性

我們吃什么？我們和誰(shuí)交往？我們要躲避什么？

現(xiàn)代文明至今也不過(guò)幾千年而已，進(jìn)化還未能使人類(lèi)大腦發(fā)生很多變化，我們的祖先依靠這種下意識(shí)的注意力獲得了食物，繁衍了后代，躲避了危險(xiǎn)。

這些特性被留存下來(lái)，讓我們會(huì)不自覺(jué)地注意食物（或者食物圖片），因?yàn)樗峁┪覀兩眢w的基本能量；不自覺(jué)的注意動(dòng)的東西，因?yàn)樗赡艽砦ｋU(xiǎn)襲來(lái)；不自覺(jué)的注意人臉（或者人臉圖片），因?yàn)樗砜梢哉覍ね?lèi)繁衍或協(xié)作，在幼小的時(shí)候可以盡快得到依附（出生不到半小時(shí)的嬰兒就會(huì)明顯喜歡看有面部特征的內(nèi)容），甚至也有可能代表競(jìng)爭(zhēng)性危險(xiǎn)……

下意識(shí)注意的內(nèi)容一般都會(huì)具有這兩個(gè)特性，比如鮮艷的顏色，它既可以是因?yàn)榕c周?chē)膶?duì)比強(qiáng)烈，又可能是因?yàn)樗谖覀冏嫦壬畹沫h(huán)境里代表有毒性。

那，他們之間有強(qiáng)弱之別嗎？

為了活下來(lái)，大腦進(jìn)化的天性會(huì)更吸引我們下意識(shí)注意某些更緊急的要素，所以在有動(dòng)效的東西和有鮮艷顏色的東西同時(shí)存在時(shí)，我們會(huì)更偏向于動(dòng)效。

基于一些心理學(xué)研究，不考慮個(gè)體認(rèn)知差別，同等程度下，之前所提到內(nèi)容引發(fā)注意力的優(yōu)先級(jí)大致是：動(dòng)態(tài)信息＞人臉＞顏色＞大?。臼澄铮拘螤睢?/p>

我們依靠這些來(lái)引導(dǎo)用戶(hù)不自覺(jué)的眼部運(yùn)動(dòng)，形成視覺(jué)流，區(qū)分信息的層級(jí)，讓用戶(hù)更快的注意到重要的信息，從而達(dá)到信息傳達(dá)的高效率。

在實(shí)際項(xiàng)目的設(shè)計(jì)中，設(shè)計(jì)師常常綜合使用以上吸引注意力的內(nèi)容，比如既有大小對(duì)比，又有顏色對(duì)比，每一次設(shè)計(jì)界面都是對(duì)設(shè)計(jì)師處理這些元素能力的體現(xiàn)，在界面里展示合適的視覺(jué)流，體現(xiàn)了設(shè)計(jì)師本身的藝術(shù)功底和對(duì)產(chǎn)品的理解能力兩重屬性。

舉一個(gè)例子，這是一張ToB項(xiàng)目里的網(wǎng)頁(yè)界面圖，我截取了它的內(nèi)容區(qū)域，可以看到，整張圖的視覺(jué)處理非常簡(jiǎn)單，結(jié)構(gòu)也算比較清晰，那么，在這張圖里，哪一塊是第一個(gè)吸引你注意力的地方呢？第二吸引的又是什么呢？

圖片因?yàn)榇笮『皖伾碾p重對(duì)比，顯然是首先吸引注意力的地方，第二吸引注意力的一般來(lái)說(shuō)，是同樣具備顏色和大小對(duì)比的右側(cè)重新發(fā)送按鈕。

那這整張界面是要傳遞什么信息呢？

這是一張告警信息的詳情界面，是工廠的攝像頭經(jīng)過(guò)邊緣識(shí)別處理上報(bào)的告警信息，后臺(tái)的人員需要去進(jìn)行人工確認(rèn)并保證這條告警信息已經(jīng)傳遞給現(xiàn)場(chǎng)的負(fù)責(zé)人員，說(shuō)到這里，我們大概就能夠知道，這樣一個(gè)界面，需要第一個(gè)傳遞的信息是這張圖片，后臺(tái)人員才能針對(duì)這條信息確認(rèn)機(jī)器的判斷是否確實(shí)有效（右側(cè)的判定結(jié)果在這個(gè)項(xiàng)目前一級(jí)的列表界面里已經(jīng)可以讀取）。第二個(gè)要傳遞的，則應(yīng)該是如果這條信息有效，它是否已經(jīng)確實(shí)傳送給現(xiàn)場(chǎng)的負(fù)責(zé)人員。

所以，第二個(gè)引起注意的元素應(yīng)該不是那個(gè)藍(lán)色的按鈕，而應(yīng)該是按鈕上方那條信息。

那么，如果這張界面要進(jìn)行優(yōu)化，我們可以在第二個(gè)需要引起注意的元素上添加圖形和顏色，來(lái)吸引用戶(hù)的注意。

在AR的設(shè)計(jì)里也是一樣，與真實(shí)環(huán)境一起作為信息傳遞的AUI，對(duì)于整個(gè)界面信息的視覺(jué)流設(shè)計(jì)更加重要。

下面這張圖是一個(gè)測(cè)距應(yīng)用的截圖：

這里面，第一眼獲得你注意力的是什么呢？

如果排除位置的影響和用戶(hù)主動(dòng)針對(duì)目標(biāo)的關(guān)注，這張AR應(yīng)用界面主要是通過(guò)單一的大小對(duì)比來(lái)做的，靜態(tài)界面下的引導(dǎo)性視覺(jué)流比較弱，基本還是靠用戶(hù)自主去尋找，使用的過(guò)程中，中心圓圈的部分疊加了呼吸動(dòng)效來(lái)吸引注意力。

在AUI設(shè)計(jì)中，有一個(gè)難點(diǎn)是多變的環(huán)境，所以上圖里使用白色是比較保險(xiǎn)的一種策略，但如果這張界面要進(jìn)行優(yōu)化，我們也可以考慮在白色的基礎(chǔ)上再給最重要的信息疊加其他鮮艷的顏色。

想要靠視覺(jué)流引導(dǎo)注意力，就需要將界面里的元素表現(xiàn)的與眾不同，當(dāng)然，這說(shuō)起來(lái)容易。

要做到合適的視覺(jué)流，設(shè)計(jì)師不僅需要平衡界面內(nèi)多個(gè)信息內(nèi)容間的關(guān)系，還需要平衡與體驗(yàn)一致性的沖突，如果誤用，可能就會(huì)不那么合適，如果用不好，甚至顯得有些粗魯了。就像Alan Cooper在《About face》里提到的，在網(wǎng)頁(yè)設(shè)計(jì)早期那些閃爍的五顏六色的標(biāo)簽一樣。

智能化與AR設(shè)計(jì) 系列篇

AUI，Augmented User Interface或Augmented User Interaction，是指有視覺(jué)或者確實(shí)深度信息的虛實(shí)結(jié)合的用戶(hù)所見(jiàn)界面。

作者：林影落，10年+體驗(yàn)設(shè)計(jì)師，專(zhuān)注AR及創(chuàng)新領(lǐng)域設(shè)計(jì)；微信公眾號(hào)：林間有影落

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

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