你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

來看看優設爆炒地瓜分享的設計中常見的 9 種視錯覺!下次甲方再懷疑你的專業能力,隨便拿一個給他看。

1、三角形中心

你能找到三角形的中心麼? 並非所有的圖標都是對稱的,對於我們常見的播放按鈕圖標,找到視覺的中心實際上很困難。造成這種情況的原因是由於三角形分裂錯覺的效應,中心位於三條中線(頂點和對邊的中點的連線)交點,此點即為重心。

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

下面圖片光憑肉眼,你看得出來哪個版本是居中的嗎?

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

2、垂直方向引起的錯覺

紅色的形狀是矩形麼? 正方形是每個設計中的基本結構,在矩形內放置一個正方形,導致實際上在垂直方向上看起來更長,儘管它實際上是一個正方形,這種現象稱為垂直水平錯覺。

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

看得出Facebook帖子中的圖片是1:1的正方形嗎?

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

3、馬赫帶效應

你能看到相鄰初的陰影麼? 我們把同色的漸變相鄰放置在一起,你注意到了什麼?是否會發現邊緣處的一個並不存在的陰影,這個視錯覺我們稱作「馬赫帶」其實圖像中並未加入 陰影,只是我們的眼睛產生了錯覺而已心

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

“不存在”的陰影出現在每行的邊緣之間

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

4、赫林錯覺

兩條垂直線條看起來也會移動嗎? 你有沒有見過類似的網站,背景中包含極細的線條 和一些點,當我們滾動的時候,感覺那些線條和不 動的點都在跳動。這就是郝林錯覺,兩條平行線因受斜線的影響呈現彎曲狀。還有我們常見的摩爾紋。

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

滾動你的頁面,線條動起來了嗎?

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

5、赫爾曼柵格

你有注意到那些若隱若現的灰點麼? 在周圍方塊的交叉處會產生幽靈般的灰點,當你嘗試轉向那個灰點時,它就神奇的消失了。這就是赫爾曼柵格。

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

觀察交叉點時會出現灰點

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

6、同時對比錯覺

你覺得分開的方塊顏色相同麼?最近的網頁設計中,垂直佈局很受歡迎,如果將兩個相相同顏色放置在不同的背景上,則兩個對象顏色看起來與實際不同,這種現象稱為同時對比錯覺。

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

兩側的文字顏色其實完全相同

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

7、芒克白錯覺

兩個紫色的顏色相同麼? 這種錯覺很微妙,但是非常有吸引力,看看上面的動畫,你會發現左邊的紫色塊比右邊的紫色塊更亮,但實際上兩者都是一樣的。

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

灰色線條在淺色背景前顯得較暗,在黑色背景前顯得較淺。

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

8、水彩錯覺

仔細觀察矩形內部的顏色是白色麼? 你如果仔細看,可能注意到白色區域產生了與邊框相同的淡淡的投影。這種現象被稱作「水彩錯覺」。

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

本來沒有色調的白色區域,因為邊框的顏色帶上了色調。

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

9、康士維錯覺

兩個對象的顏色一樣麼?漸變產生的印象會讓你感覺圖像的一側實際上比另一側更暗,但實際上,兩者都是相同的顏色。

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

每個菱形都具有相同的漸變,但它們看起來越來越暗

你所看到的樣子可能欺騙了你,來看看設計中常見的9種視錯覺

先別說眼睛到底騙沒騙我,光這個動效我都已經看了好幾遍了!


分享到:


相關文章: