在生活中，我們經(jīng)常會遇到一些錯覺，有一些藝術(shù)家更是刻意的制造出這些錯覺，這些錯覺大多都是利用人類大腦的一些習(xí)慣所創(chuàng)作的，但是無論如何，它們都是如此的令人著迷的存在。

01

三角形分割錯覺

Triangle-bisection Illusion

▲ 根據(jù)中心點對齊的三角形

圖標(biāo)可能會欺騙你的眼睛，尤其是那些具有復(fù)雜幾何形狀和特殊比例的圖標(biāo)。并非所有圖標(biāo)都是對稱的，某些圖標(biāo)的像素還有缺失，也不是所有圖標(biāo)都會保持一致的寬高比。有些圖標(biāo)需要手動進(jìn)行調(diào)整，最為常見的就是播放器的三角形圖標(biāo)。

將三角形放在圓角或直角的容器中會使該元素在視覺上看起來不平衡。造成這種現(xiàn)象是，由于一種被稱為「三角形分割錯覺」的影響。三角形的重心是根據(jù)其最小邊界框計算的。因此，如果你只是用對齊工具，把三角形放在矩形的中間對齊，那么在視覺上看就會很難受。

有兩個理論可以解釋這種視錯覺：

? 不合適的恒定比例

這個錯覺包含的透視會增加較遠(yuǎn)物體的感知尺寸，例如一個等邊三角形可能被視為透視圖，頂部的頂點位于無窮遠(yuǎn)，底部是距離你最近的部分。

? 重心/區(qū)域中心

如果要求觀察者找到中點，結(jié)果一般都是會找到重心，重心的上下區(qū)域相等。等邊三角形的重心在他的中點下方，有證據(jù)表明觀察者會在兩者之間妥協(xié)抉擇。

02

垂直水平錯覺

Vertical Horizontal Illusion

▲ 垂直水平幻覺

正方形是任何設(shè)計系統(tǒng)的基本組成元件。在材料設(shè)計卡、Facebook 帖子、Pinterest 和 Dribbble 中可以看到正方形的身影。

在 Sketch 中把正方形畫出來后，有時你可能會仔細(xì)檢查一下每條邊是否相等。如果看到近距離仔細(xì)查看，垂直的邊看起來似乎會比水平邊要長一些，更像一個長方形！但實際上，這是一個完美的 1：1 正方形。這就是「垂直水平錯覺」。

▲ Facebook 帖子中的圖片為 1：1 正方形

真正令人著迷的是，具有不同的文化以及性別的人對這種視錯覺的感知都不同。居住在發(fā)達(dá)城市中的人比居住在農(nóng)村地區(qū)的人更容易受到影響。這是因為農(nóng)村地區(qū)的人們更習(xí)慣于住在圓形房屋中。

03

馬赫帶效應(yīng)

Mach Bands

▲ 馬赫帶

在平面設(shè)計領(lǐng)域，將類似的一組顏色彼此相鄰放置是一種很常見的設(shè)計。仔細(xì)觀察，你可能已經(jīng)注意到一個 “并不存在” 的陰影出現(xiàn)在兩個對比色塊相接的邊緣。這種視錯覺被稱為「馬赫帶效應(yīng)」。圖像并沒有加入陰影，只是我們的眼睛產(chǎn)生了錯覺。

▲ 每行的邊之間出現(xiàn)陰影

從技術(shù)層面解釋這個現(xiàn)象，是由于側(cè)向抑制，通俗的說就是暗的一側(cè)會顯得更暗，而較亮的一側(cè)會顯得更亮。

盡管馬赫帶效應(yīng)在視覺設(shè)計中相當(dāng)微妙，但要證明它的影響力，可能是牙科醫(yī)生的真正障礙。牙齒的 X 射線可以產(chǎn)生灰度圖像，用于分析異常的強度變化。如果不能正確識別，馬赫帶效應(yīng)可能會帶來誤診。

04

赫林錯覺

Hering Illusion

▲ 赫林錯覺

你是否遇到過這種 logo，其中包含非常細(xì)的線條，或是布滿小點的背景圖，在你滾動時它看起來像是在移動或者像脈搏一樣跳動？觀察上面的由跳動線條組成的畫面，感覺如何？這是由于稱為「莫列波紋」的混疊效應(yīng)引發(fā)的，其中兩個網(wǎng)格圖案彼此重疊，一旦移動就會產(chǎn)生錯覺運動。

▲ 上下滾動以查看震動效果

這是一個非?？岬男Ч?，盡管莫列波紋本身并不是視覺錯覺，但它是一種干涉現(xiàn)象。Sonos 的標(biāo)志就是運用列莫列波紋和赫林錯覺的一個組合效果，這種效果在歐普藝術(shù)中相當(dāng)流行。

05

赫爾曼網(wǎng)格

Hermann Grid

▲ 赫爾曼網(wǎng)格

赫爾曼網(wǎng)格錯覺非常常見，并且可在高對比度背景上的正方形網(wǎng)格中看出。直接觀察任意正方形，在正方形的相交處會產(chǎn)生像幽靈一樣的斑點。如果直接看相交處，斑點就會消失。

▲ 觀察十字交叉的地方時會出現(xiàn)灰點

產(chǎn)生這種視錯覺效應(yīng)的原因是由于側(cè)抑制。簡而言之，它是興奮狀態(tài)的神經(jīng)元，可以削弱周圍神經(jīng)元的視覺訊號。

