tft每日頭條

 > 生活

 > 視覺錯覺與空間設計

視覺錯覺與空間設計

生活 更新时间:2024-11-06 02:24:50

本文轉自:藝術與設計

artdesign_org_cn

視覺錯覺與空間設計(眼見不一定為實)1

在生活中,我們經常會遇到一些錯覺,有一些藝術家更是刻意的制造出這些錯覺,這些錯覺大多都是利用人類大腦的一些習慣所創作的,但是無論如何,它們都是如此的令人着迷的存在。

01 三角形分割錯覺

Triangle-bisection Illusion

視覺錯覺與空間設計(眼見不一定為實)2

根據中心點對齊的三角形

圖标可能會欺騙你的眼睛,尤其是那些具有複雜幾何形狀和特殊比例的圖标。并非所有圖标都是對稱的,某些圖标的像素還有缺失,也不是所有圖标都會保持一緻的寬高比。有些圖标需要手動進行調整,最為常見的就是播放器的三角形圖标。

将三角形放在圓角或直角的容器中會使該元素在視覺上看起來不平衡。造成這種現象是,由于一種被稱為「三角形分割錯覺」的影響。三角形的重心是根據其最小邊界框計算的。因此,如果你隻是用對齊工具,把三角形放在矩形的中間對齊,那麼在視覺上看就會很難受。

視覺錯覺與空間設計(眼見不一定為實)3

有兩個理論可以解釋這種視錯覺:

•不合适的恒定比例

這個錯覺包含的透視會增加較遠物體的感知尺寸,例如一個等邊三角形可能被視為透視圖,頂部的頂點位于無窮遠,底部是距離你最近的部分。

•重心/區域中心

如果要求觀察者找到中點,結果一般都是會找到重心,重心的上下區域相等。等邊三角形的重心在他的中點下方,有證據表明觀察者會在兩者之間妥協抉擇。

02 垂直水平錯覺

Vertical Horizontal Illusion

視覺錯覺與空間設計(眼見不一定為實)4

垂直水平幻覺

正方形是任何設計系統的基本組成元件。在材料設計卡、Facebook 帖子、Pinterest 和 Dribbble 中可以看到正方形的身影。

在 Sketch 中把正方形畫出來後,有時你可能會仔細檢查一下每條邊是否相等。如果看到近距離仔細查看,垂直的邊看起來似乎會比水平邊要長一些,更像一個長方形!但實際上,這是一個完美的 1:1 正方形。這就是「垂直水平錯覺」。

視覺錯覺與空間設計(眼見不一定為實)5

Facebook 帖子中的圖片為 1:1 正方形

真正令人着迷的是,具有不同的文化以及性别的人對這種視錯覺的感知都不同。居住在發達城市中的人比居住在農村地區的人更容易受到影響。這是因為農村地區的人們更習慣于住在圓形房屋中。

03 馬赫帶效應

Mach Bands

視覺錯覺與空間設計(眼見不一定為實)6

馬赫帶

在平面設計領域,将類似的一組顔色彼此相鄰放置是一種很常見的設計。仔細觀察,你可能已經注意到一個 “并不存在” 的陰影出現在兩個對比色塊相接的邊緣。這種視錯覺被稱為「馬赫帶效應」。圖像并沒有加入陰影,隻是我們的眼睛産生了錯覺。

視覺錯覺與空間設計(眼見不一定為實)7

每行的邊之間出現陰影

從技術層面解釋這個現象,是由于側向抑制,通俗的說就是暗的一側會顯得更暗,而較亮的一側會顯得更亮。

盡管馬赫帶效應在視覺設計中相當微妙,但要證明它的影響力,可能是牙科醫生的真正障礙。牙齒的 X 射線可以産生灰度圖像,用于分析異常的強度變化。如果不能正确識别,馬赫帶效應可能會帶來誤診。

04 赫林錯覺

Hering Illusion

視覺錯覺與空間設計(眼見不一定為實)8

赫林錯覺

你是否遇到過這種 logo,其中包含非常細的線條,或是布滿小點的背景圖,在你滾動時它看起來像是在移動或者像脈搏一樣跳動?觀察上面的由跳動線條組成的畫面,感覺如何?這是由于稱為「莫列波紋」的混疊效應引發的,其中兩個網格圖案彼此重疊,一旦移動就會産生錯覺運動。

視覺錯覺與空間設計(眼見不一定為實)9

上下滾動以查看震動效果

這是一個非常酷的效果,盡管莫列波紋本身并不是視覺錯覺,但它是一種幹涉現象。Sonos 的标志就是運用列莫列波紋和赫林錯覺的一個組合效果,這種效果在歐普藝術中相當流行。

05 赫爾曼網格

Hermann Grid

視覺錯覺與空間設計(眼見不一定為實)10

赫爾曼網格

赫爾曼網格錯覺非常常見,并且可在高對比度背景上的正方形網格中看出。直接觀察任意正方形,在正方形的相交處會産生像幽靈一樣的斑點。如果直接看相交處,斑點就會消失。

視覺錯覺與空間設計(眼見不一定為實)11

觀察十字交叉的地方時會出現灰點

産生這種視錯覺效應的原因是由于側抑制。簡而言之,它是興奮狀态的神經元,可以削弱周圍神經元的視覺訊号。

06 同時對比錯覺

Simultaneous Contrast Illusion

視覺錯覺與空間設計(眼見不一定為實)12

同時對比錯覺

将兩個相同顔色的對象放在不同對比度的背景上,會使兩個對象看起來變成不同的顔色。在視覺設計中,這種現象被稱為同時對比錯覺,但對不同的人來說,感知的程度也會有差異。

視覺錯覺與空間設計(眼見不一定為實)13

兩個文本顔色實際上是一樣的,但放置在不同顔色背景上顯得差異很大。

不幸的是,對于這種錯覺産生的原因還沒有一個可靠的理論,但是大量的研究可以推測這種錯覺,側抑制就可能是這個現象的成因之一。

07 蒙克 · 懷特錯覺

Munker-White Illusion

視覺錯覺與空間設計(眼見不一定為實)14

蒙克 · 懷特錯覺

這種錯覺是相當微妙的,但仍然很有趣!看上面的 GIF,左側的紫色塊看起來比右側的紫色塊更亮。而一旦把幹擾色塊去掉,就會發現這兩邊不同色塊其實顔色一樣。

視覺錯覺與空間設計(眼見不一定為實)15

灰線在淺色背景上顯得很暗,但在深色背景上會顯得很亮。

08 水彩錯覺

Water Colour Illusion

視覺錯覺與空間設計(眼見不一定為實)16

水彩幻覺

有時我會在對象上添加邊框,明明背景色沒有動過,但卻發現背景好像也有了顔色。然後我問自己:“我什麼時候也調過背景顔色了?”。如果仔細觀察,你可能會注意到,根據邊框顔色,淺色區域會根據周圍邊界顔色呈現出。如果你用 ps 吸色可能會驚訝地發現,邊框内的顔色實際上是白色的。

這種視覺現象被稱為 “水彩錯覺”,它取決于邊框線的亮度和顔色對比度的組合,以便産生顔色擴散效果。

視覺錯覺與空間設計(眼見不一定為實)17

按鈕内的白色區域根據邊框的顔色呈現出淡淡的色彩

09 賈斯特羅錯覺

Jastrow Illusion

視覺錯覺與空間設計(眼見不一定為實)18

賈斯特羅錯覺

無論是插圖還是 Logo,在處理的過程中可能需要切割出不同的形狀,這種錯覺就發生在彎曲物體時。這兩個元素的大小不同,但仔細檢查,它們實際上是完全相同的大小。

視覺錯覺與空間設計(眼見不一定為實)19

在創建過程中會看到這種錯覺,因為某些相同彎曲的邊緣看起來可能比其它邊緣小。

這怎麼可能?好吧,這就是所謂的「賈斯特羅幻覺」,對于為什麼我們會感知到不同大小的片段,沒有确切的解釋。一種解釋是,我們的大腦對于較大半徑和較小半徑之間的大小差異感到困惑。換句話說,短邊使長邊顯得更長,而長邊使短邊顯得更短。

10 康士維錯覺

Cornsweet Illusion

視覺錯覺與空間設計(眼見不一定為實)20

康士維錯覺

除了同時對比度和馬赫帶錯覺外,康士維錯覺還使用了漸變,同時使用中心線來創建一個畫面,即畫面的一側看起來比另一側更暗。但實際上,這兩個部分的亮度是相同的!你可以發現,當兩個部分平行放置時,兩面實際上是相同的顔色和亮度。

視覺錯覺與空間設計(眼見不一定為實)21

每個菱形的漸變顔色都是一樣的,但它們的顔色(從上到下)似乎變得越來越暗。

這種幻覺産生與上述兩種幻覺有相似的效果,但實際上在兩個重要方面有所不同:

•在前面展示的馬赫帶示例中,這種影響隻在靠近每一個陰影邊界的區域可見。然而,康士維錯覺影響了用戶對于整個區域的感知。

•使用康士維錯覺,邊緣的淺色會看起來更亮,而邊緣的深色部分看起來會更暗,這與通常的對比效果相反。

11 缪勒-裡爾錯覺

Müller-Lyer Illusion

視覺錯覺與空間設計(眼見不一定為實)22

為了獲得最佳視覺感受做出的極緻設計

字體設計師會明白,設計字體需要更多的依賴于設計直覺,而不是邏輯思維。根據每一個字符的度量高度對齊進行數學定位,将使整個單詞在視覺感知方面顯得不成比例。在字體力學中,一個常見的實踐涉及一個稱為“視覺矯正”的過程。簡單地說,矯正就是調整單個字符的大小以實現視覺平衡的過程。

視覺錯覺與空間設計(眼見不一定為實)23

在沒有調整之前,Linked In 中的字母 “e” 和亞馬遜中的字母 “z” 在視覺上是不平衡的

看上面著名的标志,有些字符在基線和高度上沒有齊平。字體設計師必須手動對每個字符進行調整才能獲得最佳視覺效果。

但為什麼我們需要對字體進行視覺矯正呢?

矯正之所以是必要的,就是因為缪勒-裡爾錯覺。這種視覺現象表明,在線段的每一端都放置一個 V 形符号,根據線段的方向,可以使線段顯示的更短或更長。這種經典的錯覺證明了人類感知的不可靠性。

視覺錯覺與空間設計(眼見不一定為實)24

缪勒-裡爾錯覺

,

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

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved