視覺的謊言 - 為什麼你的眼睛會產生錯覺

更新於 發佈於 閱讀時間約 5 分鐘

隨著科技的進步,不管是設計廣告稿或簡報,只要在進行版面設計時,我們都習慣使用電腦軟體裡的「對齊工具」,去做內容文字、圖案的對齊動作,因為這樣最簡單、快速、方便。

但你有發現嗎?其實很多時候,就算用了電腦的對齊工具,看起來好像還是會偏了一點,視覺上依然無法真正的對齊,這種特別的現象,就稱之為「視錯覺」。

「視錯覺」是什麼?

正常情況下,當人類眼睛直視正前方的時候,只有視線範圍的中間位置,是最清楚的,而視線範圍兩邊,相對就會是模糊的,同時也較容易產生「視錯覺」的現象。

raw-image

因為當我們的眼睛看到畫面之後,會將視覺訊息透過神經傳遞到大腦,接著大腦便會進行綜合性的比對、分析,然後做出正確的判斷,但是當訊息不夠充足,或者錯誤、受到干擾,就會出現「視覺上的形態」與「客觀物理上的形態」不一致的「視錯覺」現象。

而在版面設計中,最容易受到「視錯覺」影響的部份,就是內容對齊、字體大小以及間距。

接下來,就讓我們一起來看看,各種常見的「視錯覺」現象:

● 繆勒萊耶錯覺

長度相等的2條直線,將端點加上方向不同的箭頭,箭頭向外的線看起來會比較長。

raw-image

這種錯覺是因為受到「神經抑制作用理論」的影響,當兩輪廓相近擺放時,視網膜上相鄰的神經團相互抑制,讓線段產生了位移,使得箭頭向外的線段看起來較延伸。

● 菲克錯覺

水平線跟垂直線的長度相等,但垂直線看起來會比較長。

raw-image

這種錯覺是因為人類視覺的中心點,在這畫面的中間位置,而垂直線與水平線的連接處,讓人感覺到水平線好像被分成一半,因此垂直線看起來就會比較長。

● 艾賓浩斯錯覺

2邊中間圓形的大小相同,但被小圓形圍繞的圓形看起來會比較大。

raw-image

這種錯覺是因為有了不同的對比,導致視覺產生偏差,大小相同的圓形,被小圓形圍繞的,看起來感覺較大,被大圓形圍繞的,看起來就會感覺較小。

學會了一些常見的視錯覺之後,接著我們要來看看,有關於幾何的視錯覺:

● 左輕右重

2個相同大小的方形,一起做水平排列,人類會自然的由左至右來觀看,而眼睛的第一感知,通常會比最後的感知快速,因此在視覺產生了對比之後,左邊的方形看起來,就會比右邊的方形窄一點。

raw-image

● 上輕下重

2個相同大小的方形,一起做垂直排列,人類的視覺重心,通常會放在2個方形的中間偏下一些,因此對上面的方形,視覺感知較弱,所以會覺得下面的方形較大、較重,甚至還會覺得顏色較深。

raw-image

● 橫重直輕

2個相同大小的方形,一橫一直的排列,橫向的方形,會給人厚重的感覺,直向的方形,則會給人瘦長的感覺,所以橫向的方形,在視覺上看起來會比較寬、比較重。

raw-image

● 幾何錯覺

3個相同大小,但不同形狀的幾何圖形,由於形狀的不同,導致視覺面積的大小不同。

例如,畫面中的圓形、三角形都有留白的部份,只有方形的視覺面積是填滿的,所以方形看起來會比圓形、三角形還要大。

raw-image

1. 大小的調整

以方形為基礎,將圓形、三角形放大,根據圓形、三角形所缺少的視覺面積,去做補足的動作,使視覺面積達到平衡,就能讓圖形看起來一樣大。

raw-image

2. 對齊的調整

如果是直向排列的靠左對齊,一樣以方形為基礎,將圓形、三角形往左移動,根據圓形、三角形所缺少的視覺面積,去做補足的動作,使圖形達到視覺上的對齊。

