視覺法則 – 格式塔理論的四個基礎

0

格式塔理論的四大基礎像是數學中的加、減、乘、除一樣,基礎很重要,幾乎所有的視覺原理都離不開這四個基礎,應該要好好的理解才是。

gestalt

文 / Wesley 目前在知名網路公司擔任介面設計師 (UI Designer)

這篇要來討論一下格式塔理論 (Gestalt theory),也就是格式塔心理學,或稱「完形心理學」。只要學過平面設計理論的人,應該多多少少都聽過格式塔的相關理論,但真正要應用在設計上,其實也不容易,或許是其實已經用上了,只是沒有去仔細探究而已,因為它是一個人類視覺自然感知的過程與結果。

格式塔是德文Gestalt的譯音,意即「模式、形狀、形式」等,意思是指「動態的整體(dynamic wholes)」 –by wiki

格式塔理論的發展,始於1910年時,心理學家 Max Wertheimer 無意間看到鐵路上的閃爍的燈光如下圖一(這部份的考證,網路上的資料不是很完整,有錯誤請指正),他觀察到,當燈光快速切換的時候,會產生視錯覺 (optical illusion),這邊的視錯覺指的是「似動現象(phi phenomenon)」(參考影片),也就是燈光在快速的切換狀態下,當速度快到介於30~60毫秒之間,會產生動態的移動的錯覺(如下圖二),於是 Max Wertheimer 與同儕開始進行相關的視覺研究,花了近十年的時間發展出的一套視覺認知理論,也就是現在的格式塔(完形)心理學。

鐵路平交道的警示燈
似動現象

其實格式塔理論要討論的東西非常的深,它可以說是現代認知心理學的基礎,唯一貫徹的概念就是「整體大於個體的總合」,但我們只需要從視覺來討論跟理解就好,因為格式塔所衍申出來的視覺原則,跟平面設計還有介面設計習習相關。

“The whole is other than the sum of the parts.”
— Kurt Koffka

在格式塔心理學的構成,有四個基礎:整體性 (Emergence)、具體化 (Reification) 、組織性 (Multistability) 、恆長性 (Invariance),這四個基礎是人類視覺的特性,也就是說,它是我們視覺的一種慣性,是天生或演化而來的,了解這四個基礎,就能解釋大部份的視覺情境了。先說明這四個基礎,下一篇再來討論幾個常用的原則。

  • 整體性 (Emergence)
    當我們要去分辨一個物體時,我們的眼睛試圖去找出輪廓,然後去比較對過去腦中的記憶,快速的分辨出物體,這就人類視覺的整體性。下面這張圖是一張很常被用來解釋整體性的圖片,在圖片中你會看到很多黑點,而且能透過輪廓,辨視出一隻像是大麥町犬的物體,所以我們的視覺是整體的,而不是從一條腿、一顆頭的方式將所看到的物體給組合起來起來。
    Emergence運用在介面設計上,也就是之前我們討論的指意、預設用途,我們能從物體的外觀或是輪廓知道他的用途,有時候並不需太多的細節。像是下圖的 ghost button 就是一個很好的例子。
    ghostbutton
  • 具體化 (Reification)
    當我們的視覺感受到刺激,同時也會對外部環境的空間訊息產生解讀,我們的腦袋會試圖把這些缺口給補起來,並創造出一個訊息去理解觀察到的物體。下圖中的 A,許多人看到會看到白色的三角型,但其實這個三角型並不存在,而是我們的腦袋自己將失去的訊息給填補起來。
    Reification用於介面設計,最常用的就是格點系統 (grid system) 如下圖,也是透過格點系統的建立,來劃分區塊,我們未必要使用線條來進行資訊版塊的切割,只需要透過適當的留白,一樣可以讓閱讀者辨視出這些區塊的不同。
    gridsystem
  • 組織性 (Multistability)
    如果一個物體有兩種以上的解釋,我們的腦袋在同一個時間點,只能給予一種解讀的方式 ,當然我們的視覺允許我們在不同的解讀上游移,但我們卻無法同時看到兩種以上的解讀方式。例如下圖,圖片中是一個妙齡女子?還是一個年邁的老婦人? 或許都能看的出來,但她就是無法同時出現。
    運用介面設計上,那就是要思考,你希望你的使用者在你的畫面中看到什麼樣的訊息? 想傳達的資訊要盡量精確,避免模陵兩可的圖片或文字,因為你永遠無法知道,使用者看到的跟你想的是不是一樣。
    下面的圖片,是我們在開發產品所犯的錯誤,這是一個好友序號分享活動,只要分享,每個人都能免費獲得300元面額的抵用券,立意不錯,可是我們在文字中加入「的機會」,經過使用者的測試才發現,使用者會認為這是需要經過抽獎的才能獲得的活動,因為使用者看到的是「機會」,而我們希望使用者看到的是「免費兑換」。
    chance
  • 恆長性 (Invariance)
    我們視覺的最大優勢就是恆長性,不管物體如何變形、旋轉、放大、縮小,我們都能夠透過他的輪廓或特徵來判斷這個物體。如下圖中像是搖桿的物體,任憑它如何的改變呈現的方式,我們的眼睛還是能夠從圖片中找出相同或是不同的物體,
    Invariance運用在介面設計上,最常用到的就是下圖中「請證明你不是機器人」的驗證碼 (CAPTCHA) 了,這也是目前人類在視覺上勝過電腦的優勢,當然這樣的優勢再過個幾年可能就會被電腦給取代了, 而且有時候也是會遇到人類無法判別的驗證碼,恆常性失效。
    captcha-2

以上就是格式塔心理學的四大基礎,這四個基礎對於從事視覺設計或是藝術相關的人都非常的重要,對於這些視覺特性能夠掌握的好,就能創造出更好的作品。

下一篇會討論格式塔使用的原則,當然有人對於基礎與使用原則會有些混淆,只要記得,四大基礎比較像是數學中的加、減、乘、除,而原則就會比較像是代數運算,所以基礎很重要,幾乎所有的視覺原理都離不開這四個基礎,應該要好好的理解才是。

附上一些參考的來源,因為有網路上對於格式塔心理學的說法解釋並不完整、一致,在這篇文章簡單的整理一下,做為一個參考跟紀錄,有錯誤也歡迎指正。


訂閱 vide 最新訊息: vide 臉書粉絲頁 http://facebook.com/videmedia

 

Share.

目前在知名網路公司擔任介面設計師, 本來讀的是商科,但憑著對設計的熱情,透過自學轉職設計, 喜歡閱讀、畫圖、寫程式, 希望用更多的理性、科學、理論的方式思考設計這件事。

Leave A Reply