眼見非腦見

我們一般認為，當我們觀察周圍的一切時，眼睛會將看到的信息傳輸給大腦，大腦再對信息進行處理，讓我們感受到真實的世界。但其實不然，腦見并非眼見，因為大腦總會解析眼睛看到的所有信息。

你第一眼可能會看到一個矩形，其實圖上什么矩形都沒有，有的只是些4個有缺口的圓。

大腦會偷懶：為了更快地解析周圍的世界，大腦會投機取巧地偷懶。大腦每秒要接收約4000萬次的感官信息輸入，并試圖完全解析出它們的意義，所以它會根據以往的經驗，猜測我們看見了什么。經驗法雖說十拿九穩(wěn)，但有時也會出錯。

在黑暗處，余光看得更清楚：人眼有700萬對亮光敏感的視錐細胞和1.25億對弱光敏感的視桿細胞。視錐細胞集中于視網膜中央凹處，在視覺的中心區(qū)域，而視桿細胞則主要分布在外圍。所以在弱光環(huán)境下，使用余光觀察會比直視看得更清楚。

視錯覺之錯：視錯覺就是大腦錯誤解析視覺信息的現象。

人的視覺是二維而非三維：光線通過角膜與晶狀體進入眼球，晶狀體將影像聚焦在視網膜表面。在視網膜上，即使是三維的物體，呈現出的影像也是二維的。這些影像被傳送到大腦視覺皮質并被識別，例如大腦會想：“哦，我認出那是一扇門”，從而重新將二維影像轉化為三維物體。

視覺皮質匯總所有信息：John Medina（2009）認為，視覺信息以電信號形式傳輸到視網膜后，會匯總為多達12條不同的信息。其中，有幾條陰影信息，還有幾條運動信息，諸如此類。大腦視覺皮質接收這些信息后，由不同區(qū)域分別響應和處理對應的信息，比如，一處專門處理40度角的斜線，一處專門處理色彩，一處專門處理移動狀態(tài)，另一處專門處理邊線，等等。最終，所有信息只被整合為兩條信息：一條是移動狀態(tài)（物體是否正在移動），另一條是位置（物體和觀察者的位置關系如何）。

小貼士

別人在你的網站上看見的內容未必符合你的設想，他們的個人背景、文化水平、對眼前事物的熟悉度以及期待看到什么，都會影響他們的觀察結果。

你可以設計物體的展示方式，引導別人注意特定的內容。

整體認知主要依靠周邊視覺而非中央視覺

人有兩種視覺，中央視覺和周邊視覺。中央視覺用來直視事物觀察細節(jié)，而周邊視覺則展現視野中的其他區(qū)域，也就是人眼能看到的周邊區(qū)域。人可以用眼角的余光觀察事物，這當然很有用，不過，最新研究表明，多數人都低估了它對于我們理解事物的重要性。人對場景的認知似乎都來自周邊視覺。

為什么屏幕上的小閃動容易讓人分心？周邊視覺總是讓人不禁注意到周圍的動靜。例如，你正在電腦上閱讀文章，屏幕邊緣附近有個小動畫之類的東西閃個不停，那么你肯定忍不住要去看它。而你希望集中精力閱讀文章，這樣的干擾實在很煩人。這正是周邊視覺所致！網站側邊的廣告總是做成閃爍效果就是因為這個道理。這樣很不招人待見，但確實會吸引我們的注意力。

周邊視覺讓我們的祖先得以在草原上生存：根據進化論可以推測，早期人類必須能夠一邊打磨燧石或仰望天空，一邊用周邊視覺注意是否有獅子逼近，才能幸存并把基因傳給后代，而周邊視覺較弱的人則難以生存，相應的基因也被自然淘汰。最新研究證實了這一推測。2009年，Dimitri Bayle發(fā)表了他的研究結果。他讓被試者觀看恐怖照片，有時照片放在被試者的中央視覺區(qū)域，有時則放在周邊視覺區(qū)域。然后他測定了大腦杏仁核（能對恐怖照片作出反應、產生恐懼情緒的區(qū)域）的反應速度。如果照片放在中央視覺區(qū)域，杏仁核的反應時間為140~190毫秒；如果放在周邊視覺區(qū)域，反應時間僅為80毫秒。

