眼見不為實，設計中的16種視錯覺現象

眼見不為實，設計中的16種視錯覺現象

看完你還敢相信自己的眼睛嗎？

在刷朋友圈，空間，微博的時候，大家是否有遇見過類似這樣的標題黨呢？

好奇地點進去後是否感到各種

又或者在某一個街頭被凹凸不平的地磚吸引，在某個對著電腦的不眠之夜感到鍵盤間彷彿有黑點閃爍？

這些視錯覺圖片還頻繁的出現在各類心理測試中?擾得你不由得在懷疑眼睛和懷疑人生的十字路口徘徊……

因此——

我們決定出這篇推送

一是將這些視錯覺現象做一個分類。

二是幫助大家理解這些讓人抓狂的效果背後潛藏的視覺原理。

話不多說，這裡是常見的16個視錯覺案例。

No. 1色相對比錯覺

— 這倆一個色？excuse me ? ? ?—

胡孜怡 《香蕉》

圖中三個A是同樣的灰色

何梓璇 《火山》

圖中上方的火山灰和下方的岩漿實際上是同一種顏色。而火山帽以及與之相連的熔岩是不一樣的誘導色。總之，你看上去覺得一樣的，其實是不一樣的，而你看上去覺得是不同的，卻很可能是一樣的。怪就怪錯覺嘍。

程洪凌《荒寂》

圖中樹上的果實與外面的雪花是完全相同的中灰色，在不同背景的作用下產生變色的錯覺。

色相對比錯覺

現象：色相，純度或者明度不同的顏色以某種方式放在一起的時候，由於相互影響，有時候會使其中一種顏色看起來與實際顏色存在較大差異。

操作：將較小的顏色放置在另一種較大顏色的背景上。

原理：將一種較小面積的顏色放置在由另一種顏色所組成的較大面積的背景上的時候，背景色趨於將其對比色即補色疊加於中央色中，使其產生色相變化的錯覺，稱為色相對比錯覺。

關鍵詞：小面積+大面積

陳冠傲 《打雷的湖面》

陳聿飛 《抹茶草莓》

No. 2色相同化錯覺

—這已經不是當年的「小灰灰」了—

色相同化錯覺

現象：兩種顏色面積相近以某種方式作緊密而平等的接觸，在這種情況下，其色相，明度或純度都可能產生相互融合的同化作用。

操作：將兩種顏色面積相近的交錯排列，並往其中加入一個灰色的物體，會發現灰色物體在經過這兩種不同顏色的「領地」時會顯示出不同的顏色。（它已經不是當初你認識的小灰灰了～）

關鍵詞：面積相近、緊密交錯

濮璞 《桃花流水》

除綠色和藍色外，所有圓環的灰色均為完全相同的中性灰。

陳珍妮《長頸鹿》

兩隻長頸鹿是完全相同的灰色

胡孜怡《冷月》

月亮和水面其實都是純白色

當然，這種現象不止對灰色有效果

上面的漩渦有藍色嗎？

這是一張由日本的 Akiyoshi Kitaoka 創作的圖片。它是一個視錯覺的圖，我剛看的以為又是那種會產生假動效果的圖。深入研究我才知道，原來它是關於顏色的錯覺。

上面的漩渦只有綠色！！！！！！

上面的漩渦只有綠色！！！！！！

上面的漩渦只有綠色！！！！！！

還是那個原理，你看到上面有綠色和藍色漩渦，其實都是綠色的，藍色在途中並不存在。這就是之前所提到的觀察者在客觀因素干擾下或者自身的心理因素支配下，對圖形產生的與客觀事實不相符的錯誤的感覺。

還不信？

來來來，咱們請photoshop來驗證一下

No. 3前進色後退色

— 由彈幕引發的思考—

在嗶哩嗶哩看視頻的時候，有一段彈幕吸引了我

乍一看感覺最下面一行的藍色字彷彿在後退，黑色背景下的紅字彷彿在往前突起，一瞬間開始懷疑起自己的眼睛……

在老師的引導下，認識到這是前進色和後退色產生的視錯覺現象

