版式和字體設(shè)計(jì)中的人眼視錯(cuò)覺(jué)

原文作者：Martin_K

什么是視錯(cuò)覺(jué)

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

事物在眼中的呈現(xiàn)

如圖所示，正常情況下人眼對(duì)所看到事物的呈現(xiàn)，當(dāng)人眼直視正前方的時(shí)候，只有中間位置的是最清楚的，而兩邊則是相對(duì)模糊的，同時(shí)也比較容易產(chǎn)生視錯(cuò)覺(jué)，而視錯(cuò)覺(jué)的原因除來(lái)自客觀刺激本身特點(diǎn)的影響外，還有觀察者生理上和心理上的原因。在設(shè)計(jì)中最常見(jiàn)的就是視覺(jué)方面的錯(cuò)覺(jué)，而錯(cuò)視覺(jué)對(duì)版式，字體的大小，間距等等都會(huì)有影響。

常見(jiàn)的視錯(cuò)覺(jué)類型

1、萊依爾錯(cuò)覺(jué)

左邊中間的線段與右邊中間的線段是等長(zhǎng)的，但看起來(lái)左邊中間的線段比右邊的要長(zhǎng)，也稱為繆勒—萊依爾（Müller Lyer）錯(cuò)覺(jué)。其原理是因?yàn)閮蛇叿?hào)的方向變化，當(dāng)兩個(gè)符號(hào)的方向發(fā)生變化時(shí)，其視覺(jué)也會(huì)隨之發(fā)生變化。

2、菲克錯(cuò)覺(jué)

垂直線與水平線是等長(zhǎng)的，但看起來(lái)垂直線比水平線長(zhǎng)，也稱為菲克（Fick）錯(cuò)覺(jué)；從視覺(jué)角度來(lái)講時(shí)因?yàn)槿搜鄣囊曈X(jué)中心點(diǎn)在豎線中間的位置，而橫豎鏈接處容易給人一種一分為二的錯(cuò)覺(jué)，故在視覺(jué)感知上會(huì)認(rèn)為豎比橫線長(zhǎng)。

3、艾賓浩斯錯(cuò)覺(jué)

中間的兩個(gè)圓面積相等，但看起來(lái)左邊中間的圓大于右邊中間的圓；稱為艾賓浩（Ebbinghaus）錯(cuò)覺(jué)。其原理是因?yàn)橛胁划?dāng)?shù)膮⒄諏?dǎo)致視覺(jué)感覺(jué)偏差，中心圓雖然是相同的大小，但由于外圍參照物的對(duì)比，使得人眼在感知的時(shí)候發(fā)生了錯(cuò)覺(jué)。

字體中的視覺(jué)感受

在字體設(shè)計(jì)中，人們對(duì)信息的閱讀順序一般可以分為以上三種感知，在設(shè)計(jì)時(shí)針對(duì)文字通常要考慮到這些習(xí)慣性的閱讀感知，進(jìn)而對(duì)畫(huà)面中的元素進(jìn)行調(diào)整，避免視錯(cuò)覺(jué)的產(chǎn)生，以達(dá)到舒適閱讀的效果。

左輕右重

在相同大小的兩個(gè)縱向矩形中，按照視覺(jué)先左后右的觀看順序，當(dāng)我們第一眼看到左邊的矩形時(shí)會(huì)感覺(jué)比右邊的要窄一些，這是因?yàn)槿搜鄣牡谝桓兄ǔＲ茸詈蟮母兄俣瓤飚?dāng)兩個(gè)矩形放在一起時(shí)會(huì)有對(duì)比的心里，在視覺(jué)上會(huì)感覺(jué)左邊的比右邊的小一些，但實(shí)際上兩個(gè)是相同大小的。

上輕下重