小貼士

人們看電腦屏幕時會用到周邊視覺，而且經常只掃一眼周邊視覺區(qū)域便以此判斷整個頁面的內容。

雖然屏幕中央是重要的中央視覺區(qū)，但別忽視周邊視覺區(qū)域。一定要確保周邊內容清晰地表現了網頁的用途。

如果你想讓用戶集中注意力觀察屏幕某處，就別在周邊視覺區(qū)域內放置動畫和閃爍元素。

人在識別物體時會尋找規(guī)律

發(fā)現規(guī)律有助于快速處理時刻接收的感官信息。即使本無規(guī)律，人眼和大腦也會嘗試創(chuàng)造規(guī)律。

不同細胞會對不同形狀產生反應：David Hubel和Torsten Wiesel（1959）研究表明，大腦視覺皮質中的細胞分工不同，分別只對橫線、豎線、邊線和特定角度的線作出反應。

關于物體識別的幾何離子理論：多年來，關于人如何觀察和識別物體產生過很多理論。早期理論認為，大腦中其實有個記憶庫，儲存了上百萬種物體。當你看見物體時，便與記憶庫中的物體進行比對，直到找到匹配的為止。不過現在有研究表明，人觀察物體時，會識別一些基本形狀，并以此識別物體。這樣的基本形狀稱為幾何離子（geon），該理論由Irving Biederman于1985年提出。據稱，人類能識別24種基本形體，它們構成了我們能看見和辨認的所有物體。

Biederman的幾何離子理論示例

在想象時，視覺皮質更活躍：Solso于2005年發(fā)表的論文表明，人想象某事物時，大腦視覺皮質比實際觀察到該事物時更活躍。兩種情況下，視覺皮質的活躍部位完全相同，但想象時的活動更加劇烈，這可能是因為刺激物實際不存在，所以視覺皮質的工作量會更大。

小貼士

既然人會不由自主地尋找規(guī)律，那就盡量多使用規(guī)律，利用分組和間隔創(chuàng)造規(guī)律。

要讓某個物體（例如圖標）易于識別，就用簡單的幾何圖形來畫它。這會讓構成物體的幾何離子更明顯，從而使人更快、更輕松地識別該物體。

多用二維元素，少用三維元素。大腦以二維形式接收人眼觀察到的信息，因此屏幕上的三維圖形可能會減慢識別和理解的速度。

大腦有專門識別人臉的區(qū)域

假設你正穿行于某大都市的某條大街，人潮擁擠，突然迎面出現家人的面孔。即使你們是不期而遇，即使眼前還有幾十甚至幾百個路人，你也能一眼認出對方是你的家人，同時油然而生愛意、恨意、懼意之類的相應情緒。

雖然大腦視覺皮質范圍很大，而且占用了大量腦力資源，但在視覺皮質之外還有一處特殊區(qū)域，專門用來識別人臉，稱為梭形臉部區(qū)（FFA，fusiform face area）。這一區(qū)域由Nancy Kanwisher（1997）發(fā)現，可以讓人臉識別繞過通常的視覺解析渠道，從而得到快速識別。而且，梭形臉部區(qū)距離掌控情緒的杏仁核也很近。

自閉癥患者不用梭形臉部區(qū)識別人臉：Karen Pierce（2001）進行的研究表明，自閉癥患者觀察和識別人臉時，不會使用梭形臉部區(qū)，而只能使用通常用于識別物體而非人臉的普通解析通路和視覺皮質。

