來源於：Eason張UED（EasonZhangUED）
---
感謝大家對黑馬家族的支持，今天給大家推薦一篇關於視覺設計中 11 種視錯覺的總結文章，希望能夠帶給你一定的幫助！文章轉自We-Design，原文引自 Medium 上的一篇文章《 11 Optical Illusions Found in Visual Design》 。該譯文並非完整原文，內容已做部分調整。
相信你在平常生活或工作中遇到過一些神奇的場景，這些場景會讓人產生一些視覺上的錯覺，那麼究竟是什麼原因導致的這些錯覺呢？作者在文章中介紹了 11 種視錯覺：
1. 三角形分割錯覺（Triangle-bisection Illusion）
2. 垂直中線錯覺 (Vertical Horizontal Illusion)
3. 馬赫帶效應 (Mach Bands)
4. 赫林錯覺 (Hering Illusion)
5. 赫爾曼網格 (Hermann Grid)
6. 同時對比錯覺 (Simultaneous Contrast Illusion)
7. 蒙克·懷特錯覺 (Munker-White Illusion)
8. 水彩錯覺 (Water Colour Illusion)
9. 賈斯特羅錯覺 (Jastrow Illusion)
10. 康士維錯覺 (Cornsweet Illusion)
11. 繆勒-裡爾錯覺 (Müller-Lyer Illusion)
Triangle-bisection Illusion
圖標可能會欺騙你的眼睛，尤其是那些具有複雜幾何形狀和特殊比例的圖標。並非所有圖標都是對稱的，某些圖標的像素還有缺失，也不是所有圖標都會保持一致的寬高比。有些圖標需要手動進行調整，最為常見的就是播放器的三角形圖標。
將三角形放在圓角或直角的容器中會使該元素在視覺上看起來不平衡。造成這種現象是，由於一種被稱為「三角形分割錯覺」的影響。三角形的重心是根據其最小邊界框計算的。因此，如果你只是用對齊工具，把三角形放在矩形的中間對齊，那麼在視覺上看就會很難受。
有兩個理論可以解釋這種視錯覺：
• 不合適的恆定比例
這個錯覺包含的透視會增加較遠物體的感知尺寸，例如一個等邊三角形可能被視為透視圖，頂部的頂點位於無窮遠，底部是距離你最近的部分。
• 重心/區域中心
如果要求觀察者找到中點，結果一般都是會找到重心，重心的上下區域相等。等邊三角形的重心在他的中點下方，有證據表明觀察者會在兩者之間妥協抉擇。
為了使矩形中的三角形視覺居中，你需要找到幾何中心（重心），三角形的三條中點的連線交點即為重心。
Vertical Horizontal Illusion
正方形是任何設計系統的基本組成元件。在材料設計卡、Facebook 帖子、Pinterest 和 Dribbble 中可以看到正方形的身影。
在 Sketch 中把正方形畫出來後，有時你可能會仔細檢查一下每條邊是否相等。如果看到近距離仔細查看，垂直的邊看起來似乎會比水平邊要長一些，更像一個長方形！但實際上，這是一個完美的 1：1 正方形。這就是「垂直水平錯覺」。
▲ Facebook 帖子中的圖片為 1:1 正方形
真正令人著迷的是，具有不同的文化以及性別的人對這種視錯覺的感知都不同。居住在發達城市中的人比居住在農村地區的人更容易受到影響。這是因為農村地區的人們更習慣於住在圓形房屋中。
在平面設計領域，將類似的一組顏色彼此相鄰放置是一種很常見的設計。仔細觀察，你可能已經注意到一個 「並不存在」 的陰影出現在兩個對比色塊相接的邊緣。這種視錯覺被稱為「馬赫帶效應」。圖像並沒有加入陰影，只是我們的眼睛產生了錯覺。
從技術層面解釋這個現象，是由於側向抑制，通俗的說就是暗的一側會顯得更暗，而較亮的一側會顯得更亮。
儘管馬赫帶效應在視覺設計中相當微妙，但要證明它的影響力，可能是牙科醫生的真正障礙。牙齒的 X 射線可以產生灰度圖像，用於分析異常的強度變化。如果不能正確識別，馬赫帶效應可能會帶來誤診。
你是否遇到過這種 logo，其中包含非常細的線條，或是布滿小點的背景圖，在你滾動時它看起來像是在移動或者像脈搏一樣跳動？觀察上面的由跳動線條組成的畫面，感覺如何？這是由於稱為「莫列波紋」的混疊效應引發的，其中兩個網格圖案彼此重疊，一旦移動就會產生錯覺運動。
這是一個非常酷的效果，儘管莫列波紋本身並不是視覺錯覺，但它是一種幹涉現象。Sonos 的標誌就是運用列莫列波紋和赫林錯覺的一個組合效果，這種效果在歐普藝術中相當流行。
赫爾曼網格錯覺非常常見，並且可在高對比度背景上的正方形網格中看出。直接觀察任意正方形，在正方形的相交處會產生像幽靈一樣的斑點。如果直接看相交處，斑點就會消失。
產生這種視錯覺效應的原因是由於側抑制。簡而言之，它是興奮狀態的神經元，可以削弱周圍神經元的視覺訊號。
Simultaneous Contrast Illusion
將兩個相同顏色的對象放在不同對比度的背景上，會使兩個對象看起來變成不同的顏色。在視覺設計中，這種現象被稱為同時對比錯覺，但對不同的人來說，感知的程度也會有差異。
▲ 兩個文本顏色實際上是一樣的，但放置在不同顏色背景上顯得差異很大
不幸的是，對於這種錯覺產生的原因還沒有一個可靠的理論，但是大量的研究可以推測這種錯覺，側抑制就可能是這個現象的成因之一。
這種錯覺是相當微妙的，但仍然很有趣！看上面的 GIF，左側的紫色塊看起來比右側的紫色塊更亮。而一旦把幹擾色塊去掉，就會發現這兩邊不同色塊其實顏色一樣。
▲ 灰線在淺色背景上顯得很暗，但在深色背景上會顯得很亮
究其原因，蒙克·懷特錯覺的成因是......你猜對了，側抑制。
有時我會在對象上添加邊框，明明背景色沒有動過，但卻發現背景好像也有了顏色。然後我問自己：「我什麼時候也調過背景顏色了？」。如果仔細觀察，你可能會注意到，根據邊框顏色，淺色區域會根據周圍邊界顏色呈現出。如果你用 ps 吸色可能會驚訝地發現，邊框內的顏色實際上是白色的。
這種視覺現象被稱為 「水彩錯覺」，它取決於邊框線的亮度和顏色對比度的組合，以便產生顏色擴散效果。
▲ 按鈕內的白色區域根據邊框的顏色呈現出淡淡的色彩
我承認這種錯覺讓我困惑了很多次，以至於我不得不拿出拾色器來檢查。
無論是插圖還是 Logo，在處理的過程中可能需要切割出不同的形狀，這種錯覺就發生在彎曲物體時。這兩個元素的大小不同，但仔細檢查，它們實際上是完全相同的大小。
▲ 在創建過程中會看到這種錯覺，因為某些相同彎曲的邊緣看起來可能比其它邊緣小
這怎麼可能？好吧，這就是所謂的「賈斯特羅幻覺」，對於為什麼我們會感知到不同大小的片段，沒有確切的解釋。一種解釋是，我們的大腦對於較大半徑和較小半徑之間的大小差異感到困惑。換句話說，短邊使長邊顯得更長，而長邊使短邊顯得更短。
除了同時對比度和馬赫帶錯覺外，康士維錯覺還使用了漸變，同時使用中心線來創建一個畫面，即畫面的一側看起來比另一側更暗。但實際上，這兩個部分的亮度是相同的！你可以發現，當兩個部分平行放置時，兩面實際上是相同的顏色和亮度。
▲ 每個菱形的漸變顏色都是一樣的，但它們的顏色（從上到下）似乎變得越來越暗
這種幻覺產生與上述兩種幻覺有相似的效果，但實際上在兩個重要方面有所不同：
• 在前面展示的馬赫帶示例中，這種影響只在靠近每一個陰影邊界的區域可見。然而，康士維錯覺影響了用戶對於整個區域的感知。
• 使用康士維錯覺，邊緣的淺色會看起來更亮，而邊緣的深色部分看起來會更暗，這與通常的對比效果相反。
字體設計師會明白，設計字體需要更多的依賴於設計直覺，而不是邏輯思維。根據每一個字符的度量高度對齊進行數學定位，將使整個單詞在視覺感知方面顯得不成比例。在字體力學中，一個常見的實踐涉及一個稱為「視覺矯正」的過程。簡單地說，矯正就是調整單個字符的大小以實現視覺平衡的過程。
▲ 在沒有調整之前，Linked In 中的字母 「e」 和亞馬遜中的字母 「z」 在視覺上是不平衡的
看上面著名的標誌，有些字符在基線和高度上沒有齊平。字體設計師必須手動對每個字符進行調整才能獲得最佳視覺效果。
但為什麼我們需要對字體進行視覺矯正呢？
矯正之所以是必要的，就是因為繆勒-裡爾錯覺。這種視覺現象表明，在線段的每一端都放置一個 V 形符號，根據線段的方向，可以使線段顯示的更短或更長。這種經典的錯覺證明了人類感知的不可靠性。