在同樣大小的兩個(gè)長(zhǎng)方形中也會(huì)出現(xiàn)同樣的問(wèn)題，從視覺(jué)的感知來(lái)說(shuō)，上面的要比下面的感覺(jué)細(xì)一些，顏色也要深一些，當(dāng)，這種微妙的差距在設(shè)計(jì)中是普遍的存在，人眼的視覺(jué)重心通常會(huì)在兩個(gè)長(zhǎng)方形的中間靠下一些，對(duì)于上面的長(zhǎng)方形視覺(jué)的感知稍微要弱一些而下面的則感覺(jué)要重一些或者寬一些，顏色也會(huì)深一些，這些就是視錯(cuò)覺(jué)的感知，在設(shè)計(jì)中需要進(jìn)行調(diào)整，盡量避免元素和字體的視覺(jué)偏差。

橫重豎輕

當(dāng)兩個(gè)大小的矩形橫豎排列在一起時(shí)，橫向的要比縱向的在視覺(jué)感知上面略寬一些，通常情況下橫向的會(huì)給人一種厚重的感覺(jué)，而縱向的則是要偏瘦長(zhǎng)一些，這也是心里感知的一種感知，最有特點(diǎn)的宋體就是經(jīng)過(guò)這點(diǎn)的視覺(jué)調(diào)整，才有了較為舒適的橫細(xì)豎粗的鮮明特點(diǎn)。

版式中的幾何錯(cuò)覺(jué)

如圖所示：在版式中經(jīng)常會(huì)用到三種幾何圖形也存在一定的視覺(jué)差，經(jīng)典的幾何圖形視覺(jué)錯(cuò)，由于形狀的不同導(dǎo)致視覺(jué)面積的大小不一，在相同大小的情況下，矩形要比圓形和三角形的視覺(jué)面積大，矩形四周則是填充的比較滿，而圓形和三角形四周都有相應(yīng)的視覺(jué)留白，這種情況下就需要進(jìn)行適當(dāng)?shù)恼{(diào)整。

把圓和三角形進(jìn)行放大處理，規(guī)避掉圓和三角邊緣的虛化空間，使其實(shí)際視覺(jué)面積與矩形大小保持一致，這種方式就是運(yùn)用設(shè)計(jì)中的視錯(cuò)覺(jué)來(lái)營(yíng)造相同大小的圖形。

版式中的視覺(jué)差除了圖形與圖形之間，還存在于圖形與之間，尤其是與宋體之間的視錯(cuò)覺(jué)最為嚴(yán)重；如上面案例所示，右邊的線條與宋體在執(zhí)行系統(tǒng)左對(duì)齊之后，通過(guò)觀察會(huì)現(xiàn)，宋體字撇的視覺(jué)延伸與矩形之間，在視覺(jué)上看起來(lái)是沒(méi)有對(duì)齊的，存在一定的視覺(jué)誤差。

針對(duì)視錯(cuò)覺(jué)這一現(xiàn)象，我們需要從人眼感知的角度出發(fā)，對(duì)其進(jìn)行適當(dāng)?shù)囊曈X(jué)修正，左邊幾何圖形則是以矩形為基礎(chǔ)，把圓和三角向左邊移動(dòng)，而右邊案例則是把矩形向右移動(dòng)，規(guī)避字體視覺(jué)延伸的誤差。

實(shí)際應(yīng)用中的考究

1、字間距

人們?cè)陂喿x的時(shí)候，尤其是看書(shū)的時(shí)候通常會(huì)有兩種模式；一種是字閱讀，另一種是行閱讀；字閱讀相對(duì)比較偏向在舒適悠閑的環(huán)境下進(jìn)行閱讀，而行閱讀則是比較適合緊張快節(jié)奏的閱讀行為，對(duì)文字而言，閱讀的快慢均受字間距的影響，舒適的間距可以使用戶看起來(lái)更加的輕松。案例如下：

快緊慢松