我們會不由自主地看向別人的眼睛所看的方向：眼球追蹤調研表明，如果在網頁上有一張圖片，圖上的眼睛不看我們，而是看向網頁上的一個產品，我們也會不由自主地看向那個產品。但是請注意，人們看著它并不代表關注它。設計網頁時，你要確定是想和用戶建立情感溝通還是想引導用戶的注意力。

喜歡看臉是人的天性：Catherine Mondloch（1999）等人所做的研究表明，出生不到一小時的新生兒喜歡看有明顯面部特征的東西。

看著眼睛，就能識別出真人假人：Christine Looser和T. Wheatley（2010）拍攝了真人的臉部照片，并一步一步把人臉轉變成死氣沉沉的臉部模型。她們分步展示這些照片，要求被試者判斷何時由真臉變成了假臉。研究發(fā)現，被試者表示大約在75%處的臉已經不是真人了，而且他們主要依據圖上的眼睛識別真假。

Looser和Wheatley的人臉分步變化圖

小貼士

人在觀看網頁時，首先會對人臉作出識別和反應（至少沒有自閉癥的人都是如此）。

在網頁上直視用戶的臉最具感染力，也許因為眼睛是面部最重要的部分。

如果網頁上的人眼看著旁邊的位置或產品，那么人們往往也會看向同一處，但未必關注，只是看而已。

略微側向俯視是想象物體的標準視角

這些畫的視角耐人尋味，個別畫的是正面，但多數是略俯視的角度，并稍稍偏向側面。這個角度稱為“標準視角”。幾乎不會有人選擇正上方俯視的視角。

人們從標準視角識別物體的速度總是最快的，即便平時未必總用標準視角看它們。

小貼士

標準視角的畫像和物體更容易識別和記憶。

如果你的網頁或程序里包含一些圖標，那么不妨把它們畫成標準視角的。

人根據經驗和預期瀏覽屏幕

看屏幕時人們第一眼會落在哪里？第二眼呢？答案取決于他們在做什么、希望看到什么。他們如果使用從左向右書寫的語言文字，那么看屏幕時也會從左向右看，反之亦然。然而，他們并不是從頂部開始閱讀的。因為人們早已習慣認為網頁頂部都是無關內容，如商標、留白和導航欄，所以他們往往先看屏幕的中心位置，而非邊緣。

我們忽略屏幕邊緣直接看正文

掃一眼屏幕后，人們的閱讀順序就和語言文字習慣一致了（無非是自左向右、自右向左或自上而下）。如果旁邊出現一張大圖（特別是有人臉的照片）或動的東西（動畫廣告或視頻），這類內容就會引起他們的注意，從而打破原先的閱讀傾向。

人們對想看的內容及其位置有先入為主的心智模型：人們具有特定的心智模型，預先設想了各內容在電腦屏幕和使用的特定應用、網站上應該出現的位置，并且往往帶著這樣的心智模型看屏幕。比如，亞馬遜購物網站的?？腿绻蛩闶褂盟阉鞴δ埽敲创蜷_頁面時就可能直接看向搜索欄的位置。

發(fā)生錯誤或問題時，人們會聚焦視野：如果完成任務的過程中發(fā)生了錯誤或意料之外的問題，人們會停止瀏覽屏幕上的其他內容，集中精力到問題所在的區(qū)域。

小貼士

最重要的信息（或希望用戶關注的內容）要放在屏幕的上面三分之一部分，或放在屏幕中間。

既然人們不看屏幕邊緣，就不要把重要信息放在那兒。

按照正常閱讀順序合理設計界面，避免讓人來回跳著閱讀內容。

物體會提示人應該如何使用

