物質(zhì)世界客觀存在，而人的“視覺成像”是對當(dāng)前世界的“唯心”重建。這種重建基于個(gè)人“經(jīng)驗(yàn)”、“感知”和“集體意識”。最初科學(xué)家認(rèn)為人類通過視覺被動獲取周圍世界的全部圖像信息而建立個(gè)人的視覺資料庫，近10年來的研究表明捕獲“全部圖像信息”只是個(gè)傳說，其中由心理學(xué)家Daniel T. Levin 和Daniel J. Simons建立的實(shí)驗(yàn)“真實(shí)世界”客觀說明一個(gè)事實(shí)：大腦利用眼球1/10秒的速度獲取重要信息，而這些信息將服務(wù)于正在進(jìn)行的核心任務(wù)。舉個(gè)例子，你的大腦向眼球發(fā)出指令閱讀這段文字，而讓你忽略了文章右側(cè)導(dǎo)航的其他信息。

左圖為相機(jī)拍攝效果，右圖為人類視覺關(guān)注效果

　　正因?yàn)橛腥绱颂匦裕芯俊耙曈X注意力”變得尤為重要。如何讓用戶更容易發(fā)現(xiàn)我們的產(chǎn)品？如何讓商家更有效的廣告？如何讓我們的網(wǎng)頁和軟件更容易觸動用戶，更有萌點(diǎn)？… 在深入問題之前先簡單了解三個(gè)概念。

　　視覺信息處理流程

　　人腦皮質(zhì)有140億-160億個(gè)神經(jīng)元，其中常用的不到1/10，而五感瓜分到的神經(jīng)元?jiǎng)t更少，所以在睜開眼睛，有大量視覺信息輸入的時(shí)候做有機(jī)篩選變得非常有必要，這也是漫長進(jìn)化的優(yōu)化結(jié)果。某些醫(yī)學(xué)著作提到，視覺信息處理需經(jīng)24個(gè)以上流程，Colin Ware又將其歸納為三個(gè)階段，大致是： 一、基本信息提取，并行處理多個(gè)特征； 二、根據(jù)目的需要，篩選關(guān)注內(nèi)容； 三、保存關(guān)鍵目標(biāo)，聯(lián)想相關(guān)描述。（詳細(xì)見《Visual Thinking For Design》）

　　被動關(guān)注和主動關(guān)注

　　“被動關(guān)注”又稱“刺激引發(fā)”，按照Colin Ware歸納的三階模型可以理解為：最基本的視覺元素，顏色、位置、順序、輪廓等交織形成 -> 過濾多余信息，有序構(gòu)建復(fù)雜圖像、塑造三維模型等 -> 確認(rèn)信息對象，并從“經(jīng)驗(yàn)”獲取更多其他信息來描述對象?？蓞⒖际疽鈭D：

　　例如網(wǎng)頁右下角的彈出廣告，我們眼睛先是看到右下角一個(gè)框，很多顏色在跳動，然后看清楚是一個(gè)人在跳舞，最后才是確認(rèn)出原來是**公司的廣告。視覺信息是一種生物電流脈沖信號，眼球神經(jīng)被動感知事件傳送到大腦，大腦主動確認(rèn)事件后回饋，形成一個(gè)循環(huán)過程。但是“關(guān)注”事件并不一定由眼球發(fā)起，那種由大腦發(fā)起的“主動關(guān)注”也稱“概念引發(fā)”。比如打開下載網(wǎng)頁，我們?nèi)ふ摇跋螺d按鈕”，就是“主動關(guān)注”的典型例子。

　　此類概念還有很多，有興趣研究的朋友可以找?guī)妆踞t(yī)學(xué)著作或視覺理論自己研讀，我這里也不班門弄斧了。下面回歸正題，如何讓設(shè)計(jì)更容易吸引人？或者說影響視覺注意力促成視覺干擾的因素有哪些？

