【譯】視覺設計中的11種魔性視錯覺

乾產品設計這幾年，在視覺工作中我碰上過許多令人驚奇的效果，讓人不得不各種 ??????????。

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

閑話少敘，這裡是常見的11個視錯覺案例。

1. 三角形分割錯覺

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

圖標可能是有誤導性的喲，特別是由複雜幾何體或怪異形狀構成的那種。一套圖標里，並非每個都對稱，像素級完美或者保持固定寬高比。有的圖標需要手動調整，尤其是，魔性的播放按鈕！

將一個三角形置於 圓角/直角 矩形邊框中，可能會使它看起來居中位置不對。造成這個現象的原因被稱為「三角形分割錯覺」。三角形質心是基於最小外接矩形的。所以，如果你打算把一個點放到等邊三角形高度一半的位置，你會發現它看起來要超過一半。

這個魔性的錯覺基於兩個理論：

• 固定縮放比例不對

這個錯覺暗含了透視關係，增加了遠距離物體 (比如三角形) 的可觀測大小，就如同在平面透視中看一條道路，頂點在無限遠，而底邊就像道路最近的部分。

• 重心/中心

如果一名觀察者被要求找出中點，他最終會找出質心來，因為質心上下區域相等。等邊三角形的質心在它的中點下方，有證據表明觀察者會在這兩者之間妥協抉擇。

為了使矩形中的三角形視覺居中，你可能需要通過計算等邊三角形腰的中點與對角頂點連線的交點，來找出三角形的質點。以下是公式：

開玩笑的，這不是一篇關於幾何公式的文章 (但公式本身是正確的)。

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

2. 垂直水平錯覺

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

正方形是構成任何設計系統的基石。你在 Google, Facebook, Pinterest和Dribbble 都能夠看到它們的身影。

在 sketch 里按住 shift 鍵畫出一個正方形，有時你想看一眼以確認每條邊都是相等的。如果足夠仔細，那垂直邊看起來似乎比水平邊要長一些，更像一個長方形。但實際上，它確實是 1:1 的正方形。這就是所謂的「垂直水平錯覺」。

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

3. 馬赫帶效應

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

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

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

雖然馬赫帶效應在視覺設計中十分細微，不過論及它的影響，即便是牙醫都對其感到頭疼。X射線照射到牙齒上生成灰度圖像，用來解析 (牙齒) 異常變化的強度。如果不仔細辨別，馬赫帶效應可能會產生假陽性診斷結果。

4. 赫林錯覺

看起來像活的！

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

案例中的兩個柵格紋理分別是圖像和持續刷新的顯示器，從而產生了錯覺。

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

5. 赫曼柵格

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

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

產生這個效果的原因呢—和前邊一樣—「側抑制」。簡單來說，即是興奮狀態的神經元可以削弱周圍神經元方向上的視訊號。

6. 同時對比錯覺

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

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

這種現象成因沒有科學定論，但有很多相關探索。「側抑制」—同赫曼柵格與馬赫帶一樣—也被認為是此現象成因之一。

7. 芒克白錯覺

是眼睛忽悠了我嗎？

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

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

恩，還是「側抑制」。

8. 水彩錯覺

欺騙性上色……

有幾次，當我給一個形狀加上色彩邊框時，不禁奇怪：「我什麼時候把背景色也給改了？」。如果仔細看，可能注意到白色區域產生了與邊框相同但是淡得多的投影。但，你其實知道那些淡色投影區域實際上是白色的！

這個現象被稱作「水彩錯覺」，色彩的擴散效果取決於輪廓線亮度與對比度的組合。

我承認被這個錯覺誤導過不少回—以至於我調出了拾色器來檢查它。

9. 加斯特羅圖形

Size 真的很重要嗎？

插畫或 logo 設計中，會遇到標誌或字體需切割成不同形狀的情況。上圖的錯覺會在設計對象是弧形時發生。此二元素看著大小不同，但仔細檢查一下就會發現，它們完全一樣！

工作在一幅插畫或 logo 上，不論是個標誌或字體需要切割成不同的形狀。這個錯覺在工作對象是弧形時就會發生。此二元素看起來大小不同，但是仔細檢查一下就會發現，它們完全一樣！是不是有點脫線？

怎麼可能？其實這便是周知的「加斯特羅圖形」，也沒有確定的科學解釋，為什麼我們看到各部分大小不同。一個可能的緣由是，我們大腦被大小半徑的差異迷惑了。換句話說，短邊襯托使長邊顯得更長，而長邊襯托使短邊顯得更短。

10. 康士維錯覺

狡猾的斜面。

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

這個視錯覺與之前提過的兩個有相似之處，但有兩個重要的不同：

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

11. 米勒-萊爾錯覺

文字亦瘋狂！

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

看看上邊這些著名的 logo，一些字母並未乖乖待在基線和X高度里。字體設計師不得不手動調整每個字母以便達到最佳視覺效果。

我們何以需要在字體設計中運用補正？

因為米勒-萊爾錯覺。這個視覺現象表明將一個V型記號放到線段兩端可能造成其顯得比實際更短或更長，(長短) 取決於V型記號的朝向。這個經典的錯覺證明了人類感知錯誤。

作者：Balraj Chana 翻譯：主物質界面

譯自: https://blog.prototypr.io/11-optical-illusions-found-in-visual-design-295e7ae211b9

推薦閱讀：