進(jìn)階學(xué)習(xí)！視覺(jué)設(shè)計(jì)中的11個(gè)經(jīng)典的視錯(cuò)覺(jué)征象

Lisa ：寫(xiě)這篇文章目的，是幫助大家理解這些讓人抓狂的結(jié)果背后潛藏的原理。你可能尚未意識(shí)到，從事界面，logo 或插畫(huà)設(shè)計(jì)時(shí)采用的許多技巧，其實(shí)源于「視錯(cuò)覺(jué)」。

閑話少敘，這里是常見(jiàn)的11個(gè)視錯(cuò)覺(jué)案例。

1. 三角形分割錯(cuò)覺(jué)

選一點(diǎn)，任選一點(diǎn)，來(lái)不來(lái)？

△ 基于質(zhì)心對(duì)齊的三角形

圖標(biāo)可能是有誤導(dǎo)性的，分外是由復(fù)雜幾何體或怪異外形構(gòu)成的。一套圖標(biāo)里，并非每個(gè)都對(duì)稱(chēng)，像素級(jí)完善或者保持固定寬高比。有的圖標(biāo)必要手動(dòng)調(diào)整，尤其是，魔性的播放按鈕。

將一個(gè)三角形置于圓角/直角矩形邊框中，可能會(huì)使它看起來(lái)居中位置舛錯(cuò)。造成這個(gè)征象的緣故原由被稱(chēng)為「三角形分割錯(cuò)覺(jué)」。三角形質(zhì)心是基于最小外接矩形的。所以，假如你打算把一個(gè)點(diǎn)放到等邊三角形高度一半的位置，你會(huì)發(fā)現(xiàn)它看起來(lái)要超過(guò)一半。

△ 哪個(gè)才是數(shù)學(xué)意義上的居中呢？

這個(gè)魔性的錯(cuò)覺(jué)基于兩個(gè)理論：

• 固定縮放比例舛錯(cuò)

這個(gè)錯(cuò)覺(jué)暗含了透視關(guān)系，增長(zhǎng)了遠(yuǎn)距離物體 (比如三角形) 的可觀測(cè)大小，就如同在平面透視中看一條道路，頂點(diǎn)在無(wú)窮遠(yuǎn)，而底邊就像道路最近的部分。

• 重心/中間

假如一名觀察者被要求找出中點(diǎn)，他最終會(huì)找出質(zhì)心來(lái)，由于質(zhì)心上下區(qū)域相稱(chēng)。等邊三角形的質(zhì)心在它的中點(diǎn)下方，有證據(jù)注解觀察者會(huì)在這兩者之間妥協(xié)抉擇。

為了使矩形中的三角形視覺(jué)居中，你可能必要通過(guò)計(jì)算等邊三角形腰的中點(diǎn)與對(duì)角頂點(diǎn)連線的交點(diǎn)，來(lái)找出三角形的質(zhì)點(diǎn)。以下是公式：

△ 計(jì)算三角形質(zhì)點(diǎn)的公式

質(zhì)點(diǎn)可以被定位在每條邊 1/3 處和對(duì)邊頂點(diǎn)的連線。這個(gè)體例也適用于許多其他外形。

2. 垂直水平錯(cuò)覺(jué)

這是矩形嗎？照舊長(zhǎng)方形？不，是一個(gè)正方形？

△ 垂直水平錯(cuò)覺(jué)

正方形是構(gòu)成任何設(shè)計(jì)體系的基石。你在 Google, Facebook, Pinterest和Dribbble 都能夠看到它們的身影。

在 Sketch 里按住 Shift 鍵畫(huà)出一個(gè)正方形，偶然你想看一眼以確認(rèn)每條邊都是相稱(chēng)的。假如充足細(xì)心，那垂直邊看起來(lái)好像比水平邊要長(zhǎng)一些，更像一個(gè)長(zhǎng)方形。但現(xiàn)實(shí)上，它確實(shí)是 1:1 的正方形。這就是所謂的「垂直水平錯(cuò)覺(jué)」。

