進階學(xué)習(xí)！視覺設(shè)計中的11個經(jīng)典的視錯覺征象

2017/10/31 9:20:05來源：互聯(lián)網(wǎng)

Lisa ：寫這篇文章目的，是幫助大家理解這些讓人抓狂的結(jié)果背后潛藏的原理。你可能尚未意識到，從事界面，logo 或插畫設(shè)計時采用的許多技巧，其實源于「視錯覺」。

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

1. 三角形分割錯覺

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

△ 基于質(zhì)心對齊的三角形

圖標可能是有誤導(dǎo)性的，分外是由復(fù)雜幾何體或怪異外形構(gòu)成的。一套圖標里，并非每個都對稱，像素級完善或者保持固定寬高比。有的圖標必要手動調(diào)整，尤其是，魔性的播放按鈕。

將一個三角形置于圓角/直角矩形邊框中，可能會使它看起來居中位置舛錯。造成這個征象的緣故原由被稱為「三角形分割錯覺」。三角形質(zhì)心是基于最小外接矩形的。所以，假如你打算把一個點放到等邊三角形高度一半的位置，你會發(fā)現(xiàn)它看起來要超過一半。

△ 哪個才是數(shù)學(xué)意義上的居中呢？

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

固定縮放比例舛錯

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

重心/中間

假如一名觀察者被要求找出中點，他最終會找出質(zhì)心來，由于質(zhì)心上下區(qū)域相稱。等邊三角形的質(zhì)心在它的中點下方，有證據(jù)注解觀察者會在這兩者之間妥協(xié)抉擇。

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

△ 計算三角形質(zhì)點的公式

質(zhì)點可以被定位在每條邊 1/3 處和對邊頂點的連線。這個體例也適用于許多其他外形。

2. 垂直水平錯覺

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

△ 垂直水平錯覺

正方形是構(gòu)成任何設(shè)計體系的基石。你在 Google, Facebook, Pinterest和Dribbble 都能夠看到它們的身影。

在 Sketch 里按住 Shift 鍵畫出一個正方形，偶然你想看一眼以確認每條邊都是相稱的。假如充足細心，那垂直邊看起來好像比水平邊要長一些，更像一個長方形。但現(xiàn)實上，它確實是 1:1 的正方形。這就是所謂的「垂直水平錯覺」。

△ Facebook 圖片新聞是 1:1 正方形。

讓人著迷的是，不同的文化與性別對這個視錯覺的感知，是不一樣的。城里人比鄉(xiāng)間人更容易察覺到這個題目（譯者：什么鬼……）。這是由于鄉(xiāng)間人更風(fēng)俗于居住在圓形的房間里。

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

一個「并不存在」的陰影投射到物體外觀，會不會是錯覺？

△ 馬赫帶

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

△ 每行的邊緣都出現(xiàn)了陰影

從技術(shù)層面詮釋這個征象成因即是生物學(xué)上的「側(cè)克制」，普通的說就是暗的一側(cè)顯得更暗，亮的一側(cè)顯得更亮。

雖然馬赫帶效應(yīng)在視覺設(shè)計中十分渺小，不過論及它的影響，即便是牙醫(yī)都對其感到頭疼。X射線照射到牙齒上生成灰度圖像，用來解析 (牙齒) 非常轉(zhuǎn)變的強度。假如不細心辨別，馬赫帶效應(yīng)可能會產(chǎn)生假陽性診斷效果。

4. 赫林錯覺

看起來像活的！

△ 赫林錯覺

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

案例中的兩個柵格紋理分別是圖像和持續(xù)刷新的表現(xiàn)器，從而產(chǎn)生了錯覺。

△ 上下滾動，即可看到震顫結(jié)果。

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

5. 赫曼柵格

出現(xiàn)，抑或不現(xiàn)，這是個題目。

△ 赫曼柵格

赫曼柵格特別很是受迎接，你可以在許多高對比度背景的柵格布局中發(fā)現(xiàn)它的身影。直接盯著任意方塊，在四周方塊的交叉口會產(chǎn)生幽靈般的斑點。但當你嘗試轉(zhuǎn)向那個斑點時，它就會神奇的消散掉。

