視錯覺是指在視覺感知上與客觀物理不一致的現(xiàn)象。人的大腦在接受視覺系統(tǒng)傳遞而來的信息后，經(jīng)過綜合地進(jìn)行對比和分析，會盡可能地做出正確的判斷，但是，當(dāng)信息不夠充足或者受到錯誤干擾時，就會出現(xiàn)視覺上的形態(tài)與客觀物理上的形態(tài)不一致的現(xiàn)象，也就會產(chǎn)生視錯覺。

一、常見的視錯覺

△ 波根多夫（Poggendorff）錯覺

一條直線穿過一個矩形后，在矩形的兩側(cè)，線段感覺上下錯開了。

△ 繆勒—萊依爾（Müller-Lyer）錯覺

上面的橫線與下面中間的橫線是等長的，但看起來下面的橫線比上面的要長。

△ 菲克（Fick）錯覺

垂直線與水平線是等長的，但實際看起來垂直線比水平線長。

△ 艾賓浩斯（Ebbinghaus）錯覺

中間的兩個圓面積相等，但看起來左邊中間的圓大于右邊中間的圓。

△ 托蘭斯肯彎曲錯覺

這三個圓弧看起來彎曲度差別很大，但實際它們的彎曲度完全一樣，只是長度不一致而已。

通過這些經(jīng)典的視錯覺我們發(fā)現(xiàn)，原本一樣的長度、一樣的寬度、一樣的面積在有些特殊情況下視覺看到的和客觀實際是不一樣的。這是因為人類的視覺系統(tǒng)是一個基于經(jīng)驗和感覺的系統(tǒng)，不是精準(zhǔn)的物理紀(jì)錄和反饋的系統(tǒng)，所以在一定的情況下視覺觀察到的和實際會有所偏差。

二、設(shè)計中的視錯覺與解決方法

在設(shè)計當(dāng)中，也存在視錯覺，當(dāng)出現(xiàn)視錯覺的時候就需要以看到的實際效果就是以視覺為基準(zhǔn)，去調(diào)整設(shè)計，以達(dá)到在視覺上的完美。請跟隨筆者從文字、圖形、顏色這個三個大的方面去了解有哪些具體的實例。

1. 文字

漢字和數(shù)字的組合場景

在金融和電商領(lǐng)域的設(shè)計中，經(jīng)常會出現(xiàn)數(shù)字和漢字共存的情況，但是漢字和數(shù)字的設(shè)計原理是不一樣的，漢字是按照田字格來設(shè)計的，數(shù)字是按照英文的設(shè)計規(guī)則來設(shè)計的，相同字號的漢字和數(shù)字排列在一起，數(shù)字會顯得小一些。這時候就需要手動去調(diào)整數(shù)字或者漢字其中之一的字號大小，以達(dá)到視覺上的大小平衡。

調(diào)整之后由于數(shù)字字號更大，所以數(shù)字的筆劃會粗于漢字筆劃，但是沒關(guān)系，這樣正好能平衡漢字和數(shù)字的字重。因為數(shù)字筆劃結(jié)構(gòu)較簡潔，漢字筆劃相對復(fù)雜，字重較重。

△ 調(diào)整方法可能適用的場景

但是這種調(diào)整方法也需要考慮使用場景，調(diào)整字號的方法比較適合用在海報、banner等內(nèi)容是固定展示的設(shè)計中，也可以用在活動 h5 等內(nèi)容相對固定的設(shè)計中，在 app 和網(wǎng)頁中如果是數(shù)字和漢字的固定搭配也可以應(yīng)用，但是需要根據(jù)具體的情況來靈活應(yīng)用。

字體設(shè)計

△ 橫粗豎細(xì)錯覺在字體設(shè)計中的體現(xiàn)

在字體設(shè)計中也會存在視錯覺。需要注意以下幾點，因為「橫粗豎細(xì)」錯覺的存在，所以在需要設(shè)計橫和豎筆劃粗細(xì)相同的字體時，需要調(diào)整橫或者豎的粗細(xì)。如上圖中黑體「王」字橫的筆劃細(xì)于豎的筆劃。

△ 融360品牌形象

不同漢字之間、漢字和數(shù)字英文之間的字體筆劃數(shù)量和復(fù)雜度差別很大，解決方法就是筆劃多復(fù)雜的字體筆劃變細(xì)，筆劃少簡潔的字體筆劃加粗，以此來平衡字重?？瓷蠄D的實例，公司的品牌形象，在視覺感受上「融」和「360」的筆劃粗細(xì)是平衡的，但其實品牌設(shè)計的同學(xué)是調(diào)整過漢字和數(shù)字的筆劃粗細(xì)的。