劉碩詩 《偷窺》

有沒有感覺到紅色幕布後露出的一點藍彷彿在往後退？

陳奕心 《眼神》

確認過眼神，我遇上對的人~

有沒有感到藍色的目光的深邃呢？

前進色&後退色

現象：有些顏色會令人感覺向前突起，有些會讓人感覺向後退縮。（藍色的後退效果尤為明顯）

操作：（就拿碎玻璃這張的繪製舉例吧）在大片的紅色玻璃中，扣出一個空隙，填藍色，並將裂縫周圍的部分描一圈黑邊，並往藍色的圖層中加入適量的黑色紋理，使其後退。在前面的紅色圖層上也要添加幾道黑色的紋路，會更有前進的效果。

原理：在色譜中，有些顏色對視網膜的刺激較大，會往前跑，相反的，那些刺激較小的顏色則會後退。

關鍵詞：前進色，後退色，紋理，黑邊

一兩 《裂紋》

小提示

前進色（Advancing Color）：在置於同一平面上的各種顏色中，顯得比其它顏色更靠近眼睛的某些顏色中之任一種顏色（一般來說暖色系的屬於前進色，如各種黃色和與黃色相近的其它顏色）。

後退色（Receding Color）：亦稱「縮色」。和其它顏色在同一平面上，但看上去離眼睛較遠的幾種顏色（一般來說冷色系的屬於後退色，如綠色、藍色、紫色及其各種變色）。

No. 4紋理變換

— 設計師教你怎樣穿衣顯瘦—

自從學了這一課後，一兩在穿衣搭配上更講究了。

最不喜歡的就是橫條紋的衣服，再苗條也架不住使人顯胖的橫紋……（寶寶心裡苦寶寶不說）

但是豎條紋就是一兩的最愛啦！衣服穿的好，立減30斤不是夢～（悄悄告訴你，已經有好幾個人誤以為一兩才100斤哦～哼哼）

小提示

一般情況下橫紋有擴張的效果，豎紋則呈現出收縮延長的趨勢，不過仍然存在一些例外。

下面這幅《偏心》就很能說明這個視覺現象，左右兩半的心其實是一樣大小哦～

林惠敏 《偏心》

（前方高能預警，非戰鬥人員請迅速撤離）

然而——

有些特殊的紋理可能會產生一些令人猝不及防的錯覺。

一兩《水槽》

你看它好像是個螺旋的漩渦，實際上只是一圈圈的橢圓形，放大縮小形成的。

一些引導性的線條也會造成這樣傾斜的錯覺。

李嘉雯 《四兩壓千斤》

這張《四兩壓千斤》是一張很有趣的作品，通過斜向下的引導線誤導觀眾產生「電線杆被小鳥壓垮」錯覺，再加上令人舒服的配色和構圖，有種此時無聲勝有聲的意境！

亢星

「

專業的學術知識只是輔助，更重要的是如何將這些內化並舉一反三地創造出屬於自己的作品，才是設計令我感到最為快樂的地方。

——一兩看到這些作品後瞎扯的

」

鄧超

黃靜 《轉圈的女孩》

No. 5扭曲的線條

— 喝咖啡喝出的視錯覺—

咖啡館牆壁錯覺

「咖啡牆錯覺」的說法最早是由英國布里斯托爾大學（University of Bristol）的Richard Gregory教授提出的，起因是大學附近的一家咖啡館，其裝潢讓人有些匪夷所思：

繪製成平面圖可能看上去更明顯一些。

線條扭曲錯覺

現象：現象：咖啡館的外牆壁是用黑白兩種顏色的瓷磚相間拼接的，雖然每一行的瓷磚都是平行的，但給人的總體感覺卻是由寬漸窄。

操作：黑色和白色的矩形交錯排放。

原理：黑色和白色的矩形並沒有嚴格的一個接一個，而是交錯排放，因而交錯部分會在你的腦海中形成一個灰色地帶，並且強調這一不同。你自帶的視覺系統判讀這個空間是不真實的，所以將它壓縮，這就產生了大量的楔形效應，大腦整合它們並且判斷你再看一個不平行的線條。