△ Facebook 圖片新聞是 1:1 正方形。

讓人著迷的是，不同的文化與性別對(duì)這個(gè)視錯(cuò)覺(jué)的感知，是不一樣的。城里人比鄉(xiāng)間人更容易察覺(jué)到這個(gè)題目（譯者：什么鬼……）。這是由于鄉(xiāng)間人更風(fēng)俗于居住在圓形的房間里。

3. 馬赫帶效應(yīng)

一個(gè)「并不存在」的陰影投射到物體外觀，會(huì)不會(huì)是錯(cuò)覺(jué)？

△ 馬赫帶

把同色的漸變毗鄰擺放是一個(gè)常見(jiàn)的扁平化設(shè)計(jì)手法。細(xì)心看，你可能細(xì)致到一個(gè)「并不存在」的陰影出如今兩個(gè)對(duì)比色塊相接的邊緣。這個(gè)視錯(cuò)覺(jué)被稱(chēng)作「馬赫帶」。圖像并未加入陰影，只是我們的眼睛產(chǎn)生了錯(cuò)覺(jué)而已。

△ 每行的邊緣都出現(xiàn)了陰影

從技術(shù)層面詮釋這個(gè)征象成因即是生物學(xué)上的「?jìng)?cè)克制」，普通的說(shuō)就是暗的一側(cè)顯得更暗，亮的一側(cè)顯得更亮。

雖然馬赫帶效應(yīng)在視覺(jué)設(shè)計(jì)中十分渺小，不過(guò)論及它的影響，即便是牙醫(yī)都對(duì)其感到頭疼。X射線照射到牙齒上生成灰度圖像，用來(lái)解析 (牙齒) 非常轉(zhuǎn)變的強(qiáng)度。假如不細(xì)心辨別，馬赫帶效應(yīng)可能會(huì)產(chǎn)生假陽(yáng)性診斷效果。

4. 赫林錯(cuò)覺(jué)

看起來(lái)像活的！

△ 赫林錯(cuò)覺(jué)

你有未遇見(jiàn)過(guò)這種 logo：包含許多細(xì)線條或者布滿小點(diǎn)的背景圖，當(dāng)你上下滾動(dòng)網(wǎng)頁(yè)時(shí)它看起來(lái)像是在移動(dòng)或者像脈搏一樣跳動(dòng)？又或者說(shuō)在某視頻中出現(xiàn)的電視，電視屏幕里包含的諸多波浪線？若如此，是因?yàn)椤改柤y」的干涉征象——兩種柵格紋理相互覆蓋，移動(dòng)時(shí)產(chǎn)生的視錯(cuò)覺(jué)。

案例中的兩個(gè)柵格紋理分別是圖像和持續(xù)刷新的表現(xiàn)器，從而產(chǎn)生了錯(cuò)覺(jué)。

△ 上下滾動(dòng)，即可看到震顫結(jié)果。

還蠻酷的。雖然摩爾自己并非指代視錯(cuò)覺(jué)，而是干涉圖案。此處 Sonos 標(biāo)志樣例使用了包括摩爾圖案，赫林錯(cuò)覺(jué)和動(dòng)視錯(cuò)覺(jué)的手法組合。這種感官技術(shù)在歐普藝術(shù) (又稱(chēng)視幻藝術(shù)) 中特別很是流行。

5. 赫曼柵格

出現(xiàn)，抑或不現(xiàn)，這是個(gè)題目。

△ 赫曼柵格

赫曼柵格特別很是受迎接，你可以在許多高對(duì)比度背景的柵格布局中發(fā)現(xiàn)它的身影。直接盯著任意方塊，在四周方塊的交叉口會(huì)產(chǎn)生幽靈般的斑點(diǎn)。但當(dāng)你嘗試轉(zhuǎn)向那個(gè)斑點(diǎn)時(shí)，它就會(huì)神奇的消散掉。

△ 當(dāng)你盯著交叉口時(shí)，灰點(diǎn)會(huì)出現(xiàn)

產(chǎn)生這個(gè)結(jié)果的緣故原由，和前邊一樣——「?jìng)?cè)克制」。簡(jiǎn)單來(lái)說(shuō)，即是愉快狀況的神經(jīng)元可以減弱四周神經(jīng)元方向上的視訊號(hào)。

6. 同時(shí)對(duì)比錯(cuò)覺(jué)

兩個(gè)分開(kāi)的方塊亮度雷同嗎？

△ 同時(shí)對(duì)比錯(cuò)覺(jué)

把兩個(gè)同色的物體分別放在不同對(duì)比度的背景色上，會(huì)使兩個(gè)物體呈現(xiàn)出不同的顏色。這種征象被稱(chēng)為「同時(shí)對(duì)比錯(cuò)覺(jué)」。在視覺(jué)設(shè)計(jì)世界中，這種征象號(hào)稱(chēng)「對(duì)比之王」，而且這個(gè)結(jié)果對(duì)于不同人可能看起來(lái)不同。

△ 筆墨色彩完全雷同, 但是看起來(lái)卻并非如此

這種征象成因沒(méi)有科學(xué)定論，但有許多相干探索。「?jìng)?cè)克制」同赫曼柵格與馬赫帶一樣也被認(rèn)為是此征象成因之一。

7. 芒克白錯(cuò)覺(jué)

是眼睛忽悠了我嗎？

△ 芒克白錯(cuò)覺(jué)

這個(gè)錯(cuò)覺(jué)相稱(chēng)渺小，卻迷人無(wú)比?？瓷蠄D，左側(cè)的紫色塊看起來(lái)比右邊的明度要高一些。但是合并之后，兩側(cè)的色塊其實(shí)明度是完全同等的。

芒克白錯(cuò)覺(jué)的成因嘛，你猜猜看？

恩，照舊「?jìng)?cè)克制」。

8. 水彩錯(cuò)覺(jué)

誑騙性上色……

△ 水彩錯(cuò)覺(jué)

有幾次，當(dāng)我給一個(gè)外形加上色彩邊框時(shí)，不禁新鮮：“我什么時(shí)候把背景色也給改了？”。假如細(xì)心看，可能細(xì)致到白色區(qū)域產(chǎn)生了與邊框雷同但是淡得多的投影。但，你其實(shí)知道那些淡色投影區(qū)域現(xiàn)實(shí)上是白色的！

這個(gè)征象被稱(chēng)作「水彩錯(cuò)覺(jué)」，色彩的擴(kuò)散結(jié)果取決于輪廓線亮度與對(duì)比度的組合。

△ 按鈕內(nèi)的白色區(qū)域看起來(lái)像是被邊框染了些許顏色

我承認(rèn)被這個(gè)錯(cuò)覺(jué)誤導(dǎo)過(guò)不少回，以至于我調(diào)出了拾色器來(lái)檢查它。

9. 加斯特羅圖形

Size 真的很緊張嗎？

△ 加斯特羅圖形

插畫(huà)或 Logo 設(shè)計(jì)中，會(huì)碰到標(biāo)志或字體需切割成不同外形的情況。上圖的錯(cuò)覺(jué)會(huì)在設(shè)計(jì)對(duì)象是弧形時(shí)發(fā)生。此二元素看著大小不同，但細(xì)心檢查一下就會(huì)發(fā)現(xiàn)，它們完全一樣。

在一幅插畫(huà)或 Logo上，不論是個(gè)標(biāo)志或字體必要切割成不同的外形。這個(gè)錯(cuò)覺(jué)在工尷尬刁難象是弧形時(shí)就會(huì)發(fā)生。此二元素看起來(lái)大小不同，但是細(xì)心檢查一下就會(huì)發(fā)現(xiàn)，它們完全一樣。

△ 這幅插畫(huà)在創(chuàng)作過(guò)程中，一些本應(yīng)雷同的圓弧卻看起來(lái)比其他的要小

其實(shí)這便是周知的「加斯特羅圖形」，也沒(méi)有確定的科學(xué)詮釋?zhuān)瑸槭裁次覀兛吹礁鞑糠执笮〔煌Ｒ粋€(gè)可能的緣由是，我們大腦被大小半徑的差異疑惑了。換句話說(shuō)，短邊襯托使長(zhǎng)邊顯得更長(zhǎng)，而長(zhǎng)邊襯托使短邊顯得更短。

10. 康士維錯(cuò)覺(jué)

桀黠的斜面。

△ 康士維錯(cuò)覺(jué)

「康士維錯(cuò)覺(jué)」用了漸變的同時(shí)，也加入了中間線來(lái)創(chuàng)造一個(gè)圖像，使其一邊比另一邊要暗。但事實(shí)是，兩邊是一樣的。當(dāng)你把每個(gè)部分平行排放時(shí)，就會(huì)發(fā)現(xiàn)兩邊現(xiàn)實(shí)上完全雷同。

△ 每個(gè)菱形都有同樣的漸變，但是它們團(tuán)體看起來(lái)越來(lái)越暗 (從上而下)。

這個(gè)視錯(cuò)覺(jué)與之前提過(guò)的兩個(gè)有相似之處，但有兩個(gè)緊張的不同：

• 在馬赫帶效應(yīng)的示例中，結(jié)果只在接近色塊邊緣處才出現(xiàn)。但是康士維錯(cuò)覺(jué)影響到整個(gè)區(qū)域。

• 在康士維錯(cuò)覺(jué)中，較亮部分的邊緣顯得更亮，較暗部分顯得更暗。這統(tǒng)一般的「對(duì)比結(jié)果」是相反的。

11. 米勒-萊爾錯(cuò)覺(jué)

筆墨亦瘋狂！

△ 對(duì)于「視覺(jué)補(bǔ)正」最直觀的感知

字體設(shè)計(jì)師都知道，創(chuàng)造一個(gè)字體更多依靠直覺(jué)，而非邏輯思考。排字時(shí)若遵循數(shù)學(xué)意義的正確，基于它的公制高度，會(huì)使得整個(gè)單詞視覺(jué)上顯得不成比例。關(guān)于「字體力學(xué)」的一個(gè)樣例中，引入了一個(gè)叫「視覺(jué)補(bǔ)正」的概念。簡(jiǎn)而言之，所謂補(bǔ)正即重新調(diào)整單獨(dú)字體大小，以求得視覺(jué)結(jié)果上的平衡感。

△ 沒(méi)有視覺(jué)補(bǔ)正的話，Linkedin 中的字母「e」和 Amazon 中的字母「z」就無(wú)法視覺(jué)平衡

看看上邊這些聞名的 Logo，一些字母并未乖乖待在基線和X高度里。字體設(shè)計(jì)師不得不手動(dòng)調(diào)整每個(gè)字母以便達(dá)到最佳視覺(jué)結(jié)果。

我們何以必要在字體設(shè)計(jì)中運(yùn)用補(bǔ)正？

由于米勒-萊爾錯(cuò)覺(jué)。這個(gè)視覺(jué)征象注解將一個(gè)V型記號(hào)放到線段兩端可能造成其顯得比現(xiàn)實(shí)更短或更長(zhǎng)，(長(zhǎng)短) 取決于V型記號(hào)的朝向。這個(gè)經(jīng)典的錯(cuò)覺(jué)證實(shí)了人類(lèi)感知錯(cuò)誤。

△ 米勒-萊爾錯(cuò)覺(jué)

迎接關(guān)注微信公眾號(hào)：非科班設(shè)計(jì)

原文地址：zhihu