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

因?yàn)橛羞@樣的解析過(guò)程，我們眼睛看到的，大腦可能會(huì)判斷“錯(cuò)誤”。

案例：會(huì)動(dòng)的靜態(tài)圖，請(qǐng)全神貫注的盯著下面這張圖，是不是感覺(jué)有很多小黑點(diǎn)在跳動(dòng)。難道這是一張動(dòng)圖？其實(shí)不是，這就是一張靜態(tài)圖。我們的大腦被騙啦！

配圖：會(huì)動(dòng)的靜態(tài)圖

對(duì)于大腦會(huì)“錯(cuò)誤”解析這一特點(diǎn)，在這設(shè)計(jì)中合理利用可以創(chuàng)造出有意思的設(shè)計(jì)，也可以指導(dǎo)糾正錯(cuò)誤的設(shè)計(jì)。

1、獨(dú)特的錯(cuò)覺(jué)：卡尼薩三角

展開(kāi)全文

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

左圖你看見(jiàn)了什么？一個(gè)黑邊三角上面疊了個(gè)白色倒三角？其實(shí)圖上什么三角形都沒(méi)有，只有一些零碎的線條和3個(gè)缺口的圓。

右圖呢？一個(gè)白色的矩形？其實(shí)只有4個(gè)缺口的圓。

這一獨(dú)特的錯(cuò)覺(jué)由Gaetano Kanizsa發(fā)現(xiàn)，后來(lái)就將這種錯(cuò)覺(jué)命名為“卡尼薩三角”

設(shè)計(jì)指導(dǎo)：logo的負(fù)形設(shè)計(jì)

對(duì)于這種獨(dú)特的錯(cuò)覺(jué)，我們可以巧妙的運(yùn)用到logo設(shè)計(jì)中去，設(shè)計(jì)出獨(dú)特的負(fù)形logo。

配圖：有趣的負(fù)形logo

2、視錯(cuò)覺(jué)：繆勒—萊爾錯(cuò)覺(jué)

配圖：繆勒-萊爾錯(cuò)覺(jué)圖

??上圖的兩條線一樣長(zhǎng)嗎？是不是感覺(jué)左邊的豎線比右邊的長(zhǎng)，其實(shí)兩條線一樣長(zhǎng)。該圖就是“繆勒—萊爾錯(cuò)覺(jué)”，是最早的錯(cuò)覺(jué)圖案之一。

設(shè)計(jì)指導(dǎo)：圖標(biāo)繪制使用keyline保持“視覺(jué)”一致

大腦會(huì)把一樣長(zhǎng)的線條，“錯(cuò)誤”解析成不一樣長(zhǎng)；也會(huì)把一樣大小的形狀，“錯(cuò)誤”解析成不一樣大。比如我們?cè)诋?huà)圖標(biāo)的時(shí)候，同樣大小的方形圖標(biāo)和圓形圖標(biāo)，視覺(jué)傳輸?shù)酱竽X，卻覺(jué)得方形比圓形大。

配圖：物理大小一致與視覺(jué)大小一致

所以在圖標(biāo)繪制的過(guò)程中，我們需要keyline輔助進(jìn)行圖標(biāo)設(shè)計(jì)。讓大腦將不一樣大小的形狀，解析成一樣大，從而保持“視覺(jué)”一致。

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

人有兩種視覺(jué)，中央視覺(jué)和周邊視覺(jué)。

中央視覺(jué)：用來(lái)直視事物觀察細(xì)節(jié)；

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

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

上面兩張圖模擬了中央視覺(jué)和周邊視覺(jué)，我們可以發(fā)現(xiàn)中間被遮住的照片依舊容易識(shí)別，而周?chē)徽谧〉恼掌?，卻不是很能分清楚是廚房還是客廳。由此可見(jiàn)，周邊視覺(jué)的重要性，常被我們低估，人對(duì)整體場(chǎng)景的認(rèn)知似乎都來(lái)自周邊視覺(jué)。

利用周邊視覺(jué)合理設(shè)計(jì)頁(yè)面內(nèi)容

用戶在看頁(yè)面時(shí)會(huì)用到周邊視覺(jué)，雖然我們通常認(rèn)為屏幕中央是重要的中央視覺(jué)區(qū)，但是用戶會(huì)通過(guò)掃視周邊視覺(jué)區(qū)域來(lái)判斷整個(gè)頁(yè)面的內(nèi)容。所以我們?cè)谠O(shè)計(jì)界面的過(guò)程中，需要合理設(shè)計(jì)周邊元素以提升用戶體驗(yàn)。

設(shè)計(jì)指導(dǎo)：避免讓人分心的小廣告