在出現(xiàn)傾斜交錯筆劃時需要注意調(diào)整筆劃，以防止出現(xiàn)波根多夫錯覺。

純英文的標(biāo)題設(shè)計或 logo 設(shè)計需要注意視覺調(diào)整，因為同等大小的圓形和方形，方形會顯得大一些，所以需要微調(diào)，把接近方形的字母縮小一點，或者把接近圓形的字母放大一點。

2. 圖形

icon 的物理尺寸和視覺調(diào)整

△ android 和 iOS 圖標(biāo)規(guī)范

盡管谷歌和蘋果都提供了給設(shè)計師參考的 icon 繪制輔助圖形，但是由于輔助圖形僅提供了圓形、正方形和長方形這幾類常見的 icon 形狀，但是在設(shè)計中難免會有一些異形的 icon，這時候輔助圖形提供的幫助就非常有限了。那么在有很多形狀的 icon 并存時怎么確保它們的視覺大小相同呢？

其實幾乎所有的 icon 都可以歸類為有規(guī)律的圖形，比如長方形、圓形、菱形、三角形等等，平衡好這些圖形的視覺大小，就可以平衡好各種異形 icon 的視覺大小。

icon 總體的圖形輪廓可以大體歸類為以上幾種。上圖中的圖形物理尺寸一樣，但是在視覺上它們的大小差異很大。

怎么去調(diào)整它們的大小，讓它們在視覺上大小接近呢？有一個規(guī)律就是越接近方形的圖標(biāo)視覺感受越大，按照這個規(guī)律調(diào)整后如上圖。

調(diào)整后，直接觀察好像不能直觀的發(fā)現(xiàn)大小差異，那么如何去檢驗是否在視覺上達(dá)到平衡呢，這里可以通過整體觀察（瞇眼大法）的方法，感受圖形的整體面積大小，不要被圖形的邊緣所影響?；蛘咧苯幽：@些圖形也可以達(dá)到同樣的效果。

舉個例子，來檢驗下整體觀察方法的有效性。如上圖這四個 icon，用剛才的調(diào)整規(guī)律來看，好像圓形的論壇 icon 不符合我們所說的圓在視覺上顯得小應(yīng)該放大的規(guī)律。

但是經(jīng)過模糊后我們發(fā)現(xiàn)其實他在視覺上是平衡的，這其實可能是因為論壇 icon 內(nèi)的雙引號是粗于其他 icon 內(nèi)的筆劃。這告訴我們按照圖形外輪廓調(diào)整大小也需要綜合考慮 icon 的內(nèi)部元素的復(fù)雜度，面積等因素，必須經(jīng)過視覺平衡的檢驗，不能死板的套用方法。

物理曲線和自然曲線

上圖中左邊的是 superllipse 圖形，就是常說的 Lamé curve，是法國數(shù)據(jù)家 Gabriel Lamé 發(fā)現(xiàn)的。它相比右邊用ps直接繪制的圓角矩形看起來更平滑自然，右邊的圓角矩形看起來直線和曲線的接口處會有個小「突角」，并且四個邊的直線中間會有凹陷的感覺。

那么我們怎么在設(shè)計軟件中去手動調(diào)整圓角而獲得一個更加自然的圓角矩形呢？原理就是調(diào)整直線和曲線過渡的地方，按照上圖所示的方式手動調(diào)整曲線，調(diào)整過后的圓角更圓潤了。sketch 最新版本現(xiàn)已加入了直接繪制平滑圓角的功能。

這種方法同樣也適用于圓形按鈕。

物理對齊和視覺對齊

軟件的對齊方式也有局限性，典型的例子就是播放按鈕。這種中心是一個類似三角形或者不規(guī)則圖形時，軟件對齊會顯得很怪異。這是因為軟件會把兩個圖形放在2個矩形內(nèi)，去對齊這2個矩形，產(chǎn)生的結(jié)果就是在視覺上并沒有對齊。解決辦法就是把三角形放在一個圓形的框內(nèi)，用圓和矩形去對齊，這樣三角形在視覺上才是居中對齊。不規(guī)則圖形則需要手動調(diào)整，以達(dá)到在視覺上的對齊。