可能你經歷過這樣的事：你以為自己應該拉門把手，其實要推才能開門。生活中，物體會提示其使用方法。例如，球形門把手的尺寸和形狀暗示用戶要握住并轉動它；咖啡杯把手告訴用戶要彎曲手指穿過把手來舉起杯子；剪刀暗示用戶用手指穿過環(huán)形手柄，通過手指的張合來控制剪刀。如果某個物體給用戶錯誤的暗示，比如開始提到的門把手，就會讓用戶惱火。物體給用戶的提示稱為“功能可見性”（affordance）。

這樣的門把手讓人想抓住并向下旋轉

James Gibson于1979年創(chuàng)造出了功能可見性的概念，把它定義為環(huán)境中各種行為的可能性。1988年，Don Norman在《設計心理學》（The Design of Everyday Things）一書中限定了該概念的范圍，提出了“感知功能可見性”（perceived affordance）：無論是在生活中還是在電腦屏幕上，如果想讓用戶使用一個物體，就要保證能夠讓他們輕易地察覺并理解它是什么，明白應該怎么用。

人在試圖完成開門或者網上購書之類的任務時，總會自動尋找周圍可以使用的物體和工具，而自己往往不會意識到這一點。如果你負責為該任務設計周邊環(huán)境，一定要確保環(huán)境里的物體一目了然并具有清晰的功能可見性。

屏幕上的感知功能可見性：設計網頁或程序時，要多考慮屏幕上物體的功能可見性。例如，有沒有想過怎樣的按鈕讓人想要點擊它？屏幕上帶陰影邊沿的按鈕讓人知道，它可以像真實的按鈕一樣按下去。

超鏈接的功能可見性暗示正在減少：有一類功能可見性暗示眾所周知：藍色帶下劃線的文字是超鏈接，點擊就跳轉到新頁面。不過現在很多超鏈接不再設計得這么明顯，只有鼠標懸停時才會出現點擊的提示。

小貼士

設計時要考慮功能可見性的提示。給用戶操作提示后，他們就更容易正確使用物體。

用陰影來表現對象已選定或對象可用。

避免給出錯誤的功能可見性提示。

設計觸摸設備界面時，請慎用懸停可見的提示。

人可能會對變化視而不見

人經常對重大變化視而不見：在2010年出版的《看不見的大猩猩》（The Invisible Gorilla）一書中，作者Christopher Chabris和Daniel Simons描述了使用眼動儀做的其他實驗。眼動跟蹤技術可以跟蹤記錄人眼觀察的方向，確切地說，是中心凹注視方向，也就是中央視覺而非周邊視覺的區(qū)域。針對大猩猩視頻的眼動研究顯示，所有看視頻的人都曾注視大猩猩處，也就是說都看到了大猩猩，但只有一半人意識到他們看到了大猩猩。Chabris和Simons對該現象進行了多次研究，并得到結論：如果人把注意力集中在一件事物上，沒有預期可能發(fā)生其他改變，就很容易忽略實際發(fā)生的變化。

眼動跟蹤數據有一定誤導性：眼動跟蹤技術可以讓我們跟蹤記錄人眼所見、視線順序和注視時間，常用來研究用戶瀏覽網頁時視線的移動順序，了解他們先看哪里，后看哪里。它的一個優(yōu)點就是，不必依賴用戶口述他們在看哪里，而是直接采集數據。眼動跟蹤數據也會產生誤導作用，原因：眼動儀顯示用戶“注視”了哪些東西，但并不意味著他們“注意”到了它們；周邊視覺和中央視覺同樣重要，而眼動儀僅偵測中央視覺；早期的Alfred Yarbus（1967）眼動跟蹤研究發(fā)現，在看事物時，人眼注視的內容取決于當時聽到的問題。因此，實驗前和實驗過程中給被試者的指示很容易使研究數據出現意外的偏差。

小貼士

不要認為物體出現在屏幕上就一定會被用戶看見，特別是刷新頁面出現改變時，用戶很可能完全意識不到頁面前后的區(qū)別。

如果你要保證用戶注意到界面上的某處改變，應該增加視覺提示（如使之閃爍）或聽覺提示（如“嗶”的一聲）。

