設計師手冊(三):「完形心理學」是什麼?設計師的必修!(上)

Yi-Han Huang
YIHAN HUANG’S ALPHA SECRETS OF DESIGN
5 min readJan 28, 2020

你可以說它是"利用心理學去完成視覺導引或規劃的一種方式"

比方說我們先看下方這張圖:

這張圖你看到的排列順序是什麼?

應該最多人是看到「樹懶 → 喜歡 → 爬樹以及 → 吃樹葉喔」這個順序。

那為何不是先閱讀到 「樹懶 → 爬樹以及 → 喜歡 → 吃樹葉喔」這樣的順序呢?主因是你無形中已經被引導線給影響了。首先,視覺上會先注意到最大的字,接著因為畫面中的摺線,而被引導從最大的字閱讀到最小的字。除此之外也和顏色深淺有點關係,我們視覺上習慣從最深色字體看到最淺色的部分。

那這些又和我們今天要講的完形有什麼關係呢?聽我先講個故事~~

故事源自於20世紀初,興於德國的格式塔學派,其實又稱完形心理學。格式塔指的是Gestalt的譯音,意即為「模式、形狀、形式」,意義上即是「動態的整體( dynamic wholes)」。

情境圖(我隨意畫的),左至右分別為助教科特、論點發想人馬科斯、 助教沃爾夫岡

故事是這樣的……當時這個浪漫又經常文思泉湧的馬科斯教授在火車上看著窗外風景,看著看著,腦中突然對於眼前這視錯覺(似動現象)有了一套解釋的理論,於是中途趕緊下車,留在當地法蘭克福大學進行一系列心理學實驗。沃爾夫岡、科特則是他兩位年輕助教,在那裡他們一起進行研究,後來一起提出了這些論點。

視錯覺(似動現象)

那到底完形心理學是用來做什麼?特徵是什麼?

我將它分成兩種脈絡。

1. 當我們看過很多事物之後,在大腦建立起百科全書,假如你看到「類似的東西」,就會自動想起曾經被你放進大腦百科全書的某樣物件。

2. 在雜亂的畫面中,我們眼睛會試圖捕捉相似的物件組成一個群體,進而歸納成有邏輯的系統

根據這些概念呢, 格式塔心理學分成四種特徵

1. 整體性 emergence

從破碎的物件窺見整體

指的是當你看見畫面中的各個元件,能夠推敲出其未完成的部分予以呈現的部分銜接起來的樣貌,並自動將它視為是一個整體。讓我們來看以下例子。

以上這張圖,明明沒有勾勒出物體的樣子,但透過破碎的色塊,你能夠看出這是隻松鼠,正拿著東西啃。整體性指的即是當你視覺上捕捉到整個物件的「部分」時,就會自動將它補齊成完整個體

2. 具體化 Reification

從別的物件和它的關係推斷其樣貌

請想像今天有個透明人,遊走在環境中穿梭,你看不見他,但當他坐在沙發上的時候你還是可以看見沙發凹陷了。

具體化這個概念即是如此,如上圖,圖A你看不見三角形,但從三個圓形缺口可以看出這中間彷彿有個白色三角形在他們圖層之上。

同理,圖B從攀附的條狀物,可以感覺到他像是繞著圓柱體的,雖然沒有看見圓柱體的存在,卻從條狀物旋轉的軌跡看出端倪。

圖C則是從多個圓錐的排列,感覺到「圓球」的存在。

圖D這隻尼斯湖水怪(亂取名稱)則是從他消失之處,去感覺到上方像是有個矩形覆蓋在它之上。

3. 組織性 Multistability

圖地反轉的概念,從你看見的部分,反面去看也成立

最常看到的案例像是這個:

立方體,到底哪一面朝前方呢?似乎都說得通。
第一眼看到的是聖杯或是人的側臉呢?

組織性的特色即是如此,當你第一眼觀察物體時看見的型態,以反面去觀察也可以完全成立,變成另一個物體。這並沒有對錯,而是本來的設計就是正反皆是圖。

常見的案例像是以下:

藉由兩個反方向的箭頭構成,中間也構成一個英文字母C
既看得到穿高跟鞋的腳,也看得到穿皮鞋的腳機器人

4. 恆常性 Invariance

不管是變形或著色方式改變,都能看出原物體的樣態

不管怎麼變化,都看得出是同一個物體

如上圖,A圖能夠看出是個ㄇ形柱體上面頂著圓球體,不管怎麼旋轉,都還是不會讓視覺無法判斷。而圖B稍微略作一些調整,圓球位置和ㄇ形柱體有些調換及穿插,但仍舊會覺得他們像是同一個家族的物體。

圖C、D亦是如此,產生變形,或者著色方式改變,還是能夠使觀者判斷出它就是原本的ㄇ形柱體上面頂著圓球體。

有個非常典型的例子就是「驗證碼」。

不管它彎曲或斜體、變形,正常沒喝醉的情況下,你都可以看出他們的原形

好啦~學完基礎理論特徵,下一集即將要進入「規則」。以下會用設計案例帶大家了解如何將這些規則運用在我們的專業當中,讓設計過程更有條理,也讓業者更加信任你的能力。

--

--

Yi-Han Huang
YIHAN HUANG’S ALPHA SECRETS OF DESIGN

職業是 UI/UX 設計師,平常寫一些設計相關的經驗和分享新的專案給大家參考,私下喜歡研究香水、並且以文章形式記錄下我的嗅覺筆記