　　我們來看一下剛剛總結(jié)的三個(gè)階段：“最基本的視覺元素、顏色、位置、順序、輪廓等交織形成 -> 過濾多余信息，有序構(gòu)建復(fù)雜圖像、塑造三維模型等 -> 確認(rèn)信息對象，并從‘經(jīng)驗(yàn)’獲取更多其他信息來描述對象”（主動關(guān)注則反行之）。可以發(fā)現(xiàn)一個(gè)問題，當(dāng)?shù)谝浑A段獲取信息越少時(shí)，第二階段的過濾和構(gòu)建事件則越快，到達(dá)第三階段形成“概念”的速度也更快，假設(shè)以1/10秒的速度獲取一次信息，則在一秒鐘時(shí)間里可重復(fù)10次，這樣意味著可以對獲取目標(biāo)有更深刻的印象。我舉兩個(gè)例子。MUJI的設(shè)計(jì)崇尚簡約實(shí)用、質(zhì)樸又充滿創(chuàng)意，統(tǒng)一的視覺標(biāo)準(zhǔn)和無裝飾反而讓用戶更容易記住這個(gè)品牌。公車站燈箱廣告也是如此，從公車進(jìn)站到離開往往不過幾十秒，在車上的我根本沒有時(shí)間看完所有信息，這時(shí)簡潔的設(shè)計(jì)更具優(yōu)勢。

MUJI設(shè)計(jì)（圖片來自MUJI網(wǎng)站）

 　　那么，如果第一階段必須有比較多的信息怎么辦？目前我們的設(shè)計(jì)確實(shí)遇到這樣的問題，有大量的信息需要集中在一小張圖片上，這時(shí)無序堆砌信息是致命的。我們來看一下這種圖片：

APPLE設(shè)計(jì)（圖片來自apple網(wǎng)站）

　　同樣是非常多的信息，但是沒有雜亂，可以快速找到我所關(guān)注的內(nèi)容，非關(guān)鍵元素并沒有過分分散我的注意力。怎么做到的？請重新閱讀那個(gè)梯形圖。

　　是的，大腦從一開始就會對基礎(chǔ)元素進(jìn)行挑選，所以優(yōu)化設(shè)計(jì)無非有兩種方式：一、減少基礎(chǔ)元素信息；二、幫“用戶”大腦先整理一次基礎(chǔ)元素信息。當(dāng)信息量過多的時(shí)候，“被動關(guān)注”的用戶往往會有“逃跑”心理（實(shí)在看不完-_-），這時(shí)候被“設(shè)計(jì)”過的基礎(chǔ)信息會吸引用戶繼續(xù)關(guān)注或引導(dǎo)用戶重點(diǎn)關(guān)注特定信息，以期達(dá)到商家推廣或者我們希望用戶進(jìn)一步操作的目的。再說得淺顯一點(diǎn)，出現(xiàn)大量信息的時(shí)候，可以通過色彩、構(gòu)圖、光線明暗、閃動、符號導(dǎo)向、增強(qiáng)大小對比等方式強(qiáng)調(diào)重點(diǎn)信息（詳細(xì)做法可以參考一下CDC其他同事的文章）。也許你還會問：“主動關(guān)注”的用戶是否就不存在注意力分散問題？？非也！回想一下大學(xué)上課的場景，我們在“主動關(guān)注”老師分享的知識時(shí)，心里是不是還常惦記著隔壁班的那個(gè)她（他）… 實(shí)際情況就是“主動關(guān)注”的用戶比“被動關(guān)注”的用戶更難伺候。具體分析得等以后有時(shí)間再續(xù)寫了。

　　最后感謝Colin Ware，他的《Visual Thinking For Design》觸發(fā)了我寫本文的動機(jī)。也感謝大家耐著性子堅(jiān)持看完這篇文章，希望在視覺理論基礎(chǔ)上對大家有所幫助。

　　原文：http://cdc.tencent.com/?p=2159