在我做產(chǎn)品設(shè)計(jì)師的這些年里，在處理視覺(jué)效果的過(guò)程中遇到了很多讓我感到意外的事情。我寫(xiě)這篇文章的目的是為了幫助大家理解為什么這些視覺(jué)“陷阱”會(huì)讓人感到困惑。可能一開(kāi)始都沒(méi)有意識(shí)到這個(gè)問(wèn)題，但當(dāng)你做UI,logo,插畫(huà)等工作時(shí)，可能就會(huì)遇上許多。
所以，廢話不多說(shuō)，下面列舉了作為視覺(jué)設(shè)計(jì)師經(jīng)常會(huì)遇到的11個(gè)視覺(jué)錯(cuò)覺(jué)。
1、三角形分割錯(cuò)覺(jué)（Triangle-Bisection Illusion）
圖標(biāo)可能具有欺騙性，尤其是那些具有復(fù)雜形狀和奇數(shù)比例的圖標(biāo)，并非所有圖標(biāo)都是對(duì)稱的，像素完美或保持一致的縱橫比。有些圖標(biāo)需要略微調(diào)整，最為常見(jiàn)的就是播放器的三角形圖標(biāo)。
將三角形放在圓角或直角容器中會(huì)使得元素在視覺(jué)上看起來(lái)不平衡。造成這種現(xiàn)象的原因是一種被稱為“三角形分割錯(cuò)覺(jué)”的效應(yīng)（參考鏈接：http://anstislab.ucsd.edu/files/2012/11/2009-Triangle-bisection-.pdf）。三角形的重心是根據(jù)它的最小邊界框（參考鏈接：https://en.wikipedia.org/wiki/Minimum_bounding_box）計(jì)算的。所以，如果你只是用對(duì)齊工具，把三角形放在矩形的中間對(duì)齊，那么在視覺(jué)上看就會(huì)很難受。
哪一個(gè)版本是數(shù)學(xué)上的居中？
有兩種理論可以解釋這種視覺(jué)錯(cuò)：
不合適的恒定標(biāo)度
這種錯(cuò)覺(jué)包含的透視會(huì)增加較遠(yuǎn)物體的感知尺寸，例如等邊三角形可能被視為透視中看到的道路平面圖，頂部頂點(diǎn)位于無(wú)窮遠(yuǎn)處，底部是道路的最近部分。
重心/中心
如果一個(gè)觀察者被要求找到中心點(diǎn)，他們最終會(huì)找到重心，重心的上下面積相等。一個(gè)等邊三角形的重心位于它的中點(diǎn)之下，有證據(jù)表明，觀察者做出的選擇是兩者之間的折中。
使三角形在其容器中找到視覺(jué)中心，你需要找到幾何中心（重心），三角形的三條中點(diǎn)的連線交點(diǎn)即為重心。也可以用下面這套公式來(lái)計(jì)算。
求三角形重心的公式
我只是開(kāi)了一個(gè)玩笑，這不是一篇講幾何公式的文章，設(shè)計(jì)師不用怕，盡管這個(gè)公式是對(duì)的。
2. 垂直中線錯(cuò)覺(jué)??(Vertical Horizontal Illusion)
正方形是任何設(shè)計(jì)系統(tǒng)的基本構(gòu)件。它可以在谷歌設(shè)計(jì)規(guī)范中的卡片設(shè)計(jì)，F(xiàn)acebook帖子，Pinterest pins或是Dribbble 作品中看到。
隨意畫(huà)出一個(gè)正方形，如果你看的足夠近會(huì)發(fā)現(xiàn)，垂直的邊會(huì)比水平的邊長(zhǎng)，就好像這個(gè)正方形實(shí)際上是一個(gè)長(zhǎng)方形。但實(shí)際上，這就是一個(gè)完美的1：1的正方形。這就是所謂的垂直中線錯(cuò)覺(jué)。
Facebook帖子中的圖片是1：1的正方形
有意思的是，不同的文化和性別對(duì)這一錯(cuò)覺(jué)的理解也是不一樣的。生活在發(fā)達(dá)城市的人往往比生活在農(nóng)村的人更敏感，這是因?yàn)樯钤谵r(nóng)村的人更習(xí)慣于更加隨性。
3. 馬赫帶效應(yīng)? (Mach Bands)
在扁平化時(shí)代，將類似的一組顏色彼此相鄰放置是一種很常見(jiàn)的設(shè)計(jì)。仔細(xì)觀察，你可能已經(jīng)注意到每一個(gè)對(duì)比顏色之間出現(xiàn)了一個(gè)并不存在的陰影，這種錯(cuò)覺(jué)被稱為馬赫帶效應(yīng)。并沒(méi)有真的給每一個(gè)顏色帶增加投影，這只是我們眼睛產(chǎn)生了錯(cuò)覺(jué)。
投影出現(xiàn)了每一個(gè)相鄰顏色條的邊緣
對(duì)這種現(xiàn)象的理論解釋是由于“側(cè)抑制” （譯者注：https://en.wikipedia.org/wiki/Lateral_inhibition）引起的，這意味著在較暗的區(qū)域會(huì)顯得更暗，較亮的區(qū)域顯得更亮。
盡管這種效果在視覺(jué)設(shè)計(jì)領(lǐng)域的影響相當(dāng)微妙，但對(duì)牙科醫(yī)生來(lái)說(shuō)確是一個(gè)不小的麻煩。牙齒的X光產(chǎn)生的灰度圖像，用于分析強(qiáng)度的異常變化。如果識(shí)別不正確，馬赫帶可能會(huì)帶來(lái)誤診。
4. 赫林錯(cuò)覺(jué)? (Hering Illusion)
你是否曾經(jīng)遇到過(guò)一些包含非常細(xì)的線條Logo，或者帶有小點(diǎn)的背景圖片，當(dāng)它滾動(dòng)時(shí)，這些小點(diǎn)似乎也在移動(dòng)或者跳動(dòng)？觀察上面的由跳動(dòng)線條組成的畫(huà)面，感覺(jué)如何？這是由于稱為“莫列波紋”的混疊效應(yīng)引發(fā)的，其中兩個(gè)網(wǎng)格圖案彼此重疊，一旦移動(dòng)就產(chǎn)生錯(cuò)覺(jué)運(yùn)動(dòng)。
上下滾動(dòng)來(lái)查看震動(dòng)效果
這是一個(gè)相當(dāng)酷的效果，雖然莫列波紋本身不是一個(gè)視覺(jué)錯(cuò)覺(jué)，但它是一個(gè)干涉現(xiàn)象。SONOS Logo例子就是運(yùn)用了莫列波紋和赫林錯(cuò)覺(jué)的一個(gè)組合效果，這種感覺(jué)在歐普藝術(shù)中更受歡迎。
5. 赫爾曼柵格??(Hermann Grid)
赫爾曼網(wǎng)格錯(cuò)覺(jué)非常常見(jiàn)，可以在包含高對(duì)比度背景上的正方形網(wǎng)格的布局中看到。直接觀察任何正方形都會(huì)在周圍正方形的交叉點(diǎn)產(chǎn)生幽靈般的斑點(diǎn)，但如果把視線中心轉(zhuǎn)移到那里，斑點(diǎn)就會(huì)消失，仿佛永遠(yuǎn)都追逐不到。
看十字交叉的地方，會(huì)出現(xiàn)暗點(diǎn)
（譯者注：原文作者所說(shuō)的原因太過(guò)簡(jiǎn)略，而且貌似還是錯(cuò)的，我這里就省略了一段翻譯。之后，我又去找了一些資料看了看。產(chǎn)生這種現(xiàn)象的原因和故事，可以參見(jiàn)這篇文章，寫(xiě)的非常詳細(xì)。http://blog.sina.com.cn/s/blog_1479bbadc0102wrgn.html。）
6. 同時(shí)對(duì)比錯(cuò)覺(jué)? (Simultaneous Contrast Illusion)
把兩個(gè)顏色相同的物體放在不同對(duì)比度的背景上，可以使這兩個(gè)物體看起來(lái)好像變成了不同的顏色。在視覺(jué)設(shè)計(jì)中，這種現(xiàn)象被稱為同時(shí)對(duì)比錯(cuò)覺(jué)，這種效果對(duì)不同的人來(lái)說(shuō)，可能感知的程度也會(huì)有差異。
兩個(gè)文本顏色實(shí)際上是一樣的，但放在不同顏色背景上顯得差異很大。
不幸的是，對(duì)于這種錯(cuò)覺(jué)產(chǎn)生的原因還沒(méi)有一個(gè)可靠的理論，但是有大量的研究可以推測(cè)出原因，側(cè)抑制就可能是這個(gè)現(xiàn)象的成因之一。
7. Munker-White 錯(cuò)覺(jué)? (Munker-White Illusion)
這種錯(cuò)覺(jué)是相當(dāng)微妙的，但確是很有吸引力的。看看上面的動(dòng)圖GIF，左邊的紫色塊比右邊的紫色塊看起來(lái)更亮。而一旦把干擾色塊去掉，就會(huì)發(fā)現(xiàn)兩邊不同色塊其實(shí)顏色一樣。
灰色線在淺色背景上顯得很暗，而在深色背景上卻顯得很亮。
那是什么原因?qū)е碌腗unker-White 錯(cuò)覺(jué)呢？…你猜對(duì)了，還是側(cè)抑制。
8. 水彩錯(cuò)覺(jué)? (Water Colour Illusion)
有些時(shí)候，我給一個(gè)對(duì)象加了一條邊框，明明背景色沒(méi)有動(dòng)過(guò)，但卻發(fā)現(xiàn)背景好像也有了顏色。然后我問(wèn)自己：“我什么時(shí)候也調(diào)過(guò)背景顏色了？”，如果你仔細(xì)觀察，可能會(huì)注意到，根據(jù)邊框顏色來(lái)看，淺色區(qū)域的色調(diào)要淺的多。但如果你要拿PS來(lái)吸色會(huì)發(fā)現(xiàn)，其實(shí)所有的邊框內(nèi)顏色實(shí)際上都是白色的！
這種視覺(jué)現(xiàn)象被稱為“水彩錯(cuò)覺(jué)”，它取決于邊框線的亮度和顏色對(duì)比度的組合，以便產(chǎn)生顏色擴(kuò)散效果。
按鈕內(nèi)的白色區(qū)域根據(jù)邊框的顏色呈現(xiàn)出輕微的色調(diào)
我承認(rèn)這種錯(cuò)覺(jué)讓我困擾了好幾次，以至于我不得不拿出顏色吸管來(lái)檢查。
9.賈斯特羅錯(cuò)覺(jué)? (Jastrow Illusion)
無(wú)論是插圖還是Logo，在處理的過(guò)程中可能需要切割出不同的形狀，這種錯(cuò)覺(jué)就發(fā)生在彎曲物體時(shí)。上面兩個(gè)元素看起來(lái)大小不同，但仔細(xì)觀察，它們實(shí)際大小是完全相同的！瘋了吧？
這種錯(cuò)覺(jué)可以在創(chuàng)作的過(guò)程中看到，因?yàn)橐恍┫嗤那€邊緣可能看起來(lái)比其他的要小。
這怎么可能呢？這就是所謂的“賈斯特羅錯(cuò)覺(jué)”，對(duì)于我們?yōu)槭裁磿?huì)感知到不同大小的片段，并沒(méi)有明確的解釋。一種解釋是，我們的大腦被大半徑和小半徑之間的差異搞糊涂了。換句話說(shuō)，短邊使長(zhǎng)邊顯得更長(zhǎng)，長(zhǎng)邊使短邊顯得更短。
10. 康士維錯(cuò)覺(jué)? (Cornsweet Illusion)
康士維錯(cuò)覺(jué)使用了漸變，同時(shí)使用中心線創(chuàng)建了一個(gè)畫(huà)面，即畫(huà)面的一側(cè)看起來(lái)比另一側(cè)更暗。但實(shí)際上，這兩個(gè)部分的亮度是相同的！你會(huì)發(fā)現(xiàn)當(dāng)兩個(gè)部分平行放置時(shí)，兩邊實(shí)際上有著相同的顏色和亮度。
每一個(gè)菱形的漸變顏色都是一樣的，但它們的顏色（從上到下）似乎變得越來(lái)越深。
這種錯(cuò)覺(jué)產(chǎn)生的效果與前面提到的兩種錯(cuò)覺(jué)有些類似，但實(shí)際上在兩個(gè)重要方面有所不同：
1、在前面展示的馬赫帶示例中，這種影響只在靠近每一個(gè)陰影邊界的區(qū)域可見(jiàn)。然而，康士維錯(cuò)覺(jué)影響了用戶對(duì)于整個(gè)區(qū)域的感知。
2、使用康士維錯(cuò)覺(jué)，邊緣的淺色會(huì)看起來(lái)更亮，而邊緣的深色部分看起來(lái)會(huì)更暗，這與通常的對(duì)比效果相反。
11.繆勒-萊爾錯(cuò)覺(jué)? (Müller-Lyer Illusion)
為了獲得最佳的效果而做出的極致設(shè)計(jì)
字體設(shè)計(jì)師會(huì)明白，設(shè)計(jì)字體需要更多的依賴于設(shè)計(jì)直覺(jué)，而不是邏輯思維。根據(jù)每一個(gè)字符的度量高度對(duì)齊進(jìn)行數(shù)學(xué)定位，將使整個(gè)單詞在視覺(jué)感知方面顯得不成比例。在字體力學(xué)中，一個(gè)常見(jiàn)的實(shí)踐涉及一個(gè)稱為“視覺(jué)矯正”的過(guò)程。簡(jiǎn)單地說(shuō)，矯正就是調(diào)整單個(gè)字符的大小以實(shí)現(xiàn)視覺(jué)平衡的過(guò)程。
在沒(méi)有調(diào)整之前，LinkedIn上的字母e和亞馬遜上的字母z在視覺(jué)上是不平衡的。
看看上面那些著名的標(biāo)志，有些字符在基線和x-height內(nèi)沒(méi)有齊平，字體設(shè)計(jì)師必須手動(dòng)調(diào)整單個(gè)字符來(lái)獲得最佳的視覺(jué)效果。
那么我們?yōu)槭裁葱枰獙?duì)字體進(jìn)行視覺(jué)矯正呢？
矯正之所以是必要的，就是因?yàn)榭娎?萊爾錯(cuò)覺(jué)。這種視覺(jué)現(xiàn)象表明，在線段的每一端都放置一個(gè)v形符號(hào)，根據(jù)線段的方向，可以使線段顯示的更短或更長(zhǎng)。這種經(jīng)典的錯(cuò)覺(jué)證明了人類感知的不可靠性。
具體資料請(qǐng)見(jiàn)維基百科：https://en.wikipedia.org/wiki/M%C3%BCller-Lyer_illusion
你有沒(méi)有遇到過(guò)其他讓你困惑的視錯(cuò)覺(jué)？歡迎留言交流。
原文：blog.prototypr.io/11-optical-illusions-found-in-visual-design-295e7ae211b9
作者：Balraj Chana
譯者: 彩云Sky（ID：caiyunyisheji）