在上圖中兩根線條和兩個矩形的間距是一樣的，但是在對比的作用下產(chǎn)生了線條之間的距離要大于矩形之間的距離的錯覺，這是因為在粗細(xì)的對比作用下矩形之間的距離更小。這個錯覺經(jīng)常出現(xiàn)在輸入框按鈕共存和信息圖表的的設(shè)計中。

上圖中左邊輸入框和按鈕高度是相同的，但看起來圓形按鈕高度小于輸入框，（視覺上方大于圓）。這時候可以調(diào)整按鈕的大小，擴(kuò)大圓按鈕，或者在允許的情況下將按鈕替換成實心的。

3. 色彩

對比下的顏色色差

同樣的色值，大面積與小面積應(yīng)用，給人的視覺感受是完全不同的。當(dāng)色彩以大面積應(yīng)用時，會有明度變高的錯覺，而小面積的應(yīng)用環(huán)境中，明度變低。為了使色彩在大面積與小面積下給人的印象一致，我們需要調(diào)整其中一方的明度高低，以此來平衡不同面積應(yīng)用時色彩給人帶來的錯覺。

上圖左邊純白文字在紅色背景的對比下白字顯得發(fā)藍(lán)，給文字加入一點藍(lán)色的對比色黃色，整體感覺更加白，如右圖。

同一個顏色在不同顏色背景上，在視覺感受上像是不同的顏色，上圖中左邊兩個前景色都是同樣的黃色，但是在不同顏色的背景上視覺感受不同，在粉色背景上黃色發(fā)綠，所以在這種情況下需要調(diào)整前景顏色，經(jīng)過調(diào)整后如右邊，兩個黃色在視覺感受上才是同樣的黃色。

同樣粗細(xì)的線條，在黑色背景中的白色線條因為白色的擴(kuò)張感受，會顯得比實際更粗，而在白色上的黑色線條因為黑色有收縮感，會顯得比實際更細(xì)。

所以在 logo 反白或者制作墨稿時需要進(jìn)行手動調(diào)整筆劃粗細(xì)，以達(dá)到在視覺感受上和原稿相同。上圖最左邊是原稿，中間圖是直接反白后的效果。logo 在視覺上變得比實際更粗了，經(jīng)過視覺調(diào)整后的右圖，在視覺上和原稿接近。

色彩的物理面積和視覺面積

顏色在視覺上具有「收縮」和「擴(kuò)張」的特性，致使我們覺得某些顏色在視覺感受上的面積和真實的物理面積不同。這是由于顏色的色相和明度造成的，暖色系的黃色在視覺上具有擴(kuò)張感，冷色系的藍(lán)色具有收縮感，在同色系下，明度高的顏色具有擴(kuò)張感，相比之下明度低的顏色具有收縮感。

正是由于這個原因上圖中淺黃色的面積視覺感受上最大，深藍(lán)色的面積視覺感受上最小。

舉個例子，法國國旗最初設(shè)計時，國旗上的三條色帶寬度完全相等。但是，當(dāng)制成的國旗升到空中后，人們總覺得這三種顏色在國旗上所占的分量不相等，似乎白色的面積最大，藍(lán)色的最小。為此，設(shè)計者們專門招集色彩專家進(jìn)行分析，才發(fā)現(xiàn)這與色彩視覺感受有關(guān)。當(dāng)把這三色的真實面積比例調(diào)整為藍(lán)：白：紅=30：33：37時，看上去反而相等了。（可是法國革命后于1853年5月17日，這面旗又被拿破侖下令改為相等寬度，但海軍軍旗沒有改動，繼續(xù)使用 30:33:37 比例的三色旗）。

色重

不同顏色在視覺感受上的重量不同，典型的例子就是奧運五環(huán)的標(biāo)志，看起來簡單的奧運五環(huán)其實經(jīng)過了大量的視覺調(diào)整，其中黑色過于黑重，進(jìn)行了弱化，其次黃色因為視覺重量過輕，所以加粗了一些。

小結(jié)

由于人眼在特殊情況下會產(chǎn)生視錯覺，設(shè)計工具也有局限性，正因為這兩點，經(jīng)常會出現(xiàn)一些在設(shè)計上的視覺誤差。出現(xiàn)這種視覺誤差時就需要手動以視覺感受為基準(zhǔn)去調(diào)整設(shè)計，以達(dá)到設(shè)計在視覺上的平衡和完美。但是在調(diào)整時需要注意實際情況靈活的去實現(xiàn)調(diào)整。

歡迎關(guān)注作者的微信公眾號：「融360RUX」

圖片素材作者：Doeun shin

「看高手如何解決視錯覺」

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

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備： http://hao.uisdc.com