版式和字體設(shè)計中的錯視覺

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

如圖所示徙菠,正常情況下人眼對所看到事物的呈現(xiàn)讯沈,當(dāng)人眼直視正前方的時候,只有中間位置的是最清楚的婿奔,而兩邊則是相對模糊的缺狠,同時也比較容易產(chǎn)生視錯覺,而視錯覺的原因除來自客觀刺激本身特點的影響外萍摊,還有觀察者生理上和心理上的原因挤茄。在設(shè)計中最常見的就是視覺方面的錯覺,而錯視覺對版式冰木,字體的大小穷劈,間距等等都會有影響;

左邊中間的線段與右邊中間的線段是等長的踊沸,但看起來左邊中間的線段比右邊的要長歇终,也稱為繆勒—萊依爾(MüllerLyer)錯覺。其原理是因為兩邊符號的方向變化逼龟,當(dāng)兩個符號的方向發(fā)生變化時评凝,其視覺也會隨之發(fā)生變化;

垂直線與水平線是等長的腺律,但看起來垂直線比水平線長奕短,也稱為菲克(Fick)錯覺宜肉;從視覺角度來講時因為人眼的視覺中心點在豎線中間的位置,而橫豎鏈接處容易給人一種一分為二的錯覺翎碑,故在視覺感知上會認(rèn)為豎比橫線長崖飘;

中間的兩個圓面積相等,但看起來左邊中間的圓大于右邊中間的圓杈女;稱為艾賓浩(Ebbinghaus)錯覺。其原理是因為有不當(dāng)?shù)膮⒄諏?dǎo)致視覺感覺偏差吊圾,中心圓雖然是相同的大小达椰,但由于外圍參照物的對比,使得人眼在感知的時候發(fā)生了錯覺项乒;

在字體設(shè)計中啰劲,人們對信息的閱讀順序一般可以分為以上三種感知,在設(shè)計時針對文字通常要考慮到這些習(xí)慣性的閱讀感知檀何,進而對畫面中的元素進行調(diào)整蝇裤,避免視錯覺的產(chǎn)生,以達到舒適閱讀的效果频鉴;

在相同大小的兩個縱向矩形中栓辜,按照視覺先左后右的觀看順序,當(dāng)我們第一眼看到左邊的矩形時會感覺比右邊的要窄一些垛孔,這是因為人眼的第一感知通常要比最后的感知速度快當(dāng)兩個矩形放在一起時會有對比的心里藕甩,在視覺上會感覺左邊的比右邊的小一些,但實際上兩個是相同大小的周荐;

在同樣大小的兩個長方形中也會出現(xiàn)同樣的問題狭莱,從視覺的感知來說,上面的要比下面的感覺細一些概作,顏色也要深一些腋妙,當(dāng),這種微妙的差距在設(shè)計中是普遍的存在讯榕,人眼的視覺重心通常會在兩個長方形的中間靠下一些骤素,對于上面的長方形視覺的感知稍微要弱一些而下面的則感覺要重一些或者寬一些,顏色也會深一些愚屁,這些就是視錯覺的感知谆甜,在設(shè)計中需要進行調(diào)整,盡量避免元素和字體的視覺偏差集绰;

當(dāng)兩個大小的矩形橫豎排列在一起時规辱,橫向的要比縱向的在視覺感知上面略寬一些,通常情況下橫向的會給人一種厚重的感覺栽燕,而縱向的則是要偏瘦長一些罕袋,這也是心里感知的一種感知改淑,最有特點的宋體就是經(jīng)過這點的視覺調(diào)整,才有了較為舒適的橫細豎粗的鮮明特點浴讯;

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

把圓和三角形進行放大處理衣屏,規(guī)避掉圓和三角邊緣的虛化空間躏升,使其實際視覺面積與矩形大小保持一致,這種方式就是運用設(shè)計中的視錯覺來營造相同大小的圖形狼忱;

版式中的視覺差除了圖形與圖形之間膨疏,還存在于圖形與之間,尤其是與宋體之間的視錯覺最為嚴(yán)重钻弄;如上面案例所示佃却,右邊的線條與宋體在執(zhí)行系統(tǒng)左對齊之后,通過觀察會現(xiàn)窘俺,宋體字撇的視覺延伸與矩形之間双霍,在視覺上看起來是沒有對齊的,存在一定的視覺誤差批销;

針對視錯覺這一現(xiàn)象洒闸,我們需要從人眼感知的角度出發(fā),對其進行適當(dāng)?shù)囊曈X修正均芽,左邊幾何圖形則是以矩形為基礎(chǔ)丘逸,把圓和三角向左邊移動,而右邊案例則是把矩形向右移動掀宋,規(guī)避字體視覺延伸的誤差深纲;

