經典的視錯覺案例｜GogoShark網頁設計

視覺設計中的11個經典的視錯覺案例

從事界面，logo 或插畫設計時採用的很多技巧，其實源於「視錯覺」此文章目的，是幫助大家理解這些讓人抓狂的效果背後潛藏的原理

這篇文章目的，是幫助大家理解這些讓人抓狂的效果背後潛藏的原理。你可能尚未意識到，從事界面，logo 或插畫設計時採用的很多技巧，其實源於「視錯覺」。廢話少說，這裡是常見的11個視錯覺案例。

1. 三角形分割錯覺

選一點，任選一點，來不來？

△ 基於質心對齊的三角形圖標可能是有誤導性的，特別是由複雜幾何體或怪異形狀構成的。一套圖標里，並非每個都對稱，像素級完美或者保持固定寬高比。有的圖標需要手動調整，尤其是，魔性的播放按鈕。將一個三角形置於圓角/直角矩形邊框中，可能會使它看起來居中位置不對。造成這個現象的原因被稱為「三角形分割錯覺」。三角形質心是基於最小外接矩形的。所以，如果你打算把一個點放到等邊三角形高度一半的位置，你會發現它看起來要超過一半。

△ 哪個才是數學意義上的居中呢？這個魔性的錯覺基於兩個理論：

固定縮放比例不對

這個錯覺暗含了透視關係，增加了遠距離物體 (比如三角形) 的可觀測大小，就如同在平面透視中看一條道路，頂點在無限遠，而底邊就像道路最近的部分。
如果一名觀察者被要求找出中點，他最終會找出質心來，因為質心上下區域相等。等邊三角形的質心在它的中點下方，有證據表明觀察者會在這兩者之間妥協抉擇。
為了使矩形中的三角形視覺居中，你可能需要通過計算等邊三角形腰的中點與對角頂點連線的交點，來找出三角形的質點。以下是公式：

△ 計算三角形質點的公式質點可以被定位在每條邊 1/3 處和對邊頂點的連線。這個方式也適用於很多其他形狀。

2. 垂直水平錯覺

這是矩形嗎？還是長方形？不，是一個正方形？

△ 垂直水平錯覺正方形是構成任何設計系統的基石。你在 Google, Facebook, Pinterest和Dribbble 都能夠看到它們的身影。在 Sketch 里按住 Shift 鍵畫出一個正方形，有時你想看一眼以確認每條邊都是相等的。如果足夠仔細，那垂直邊看起來似乎比水平邊要長一些，更像一個長方形。但實際上，它確實是 1:1 的正方形。這就是所謂的「垂直水平錯覺」。

△ Facebook 圖片消息是 1:1 正方形。讓人著迷的是，不同的文化與性別對這個視錯覺的感知，是不一樣的。城裡人比鄉下人更容易察覺到這個問題（譯者：什麼鬼……）。這是因為鄉下人更習慣於居住在圓形的房間里。

3. 馬赫帶效應

一個「並不存在」的陰影投射到物體表面，會不會是錯覺？

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

△ 每行的邊緣都出現了陰影從技術層面解釋這個現象成因即是生物學上的「側抑制」，通俗的說就是暗的一側顯得更暗，亮的一側顯得更亮。雖然馬赫帶效應在視覺設計中十分細微，不過論及它的影響，即便是牙醫都對其感到頭疼。X射線照射到牙齒上生成灰度圖像，用來解析 (牙齒) 異常變化的強度。如果不仔細辨別，馬赫帶效應可能會產生假陽性診斷結果。

4. 赫林錯覺

看起來像活的！

△ 赫林錯覺你有未遇見過這種 logo：包含很多細線條或者布滿小點的背景圖，當你上下滾動頁面時它看起來像是在移動或者像脈搏一樣跳動？又或者說在某視頻中出現的電視，電視屏幕里包含的諸多波浪線？若如此，是由於「摩爾紋」的干涉現象——兩種柵格紋理相互覆蓋，移動時產生的視錯覺。案例中的兩個柵格紋理分別是圖像和持續刷新的顯示器，從而產生了錯覺。

△ 上下滾動，即可看到震顫效果。還蠻酷的。雖然摩爾本身並非指代視錯覺，而是干涉圖案。此處 Sonos 標誌樣例使用了包括摩爾圖案，赫林錯覺和動視錯覺的手法組合。這種感官技術在歐普藝術 (又稱視幻藝術) 中非常流行。

5. 赫曼柵格

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

△ 赫曼柵格赫曼柵格非常受歡迎，你可以在很多高對比度背景的柵格布局中發現它的身影。直接盯著任意方塊，在周圍方塊的交叉口會產生幽靈般的斑點。但當你嘗試轉向那個斑點時，它就會神奇的消失掉。