如圖所示；除了宋體和黑體字體類型差別的影響之外，還有就是間距的問(wèn)題；左邊則是常規(guī)的字庫(kù)默認(rèn)的間距，而這個(gè)間距也不是唯一的標(biāo)準(zhǔn)，而是字體設(shè)計(jì)師在設(shè)計(jì)時(shí)所設(shè)的，不同類型的字體間距也不一樣；在正常間距的情況下，比較適合行閱讀；而右邊的則是在常規(guī)的基礎(chǔ)上放大了200，字與字之間的的空隙較大，給人喘息的機(jī)會(huì)，比較適合字閱讀的方式。

不管是行閱讀還是字閱讀，行距同樣也需要設(shè)計(jì)，可以根據(jù)不同的閱讀方式設(shè)定相應(yīng)大小的；左邊為自動(dòng)的行距，而右邊則是設(shè)置成30pt的行距，對(duì)于人眼閱讀的舒適性而言，右邊則是比較好的。

案例解析

在設(shè)計(jì)中我們通常會(huì)把主標(biāo)題的文字正常排列或者錯(cuò)亂的進(jìn)行排列，但字與字之間的距離都不會(huì)太松散，這樣處理有助于觀者能夠快速的了解所傳達(dá)的信息，而放大字間距在畫(huà)面中通常會(huì)當(dāng)作說(shuō)明性的文字或者修飾性的文字進(jìn)行編排，對(duì)于主題來(lái)說(shuō)則是進(jìn)一步說(shuō)明，通常是標(biāo)語(yǔ)口號(hào)之類的詞，案例如下：

新建一個(gè)畫(huà)布,以幾何圖形為主視覺(jué)，先對(duì)幾何圖形進(jìn)行顏色疊加，然后再對(duì)幾何圖形添加多層內(nèi)陰影效果，需要注意里面的雜色和等高線的調(diào)整。

調(diào)整出最重想要的效果之后，接下來(lái)就是開(kāi)始加文案信息來(lái)豐富畫(huà)面的視覺(jué)效果以及所要傳達(dá)的信息，為了表現(xiàn)出較強(qiáng)的視覺(jué)感，文字選擇了一款日文字體與畫(huà)面氣質(zhì)較為吻合，在正常的編排下，文字與幾何圖形存在一定的視錯(cuò)覺(jué)，以及文字間距也不是太理想，進(jìn)一步調(diào)整。

通過(guò)對(duì)比可以看出，右邊把文字的間距拉大了一些，并且把字體向下移動(dòng)規(guī)避與幾何圖形的視錯(cuò)覺(jué)，    把字間距和行間距調(diào)整基本一致的效果，增加文字之間的空隙，使版面更加的舒適，信息傳達(dá)更加有效；當(dāng)然這也不是固定的，具體調(diào)整與否則要根據(jù)具體案例而定。

2、中文和數(shù)字

在文字中最常見(jiàn)的視錯(cuò)覺(jué)就是中文和數(shù)字混合使用時(shí)，通常情況下中文都要比數(shù)字略大一些，當(dāng)進(jìn)行編排時(shí)需要注意調(diào)整數(shù)字或者文字的大小和重心，而有些字體在數(shù)字方面即使是默認(rèn)的間距也會(huì)略大一些；在中文和數(shù)字的混合使用中，由于中文是以方塊為基礎(chǔ)的，而數(shù)字的字符均為細(xì)長(zhǎng)，不適合用方塊的標(biāo)準(zhǔn)去做，通常會(huì)以英文的標(biāo)準(zhǔn)開(kāi)發(fā)，所以數(shù)字通常都會(huì)比中文要小一些，但視覺(jué)重心是不變的；在設(shè)計(jì)中也是通常會(huì)被忽略的細(xì)節(jié)之一。

以常用的蘋(píng)方黑體為例，在使用默認(rèn)常規(guī)的間距情況下，數(shù)字1和0之間的間距過(guò)大，這個(gè)時(shí)候如果需要使用默認(rèn)的間距時(shí)，則需要調(diào)整1和0之間的間距；而2和0之間的間距則屬于正常，但整體感覺(jué)也會(huì)過(guò)于松散，當(dāng)把間距進(jìn)行縮?。?0的時(shí)候，相對(duì)來(lái)說(shuō)在視覺(jué)上則要比默認(rèn)的間距更加舒適一些其原因主要是因?yàn)橹形囊蕴镒指駷樵O(shè)計(jì)基礎(chǔ)的原因?qū)е?，在使用時(shí)一定要注意調(diào)整，以達(dá)到視覺(jué)平衡的效果，避免軟件默認(rèn)的常規(guī)而忽略了人眼的視錯(cuò)覺(jué)，進(jìn)而影響人眼閱讀的舒適度。