△ 當你盯著交叉口時，灰點會出現(xiàn)

產(chǎn)生這個結(jié)果的緣故原由，和前邊一樣——「側(cè)克制」。簡單來說，即是愉快狀況的神經(jīng)元可以減弱四周神經(jīng)元方向上的視訊號。

6. 同時對比錯覺

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

△ 同時對比錯覺

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

△ 筆墨色彩完全雷同, 但是看起來卻并非如此

這種征象成因沒有科學(xué)定論，但有許多相干探索?！競?cè)克制」同赫曼柵格與馬赫帶一樣也被認為是此征象成因之一。

7. 芒克白錯覺

是眼睛忽悠了我嗎？

△ 芒克白錯覺

這個錯覺相稱渺小，卻迷人無比?？瓷蠄D，左側(cè)的紫色塊看起來比右邊的明度要高一些。但是合并之后，兩側(cè)的色塊其實明度是完全同等的。

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

恩，照舊「側(cè)克制」。

8. 水彩錯覺

誑騙性上色……

△ 水彩錯覺

有幾次，當我給一個外形加上色彩邊框時，不禁新鮮：“我什么時候把背景色也給改了？”。假如細心看，可能細致到白色區(qū)域產(chǎn)生了與邊框雷同但是淡得多的投影。但，你其實知道那些淡色投影區(qū)域現(xiàn)實上是白色的！

這個征象被稱作「水彩錯覺」，色彩的擴散結(jié)果取決于輪廓線亮度與對比度的組合。

△ 按鈕內(nèi)的白色區(qū)域看起來像是被邊框染了些許顏色

我承認被這個錯覺誤導(dǎo)過不少回，以至于我調(diào)出了拾色器來檢查它。

9. 加斯特羅圖形

Size 真的很緊張嗎？

△ 加斯特羅圖形

插畫或 Logo 設(shè)計中，會碰到標志或字體需切割成不同外形的情況。上圖的錯覺會在設(shè)計對象是弧形時發(fā)生。此二元素看著大小不同，但細心檢查一下就會發(fā)現(xiàn)，它們完全一樣。

在一幅插畫或 Logo上，不論是個標志或字體必要切割成不同的外形。這個錯覺在工尷尬刁難象是弧形時就會發(fā)生。此二元素看起來大小不同，但是細心檢查一下就會發(fā)現(xiàn)，它們完全一樣。

△ 這幅插畫在創(chuàng)作過程中，一些本應(yīng)雷同的圓弧卻看起來比其他的要小

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

10. 康士維錯覺

桀黠的斜面。

△ 康士維錯覺

「康士維錯覺」用了漸變的同時，也加入了中間線來創(chuàng)造一個圖像，使其一邊比另一邊要暗。但事實是，兩邊是一樣的。當你把每個部分平行排放時，就會發(fā)現(xiàn)兩邊現(xiàn)實上完全雷同。

△ 每個菱形都有同樣的漸變，但是它們團體看起來越來越暗 (從上而下)。

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

在馬赫帶效應(yīng)的示例中，結(jié)果只在接近色塊邊緣處才出現(xiàn)。但是康士維錯覺影響到整個區(qū)域。
在康士維錯覺中，較亮部分的邊緣顯得更亮，較暗部分顯得更暗。這統(tǒng)一般的「對比結(jié)果」是相反的。

11. 米勒-萊爾錯覺

筆墨亦瘋狂！

△ 對于「視覺補正」最直觀的感知

字體設(shè)計師都知道，創(chuàng)造一個字體更多依靠直覺，而非邏輯思考。排字時若遵循數(shù)學(xué)意義的正確，基于它的公制高度，會使得整個單詞視覺上顯得不成比例。關(guān)于「字體力學(xué)」的一個樣例中，引入了一個叫「視覺補正」的概念。簡而言之，所謂補正即重新調(diào)整單獨字體大小，以求得視覺結(jié)果上的平衡感。