△ 當你盯著交叉口時，灰點會出現產生這個效果的原因，和前邊一樣——「側抑制」。簡單來說，即是興奮狀態的神經元可以削弱周圍神經元方向上的視訊號。

6. 同時對比錯覺

兩個分開的方塊亮度相同嗎？

△ 同時對比錯覺把兩個同色的物體分別放在不同對比度的背景色上，會使兩個物體呈現出不同的顏色。這種現象被稱為「同時對比錯覺」。在視覺設計世界中，這種現象號稱「對比之王」，而且這個效果對於不同人可能看起來不同。

△ 文字色彩完全相同, 但是看起來卻並非如此這種現象成因沒有科學定論，但有很多相關探索。「側抑制」同赫曼柵格與馬赫帶一樣也被認為是此現象成因之一。

7. 芒克白錯覺

是眼睛忽悠了我嗎？

△ 芒克白錯覺這個錯覺相當細微，卻迷人無比。看上圖，左側的紫色塊看起來比右邊的明度要高一些。但是合併之後，兩側的色塊其實明度是完全一致的。

芒克白錯覺的成因嘛，你猜猜看？

恩，還是「側抑制」。

8. 水彩錯覺

欺騙性上色……

△ 水彩錯覺有幾次，當我給一個形狀加上色彩邊框時，不禁奇怪：「我什麼時候把背景色也給改了？」。如果仔細看，可能注意到白色區域產生了與邊框相同但是淡得多的投影。但，你其實知道那些淡色投影區域實際上是白色的！這個現象被稱作「水彩錯覺」，色彩的擴散效果取決於輪廓線亮度與對比度的組合。

△ 按鈕內的白色區域看起來像是被邊框染了些許顏色我承認被這個錯覺誤導過不少回，以至於我調出了拾色器來檢查它。

9. 加斯特羅圖形

Size 真的很重要嗎？

△ 加斯特羅圖形插畫或 Logo 設計中，會遇到標誌或字體需切割成不同形狀的情況。上圖的錯覺會在設計對象是弧形時發生。此二元素看著大小不同，但仔細檢查一下就會發現，它們完全一樣。在一幅插畫或 Logo上，不論是個標誌或字體需要切割成不同的形狀。這個錯覺在工作對象是弧形時就會發生。此二元素看起來大小不同，但是仔細檢查一下就會發現，它們完全一樣。

△ 這幅插畫在創作過程中，一些本應相同的圓弧卻看起來比其他的要小其實這便是周知的「加斯特羅圖形」，也沒有確定的科學解釋，為什麼我們看到各部分大小不同。一個可能的緣由是，我們大腦被大小半徑的差異迷惑了。換句話說，短邊襯托使長邊顯得更長，而長邊襯托使短邊顯得更短。

10. 康士維錯覺

狡猾的斜面。

△ 康士維錯覺「康士維錯覺」用了漸變的同時，也加入了中心線來創造一個圖像，使其一邊比另一邊要暗。但事實是，兩邊是一樣的。當你把每個部分平行排放時，就會發現兩邊實際上完全相同。

△ 每個菱形都有同樣的漸變，但是它們整體看起來越來越暗 (從上而下)。這個視錯覺與之前提過的兩個有相似之處，但有兩個重要的不同：

在馬赫帶效應的示例中，效果只在接近色塊邊緣處才出現。但是康士維錯覺影響到整個區域。
在康士維錯覺中，較亮部分的邊緣顯得更亮，較暗部分顯得更暗。這同一般的「對比效果」是相反的。

11. 米勒-萊爾錯覺

文字亦瘋狂！

△ 對於「視覺補正」最直觀的感知字體設計師都知道，創造一個字體更多依賴直覺，而非邏輯思考。排字時若遵循數學意義的精確，基於它的公制高度，會使得整個單詞視覺上顯得不成比例。關於「字體力學」的一個樣例中，引入了一個叫「視覺補正」的概念。簡而言之，所謂補正即重新調整單獨字體大小，以求得視覺效果上的平衡感。

△ 沒有視覺補正的話，Linkedin 中的字母「e」和 Amazon 中的字母「z」就無法視覺平衡看看上邊這些著名的 Logo，一些字母並未乖乖待在基線和X高度里。字體設計師不得不手動調整每個字母以便達到最佳視覺效果。我們何以需要在字體設計中運用補正？因為米勒-萊爾錯覺。這個視覺現象表明將一個V型記號放到線段兩端可能造成其顯得比實際更短或更長，(長短) 取決於V型記號的朝向。這個經典的錯覺證明了人類感知錯誤。