如上圖所示：以蘋(píng)方字體為例，在正常的輸入中文和數(shù)字之后，數(shù)字以重心線為基礎(chǔ)，上下的邊距則要比中文的小一些，有點(diǎn)萎縮的感覺(jué)，看上起不太舒服；而經(jīng)過(guò)調(diào)整之后的一組字，則是增加了視錯(cuò)覺(jué)，并以視錯(cuò)覺(jué)的方式呈現(xiàn)出來(lái)，在視覺(jué)上看著是一樣大小，其實(shí)數(shù)字要?jiǎng)t要比中文大了一些，而且也略粗了一些；需要注意的就是在調(diào)整的時(shí)候，一定要按照重心線調(diào)整，切記要與上下邊距對(duì)齊。

如案例所示，在電商中或者金融行業(yè)中經(jīng)常會(huì)遇到文字和金額的組合，左邊的文字和數(shù)字都是字庫(kù)默認(rèn)的間距，由于字體的原因整體看上去間距稍微有點(diǎn)大，而數(shù)字也比文字要小一些，然后利用視錯(cuò)覺(jué)進(jìn)行調(diào)整。

可以直接選中單獨(dú)的數(shù)字進(jìn)行放大，但切忌放大之后數(shù)字的視覺(jué)中心會(huì)向上，這個(gè)時(shí)候需要向下調(diào)整－2px已達(dá)到視覺(jué)的平衡；另外也可以重新建立文本框調(diào)整到合適的大小即可。

如案例所示，在電商中或者金融行業(yè)中經(jīng)常會(huì)遇到文字和金融的組合，左邊的文字和數(shù)字都是字庫(kù)默認(rèn)的間距，由于字體的原因整體看上去間距稍微有點(diǎn)大，而數(shù)字也比文字要小一些，然后利用視錯(cuò)覺(jué)進(jìn)行調(diào)整之后，如右邊案例所示，調(diào)整之后的文字信息看上去更加的緊湊，而數(shù)字與中文在視覺(jué)上的大小也基本保持一致，但實(shí)際上整體的間距是縮小了一些，數(shù)字也放大了一些，以重心線為基礎(chǔ)，頂部與中文是一致的，底部則要比中文高一些，整體看過(guò)去更加的舒適，由于是廣告投放圖，可以是觀者更加快速的了解信息，給觀者一種緊迫感；調(diào)整的方法不限，可根據(jù)自己的習(xí)慣進(jìn)行操作。

3、字體設(shè)計(jì)

在字體設(shè)計(jì)中最常見(jiàn)的就是筆畫(huà)的粗細(xì)問(wèn)題，如中文宋體類型的字體就是最經(jīng)典的案例，橫豎同存的字體中，人眼通常會(huì)感覺(jué)橫筆較粗，故在宋體類型的字體中規(guī)避了視錯(cuò)覺(jué)的問(wèn)題，所以現(xiàn)在的字體設(shè)計(jì)通常會(huì)把橫細(xì)豎粗當(dāng)作專業(yè)術(shù)語(yǔ)來(lái)講，與人眼的第一感知?jiǎng)t是相反感覺(jué)；

如圖所示；當(dāng)我們把橫細(xì)豎粗的特點(diǎn)換成橫粗豎細(xì)的形式之后，從案例中可以看出，視覺(jué)較重的橫筆感覺(jué)更加粗壯； 經(jīng)過(guò)兩個(gè)案例對(duì)比可以看出，右邊則是橫細(xì)豎粗的宋體特點(diǎn)，在弱化視覺(jué)較粗的橫之后效果更加的舒適；當(dāng)然這種方式也不是固定的，需要根據(jù)不同的結(jié)構(gòu)進(jìn)行細(xì)微的調(diào)整。

