你覺得你看到的，就是大腦看到的嗎？一般我們認為是這樣的。然而當眼睛把看到的信息傳輸給大腦，大腦會對信息進行解析，解析的結果并非和眼睛見到的完全一致。人的視覺是二維而非三維，在視網(wǎng)膜上，三維物體呈現(xiàn)出的影像也是二維的。這些影像被傳送到大腦并被解析匹配我們日常的經(jīng)驗，才會重新轉化為三維物體。

因為有這樣的解析過程，我們眼睛看到的，大腦可能會判斷“錯誤”。

案例：會動的靜態(tài)圖，請全神貫注的盯著下面這張圖，是不是感覺有很多小黑點在跳動。難道這是一張動圖？其實不是，這就是一張靜態(tài)圖。我們的大腦被騙啦！

配圖：會動的靜態(tài)圖

對于大腦會“錯誤”解析這一特點，在這設計中合理利用可以創(chuàng)造出有意思的設計，也可以指導糾正錯誤的設計。

1、獨特的錯覺：卡尼薩三角

展開全文

配圖：卡尼薩三角卡尼薩矩形

左圖你看見了什么？一個黑邊三角上面疊了個白色倒三角？其實圖上什么三角形都沒有，只有一些零碎的線條和3個缺口的圓。

右圖呢？一個白色的矩形？其實只有4個缺口的圓。

這一獨特的錯覺由Gaetano Kanizsa發(fā)現(xiàn)，后來就將這種錯覺命名為“卡尼薩三角”

設計指導：logo的負形設計

對于這種獨特的錯覺，我們可以巧妙的運用到logo設計中去，設計出獨特的負形logo。

配圖：有趣的負形logo

2、視錯覺：繆勒—萊爾錯覺

配圖：繆勒-萊爾錯覺圖

??上圖的兩條線一樣長嗎？是不是感覺左邊的豎線比右邊的長，其實兩條線一樣長。該圖就是“繆勒—萊爾錯覺”，是最早的錯覺圖案之一。

設計指導：圖標繪制使用keyline保持“視覺”一致

大腦會把一樣長的線條，“錯誤”解析成不一樣長；也會把一樣大小的形狀，“錯誤”解析成不一樣大。比如我們在畫圖標的時候，同樣大小的方形圖標和圓形圖標，視覺傳輸?shù)酱竽X，卻覺得方形比圓形大。

配圖：物理大小一致與視覺大小一致

所以在圖標繪制的過程中，我們需要keyline輔助進行圖標設計。讓大腦將不一樣大小的形狀，解析成一樣大，從而保持“視覺”一致。

配圖：不同形狀下的keyline輔助尺寸參考

人有兩種視覺，中央視覺和周邊視覺。

中央視覺：用來直視事物觀察細節(jié)；

周邊視覺：展現(xiàn)視野中的其他區(qū)域，人可以用余光觀察事物。

配圖：處理成黑白的中央視覺和周邊視覺照片，你分別看到了什么場景？

上面兩張圖模擬了中央視覺和周邊視覺，我們可以發(fā)現(xiàn)中間被遮住的照片依舊容易識別，而周圍被遮住的照片，卻不是很能分清楚是廚房還是客廳。由此可見，周邊視覺的重要性，常被我們低估，人對整體場景的認知似乎都來自周邊視覺。

利用周邊視覺合理設計頁面內容

用戶在看頁面時會用到周邊視覺，雖然我們通常認為屏幕中央是重要的中央視覺區(qū)，但是用戶會通過掃視周邊視覺區(qū)域來判斷整個頁面的內容。所以我們在設計界面的過程中，需要合理設計周邊元素以提升用戶體驗。

設計指導：避免讓人分心的小廣告

屏幕上的小閃動總是讓人分心；對于一些需要沉浸閱讀類的頁面，如果屏幕邊緣有無關動畫廣告不停閃爍，會很干擾用戶，影響體驗。

所以對于一些重要內容的頁，我們應當避免放置讓人分心的小廣告。

配圖：負面案例-網(wǎng)頁上讓人分心的小廣告

設計指導：別忽略角落的重要運營位置

如果合理地運用周邊位置，設計精美的視覺樣式及動效，會有很棒的運營效果，甚至比中央頁面頭部的banner更有效。很多電商類產品運用這個原理在周邊投放廣告活動。

配圖：正面案例-京東和好省的懸浮小廣告

發(fā)現(xiàn)規(guī)律有助于快速處理時刻接收的感官信息。即使本來沒有規(guī)律，人眼和大腦也會嘗試創(chuàng)造規(guī)律。David Hubel和Torsten Wiesel(1959)研究表明，大腦中的不同細胞會對不同形狀產生反應，分別對橫線、豎線、邊線和特定角度的線作出反應。

