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

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

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

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

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

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

展開全文

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

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

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

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

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

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

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

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

配圖：繆勒-萊爾錯覺圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1、先入為主的心智模型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

除了使用前文所述的輔助區(qū)分方案，我們還可以使用所有色盲都能識別的配色方案。例如，紅綠色盲患者對紅色和綠色的分辨能力很差，但是對黃、藍(lán)的辨別沒有問題。因此，我們在設(shè)計的過程中，可以盡量避免紅綠對比，更多的使用黃藍(lán)對比。在ggplot2中常用的viridis色板就是一個很好的色盲友好色板。詳細(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è)計的時候，必須考慮顏色在其文化中的含義，以免表達(dá)錯誤造成誤解。例如：

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

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

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

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

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

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

配圖：david mccandless色輪

總結(jié)

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

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

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

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

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

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

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

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