當設計師很多年，我碰到了很多神奇的視錯現象
「
不當「大哥」好多年
已經「老眼昏花」了
」
都說設計師要有雄鷹一般敏銳的眼睛，狼犬一樣靈敏的嗅覺，蝙蝠一樣聰敏的聽覺，獵豹一樣敏捷的動作......額，對不起，這是「特種兵」。
不過，雄鷹一般敏銳的眼睛，確實是設計師必備的。因為我們設計師，每天都要處理像素級別的圖像任務。沒有敏銳的觀察力，怎麼能勝任呢，是不是？
豆豆當設計師很多年，在做設計的時候，總會碰到各種各樣神奇的視錯現象。
你要問了，什麼是視錯？視覺錯覺，簡稱視錯，好理解了吧？視錯現象，在設計當中是非常常見的。你比方說，你要設計一個播放按鈕圖標（icon），稍不注意就很容易造成視錯，如果你按照正常的居中對齊來辦的話。
這就是典型的三角形二等分錯覺（Triangle-bisection Illusion）。你知道三角形的重心在哪裡嗎？
嗯，怎麼說呢，你要知道：並不是所有的圖標都是對稱的。有的圖標需要設計師手動調節，比如，這個讓人頭疼的播放按鈕！將一個三角形放在圓形或四邊形的邊框內居中時，你會發現怎麼都不能完全居中。其原因就是「三角形二等分錯覺」。
通過上圖，我們就很容易理解這個「三角形二等分錯覺」了。為了讓三角形在所處的邊框內視覺上看上去居中，我們需要找到三角形的重心，而不是中心。找重心的方法就是三角形三個頂點和對邊的中點相連，得到的交點就是該三角形的重心。下面是計算公式：
額，很抱歉，我數學沒學好，看不懂......
簡單來說，就是：重心一般可以定位在每條邊和對面頂點連線的1/3處，這個方法適用於很多其他形狀。
「
垂直水平視錯
Vertical Horizontal Illusion
」
看上圖，問題來了：上圖裡的是長方形還是正方形？（當然，你看GIF動圖一目了然......）
答案是：正方形。
那麼，為什麼畫出的正方形，看起來像是長方形呢？這就是我們在這裡碰到的「垂直水平視錯」問題。
正方形是任何設計系統的基礎形狀。在Material Design卡片式設計，Facebook的貼子，Pinterest的Pin和Dribbble的shots你都可以看到正方形的運用。
在Sketch里按住shift畫出一個正方形，我總會再次確認這個形狀的每個邊是否是相等的。如果你仔細看，垂直邊看起來比水平邊要長一些，更像一個長方形。但是，實際上，它是個完美的1:1的正方形，這就是「垂直水平視錯」。
「
馬赫帶效應
Mach Bands
」
問你個問題：為什麼相鄰色塊的邊緣處的顏色更深？
對我們設計師來說，這是常見的，不值得一提的問題，可是有多少設計師想過這個問題呢？可能，對你來說，這本就是理所當然的，沒必要去想為什麼。
扁平設計風格非常流行的時候，在相鄰位置使用同色系的顏色也是一個普遍趨勢。仔細看上圖，你會感覺相鄰色塊的邊緣處的顏色更深，這種錯覺就是「馬赫帶效應」。其實圖像並沒有添加任何顏色效果，僅僅是我們的眼睛產生了錯覺。
對這種視錯現象的技術解釋叫作「側抑制」，（側抑制：是指相鄰的感受器之間能夠互相抑制的現象）。在這裡就是說，顏色深的區域會看上去更深，而顏色淺的區域會看上去更淺。
雖然這種現象對視覺設計的影響微小，但是馬赫帶效應在其他領域影響很大。比如，對於牙科醫生來說就是個大麻煩：牙齒的X射線產生的灰度圖用來分析牙齒的異常變化，而馬赫帶效應會帶來引起假陽性診斷結果。
「
赫林錯覺
Hering Illusion
」
你有沒有碰到過這種情況：有一個包含很多非常細的線條，或者一個背景有很多小點的圖片，當你滾動圖片的時候，那些線條和小點看上去像在移動或者跳動。又或者，你看的視頻中有一台電視機在裡面播放波浪線，那些波浪線看上去是不是在動？
如果你碰到過這種情況，那是因為一種叫作「摩爾紋」的干涉效應：兩個網格圖案相互重疊，一旦圖案移動會產生網格移動的錯覺。
這是一種很酷的效應。不過，摩爾紋本身並不是一種光學錯覺，它是一種干涉現象，這種技巧在波普藝術界頗受歡迎。
「
赫爾曼柵格
Hermann Grid
」
當你看這些方形圖的時候，是不是感覺方形之間有圓形的點在閃現？
這就是赫爾曼柵格視錯。這通常是由正方形的網格和強對比的背景構成產生的。當你盯著任何一個正方形看的時候，在所有正方形周圍的交叉區域會看到幽靈般的圓點。再盯著交叉區域看，圓點就會消失。
這個現象產生的原因也是「側抑制」。
「
同時對比視錯
Simultaneous Contrast Illustion
」
你看到的中間紫色矩形，如果沒有分開，你看到的就是一樣顏色的，是嗎？
可是，當它們兩個左右分開以後，你才會發現：顏色根本不一樣。這是為什麼？是我的眼睛出現問題了？
你的眼睛欺騙了你，這是「同時對比錯覺」。將兩個相同顏色的物體放在不同的背景上會讓這兩個物體看上去是不一樣的顏色，這種現象被稱為「同時對比錯覺」。就像下面這張圖裡面藍色的字體。
對於這種現象暫時沒有一個可靠的理論解釋。不過，還是有大量的研究推測這種現象的原因。和赫爾曼柵格和馬赫帶效應相同，側抑制也是原因之一。
「
Munker-White錯覺
Munker-White Illusiion
」
你的眼睛，會欺騙你。就像我們上面剛剛說過的。
在這張圖裡，你會感覺，左邊的紫色塊看起來比右邊的紫色塊更亮一些，其實呢，這兩個紫色塊的顏色是一樣的。為什麼？
這種視錯相當微妙，但是卻很吸引人。
Munker-White錯覺的原因是由於……你猜？沒錯，還是「側抑制」。
「
上色錯覺
Water Color Illusion
」
有幾次當我給物體添加邊框以後，我就會自問「我什麼時候把背景顏色也換了呢？」。如果你仔細看上圖，你會覺得淺色的區域有著淺淺的邊框的顏色。事實上，這些你認為帶淺色的區域是白色的！
這種視覺現象被稱為「上色錯覺」，邊框的亮度和顏色對比相結合，就產生了顏色擴散的效果。
如果你拿不準，就用拾色器來確定一下。
「
賈斯特羅錯覺
Jastrow Illusion
」
大小，真的很重要嗎？
如果你設計過LOGO或者畫過插畫，就可能會用到分割各種形狀。當碰到彎曲的形狀時，就會發生這種錯覺：這兩個物體看起來不一樣大，但是仔細看，你會發現它們其實是一樣大小的！有意思吧？
這種現象被稱為「賈斯特羅錯覺」，還沒有明確的解釋說明我們為什麼會感知到不一樣的大小。有一種解釋是說，我們大腦在遇到大小不同的半徑時會感到困惑。也就是說，短邊使長邊看起來更長，長邊讓短邊看起來更短。 （我暈了......）
「
康士維錯覺
Cornsweet Illusion
」
除了「同時對比錯覺」和「馬赫帶效應」，「康士維錯覺」使用漸變的同時也會造成假象：圖像的一邊比另一邊顏色更深。但是，事實上，兩塊的漸變是一樣的！當兩塊豎直放置的時候，你就會發現這一點。
「
米勒-萊爾錯覺
Muller-Lyer Illusion
」
不要以為，讓你產生錯覺的只有圖形，文字也可以。
印刷工人很明白這一點，製作字體需要更多地依靠設計直覺，而不是邏輯思維。
如果按照實際的數學意義上的高度設計每一個字母，會使整個單詞看起來不成比例。在字體行業有一個「矯正」的過程。簡單來說，就是調整每一個字母使它們在視覺上看起來平衡的過程。
這些著名logo中的字母在水平線上並不完全齊平，字體設計師們需要手動調整每一個字母使它們得到最好的結果。
但是為什麼我們需要在字體中矯正呢？
之所以需要矯正，是因為這個世界著名的「米勒-萊爾錯覺」。在線段的每一端放置一個箭頭形的圖形，根據箭頭的方向可以使線段看起來更短或更長。
「
寫在最後
」
設計師該不該相信自己的眼睛？
從以上的視錯現象中，我們可以感覺到在我們的設計過程當中，不要簡單的去憑常規判斷來做，你的眼睛有的時候會欺騙你的。
當然，你可以利用視錯幫助你創作出非常好的設計，也需要避免這些視錯對你的設計造成不必要的麻煩。
如果喜歡，就分享給你第一個想起的人吧~
推薦閱讀：