視錯覺是指在視覺感知上與客觀物理不一緻的現象。人的大腦在接受視覺系統傳遞而來的信息後，經過綜合地進行對比和分析，會盡可能地做出正确的判斷，但是，當信息不夠充足或者受到錯誤幹擾時，就會出現視覺上的形态與客觀物理上的形态不一緻的現象，也就會産生視錯覺。

一、常見的視錯覺

△ 波根多夫（Poggendorff）錯覺

一條直線穿過一個矩形後，在矩形的兩側，線段感覺上下錯開了。

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

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

△ 菲克（Fick）錯覺

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

△ 艾賓浩斯（Ebbinghaus）錯覺

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

△ 托蘭斯肯彎曲錯覺

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

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

二、設計中的視錯覺與解決方法在設計當中，也存在視錯覺，當出現視錯覺的時候就需要以看到的實際效果就是以視覺為基準，去調整設計，以達到在視覺上的完美。請跟随筆者從文字、圖形、顔色這個三個大的方面去了解有哪些具體的實例。

1. 文字

漢字和數字的組合場景

在金融和電商領域的設計中，經常會出現數字和漢字共存的情況，但是漢字和數字的設計原理是不一樣的，漢字是按照田字格來設計的，數字是按照英文的設計規則來設計的，相同字号的漢字和數字排列在一起，數字會顯得小一些。這時候就需要手動去調整數字或者漢字其中之一的字号大小，以達到視覺上的大小平衡。

調整之後由于數字字号更大，所以數字的筆劃會粗于漢字筆劃，但是沒關系，這樣正好能平衡漢字和數字的字重。因為數字筆劃結構較簡潔，漢字筆劃相對複雜，字重較重。

調整方法可能适用的場景

但是這種調整方法也需要考慮使用場景，調整字号的方法比較适合用在海報、banner等内容是固定展示的設計中，也可以用在活動 h5 等内容相對固定的設計中，在 app 和網頁中如果是數字和漢字的固定搭配也可以應用，但是需要根據具體的情況來靈活應用。

字體設計

橫粗豎細錯覺在字體設計中的體現

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

△ 融360品牌形象不同漢字之間、漢字和數字英文之間的字體筆劃數量和複雜度差别很大，解決方法就是筆劃多複雜的字體筆劃變細，筆劃少簡潔的字體筆劃加粗，以此來平衡字重。看上圖的實例，公司的品牌形象，在視覺感受上「融」和「360」的筆劃粗細是平衡的，但其實品牌設計的同學是調整過漢字和數字的筆劃粗細的。

在出現傾斜交錯筆劃時需要注意調整筆劃，以防止出現波根多夫錯覺。

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

2. 圖形

icon 的物理尺寸和視覺調整

△ android 和 iOS 圖标規範

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

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

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

怎麼去調整它們的大小，讓它們在視覺上大小接近呢？有一個規律就是越接近方形的圖标視覺感受越大，按照這個規律調整後如上圖。

調整後，直接觀察好像不能直觀的發現大小差異，那麼如何去檢驗是否在視覺上達到平衡呢，這裡可以通過整體觀察（眯眼大法）的方法，感受圖形的整體面積大小，不要被圖形的邊緣所影響。或者直接模糊這些圖形也可以達到同樣的效果。

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

但是經過模糊後我們發現其實他在視覺上是平衡的，這其實可能是因為論壇 icon 内的雙引号是粗于其他 icon 内的筆劃。這告訴我們按照圖形外輪廓調整大小也需要綜合考慮 icon 的内部元素的複雜度，面積等因素，必須經過視覺平衡的檢驗，不能死闆的套用方法。

物理曲線和自然曲線

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

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

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

物理對齊和視覺對齊

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

在上圖中兩根線條和兩個矩形的間距是一樣的，但是在對比的作用下産生了線條之間的距離要大于矩形之間的距離的錯覺，這是因為在粗細的對比作用下矩形之間的距離更小。這個錯覺經常出現在輸入框按鈕共存和信息圖表的的設計中。

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

3. 色彩

對比下的顔色色差

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

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

同一個顔色在不同顔色背景上，在視覺感受上像是不同的顔色，上圖中左邊兩個前景色都是同樣的黃色，但是在不同顔色的背景上視覺感受不同，在粉色背景上黃色發綠，所以在這種情況下需要調整前景顔色，經過調整後如右邊，兩個黃色在視覺感受上才是同樣的黃色。

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

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

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

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

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

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

色重

不同顔色在視覺感受上的重量不同，典型的例子就是奧運五環的标志，看起來簡單的奧運五環其實經過了大量的視覺調整，其中黑色過于黑重，進行了弱化，其次黃色因為視覺重量過輕，所以加粗了一些。

小結

由于人眼在特殊情況下會産生視錯覺，設計工具也有局限性，正因為這兩點，經常會出現一些在設計上的視覺誤差。出現這種視覺誤差時就需要手動以視覺感受為基準去調整設計，以達到設計在視覺上的平衡和完美。但是在調整時需要注意實際情況靈活的去實現調整。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!