在字體設(shè)計(jì)中使用相同粗細(xì)的筆畫(huà)營(yíng)造粗壯有力的感覺(jué)時(shí)，橫筆往往會(huì)感覺(jué)更加的厚重，而豎筆則會(huì)顯得細(xì)一些，為了規(guī)避這種筆畫(huà)的視錯(cuò)覺(jué)則需要把橫筆做相應(yīng)的調(diào)整。

把橫筆相應(yīng)的縮小4px或者6px，減小橫筆的視覺(jué)厚重感，使其在視覺(jué)上與橫筆保持一致，這樣看起來(lái)會(huì)讓字體更加舒適。

如案例所示：字體的設(shè)計(jì)在筆畫(huà)設(shè)定時(shí)使用橫細(xì)豎粗的原則，但橫筆只是是比豎筆細(xì)了5px左右，單個(gè)字的結(jié)構(gòu)則會(huì)比較大，否則會(huì)顯得非常擁擠，減少內(nèi)部留白，大大降低字體的識(shí)別度，但整體看起來(lái)感覺(jué)像是一樣的粗細(xì)，仔細(xì)觀察對(duì)比才會(huì)發(fā)現(xiàn)區(qū)別，這也是利用視錯(cuò)覺(jué)的原理進(jìn)行設(shè)計(jì)的，值得注意的是“購(gòu)”字左邊的偏旁如果全部使用相同粗細(xì)的豎筆則會(huì)連城一片沒(méi)有間隙，在這種情況下則需要相應(yīng)的細(xì)一些，保持字體的結(jié)構(gòu)清晰，在豎筆較多的字體中一定要注意豎筆的細(xì)微粗細(xì)調(diào)整。

還有一種情況就是，當(dāng)點(diǎn)遇見(jiàn)橫，或者是進(jìn)行創(chuàng)意的設(shè)計(jì)時(shí)也需要注意點(diǎn)與橫的視錯(cuò)覺(jué)。

如圖所示，兩組案例看起來(lái)基本上沒(méi)有什么差別，仔細(xì)觀察會(huì)發(fā)現(xiàn)上面的“創(chuàng)”字要比下面的“創(chuàng)”字扁一些，同時(shí)與左右兩個(gè)字的點(diǎn)相比則顯得高一些，這是因?yàn)楫?dāng)橫筆與點(diǎn)相遇時(shí)，由于點(diǎn)的視覺(jué)面積較小，而橫和豎的則大一些，在視覺(jué)上會(huì)顯得橫豎更高一些，這時(shí)就需要調(diào)整一下視覺(jué)上的平衡。

把兩組案例重疊之后，用不同的顏色展示就會(huì)看出明顯的差別，黑色的創(chuàng)字要比其他兩個(gè)字的頂部高出1-2px左右。

總結(jié)

在字體設(shè)計(jì)中，視錯(cuò)覺(jué)通常會(huì)出現(xiàn)在宋體類型的字體中，多橫多豎的字體中，以及字體的點(diǎn)，撇捺與橫豎之間中，而版式則與字體的選擇與幾何圖形的關(guān)系中，以及幾何圖形之間的關(guān)系中，設(shè)計(jì)中的視錯(cuò)覺(jué)大多也都是生活中經(jīng)常存在的一些視覺(jué)現(xiàn)象，大家多以發(fā)現(xiàn)的眼光去看待問(wèn)題，多嘗試，在設(shè)計(jì)中巧妙的利用可以營(yíng)造非常棒的設(shè)計(jì)作品，但同時(shí)也需要注意調(diào)整普遍存在的視錯(cuò)覺(jué)現(xiàn)象來(lái)優(yōu)化自己的設(shè)計(jì)作品，把控好細(xì)節(jié)才能提升作品的精致度。