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

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

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

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

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

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

展開全文

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1、先入為主的心智模型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用不同的圖案傳達(dá)信息等等

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

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

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

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

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

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

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

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

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

色盲模擬窗口軟件：

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

2、色彩含義因文化而異

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

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

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

所以我們在設(shè)計(jì)股票界面的時(shí)候，對于營虧的表達(dá)，就需要針對不同的國家使用不同的顏色。

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

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

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

配圖：david mccandless色輪

總結(jié)

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

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

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

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

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

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

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

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