俗話說：「眼見為實(shí)」，但眼睛真的不會欺騙你嘛？來看看設(shè)計(jì)中常見的9種視錯(cuò)覺！下次甲方再懷疑你的專業(yè)能力，隨便拿一個(gè)給他看。

1. 三角形中心

你能找到三角形的中心么? 并非所有的圖標(biāo)都是對稱的，對于我們常見的播放按鈕圖標(biāo)，找到視覺的中心實(shí)際上很困難。造成這種情況的原因是由于三角形分裂錯(cuò)覺的效應(yīng)，中心位于三條中線（頂點(diǎn)和對邊的中點(diǎn)的連線）交點(diǎn)，此點(diǎn)即為重心。

下面圖片光憑肉眼，你看得出來哪個(gè)版本是居中的嗎？

2. 垂直方向引起的錯(cuò)覺

紅色的形狀是矩形么? 正方形是每個(gè)設(shè)計(jì)中的基本結(jié)構(gòu)，在矩形內(nèi)放置一個(gè)正方形，導(dǎo)致實(shí)際上在垂直方向上看起來更長，盡管它實(shí)際上是一個(gè)正方形，這種現(xiàn)象稱為垂直水平錯(cuò)覺。

看得出 Facebook 帖子中的圖片是1：1的正方形嗎？

3. 馬赫帶效應(yīng)

你能看到相鄰初的陰影么? 我們把同色的漸變相鄰放置在一起，你注意到了什么?是否會發(fā)現(xiàn)邊緣處的一個(gè)并不存在的陰影，這個(gè)視錯(cuò)覺我們稱作「馬赫帶」。其實(shí)圖像中并未加入 陰影，只是我們的眼睛產(chǎn)生了錯(cuò)覺而已。

「不存在」的陰影出現(xiàn)在每行的邊緣之間。

4. 赫林錯(cuò)覺

兩條垂直線條看起來也會移動嗎? 你有沒有見過類似的網(wǎng)站，背景中包含極細(xì)的線條和一些點(diǎn)，當(dāng)我們滾動的時(shí)候，感覺那些線條和不動的點(diǎn)都在跳動。這就是郝林錯(cuò)覺，兩條平行線因受斜線的影響呈現(xiàn)彎曲狀。還有我們常見的摩爾紋。

滾動你的頁面，線條動起來了嗎？

5. 赫爾曼柵格

你有注意到那些若隱若現(xiàn)的灰點(diǎn)么? 在周圍方塊的交叉處會產(chǎn)生幽靈般的灰點(diǎn)，當(dāng)你嘗試轉(zhuǎn)向那個(gè)灰點(diǎn)時(shí)，它就神奇的消失了。這就是赫爾曼柵格。

觀察交叉點(diǎn)時(shí)會出現(xiàn)灰點(diǎn)。

6. 同時(shí)對比錯(cuò)覺

你覺得分開的方塊顏色相同么?最近的網(wǎng)頁設(shè)計(jì)中，垂直布局很受歡迎，如果將兩個(gè)相同顏色放置在不同的背景上，則兩個(gè)對象顏色看起來與實(shí)際不同，這種現(xiàn)象稱為同時(shí)對比錯(cuò)覺。

兩側(cè)的文字顏色其實(shí)完全相同。

7. 芒克白錯(cuò)覺

兩個(gè)紫色的顏色相同么? 這種錯(cuò)覺很微妙，但是非常有吸引力，看看上面的動畫，你會發(fā)現(xiàn)左邊的紫色塊比右邊的紫色塊更亮，但實(shí)際上兩者都是一樣的。

灰色線條在淺色背景前顯得較暗，在黑色背景前顯得較淺。

8. 水彩錯(cuò)覺

仔細(xì)觀察矩形內(nèi)部的顏色是白色么? 你如果仔細(xì)看，可能注意到白色區(qū)域產(chǎn)生了與邊框相同的淡淡的投影。這種現(xiàn)象被稱作「水彩錯(cuò)覺」。

本來沒有色調(diào)的白色區(qū)域，因?yàn)檫吙虻念伾珟狭松{(diào)。

9. 康士維錯(cuò)覺

兩個(gè)對象的顏色一樣么?漸變產(chǎn)生的印象會讓你感覺圖像的一側(cè)實(shí)際上比另一側(cè)更暗，但實(shí)際上，兩者都是相同的顏色。

每個(gè)菱形都具有相同的漸變，但它們看起來越來越暗。

先別說眼睛到底騙沒騙我，光這個(gè)動效我都已經(jīng)看了好幾遍了！

歡迎關(guān)注「優(yōu)秀網(wǎng)頁設(shè)計(jì)」公眾號：

「看高手如何解決視錯(cuò)覺」

• 《進(jìn)階學(xué)習(xí)！視覺設(shè)計(jì)中的11個(gè)經(jīng)典的視錯(cuò)覺現(xiàn)象》
• 《關(guān)注細(xì)節(jié)！如何將視錯(cuò)覺運(yùn)用到UI設(shè)計(jì)界面中？》
• 《大開眼界！視覺誤差對UI設(shè)計(jì)的影響和解決方案（附案例）》