眼動跟蹤數據分析要謹慎，別過于重視它，也別把它作為設計決策的主要依據。

人們認為相鄰物體必然相關

如果兩個東西距離很近（比如一張照片緊鄰一段文字），那么人們就會認為它們之間有聯系。其中，左右相鄰的東西之間的關聯最為密切。

你可能覺得照片對應右側文字，因為它們非?？拷椅覀儚淖笙蛴议喿x，但其實照片對應的是下方文字，這讓多數讀者感到費解。

小貼士

你如果希望讀者認為某些圖片、照片、標題或文字是相關的，就將這些內容相鄰放置。

如果想使用線或框分隔內容，先嘗試能否只調整間距就達到效果。有時，調整間距足以劃分內容，還能使頁面具有簡潔的視覺效果。

無關內容間距要大，相關內容間距要小。這聽起來是常識，但很多網頁布局都忽視了這一點。

紅藍搭配難以閱讀

在呈現或印刷線條和文字時，不同的顏色會產生不同的立體效果。有的顏色似乎向外凸起，有的則向內凹陷。這種效果稱為“色彩實體視覺”（chromostereopsis）。紅藍搭配的效果最為強烈，但其他顏色也有這種現象，比如紅綠搭配。閱讀這些顏色組合非常吃力。

色彩實體視覺可能導致難以閱讀

小貼士

在同一頁面內，避免使用紅藍或紅綠搭配。

紅色背景上不要使用藍色或綠色文字，藍色背景上不要使用紅色或綠色文字。

9%的男性和0.5%的女性是色盲

色盲一詞其實并不準確，因為多數色盲不是完全無法分辨顏色，只是在辨別某幾種顏色方面存在缺陷。色盲多數是遺傳的，也有些是疾病或受傷所致。與識別顏色有關的基因大多在X染色體上，男性僅有一條X染色體，而女性有兩條，因此色盲在男性中的發(fā)病率更高。

在眾多不同類型的色盲中，最普遍的是紅綠色盲，患者無法分辨紅、黃和綠色。藍黃色盲（無法分辨藍色和黃色）和全色盲（所有顏色看上去都是灰色）的情況很罕見。

色盲通常能更好地識破迷彩偽裝：有人說這是因為他們不受顏色干擾，也有人說是因為他們并非用顏色來識別，而是尋找圖案、材質之類的線索。反正，某些色盲者能比色覺正常的人更好地識破迷彩偽裝。

小貼士

如果使用顏色來代表特定含義（如綠色代表需要緊急處理的東西），應該同時使用另一種區(qū)分方案（需要緊急處理的東西不但應該設為綠色，還要在周圍加上方框）。

設計配色方案時，請考慮使用所有人都能正常識別的顏色，如不同色度的褐色和黃色。避免使用紅色、藍色、綠色。

色彩含義因文化而異

當你為世界各地的人做設計時，還必須考慮顏色在其他文化中的含義。只有少數顏色是世界通用的（如金色在多數文化中都代表成功和優(yōu)質），而大多數顏色在不同文化中有不同的含義。在不同國家和地區(qū)，代表幸福的顏色也不同，有可能是白色、綠色、黃色或者紅色。

色彩與情緒的研究表明，色彩會影響情緒：餐飲酒店業(yè)在這方面頗有研究。例如，橙色使人焦慮不安，因此顧客不會呆久（這對快餐館有用）；褐色和藍色使人平靜，因此人們會長時間呆在這里（對酒吧有用）。但要想用某種色彩影響人的情緒，必須讓人所在的環(huán)境里充滿了這種顏色。對計算機用戶而言，只是看到屏幕上有某種色彩，則達不到這種效果。

小貼士

謹慎選用顏色，多考慮色彩可能具有的含義。

為多國設計時，請找出你的設計可能涉及的幾大文化或國家，以避免出現不當的理解。