視覺設計原則: Gestalt Principles

「gestalt」的圖片搜尋結果
Fig from WiKi

Gestalt principle是在1920年代被德國心理學家們(格式塔學派)所提出的人類視覺感知理論(Perception theory),Gestalt這個字是德文的形狀之意,這原則是用來說明人類如何去理解所看到的東西,並將其編碼成資訊。如今這理論可以反向用來做為各種視覺設計的原則,幾乎在平面設計、網站設計、前端設計、簡報設計等等會需要使用者“看”的領域,都有很重要的角色,比如Google Design這部談論設計的影片

Gestalt is the interplay between the parts and the whole. … The whole is ‘other’ than the sum of its parts          

而藉由設計平面上的物件根據這些原則便能添加多一層的資訊給與觀看者。

跟視覺設計有關的這些原則是什麼呢?

這邊我們來介紹一些跟"Grouping"概念有關的原則:相似性(Similarity), 相近性(Proximity), 連結性(Connection),包覆( Enclosure)。以上這四個原則會影響觀看者如何將獨立物件間做分群,

相似性(Similarity)

在閱讀或是觀看者會把外觀相似的事物歸類成同一個類別,會是認定它們間有所關聯,這特質算是我們人類蠻直覺有的視覺理解方式,所以利用相似性原則,我們圖形處理上,利用字型、顏色、物件方向和白色等等來創造視覺上的關聯性。

相近性(Proximity)

相近性的特質是利用空間上的相鄰,把物件關聯再一起,這特性可以讓我們用來安排如論文的圖片排列方式,用來控制觀看者的順序,比如有四張圖,我們希望觀看者兩張兩張的看,那麼經由排列的方式,兩個一組,組間間距加大,便能直覺上使用兩組兩組的看。

連結性(Connection)

相對於相似性、相近性的關聯效果,直接將兩個有關連的物件直接連結(最簡單的方式就是用線相連),可以直接且強烈的把兩個可能有距離或是外觀沒那麼相似的物件,釋放給觀看者兩者間可能有其他關聯性。

包覆(Enclosure)

包覆便是直接將同類或是想強調的物件們,用圖形包圍成塊,這種視覺暗示的方式力道非常強。

原則間效用的大小

下面這張由Bang Wong文章裡的圖,清楚的讓人理解到這些原則間在視覺上創造的效果,彼此間的強烈程度。

screenshot.png

閱讀參考

來自Nature Methods education series Points of View,超棒的系列!對於生醫研究者對於資料視覺化有一定的幫助!
Bang Wong.(2010). Points Of View: Gestalt principles(Part 1/Part 2). Nature Methods

網路上介紹Gestalt principle在網站或是前端設計的文章

Cognitive psychology for UX: 7 Gestalt principles of visual perception
Gestalt Principles for Designers – Applying Visual Psychology to Modern Day Design
User Experience (UX) topic overview/definition :Gestalt Principles

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s