06

同時對比錯覺

Simultaneous Contrast Illusion

▲ 同時對比錯覺

將兩個相同顏色的對象放在不同對比度的背景上，會使兩個對象看起來變成不同的顏色。在視覺設(shè)計中，這種現(xiàn)象被稱為同時對比錯覺，但對不同的人來說，感知的程度也會有差異。

▲ 兩個文本顏色實際上是一樣的，但放置在不同顏色背景上顯得差異很大。

不幸的是，對于這種錯覺產(chǎn)生的原因還沒有一個可靠的理論，但是大量的研究可以推測這種錯覺，側(cè)抑制就可能是這個現(xiàn)象的成因之一。

07

蒙克 · 懷特錯覺

Munker-White Illusion

▲ 蒙克 · 懷特錯覺

這種錯覺是相當(dāng)微妙的，但仍然很有趣！看上面的 GIF，左側(cè)的紫色塊看起來比右側(cè)的紫色塊更亮。而一旦把干擾色塊去掉，就會發(fā)現(xiàn)這兩邊不同色塊其實顏色一樣。

▲ 灰線在淺色背景上顯得很暗，但在深色背景上會顯得很亮。

08

水彩錯覺

Water Colour Illusion

▲ 水彩幻覺

有時我會在對象上添加邊框，明明背景色沒有動過，但卻發(fā)現(xiàn)背景好像也有了顏色。然后我問自己：“我什么時候也調(diào)過背景顏色了？”。如果仔細(xì)觀察，你可能會注意到，根據(jù)邊框顏色，淺色區(qū)域會根據(jù)周圍邊界顏色呈現(xiàn)出。如果你用 ps 吸色可能會驚訝地發(fā)現(xiàn)，邊框內(nèi)的顏色實際上是白色的。

這種視覺現(xiàn)象被稱為 “水彩錯覺”，它取決于邊框線的亮度和顏色對比度的組合，以便產(chǎn)生顏色擴(kuò)散效果。

▲ 按鈕內(nèi)的白色區(qū)域根據(jù)邊框的顏色呈現(xiàn)出淡淡的色彩

09

賈斯特羅錯覺

Jastrow Illusion

▲ 賈斯特羅錯覺

無論是插圖還是 Logo，在處理的過程中可能需要切割出不同的形狀，這種錯覺就發(fā)生在彎曲物體時。這兩個元素的大小不同，但仔細(xì)檢查，它們實際上是完全相同的大小。

▲ 在創(chuàng)建過程中會看到這種錯覺，因為某些相同彎曲的邊緣看起來可能比其它邊緣小。

這怎么可能？好吧，這就是所謂的「賈斯特羅幻覺」，對于為什么我們會感知到不同大小的片段，沒有確切的解釋。一種解釋是，我們的大腦對于較大半徑和較小半徑之間的大小差異感到困惑。換句話說，短邊使長邊顯得更長，而長邊使短邊顯得更短。

10

康士維錯覺

Cornsweet Illusion

▲ 康士維錯覺

除了同時對比度和馬赫帶錯覺外，康士維錯覺還使用了漸變，同時使用中心線來創(chuàng)建一個畫面，即畫面的一側(cè)看起來比另一側(cè)更暗。但實際上，這兩個部分的亮度是相同的！你可以發(fā)現(xiàn)，當(dāng)兩個部分平行放置時，兩面實際上是相同的顏色和亮度。

▲ 每個菱形的漸變顏色都是一樣的，但它們的顏色（從上到下）似乎變得越來越暗。

這種幻覺產(chǎn)生與上述兩種幻覺有相似的效果，但實際上在兩個重要方面有所不同：

? 在前面展示的馬赫帶示例中，這種影響只在靠近每一個陰影邊界的區(qū)域可見。然而，康士維錯覺影響了用戶對于整個區(qū)域的感知。

? 使用康士維錯覺，邊緣的淺色會看起來更亮，而邊緣的深色部分看起來會更暗，這與通常的對比效果相反。

11

繆勒-里爾錯覺

Müller-Lyer Illusion

▲ 為了獲得最佳視覺感受做出的極致設(shè)計

字體設(shè)計師會明白，設(shè)計字體需要更多的依賴于設(shè)計直覺，而不是邏輯思維。根據(jù)每一個字符的度量高度對齊進(jìn)行數(shù)學(xué)定位，將使整個單詞在視覺感知方面顯得不成比例。在字體力學(xué)中，一個常見的實踐涉及一個稱為“視覺矯正”的過程。簡單地說，矯正就是調(diào)整單個字符的大小以實現(xiàn)視覺平衡的過程。

▲ 在沒有調(diào)整之前，Linked In 中的字母 “e” 和亞馬遜中的字母 “z” 在視覺上是不平衡的

看上面著名的標(biāo)志，有些字符在基線和高度上沒有齊平。字體設(shè)計師必須手動對每個字符進(jìn)行調(diào)整才能獲得最佳視覺效果。

但為什么我們需要對字體進(jìn)行視覺矯正呢？

矯正之所以是必要的，就是因為繆勒-里爾錯覺。這種視覺現(xiàn)象表明，在線段的每一端都放置一個 V 形符號，根據(jù)線段的方向，可以使線段顯示的更短或更長。這種經(jīng)典的錯覺證明了人類感知的不可靠性。

▲ 繆勒-里爾錯覺

本篇文章部分圖片素材來源自網(wǎng)絡(luò)