設計法則:圖地反轉及負空間

閱讀時間約 3 分鐘
運用錯視與留白,讓設計更迷人。

利用錯視,將我們想傳遞的內容,置入於畫面中,不直白告訴觀看者訊息,而是讓觀看者自己去發現,達到互動與傳遞的效果。

本篇建議與書評《觀看的方式 Ways of seeing》一起服用。


圖地反轉是什麼?

魯賓之杯-丹麥心理學家魯賓(E.Rubin. 1886-1951)

魯賓之杯-丹麥心理學家魯賓(E.Rubin. 1886-1951)

圖地反轉 Figure–ground Illusion 是一種視覺錯覺原理

在上圖中(魯賓之杯)可見到「杯子」及兩個對稱的「側臉」。

我們無法同時理解多個的視覺對象,當下會優先選擇最好理解的對象,優先理解的對象稱為「圖 Figure」,其餘的對象稱為「地 Ground」。

  • 如果第一眼看見的是杯子:杯子是圖,側臉是地
  • 如果第一眼看見的是側臉:側臉是圖,杯子是地


「圖、地」沒有明確的角色區別

因為每個人優先注意的對象不同,有人第一眼看見杯子,也有人第一眼看見側臉;每一次的注目,都會讓圖、地的關係隨著意識而改變

這讓「圖」與「地」的關係顯得曖昧難分,也因不同的情形導致圖地的關係交換,此現象稱為「圖地反轉 Figure–ground Illusion」。


容易被視為圖的對象

關鍵就在於第一印象,越引人注意的越容易被視為圖。

通常會作為圖 Figure 的特性

  • 清晰:較清晰的對象
  • 積極:具有前進意象的對象(例如凸出)
  • 範圍:具有整體意象的對象
  • 行為:具有動態感的對象
  • 優先:優先觀看到的對象
  • 對比:越明顯的對象
  • 閉合:被包圍的對象
  • 分離:與其他對象隔離開的對象
  • 經驗:趨近於實體或真實存在的對象

真正有趣的地方在於…

那種曖昧不清的關係,讓人想嘗試理解圖中所隱含的真正涵義。

它讓你分不清楚誰才是主角,有時呈現的每個角色都很重要,像是事物的一體兩面。

例如太極的陰與陽,就是很經典的圖地反轉案例。

Yin & Yang Kitties by Tony Babel

Yin & Yang Kitties by Tony Babel


負空間

負空間 Negative Space 將訊息隱藏在畫面中

可將「負空間 Negative Space」理解為留白空間。

「圖地反轉」也具備「負空間」的特性哦。
兼顧兩者很難,不如讓其中一方成為真正的主角,將訊息隱藏在畫面中。

角色之間的空隙所形成的負空間,與畫面的正空間相對。負空間有效填補了正空間的局限性,並且有助於畫面的平衡感,為畫面增加更多的想像空間。

你不需要將所有細節全盤托出,留下線索即可。

利用這樣的效果,將我們想傳遞的內容,置入於畫面中,不直接說出訊息,而是讓觀看者自己發現,達到互動與傳遞的效果。


負空間的運用案例

by Oichoc

by Oichoc

by Jonimajer

by Jonimajer

by Rokas Aleliunas

by Rokas Aleliunas

by Mikyung Lee

by Mikyung Lee

by Jekaterina Budryte

by Jekaterina Budryte


最後的碎碎唸

該讓圖像「直白地傳達訊息」還是「有更多地想像空間」?這些考量因不同的設計情境而異。

然而,就如同《雅量》所描述的:

同樣的一件衣料,每個人卻有不同的感覺。

那位朋友連忙把衣料用紙包好,她覺得衣料就是衣料,不是棋盤,也不是稿紙,更不是綠豆糕。

因為每個人的性格與生活環境不同,不同人所關注的對象,也會有些許差異,這才是我們所要傳遞的精隨。

換帳號唷
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
如果說素描是繪畫的基礎,那色彩原理就是配色的基礎。我們提到色彩原理就是配色的基礎,這句話稍微狹隘了一些,其實了解色彩原理能夠提升的不只有配色,還有設計視覺運用,甚至是印刷觀念都跟色彩原理有關。
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
如果你能即使沒有繪畫基礎,仍然會鼓勵你養成手繪的習慣。設計師大多具備草稿繪製的能力,這項能力的功用並不是要我們變得很會畫畫,而是培養「觀察」與「表現」的能力,藉由這樣的練習,不斷累積視覺經驗及提升捕捉細節的敏銳度。
善用好讀的排版指南,提高使用者持續閱讀的意願。主軸將圍繞於好讀,雖與視覺排版相近,卻有些許的不同;本文所提及到的任何觀念,來自於經驗或是過去所學,不須奉為圭臬,而是理解與體會。
視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一。視覺層級除了讓畫面的視覺編排更加精緻好看,更重要的功能是能讓畫面有效地被組織,讓觀者更容易理解。
如果你能保持穩定吸收,就能保持穩定輸出。你的靈感總是像曇花一現,來了就走了?還是像枯竭的青春,一去不復返?不管是不是創作者,都會面臨這困境;經過多次的體驗,終於找到了答案「如果你能保持穩定吸收,就能保持穩定輸出」。
如果說素描是繪畫的基礎,那色彩原理就是配色的基礎。我們提到色彩原理就是配色的基礎,這句話稍微狹隘了一些,其實了解色彩原理能夠提升的不只有配色,還有設計視覺運用,甚至是印刷觀念都跟色彩原理有關。
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
如果你能即使沒有繪畫基礎,仍然會鼓勵你養成手繪的習慣。設計師大多具備草稿繪製的能力,這項能力的功用並不是要我們變得很會畫畫,而是培養「觀察」與「表現」的能力,藉由這樣的練習,不斷累積視覺經驗及提升捕捉細節的敏銳度。
善用好讀的排版指南,提高使用者持續閱讀的意願。主軸將圍繞於好讀,雖與視覺排版相近,卻有些許的不同;本文所提及到的任何觀念,來自於經驗或是過去所學,不須奉為圭臬,而是理解與體會。
視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一。視覺層級除了讓畫面的視覺編排更加精緻好看,更重要的功能是能讓畫面有效地被組織,讓觀者更容易理解。
如果你能保持穩定吸收,就能保持穩定輸出。你的靈感總是像曇花一現,來了就走了?還是像枯竭的青春,一去不復返?不管是不是創作者,都會面臨這困境;經過多次的體驗,終於找到了答案「如果你能保持穩定吸收,就能保持穩定輸出」。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一。視覺層級除了讓畫面的視覺編排更加精緻好看,更重要的功能是能讓畫面有效地被組織,讓觀者更容易理解。
Thumbnail
這篇文是我自己的學習筆記,整理過後覺得挺值得分享的,就決定直接PO一篇文。 這邊只會紀錄重點跟脈絡,還有一些個人心得。 如果想要有仔細的案例講解,可以直接到Hahow購買線上課程, 課程名稱是《讓圖不只是好看的-資訊設計思考力!》。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一。視覺層級除了讓畫面的視覺編排更加精緻好看,更重要的功能是能讓畫面有效地被組織,讓觀者更容易理解。
Thumbnail
這篇文是我自己的學習筆記,整理過後覺得挺值得分享的,就決定直接PO一篇文。 這邊只會紀錄重點跟脈絡,還有一些個人心得。 如果想要有仔細的案例講解,可以直接到Hahow購買線上課程, 課程名稱是《讓圖不只是好看的-資訊設計思考力!》。