關鍵詞：小面積+大面積

No. 6扭曲的網格

— 加一些小點就能波動了？—

重慶某房地產商的海報也運用了這一效果（這都能和房地產扯上關係，也是服氣）

文案為：心動不如行動

利用視錯覺現象來渲染消費者心中的情緒波動，很巧妙的宣傳方式。

網格扭曲錯覺

現象：筆直的網格因一些小點的插入而開始扭動起來

操作：在網格狀的圖形中插入特別的小點，可能會使原本端正的網格變得扭曲起來。

原理：相互靠近的兩個圖形之間會有一定的吸引力，對於人的大腦來說，會自發地將Ta（大腦）看來相關聯的東西連在一塊兒，因此造成了視覺上的網格扭曲錯覺。

關鍵詞：網格，小點

李逸群 《泳池》

通過網格扭曲表現出水表面的張力，有種水波微漾的效果。

陳瑛琪 《倒影》

網格的扭曲造成了水面上下一半是實，一半是虛的效果，宛若水面上浮動的倒影。

No. 7外物遮擋

— 一葉障目—

咱們的文化里有許多這類的成語，什麼「一葉障目」「管窺蠡測」「豹窺一斑」等等，褒貶不一……

畢竟，誰知道你看到的東西在整體中是什麼樣的排位呢？親眼所見的未必為實，有時甚至會歪曲事實！

在視錯覺中也有著這樣的錯覺：

外物遮擋

現象：如果一條直線以某個角度消失於一個實體表面後，隨即又出現於該實體的另一側，看上去會有些「錯位」。

操作：將外物疊加在形狀的上方，看看觀者是否還能準確地判斷出物體原有的樣子？

原理：視神經細胞在感受光線刺激的時候，也會受到旁邊細胞的影響，並且在大腦對其加工的過程中也受到神經中樞的融和機制的影響。

簡單說就是你的大腦在回答問題之前會忍不住參考一下旁邊的圖形。

No. 8交替現象

— 你看到了什麼？—

噓——

先別說話——

來看看這張圖

你看到了什麼？

美麗的少女還是枯槁的老婦？

《妻子與岳母》

這張被用爛了的圖頻繁的出現在各類心理學測試中，試圖通過你第一眼看到的圖形來窺視你的潛意識……

像這樣一種現象被稱為「交替現象」。同一張圖，在不同的人看來，可能會出現不同的效果。

林夢懷 《窗戶與鍵盤》

感受一下來自設計師的悲涼，更聲漸漸寒夜，指尖下敲擊的鍵盤好似透著清冷月光的窗棱……

這種時候再來個

ps程序錯誤強制關機界面

這酸爽……

No. 9運動色錯覺

— 感受到我暗暗地挪動了嗎？—

運動色錯覺

現象：確認過眼神，你是在動的圖～

操作：一般來說，圖形是從相對背景深色的部分向相對背景淺色的部分運動，不過有時候也會出現反向運動的效果（這個嘛……生活總是充滿了意外）

關鍵詞：一頭深色，一頭淺色

移動錯覺：

北岡明佳

波動錯覺：

北岡明佳

旋轉錯覺：

北岡明佳

膨脹收縮錯覺：

北岡明佳

No. 10水彩錯覺

— 欺騙性上色……—

水彩錯覺

現象：原本白色的部分因為一圈其他顏色的邊而不再潔白。

操作：沿著邊界線圈一圈其他的顏色（若要效果更強，可在圈完該色後加個黑邊再圈上一圈的對比色）色彩的擴散效果取決於輪廓線亮度與對比度的組合。

黃澤群 《瘋狂動物城》

狐狸和兔子都是純白色

陳怡琎 《真相》

畫面中似乎撕開的部分與背景不同色，實際上是一樣的純白色。

高依婷

糕點中的各部分實際上都是純白色

No.11 明度對比錯覺

— 附陰影鑽石錯覺—

明度對比錯覺

現象：每個菱形都有同樣的漸變，但是它們整體看起來越來越暗 (從上而下)。

操作：將許多銳角為30至40度的菱形縱向排列，有漸層

