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

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

“這什么鬼？”

——面對上面的說法和圖片，我猜你可能有這樣類似的想法。

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

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

就像上面的那張圖一樣。

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

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

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

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

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

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

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

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

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

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

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

我們吃什么？我們和誰交往？我們要躲避什么？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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