干產(chǎn)品設(shè)計這幾年更米，在視覺工作中我碰上過許多令人驚奇的效果，讓人不得不各種 ??????????低矮。
寫這篇文章目的，是幫助大家理解這些讓人抓狂的效果背后潛藏的原理庆捺。你可能尚未意識到，從事界面屁魏，logo 或插畫設(shè)計時采用的很多技巧滔以，其實(shí)源于「視錯覺」。
閑話少敘氓拼，這里是常見的11個視錯覺案例你画。
1. 三角形分割錯覺
選一點(diǎn)，任選一點(diǎn)桃漾，來不來坏匪？
基于質(zhì)心對齊的三角形
圖標(biāo)可能是有誤導(dǎo)性的喲，特別是由復(fù)雜幾何體或怪異形狀構(gòu)成的那種撬统。一套圖標(biāo)里适滓，并非每個都對稱，像素級完美或者保持固定寬高比恋追。有的圖標(biāo)需要手動調(diào)整凭迹，尤其是，魔性的播放按鈕苦囱！
將一個三角形置于 圓角/直角 矩形邊框中嗅绸，可能會使它看起來居中位置不對。造成這個現(xiàn)象的原因被稱為「三角形分割錯覺」沿彭。三角形質(zhì)心是基于最小外接矩形的朽砰。所以，如果你打算把一個點(diǎn)放到等邊三角形高度一半的位置喉刘，你會發(fā)現(xiàn)它看起來要超過一半瞧柔。
哪個才是數(shù)學(xué)意義上的居中呢
這個魔性的錯覺基于兩個理論：
固定縮放比例不對
這個錯覺暗含了透視關(guān)系，增加了遠(yuǎn)距離物體 (比如三角形) 的可觀測大小睦裳，就如同在平面透視中看一條道路造锅，頂點(diǎn)在無限遠(yuǎn)，而底邊就像道路最近的部分廉邑。
重心/中心
如果一名觀察者被要求找出中點(diǎn)哥蔚，他最終會找出質(zhì)心來，因?yàn)橘|(zhì)心上下區(qū)域相等蛛蒙。等邊三角形的質(zhì)心在它的中點(diǎn)下方糙箍，有證據(jù)表明觀察者會在這兩者之間妥協(xié)抉擇。
為了使矩形中的三角形視覺居中牵祟，你可能需要通過計算等邊三角形腰的中點(diǎn)與對角頂點(diǎn)連線的交點(diǎn)深夯，來找出三角形的質(zhì)點(diǎn)。以下是公式：
計算三角形質(zhì)點(diǎn)的公式
開玩笑的诺苹，這不是一篇關(guān)于幾何公式的文章 (但公式本身是正確的)咕晋。
質(zhì)點(diǎn)可以被定位在每條邊 1/3 處和對邊頂點(diǎn)的連線。這個方式也適用于很多其他形狀收奔。
2. 垂直水平錯覺
這是矩形嗎掌呜？還是長方形？不坪哄，是一個正方形质蕉？
垂直水平錯覺
正方形是構(gòu)成任何設(shè)計系統(tǒng)的基石。你在 Google, Facebook, Pinterest和Dribbble 都能夠看到它們的身影翩肌。
在 sketch 里按住 shift 鍵畫出一個正方形饰剥，有時你想看一眼以確認(rèn)每條邊都是相等的。如果足夠仔細(xì)摧阅，那垂直邊看起來似乎比水平邊要長一些汰蓉，更像一個長方形。但實(shí)際上棒卷，它確實(shí)是 1:1 的正方形顾孽。這就是所謂的「垂直水平錯覺」。
讓人著迷的是—不同的文化與性別對這個視錯覺的感知比规，是不一樣的若厚。居住在發(fā)達(dá)城市城市的人往往比生活在農(nóng)村的人更容易受到影響。這是因?yàn)檗r(nóng)村地區(qū)往往更習(xí)慣于生活在圓形的房屋里蜒什。
3. 馬赫帶效應(yīng)
一個「并不存在」的陰影投射到物體表面测秸，會不會是錯覺？
馬赫帶
把同色的漸變毗鄰擺放是一個常見的扁平化設(shè)計手法。仔細(xì)看霎冯，你可能注意到一個「并不存在」的陰影出現(xiàn)在兩個對比色塊相接的邊緣铃拇。這個視錯覺被稱作「馬赫帶」。圖像并未加入陰影沈撞，只是我們的眼睛產(chǎn)生了錯覺而已慷荔。
每行的邊緣都出現(xiàn)了陰影
從技術(shù)層面解釋這個現(xiàn)象成因即是生物學(xué)上的「側(cè)抑制」，通俗的說就是暗的一側(cè)顯得更暗缠俺，亮的一側(cè)顯得更亮显晶。
雖然馬赫帶效應(yīng)在視覺設(shè)計中十分細(xì)微，不過論及它的影響壹士，即便是牙醫(yī)都對其感到頭疼磷雇。X射線照射到牙齒上生成灰度圖像，用來解析 (牙齒) 異常變化的強(qiáng)度躏救。如果不仔細(xì)辨別唯笙，馬赫帶效應(yīng)可能會產(chǎn)生假陽性診斷結(jié)果。
4. 赫林錯覺
看起來像活的落剪！
赫林錯覺
你有未遇見過這種 logo：包含很多細(xì)線條或者布滿小點(diǎn)的背景圖睁本，當(dāng)你上下滾動頁面時它看起來像是在移動或者像脈搏一樣跳動？又或者說在某視頻中出現(xiàn)的電視忠怖，電視屏幕里包含的諸多波浪線呢堰？若如此，是由于「摩爾紋」的干涉現(xiàn)象—兩種柵格紋理相互覆蓋凡泣，移動時產(chǎn)生的視錯覺枉疼。
案例中的兩個柵格紋理分別是圖像和持續(xù)刷新的顯示器，從而產(chǎn)生了錯覺鞋拟。
上下滾動骂维，即可看到震顫效果
還蠻酷的。雖然摩爾本身并非指代視錯覺贺纲，而是干涉圖案航闺。此處 Sonos 標(biāo)志樣例使用了包括摩爾圖案，赫林錯覺和動視錯覺的手法組合猴誊。這種感官技術(shù)在歐普藝術(shù) (又稱視幻藝術(shù)) 中非常流行潦刃。
5. 赫曼柵格
出現(xiàn)，抑或不現(xiàn)懈叹，這是個問題乖杠。
赫曼柵格
赫曼柵格非常受歡迎，你可以在很多高對比度背景的柵格布局中發(fā)現(xiàn)它的身影澄成。直接盯著任意方塊胧洒，在周圍方塊的交叉口會產(chǎn)生幽靈般的斑點(diǎn)畏吓。但當(dāng)你嘗試轉(zhuǎn)向那個斑點(diǎn)時，它就會神奇的消失掉 ?? 卫漫。
當(dāng)你盯著交叉口時菲饼，灰點(diǎn)會出現(xiàn)
產(chǎn)生這個效果的原因呢—和前邊一樣—「側(cè)抑制」。簡單來說汛兜，即是興奮狀態(tài)的神經(jīng)元可以削弱周圍神經(jīng)元方向上的視訊號巴粪。
6. 同時對比錯覺
兩個分開的方塊亮度相同嗎通今？
同時對比錯覺
把兩個同色的物體分別放在不同對比度的背景色上粥谬，會使兩個物體呈現(xiàn)出不同的顏色。這種現(xiàn)象被稱為「同時對比錯覺」辫塌。在視覺設(shè)計世界中漏策，這種現(xiàn)象號稱「對比之王」，而且這個效果對于不同人可能看起來不同臼氨。
文字色彩完全相同, 但是看起來卻并非如此
這種現(xiàn)象成因沒有科學(xué)定論掺喻，但有很多相關(guān)探索〈⒕兀「側(cè)抑制」—同赫曼柵格與馬赫帶一樣—也被認(rèn)為是此現(xiàn)象成因之一感耙。
7. 芒克白錯覺
是眼睛忽悠了我嗎？
芒克白錯覺
這個錯覺相當(dāng)細(xì)微持隧，卻迷人無比即硼。看上圖屡拨，左側(cè)的紫色塊看起來比右邊的明度要高一些只酥。但是合并之后，兩側(cè)的色塊其實(shí)明度是完全一致的 ?? 呀狼。
芒克白錯覺的成因嘛裂允，你猜猜看？
恩哥艇，還是「側(cè)抑制」绝编。
8. 水彩錯覺
欺騙性上色……
水彩錯覺
有幾次，當(dāng)我給一個形狀加上色彩邊框時貌踏，不禁奇怪：“我什么時候把背景色也給改了十饥？”。如果仔細(xì)看哩俭，可能注意到白色區(qū)域產(chǎn)生了與邊框相同但是淡得多的投影绷跑。但，你其實(shí)知道那些淡色投影區(qū)域?qū)嶋H上是白色的凡资！
這個現(xiàn)象被稱作「水彩錯覺」砸捏，色彩的擴(kuò)散效果取決于輪廓線亮度與對比度的組合谬运。
按鈕內(nèi)的白色區(qū)域看起來像是被邊框染了些許顏色
我承認(rèn)被這個錯覺誤導(dǎo)過不少回—以至于我調(diào)出了拾色器來檢查它。
9. 加斯特羅圖形
Size 真的很重要嗎垦藏？
加斯特羅圖形
插畫或 logo 設(shè)計中梆暖，會遇到標(biāo)志或字體需切割成不同形狀的情況。上圖的錯覺會在設(shè)計對象是弧形時發(fā)生掂骏。此二元素看著大小不同轰驳，但仔細(xì)檢查一下就會發(fā)現(xiàn)，它們完全一樣弟灼！
工作在一幅插畫或 logo 上级解，不論是個標(biāo)志或字體需要切割成不同的形狀。這個錯覺在工作對象是弧形時就會發(fā)生田绑。此二元素看起來大小不同勤哗，但是仔細(xì)檢查一下就會發(fā)現(xiàn)，它們完全一樣掩驱！是不是有點(diǎn)脫線芒划？
這幅插畫在創(chuàng)作過程中，一些本應(yīng)相同的圓弧卻看起來比其他的要小
怎么可能欧穴？其實(shí)這便是周知的「加斯特羅圖形」民逼，也沒有確定的科學(xué)解釋，為什么我們看到各部分大小不同涮帘。一個可能的緣由是拼苍，我們大腦被大小半徑的差異迷惑了。換句話說焚辅，短邊襯托使長邊顯得更長映屋，而長邊襯托使短邊顯得更短。
10. 康士維錯覺
狡猾的斜面同蜻。
康士維錯覺
「康士維錯覺」用了漸變的同時棚点，也加入了中心線來創(chuàng)造一個圖像，使其一邊比另一邊要暗湾蔓。但事實(shí)是瘫析，兩邊是一樣的！當(dāng)你把每個部分平行排放時默责，就會發(fā)現(xiàn)兩邊實(shí)際上完全相同贬循。
每個菱形都有同樣的漸變，但是它們整體看起來越來越暗 (從上而下)
這個視錯覺與之前提過的兩個有相似之處桃序，但有兩個重要的不同：
1.在馬赫帶效應(yīng)的示例中杖虾，效果只在接近色塊邊緣處才出現(xiàn)。但是康士維錯覺影響到整個區(qū)域媒熊。
2.在康士維錯覺中奇适，較亮部分的邊緣顯得更亮坟比，較暗部分顯得更暗。這同一般的「對比效果」是相反的嚷往。
11. 米勒-萊爾錯覺
文字亦瘋狂葛账！
對于「視覺補(bǔ)正」最直觀的感知
字體設(shè)計師都知道，創(chuàng)造一個字體更多依賴直覺皮仁，而非邏輯思考籍琳。排字時若遵循數(shù)學(xué)意義的精確，基于它的公制高度贷祈，會使得整個單詞視覺上顯得不成比例趋急。關(guān)于「字體力學(xué)」的一個樣例中，引入了一個叫「視覺補(bǔ)正」的概念付燥。簡而言之宣谈，所謂補(bǔ)正即重新調(diào)整單獨(dú)字體大小愈犹，以求得視覺效果上的平衡感键科。
沒有視覺補(bǔ)正的話，Linkedin 中的字母 “e” 和 Amazon 中的字母 “z” 就無法視覺平衡
看看上邊這些著名的 logo漩怎，一些字母并未乖乖待在基線和X高度里勋颖。字體設(shè)計師不得不手動調(diào)整每個字母以便達(dá)到最佳視覺效果。
我們何以需要在字體設(shè)計中運(yùn)用補(bǔ)正勋锤？
因?yàn)槊桌?萊爾錯覺饭玲。這個視覺現(xiàn)象表明將一個V型記號放到線段兩端可能造成其顯得比實(shí)際更短或更長，(長短) 取決于V型記號的朝向叁执。這個經(jīng)典的錯覺證明了人類感知錯誤茄厘。
原文鏈接：非科班出身