人們在閱讀的時候,尤其是看書的時候通常會有兩種模式劲妙;一種是字閱讀湃鹊,另一種是行閱讀;字閱讀相對比較偏向在舒適悠閑的環(huán)境下進行閱讀镣奋,而行閱讀則是比較適合緊張快節(jié)奏的閱讀行為币呵,對文字而言,閱讀的快慢均受字間距的影響侨颈,舒適的間距可以使用戶看起來更加的輕松余赢;案例如下芯义;

快緊慢寬

如圖所示;除了宋體和黑體字體類型差別的影響之外妻柒,還有就是間距的問題扛拨;左邊則是常規(guī)的字庫默認(rèn)的間距,而這個間距也不是唯一的標(biāo)準(zhǔn)举塔,而是字體設(shè)計師在設(shè)計時所設(shè)的绑警,不同類型的字體間距也不一樣;在正常間距的情況下央渣,比較適合行閱讀计盒;而右邊的則是在常規(guī)的基礎(chǔ)上放大了200,字與字之間的的空隙較大痹屹,給人喘息的機會,比較適合字閱讀的方式枉氮;

不管是行閱讀還是字閱讀志衍,行距同樣也需要設(shè)計,可以根據(jù)不同的閱讀方式設(shè)定相應(yīng)大小的聊替;左邊為自動的行距楼肪,而右邊則是設(shè)置成30pt的行距,對于人眼閱讀的舒適性而言惹悄,右邊則是比較好的春叫;

在文字中最常見的視錯覺就是中文和數(shù)字混合使用時,通常情況下中文都要比數(shù)字略大一些泣港,當(dāng)進行編排時需要注意調(diào)整數(shù)字或者文字的大小和重心暂殖,而有些字體在數(shù)字方面即使是默認(rèn)的間距也會略大一些;在中文和數(shù)字的混合使用中当纱,由于中文是以方塊為基礎(chǔ)的呛每,而數(shù)字的字符均為細長,不適合用方塊的標(biāo)準(zhǔn)去做坡氯,通常會以英文的標(biāo)準(zhǔn)開發(fā)晨横,所以數(shù)字通常都會比中文要小一些,但視覺重心是不變的箫柳;在設(shè)計中也是通常會被忽略的細節(jié)之一手形;

以常用的蘋方黑體為例,在使用默認(rèn)常規(guī)的間距情況下悯恍,數(shù)字1和0之間的間距過大库糠,這個時候如果需要使用默認(rèn)的間距時,則需要調(diào)整1和0之間的間距涮毫;而2和0之間的間距則屬于正常曼玩,但整體感覺也會過于松散鳞骤,當(dāng)把間距進行縮小-50的時候黍判,相對來說在視覺上則要比默認(rèn)的間距更加舒適一些其原因主要是因為中文以田字格為設(shè)計基礎(chǔ)的原因?qū)е略ゾ。谑褂脮r一定要注意調(diào)整,以達到視覺平衡的效果顷帖,避免軟件默認(rèn)的常規(guī)而忽略了人眼的視錯覺美旧,進而影響人眼閱讀的舒適度;

如上圖所示:以蘋方字體為例贬墩,在正常的輸入中文和數(shù)字之后榴嗅,數(shù)字以重心線為基礎(chǔ),上下的邊距則要比中文的小一些陶舞,有點萎縮的感覺嗽测,看上起不太舒服;而經(jīng)過調(diào)整之后的一組字肿孵,則是增加了視錯覺唠粥,并以視錯覺的方式呈現(xiàn)出來,在視覺上看著是一樣大小停做,其實數(shù)字要則要比中文大了一些晤愧,而且也略粗了一些;需要注意的就是在調(diào)整的時候蛉腌,一定要

按照重心線調(diào)整官份,切記要與上下邊距對齊;

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

可以直接選中單獨的數(shù)字進行放大,但切忌放大之后數(shù)字的視覺中心會向上库北,這個時候需要向下調(diào)整-2px已達到視覺的平衡爬舰;另外也可以重新建立文本框調(diào)整到合適的大小即可;

調(diào)整之后的效果寒瓦;

調(diào)整之后的文字信息看上去更加的緊湊情屹,而數(shù)字與中文在視覺上的大小也基本保持一致,但實際上整體的間距是縮小了一些杂腰,數(shù)字也放大了一些垃你,以重心線為基礎(chǔ),頂部與中文是一致的,底部則要比中文高一些惜颇,整體看過去更加的舒適皆刺,由于是廣告投放圖,可以是觀者更加快速的了解信息凌摄,給觀者一種緊迫感羡蛾;調(diào)整的方法不限,可根據(jù)自己的習(xí)慣進行操作锨亏;

在字體設(shè)計中最常見的就是筆畫的粗細問題痴怨,如中文宋體類型的字體就是最經(jīng)典的案例,橫豎同存的字體中器予,人眼通常會感覺橫筆較粗浪藻,故在宋體類型的字體中規(guī)避了視錯覺的問題,所以現(xiàn)在的字體設(shè)計通常會把橫細豎粗當(dāng)作專業(yè)術(shù)語來講乾翔,與人眼的第一感知則是相反感覺爱葵;

如圖所示;當(dāng)我們把橫細豎粗的特點換成橫粗豎細的形式之后反浓,從案例中可以看出萌丈,視覺較重的橫筆感覺更加粗壯;

經(jīng)過兩個案例對比可以看出勾习,右邊則是橫細豎粗的宋體特點浓瞪,在弱化視覺較粗的橫之后效果更加的舒適懈玻;當(dāng)然這種方式也不是固定的巧婶,需要根據(jù)不同的結(jié)構(gòu)進行細微的調(diào)整;

在字體設(shè)計中使用相同粗細的筆畫營造粗壯有力的感覺時涂乌,橫筆往往會感覺更加的厚重艺栈,而豎筆則會顯得細一些,為了規(guī)避這種筆畫的視錯覺則需要把橫筆做相應(yīng)的調(diào)整湾盒;

把橫筆相應(yīng)的縮小4px或者6px湿右,減小橫筆的視覺厚重感,使其在視覺上與橫筆保持一致罚勾,這樣看起來會讓字體更加舒適毅人;

最終對比圖

還有一種情況就是,當(dāng)點遇見橫尖殃,或者是進行創(chuàng)意的設(shè)計時也需要注意點與橫的視錯覺丈莺。

如圖所示;案例中的六和藝字點的部首送丰,與創(chuàng)字橫筆的頂部也是存在一定的視錯覺現(xiàn)象缔俄,創(chuàng)字要比其他兩個字的頂部高出1-2px左右;

版式中的考究

新建一個畫布,以幾何圖形為主視覺俐载,表現(xiàn)視覺基因裂變的演講公開課蟹略,考慮到視覺的裂變比較適合用抽象的幾何元素,然后對幾何主體進一步刻畫遏佣;

先對幾何圖形之行顏色疊加挖炬,選取相應(yīng)的顏色,然后再對幾何圖形添加多層內(nèi)陰影效果贼急,需要注意里面的雜色和等高線的調(diào)整茅茂;

調(diào)整出最重想要的效果之后,接下來就是開始加文案信息來豐富畫面的視覺效果以及所要傳達的信息太抓;

為了表現(xiàn)出較強的視覺感空闲,文字選擇了一款日文字體與畫面氣質(zhì)較為吻合,在正常的編排下走敌,文字與幾何圖形存在一定的視錯覺碴倾,以及文字間距也不是太理想,進一步調(diào)整掉丽;

通過對比可以看出跌榔,右邊把文字的間距拉大了一些,并且把字體向下移動規(guī)避與幾何圖形的視錯覺捶障,????把字間距和行間距調(diào)整基本一致的效果僧须,增加文字之間的空隙,使版面更加的舒適项炼,信息傳達更加有效担平;當(dāng)然這也不是固定的,具體調(diào)整與否則要根據(jù)具體案例而定锭部;

最重效果圖

總結(jié):不管是在版式設(shè)計中暂论,還是字體設(shè)計中視錯覺都是經(jīng)常存在的,規(guī)避視錯覺可以讓設(shè)計的品質(zhì)和成熟度更上一層拌禾,這是高端的玩法取胎;



原文鏈接:https://mp.weixin.qq.com/s/ufPw9OoNSPc4gJwoq2itEw

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市湃窍,隨后出現(xiàn)的幾起案子闻蛀,更是在濱河造成了極大的恐慌,老刑警劉巖您市,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件觉痛,死亡現(xiàn)場離奇詭異,居然都是意外死亡墨坚,警方通過查閱死者的電腦和手機秧饮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進店門映挂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人盗尸,你說我怎么就攤上這事柑船。” “怎么了泼各?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵鞍时,是天一觀的道長。 經(jīng)常有香客問我扣蜻,道長逆巍,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任莽使,我火速辦了婚禮锐极,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘芳肌。我一直安慰自己灵再,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布亿笤。 她就那樣靜靜地躺著翎迁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪净薛。 梳的紋絲不亂的頭發(fā)上汪榔,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天,我揣著相機與錄音肃拜,去河邊找鬼痴腌。 笑死,一個胖子當(dāng)著我的面吹牛爆班,可吹牛的內(nèi)容都是我干的衷掷。 我是一名探鬼主播辱姨,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼柿菩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了雨涛?” 一聲冷哼從身側(cè)響起枢舶,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎替久,沒想到半個月后凉泄,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡蚯根,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年后众,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡蒂誉,死狀恐怖教藻,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情右锨,我是刑警寧澤括堤,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站绍移,受9級特大地震影響悄窃,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蹂窖,卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一轧抗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧瞬测,春花似錦鸦致、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至狮斗,卻和暖如春绽乔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背碳褒。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工折砸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人沙峻。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓睦授,卻偏偏與公主長得像,于是被迫代替她去往敵國和親摔寨。 傳聞我的和親對象是個殘疾皇子去枷,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,689評論 2 354

推薦閱讀更多精彩內(nèi)容