例如下圖，你可能看到的是4組圖案，每組2個點，而不是8個孤立的點。此時，你把點間距的長短看成了一種規(guī)律。

配圖：人眼和大腦將看到的點，分成了四組圖案

利用分組和間隔創(chuàng)造規(guī)律

既然人會不由自主地尋找規(guī)律，所以我們在設計的過程中應盡量多使用規(guī)律來滿足大腦的傾向?？梢岳梅纸M和間隔來創(chuàng)造規(guī)律。

設計指導：利用規(guī)律的圖形打造超級視覺語言

利用重復、具有規(guī)律的圖形，可以進行系列banner設計、海報設計以及品牌的打造，構建超級視覺語言。

配圖：利用重復、有規(guī)律的圖形設計系列banner

配圖：提取品牌logo元素，利用重復、有規(guī)律的圖形構建超級視覺語言

設計指導：利用規(guī)律的布局，打造界面的節(jié)奏，讓頁面更精致

頁面設計需要有節(jié)奏感，小到文字排布，大到頁面布局。利用規(guī)律，比如同樣的元素、間距、留白、形態(tài)等設計手法，形成規(guī)律，可以使規(guī)整頁面，使頁面更精致。

案例一：新聞的資訊詳情頁面，對于段落間距及圖片與段落的間距，可以使用了基礎間隔整數(shù)倍的留白。使所有留白都有規(guī)律可循，減少間隔對用戶干擾，提升文章的易讀性。

配圖：資訊頁面的韻律留白，讓頁面具有呼吸感

案例二：柵格系統(tǒng)的應用，可以在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規(guī)律。

配圖：應用柵格體系使頁面信息對齊規(guī)整

用戶閱讀瀏覽網(wǎng)頁具有一定的習慣規(guī)律，主要體現(xiàn)在以下兩點：

1、先入為主的心智模型

用戶瀏覽網(wǎng)頁的過程中第一眼落在哪里，取決于用戶在做什么、希望看到什么。

例如：用戶在瀏覽網(wǎng)頁的時候不從頂部開始閱讀，因為用戶對于想看的內容和位置有先入為主的心智模型，大量的網(wǎng)頁設計布局讓人們早已習慣網(wǎng)頁頂部都是些“非重要”內容，如商標、留白、導航欄等，所以用戶會根據(jù)習慣去看自己想看的內容。例如下圖，優(yōu)設、站酷、UI中國頂部的結構布局就是一樣的，符合用戶心智模型的布局，更有利于用戶找到自己想看的內容。

配圖：優(yōu)設、站酷、UI中國相同的頂部布局

設計指導：不要隨意更改常用功能的位置

用戶對于每個網(wǎng)站具有特定的心智模型，會預先設想各內容在電腦屏幕和使用的特定應用、網(wǎng)站上應該出現(xiàn)的位置，并且會帶著這樣的心智模型去瀏覽網(wǎng)頁。

例如購物網(wǎng)站的常客，如果想要搜索一款商品，打開頁面的時候會直接看向搜索欄的位置。如果我們打破常規(guī)，更改了搜索欄的位置，用戶可能會無從下手。

所以對于一些常用場景、成熟布局的網(wǎng)站，我們在迭代優(yōu)化的過程中，需要慎重考慮常用功能位置的變化，如無必要，不要打破用戶的心智模型。

2、和語言文字習慣一致的閱讀順序模型

用戶在瀏覽網(wǎng)頁的過程中，會有著和語言文字習慣一致的閱讀習慣。大部分人的閱讀習慣是從左向右、自上而下。我們可以將閱讀分為沉浸式閱讀(immersive reading)與掃視(scanning)，前者的目的在于了解，后者在于定位。

配圖：沉浸式閱讀模式與掃視閱讀模式的視覺動線

瀏覽網(wǎng)頁時，用戶通常會沉浸在目標任務中，所以掃視是最常運用的閱讀模式，只有在確信必要時用戶才會細心閱讀詳細內容。

設計指導：針對用戶的閱讀模型來設計布局

對于頁面中內容元素的擺放，應當依照任務邏輯與用戶的瀏覽習慣來設計恰當?shù)囊曈X流，避免用戶視線流轉。好的視覺流應該清楚、合理、順暢、自然。

配圖：凌亂的視覺流和順暢的視覺流場景

在生活中，如果兩個人同時行走在空曠的馬路上并且靠得很近，人們就會覺得他們之間是認識的、有關聯(lián)的。同樣的，如果兩個東西距離很近，那么人們就會認為他們之間有聯(lián)系。

配圖：你覺得上圖的兩個人是否存在關系？

物理位置的接近就意味著存在關聯(lián)。在設計中亦是有著這樣的心理學暗示，這樣的暗示指導了Robin親密性原則。

Robin親密性原則是指將相關的項組織在一起，移動這些項，使它們的物理位置相互靠近，這樣一來相關的項將被看作凝聚為一體的一個組，而不再是一堆彼此無關的片段。

配圖：顏色相同的表情可以排布組織在一起

設計指導：在設計中運用親密性原則

1、將你希望用戶認為相關的元素相鄰放置

2、優(yōu)先使用間距劃分內容，不能滿足再使用線或框

3、無關內容間距要大，相關內容間距要小。不同屬一組的元素之間不要建立關系！如果元素彼此無關，要把他們分開。

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

據(jù)統(tǒng)計，世界上9%的男性和0.5%的女性是色盲，也就是大約每20人中就有1人有某種顏色視力缺陷。這些人的世界看起來不同。其中最普遍的是紅綠色盲，患者無法分辨紅、黃和綠色。藍黃色盲和全色盲的情況比較罕見。許多圖片、文檔和網(wǎng)頁對色盲人來說很難閱讀理解，是因為設計它們的人沒有想到這樣的問題。

配圖：不同色盲人群看到的色彩

設計指導：使用顏色代表特定意義時，需要有另外一種區(qū)分方案

其實除了色盲，人隨著年齡的增長，對色彩的識別能力也會對應的減弱。所以根據(jù)無障礙設計的原則，我們在設計的過程中，不應該僅僅依靠顏色去傳達重要信息。我們還可以這樣做：

使用下劃線表示鏈接，或使用粗體突出顯示文本

圖標和文本結合使用傳達成功或失敗的信息

使用線條粗細、紋理或圖案區(qū)分圖標樣式

使用不同的圖案傳達信息等等

配圖：地圖標識的設計，使用線條粗細、紋理區(qū)分樣式

（案例來源：為視色障礙者設計地圖Bernhard Jenny和Nathaniel Vaughn Kelso制圖師協(xié)會SoC公報，41頁）

配圖：輸入框狀態(tài)設計，使用圖標和文本結合傳達成功或失敗的信息

設計指導：選擇所有色盲都能識別的配色方案

除了使用前文所述的輔助區(qū)分方案，我們還可以使用所有色盲都能識別的配色方案。例如，紅綠色盲患者對紅色和綠色的分辨能力很差，但是對黃、藍的辨別沒有問題。因此，我們在設計的過程中，可以盡量避免紅綠對比，更多的使用黃藍對比。在ggplot2中常用的viridis色板就是一個很好的色盲友好色板。詳細案例，可查看viridis彩色地圖簡介

https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html

我們可以使用以下方式檢查色盲所見效果：

色盲網(wǎng)頁過濾工具網(wǎng)站：

一款適用于Windows、Mac和Linux的免費色盲模擬器

色盲模擬窗口軟件：

使用Adobe系列軟件中的針對色盲的校樣顏色選項。在【視圖】的【校樣設置】菜單中選擇查看即可。

2、色彩含義因文化而異

在不同的國家，不同色彩所代表的含義不一樣。所以當你為不同國家的人做設計的時候，必須考慮顏色在其文化中的含義，以免表達錯誤造成誤解。例如：

在國外，紅色代表赤字，也可以代表危險或停止；綠色代表金錢，也可以代表通行（因為美元紙幣是綠色的）。

而在中國，紅色代表金錢收入，綠色代表赤字（因為人民幣是紅色的）。

所以我們在設計股票界面的時候，對于營虧的表達，就需要針對不同的國家使用不同的顏色。

配圖：中外股票頁面設計顏色表達出來的不同含義

設計指導：多考慮色彩可能具有的含義

在為不同國家或人群設計時候，請找出你的設計可能涉及的幾大文化或國家，并參考david mccandless色輪，查看相關色彩的文化含義，以避免出現(xiàn)不當?shù)睦斫狻＞W(wǎng)站地址：

配圖：david mccandless色輪

總結

以上我們學習了六個設計師要懂的視覺心理學，一起再來回顧強化下：

人眼看到的并非大腦看到的

人對事物的整體認知主要依靠周邊視覺

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

人根據(jù)經(jīng)驗和預期瀏覽屏幕

人們認為相鄰物體必然關聯(lián)

不同人群對色彩的感知不一樣

以上這些知識點可能只是“很小”一個概述，我也是按照自己的理解將閱讀到的其他知識進行了串聯(lián)解讀。但其實每個點拿出來都值得深入學習，不知道你對哪個知識點最感興趣。歡迎留言，一起交流～