原理：人眼會將相鄰的菱形的邊界線部分的濃淡視為一個個視覺的焦點，由於只注視著其中一個部分，視覺上卻映射出了整個的事物，上面的菱形和下面的菱形，就彷彿變成了別的顏色。簡而言之，就是大腦下意識的計算錯誤。

No.12邊界錯覺

— 哪裡來的陰影？—

邊界錯覺

現象：把同色的漸變毗鄰擺放，仔細看，你可能注意到一個「並不存在」的陰影出現在兩個對比色塊相接的邊緣。這個視錯覺被稱作「馬赫帶錯覺」。圖像並未加入陰影，只是我們的眼睛產生了錯覺而已。

操作：將明度變化的色帶並列排放

原理：從技術層面解釋這個現象成因即是生物學上的「側抑制」，通俗的說就是暗的一側顯得更暗，亮的一側顯得更亮。

關鍵詞：明度相同，並列排放

No. 13亮度錯覺

— 白上白，黑上黑—

在藝考集訓的時候，常常聽到老師的咆哮「還加白？加白就是最亮了嗎？啊？！！」

現在回想起來，要是當時知道亮度錯覺的原理就好啦！

林夢懷

洪嘉琦 《螢火蟲》

在這些圖中，被圍起來的部分雖然同樣是白色，但卻好似在閃閃發光。

亮度錯覺

現象：比白更亮，比黑更暗

操作：以發光點為圓心，製作有邊界的漸變色。

關鍵詞：有邊界，漸變

No. 14網格閃縮錯覺

—出現，抑或不現，這是個問題。—

你的鍵盤上有沒有這忽隱忽現的幻點呢？

網格閃縮錯覺

現象：盯著任意方塊，在周圍方塊的交叉口會產生幽靈般的斑點。但當你嘗試轉向那個斑點時，它就會神奇的消失掉 。

操作：陣列方形格子，留下網格。

原理：在大腦神經「側抑制」下，興奮狀態的神經元可以削弱周圍神經元方向上的視訊號。

濮璞 《蝌蚪找媽媽》

黃曉婷

No. 15凹凸錯覺

—黑林錯覺，馮特錯覺—

色相對比錯覺

現象：兩條平行的直線，被許多在平行線中間相交的線分割後，看起來這兩條平行線顯得向外彎曲。

原理：在平行線中間相交的線越密，兩個平行線看起來會更彎。

當雙眼失焦再去看這兩條平行線，你又會覺得他們是直的。（簡單說，便是不對直線聚焦」）

操作：emmm.....看著畫吧。

馮特錯覺

黑林錯覺

No. 16大小恆常錯覺

— 你的大腦真的客觀嗎？—

下圖中位於中央的圓哪一個更大？

emmmm……

左邊的會不會大一些呢？

然而——

中間的兩個圓是面積相等的，但看起來左邊中間的圓大於右邊中間的圓（不信你去量！反正肯定有人忍不住去量的，所以你一定不是一個人在戰鬥）

同樣，中間的兩個三角形面積相等，但看起來左邊中間的三角形比右邊中間的三角形大，也稱為艾賓浩斯（Ebbinghaus）錯覺（大小恆常錯覺）。

大小恆常錯覺

現象:同樣大小的物體在不同背景下呈現出不同的大小。

原理：在同樣視網膜大小的情況下，心理預期距離越長的時候，知覺到的圖形就被大腦自動糾正向大的方向補償。

簡單來說就是你的大腦會暗戳戳地將看到的東西往ta的預期上引導。

還是不信？

那咱們再看看這張圖：

在你用了這麼多年建立的世界觀看來，這是一個縱深的街道，因此後面的車應該相對較小……

然而——

不用說，你的大腦又騙了你~

每一步的成長

都希望有你陪伴

搞事日誌會帶來更多素材，

為您的設計助力，

就是一斤一兩的使命和榮幸~

搞事日誌

搞事，我們是認真的

專業展示｜廈園紀實｜素材資源

廈門大學藝術學院大一設計專業

排版/陳怡然

指導老師/陳文捷

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！