raw-image

現在我們可以知道,「對齊」最需要注意的,就是該元素在視覺上的面積大小!

因此,如果你想要創造出優秀的版面設計,一定要在使用完對齊工具之後,繼續用眼睛視覺來做微調,才能使內容更加合理、順暢,版面更加精美、完整。

留言
avatar-img
留言分享你的想法!
avatar-img
CJC 設計實驗室的沙龍
91會員
30內容數
2019/10/14
當我們在設計商業廣告時,時常會遇到以照片為主的廣告,而這種類型的廣告,通常是以大面積的照片,搭配上一些簡單的字句,作為主要傳遞情境氛圍的方式,所以照片該如何擺放,在整體的排版構圖上,就顯得非常重要。
Thumbnail
2019/10/14
當我們在設計商業廣告時,時常會遇到以照片為主的廣告,而這種類型的廣告,通常是以大面積的照片,搭配上一些簡單的字句,作為主要傳遞情境氛圍的方式,所以照片該如何擺放,在整體的排版構圖上,就顯得非常重要。
Thumbnail
2019/06/10
我們之前說過Content SEO,策略導向的優化,也就是透過各種行銷方式,讓搜尋引擎在進行搜尋結果運算時,認為該網頁是符合關鍵字的高人氣優質內容,進而使網頁的排名更前面。 所以SEO的決勝重點,就在於Content SEO,行銷的思考策略!
Thumbnail
2019/06/10
我們之前說過Content SEO,策略導向的優化,也就是透過各種行銷方式,讓搜尋引擎在進行搜尋結果運算時,認為該網頁是符合關鍵字的高人氣優質內容,進而使網頁的排名更前面。 所以SEO的決勝重點,就在於Content SEO,行銷的思考策略!
Thumbnail
2019/06/06
說真的,你花了那麼多時間設計網頁,卻沒被搜尋引擎收錄,不是很可惜嗎? 所以接下來,我們就要告訴你,有關於「Technical SEO」的語法重點,讓你的網頁也能快速又有效率的被搜尋引擎收錄進去。
Thumbnail
2019/06/06
說真的,你花了那麼多時間設計網頁,卻沒被搜尋引擎收錄,不是很可惜嗎? 所以接下來,我們就要告訴你,有關於「Technical SEO」的語法重點,讓你的網頁也能快速又有效率的被搜尋引擎收錄進去。
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
這篇要來介紹的是凹面鏡的成像。
Thumbnail
這篇要來介紹的是凹面鏡的成像。
Thumbnail
大家好,今天的物理好文,要帶大家來認識平面鏡的成像。
Thumbnail
大家好,今天的物理好文,要帶大家來認識平面鏡的成像。
Thumbnail
你相信你的眼睛嗎? 那點開文告訴我唯一的答案吧
Thumbnail
你相信你的眼睛嗎? 那點開文告訴我唯一的答案吧
Thumbnail
圓形沒辦法就題型一個個解釋,這真的不如去買參考書,把詳解都看到懂。只是就整合性而言,筆者比較建議,教的時候以動態畫圖輔助,學的人也可以透過這個方式,發現自己哪邊卡住。卡住的原因不見得是空間能力不佳,往往只是因為順序差了一點,讓後面整個都歪掉而已。
Thumbnail
圓形沒辦法就題型一個個解釋,這真的不如去買參考書,把詳解都看到懂。只是就整合性而言,筆者比較建議,教的時候以動態畫圖輔助,學的人也可以透過這個方式,發現自己哪邊卡住。卡住的原因不見得是空間能力不佳,往往只是因為順序差了一點,讓後面整個都歪掉而已。
Thumbnail
筆者在這邊的經驗可以說是「慘痛」兩個字,因為你以為很簡單的,學生不這麼覺得,我們以為這圖片夠清楚的,學生不明白。我們得要放很多層階梯,階梯的高度還得差很小,不然會有很多人跨不過去。具體的解題就不多說,照例筆者這邊解釋教學上的技巧,有經驗的老師應該一看就知道,學生的盲點在哪。
Thumbnail
筆者在這邊的經驗可以說是「慘痛」兩個字,因為你以為很簡單的,學生不這麼覺得,我們以為這圖片夠清楚的,學生不明白。我們得要放很多層階梯,階梯的高度還得差很小,不然會有很多人跨不過去。具體的解題就不多說,照例筆者這邊解釋教學上的技巧,有經驗的老師應該一看就知道,學生的盲點在哪。
Thumbnail
終於到了最後,同學進入國三,嚴格說國三只有1個半學期,接著就要會考了。所以內容並不多,但學習的分量很重。國三上數學,可分為相似形、圓形與三角形的心,也就是國中幾何。基本原理要懂一點都不難,但由於國三幾何會把過去一二年級學過的全部用上,所以考試成績會讓學生很挫折。這種考驗過去有沒學好的總整理,筆者個人
Thumbnail
終於到了最後,同學進入國三,嚴格說國三只有1個半學期,接著就要會考了。所以內容並不多,但學習的分量很重。國三上數學,可分為相似形、圓形與三角形的心,也就是國中幾何。基本原理要懂一點都不難,但由於國三幾何會把過去一二年級學過的全部用上,所以考試成績會讓學生很挫折。這種考驗過去有沒學好的總整理,筆者個人
Thumbnail
這是上Krenz老師的透視課第三堂筆記。 這堂課的重點是「旋轉」。
Thumbnail
這是上Krenz老師的透視課第三堂筆記。 這堂課的重點是「旋轉」。
Thumbnail
要如何為品牌設計一套獨特配色,使它既可以傳遞產品資訊,實現商業效益,同時又符合美學法則?這樣的色彩構成,需要協調多方面元素,如不同色彩間的關係與比例,以及對比、過渡、調和等色彩效果。 色彩對比是常用的手法,是把兩種或兩種以上的色彩並置所產生的對比現象。
Thumbnail
要如何為品牌設計一套獨特配色,使它既可以傳遞產品資訊,實現商業效益,同時又符合美學法則?這樣的色彩構成,需要協調多方面元素,如不同色彩間的關係與比例,以及對比、過渡、調和等色彩效果。 色彩對比是常用的手法,是把兩種或兩種以上的色彩並置所產生的對比現象。
Thumbnail
我們習慣使用電腦軟體裡的「對齊工具」,去做內容文字、圖案的對齊動作,因為這樣最簡單、快速、方便。但你有發現嗎?其實很多時候,就算用了電腦的對齊工具,看起來好像還是會偏了一點,視覺上依然無法真正的對齊,這種特別的現象,就稱之為「視錯覺」。
Thumbnail
我們習慣使用電腦軟體裡的「對齊工具」,去做內容文字、圖案的對齊動作,因為這樣最簡單、快速、方便。但你有發現嗎?其實很多時候,就算用了電腦的對齊工具,看起來好像還是會偏了一點,視覺上依然無法真正的對齊,這種特別的現象,就稱之為「視錯覺」。
Thumbnail
「每次遇到排版設計的時候,總是會感到手足無措,尤其是內容資料、文案或素材的數量較多時,更是容易傷透腦筋,花再多時間都做不好。」如果你有這種煩惱,表示你只是憑感覺在排版,這樣的方式不僅容易讓人視覺麻木、疲勞,更無法客觀的分辨出好壞,甚至會讓大腦靈感枯竭,做不出其他的版面變化。
Thumbnail
「每次遇到排版設計的時候,總是會感到手足無措,尤其是內容資料、文案或素材的數量較多時,更是容易傷透腦筋,花再多時間都做不好。」如果你有這種煩惱,表示你只是憑感覺在排版,這樣的方式不僅容易讓人視覺麻木、疲勞,更無法客觀的分辨出好壞,甚至會讓大腦靈感枯竭,做不出其他的版面變化。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News