屏幕上的小閃動(dòng)總是讓人分心；對(duì)于一些需要沉浸閱讀類(lèi)的頁(yè)面，如果屏幕邊緣有無(wú)關(guān)動(dòng)畫(huà)廣告不停閃爍，會(huì)很干擾用戶，影響體驗(yàn)。

所以對(duì)于一些重要內(nèi)容的頁(yè)，我們應(yīng)當(dāng)避免放置讓人分心的小廣告。

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

設(shè)計(jì)指導(dǎo)：別忽略角落的重要運(yùn)營(yíng)位置

如果合理地運(yùn)用周邊位置，設(shè)計(jì)精美的視覺(jué)樣式及動(dòng)效，會(huì)有很棒的運(yùn)營(yíng)效果，甚至比中央頁(yè)面頭部的banner更有效。很多電商類(lèi)產(chǎn)品運(yùn)用這個(gè)原理在周邊投放廣告活動(dòng)。

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

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

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

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

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

既然人會(huì)不由自主地尋找規(guī)律，所以我們?cè)谠O(shè)計(jì)的過(guò)程中應(yīng)盡量多使用規(guī)律來(lái)滿足大腦的傾向?？梢岳梅纸M和間隔來(lái)創(chuàng)造規(guī)律。

設(shè)計(jì)指導(dǎo)：利用規(guī)律的圖形打造超級(jí)視覺(jué)語(yǔ)言

利用重復(fù)、具有規(guī)律的圖形，可以進(jìn)行系列banner設(shè)計(jì)、海報(bào)設(shè)計(jì)以及品牌的打造，構(gòu)建超級(jí)視覺(jué)語(yǔ)言。

配圖：利用重復(fù)、有規(guī)律的圖形設(shè)計(jì)系列banner

配圖：提取品牌logo元素，利用重復(fù)、有規(guī)律的圖形構(gòu)建超級(jí)視覺(jué)語(yǔ)言

設(shè)計(jì)指導(dǎo)：利用規(guī)律的布局，打造界面的節(jié)奏，讓頁(yè)面更精致

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

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

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

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

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

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

1、先入為主的心智模型

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

例如：用戶在瀏覽網(wǎng)頁(yè)的時(shí)候不從頂部開(kāi)始閱讀，因?yàn)橛脩魧?duì)于想看的內(nèi)容和位置有先入為主的心智模型，大量的網(wǎng)頁(yè)設(shè)計(jì)布局讓人們?cè)缫蚜?xí)慣網(wǎng)頁(yè)頂部都是些“非重要”內(nèi)容，如商標(biāo)、留白、導(dǎo)航欄等，所以用戶會(huì)根據(jù)習(xí)慣去看自己想看的內(nèi)容。例如下圖，優(yōu)設(shè)、站酷、UI中國(guó)頂部的結(jié)構(gòu)布局就是一樣的，符合用戶心智模型的布局，更有利于用戶找到自己想看的內(nèi)容。

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

設(shè)計(jì)指導(dǎo)：不要隨意更改常用功能的位置

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

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

所以對(duì)于一些常用場(chǎng)景、成熟布局的網(wǎng)站，我們?cè)诘鷥?yōu)化的過(guò)程中，需要慎重考慮常用功能位置的變化，如無(wú)必要，不要打破用戶的心智模型。

2、和語(yǔ)言文字習(xí)慣一致的閱讀順序模型

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

配圖：沉浸式閱讀模式與掃視閱讀模式的視覺(jué)動(dòng)線

瀏覽網(wǎng)頁(yè)時(shí)，用戶通常會(huì)沉浸在目標(biāo)任務(wù)中，所以掃視是最常運(yùn)用的閱讀模式，只有在確信必要時(shí)用戶才會(huì)細(xì)心閱讀詳細(xì)內(nèi)容。

設(shè)計(jì)指導(dǎo)：針對(duì)用戶的閱讀模型來(lái)設(shè)計(jì)布局

對(duì)于頁(yè)面中內(nèi)容元素的擺放，應(yīng)當(dāng)依照任務(wù)邏輯與用戶的瀏覽習(xí)慣來(lái)設(shè)計(jì)恰當(dāng)?shù)囊曈X(jué)流，避免用戶視線流轉(zhuǎn)。好的視覺(jué)流應(yīng)該清楚、合理、順暢、自然。

配圖：凌亂的視覺(jué)流和順暢的視覺(jué)流場(chǎng)景

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

配圖：你覺(jué)得上圖的兩個(gè)人是否存在關(guān)系？

物理位置的接近就意味著存在關(guān)聯(lián)。在設(shè)計(jì)中亦是有著這樣的心理學(xué)暗示，這樣的暗示指導(dǎo)了Robin親密性原則。

Robin親密性原則是指將相關(guān)的項(xiàng)組織在一起，移動(dòng)這些項(xiàng)，使它們的物理位置相互靠近，這樣一來(lái)相關(guān)的項(xiàng)將被看作凝聚為一體的一個(gè)組，而不再是一堆彼此無(wú)關(guān)的片段。

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

設(shè)計(jì)指導(dǎo)：在設(shè)計(jì)中運(yùn)用親密性原則

1、將你希望用戶認(rèn)為相關(guān)的元素相鄰放置

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

3、無(wú)關(guān)內(nèi)容間距要大，相關(guān)內(nèi)容間距要小。不同屬一組的元素之間不要建立關(guān)系！如果元素彼此無(wú)關(guān)，要把他們分開(kāi)。

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

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

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

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

其實(shí)除了色盲，人隨著年齡的增長(zhǎng)，對(duì)色彩的識(shí)別能力也會(huì)對(duì)應(yīng)的減弱。所以根據(jù)無(wú)障礙設(shè)計(jì)的原則，我們?cè)谠O(shè)計(jì)的過(guò)程中，不應(yīng)該僅僅依靠顏色去傳達(dá)重要信息。我們還可以這樣做：

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

圖標(biāo)和文本結(jié)合使用傳達(dá)成功或失敗的信息

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

使用不同的圖案?jìng)鬟_(dá)信息等等

配圖：地圖標(biāo)識(shí)的設(shè)計(jì)，使用線條粗細(xì)、紋理區(qū)分樣式

（案例來(lái)源：為視色障礙者設(shè)計(jì)地圖Bernhard Jenny和Nathaniel Vaughn Kelso制圖師協(xié)會(huì)SoC公報(bào)，41頁(yè)）

配圖：輸入框狀態(tài)設(shè)計(jì)，使用圖標(biāo)和文本結(jié)合傳達(dá)成功或失敗的信息

設(shè)計(jì)指導(dǎo)：選擇所有色盲都能識(shí)別的配色方案

除了使用前文所述的輔助區(qū)分方案，我們還可以使用所有色盲都能識(shí)別的配色方案。例如，紅綠色盲患者對(duì)紅色和綠色的分辨能力很差，但是對(duì)黃、藍(lán)的辨別沒(méi)有問(wèn)題。因此，我們?cè)谠O(shè)計(jì)的過(guò)程中，可以盡量避免紅綠對(duì)比，更多的使用黃藍(lán)對(duì)比。在ggplot2中常用的viridis色板就是一個(gè)很好的色盲友好色板。詳細(xì)案例，可查看viridis彩色地圖簡(jiǎn)介

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

我們可以使用以下方式檢查色盲所見(jiàn)效果：

色盲網(wǎng)頁(yè)過(guò)濾工具網(wǎng)站：

一款適用于Windows、Mac和Linux的免費(fèi)色盲模擬器

色盲模擬窗口軟件：

使用Adobe系列軟件中的針對(duì)色盲的校樣顏色選項(xiàng)。在【視圖】的【校樣設(shè)置】菜單中選擇查看即可。

2、色彩含義因文化而異

在不同的國(guó)家，不同色彩所代表的含義不一樣。所以當(dāng)你為不同國(guó)家的人做設(shè)計(jì)的時(shí)候，必須考慮顏色在其文化中的含義，以免表達(dá)錯(cuò)誤造成誤解。例如：

在國(guó)外，紅色代表赤字，也可以代表危險(xiǎn)或停止；綠色代表金錢(qián)，也可以代表通行（因?yàn)槊涝垘攀蔷G色的）。

而在中國(guó)，紅色代表金錢(qián)收入，綠色代表赤字（因?yàn)槿嗣駧攀羌t色的）。

所以我們?cè)谠O(shè)計(jì)股票界面的時(shí)候，對(duì)于營(yíng)虧的表達(dá)，就需要針對(duì)不同的國(guó)家使用不同的顏色。

配圖：中外股票頁(yè)面設(shè)計(jì)顏色表達(dá)出來(lái)的不同含義

設(shè)計(jì)指導(dǎo)：多考慮色彩可能具有的含義

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

配圖：david mccandless色輪

總結(jié)

以上我們學(xué)習(xí)了六個(gè)設(shè)計(jì)師要懂的視覺(jué)心理學(xué)，一起再來(lái)回顧強(qiáng)化下：

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

人對(duì)事物的整體認(rèn)知主要依靠周邊視覺(jué)

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

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

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

不同人群對(duì)色彩的感知不一樣

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