設計師手冊(三):「完形心理學」是什麼?設計師的必修!(下)
繼上一次學完基礎理論與特徵,這一次我們要來了解如何將他們運用在設計上囉!
完形心理學總共分為四種規則:
1. 蘊含律 (Gesetz der Prägnanz)
我中有你,你中有我
請不要被這歪樓的副標題嚇到,我要講的是,在一個物件中,可以拆出很多不同的元素。比方說讓我們來看以下這個案例:
意思是像我們看見物件時,會自動將它分開成不同的幾個部分。這是因為我們大腦中存在基本圖形的認知,像圓形、矩形、三角形等等,所以當我們眼前出現複合圖樣時,便會自動將它拆解成我們更熟悉的樣子。
以網頁設計舉例來說,常常見到的是這種案例:
中間的矩形和下方區域底色都一樣是白色,但是視覺上你仍舊會將ABOUT US那個區域當作獨立的一部份,因為你熟知網頁的底色白色區域,和它是分開的兩個空間,只是因為顏色都是白色而混在一起。
2. 閉合律(Gesetz der Geschlossenheit)
被小精靈吃掉的殘渣,拼起來還是一個完整圖案
這項規則很明顯是由剛才「具體化」延伸而來,同樣在講述從不完整的事物窺見完整的物體。下面我們先看最簡單的例子:
用網頁設計來看閉合律,它都被運用在那些地方呢?像是以下的範例:
不是很明顯,但為何會有這種感覺?
主要是因為畫面上這些文字以及裝飾線條、圖樣都是沿著這無形的矩形去圍繞,所以視覺上可以達到對齊的效果,以及讓畫面更有層次。
你會發覺運用到閉合律的設計還真不少,logo部分像是adidas、中華電信、百事可樂等等。
3. 相似律(Gesetz der Ähnlichkeit)
視覺上幫他們自動排隊
我們在視覺上,時常自動分類歸納,把類似物放在同一類。不清楚嗎?比方說我們來看下方這個設計範例:
像上圖這種比價性質或評比整理網站的介面就常常使用這個規則,左方的篩選器因為格式一致,會讓你覺得它就是一個大欄位。右方的各項資訊,因為排版一致,自然就會讓消費者覺得它是一個群體。
或是當然也有更多種不同的例子:
另外一個常見的案例,像是圖示按鈕:
4. 接近律(Gesetz der Nähe)
接近的自動湊成堆
這個理論又更常見了,舉凡在編排上、設計上都是非常容易上手和運用的規則,尤其文字的排版時常使用。以下先讓我們理解這個概念:
一般來說,會將上方這張圖分成四堆,因為視覺上相聚在一起的總是會被放成一類,所以自然會覺得這邊像是四堆圓圈。同樣的道理運用在文字上,同段落的文字放在一起,而不同內容的則記得分開,中間隔出個幾行。像是以下這個案例:
基於這樣的道理,做設計時時常運用「留出畫面喘息的空間」來營造出更舒適的視覺體驗。適時的將物件拉出距離,除了更易閱讀,容易整理出脈絡,另一方面也能使觀者增加興趣和期待值。
其他還有什麼樣的範例呢?
5. 連續律(Gesetz der Kontinuität)
利用大腦建立的圖像經驗,將物件完整的樣子辨識出來
我們看到上圖,應該每個人都可以毫不猶豫地說出這是兩把斧頭交叉的樣子。但你有沒有想過其他答案?
我們來推論看看,大概分成幾種分開的可能:
連續律是利用視覺的「延續性」,讓整個畫面產生視覺引導。
那運用到設計面上呢?比方說讓我們來看下方幾個案例:
總結:
幫大家整理一下,我們剛才看過的幾種完形設計。
在完全吸收了解之後,也並非就要按照死板的規則去設計,最重要的還是設計師如何拿捏,才能在版面上達到視覺平衡,讓內容閱讀順暢。也期待大家在閱讀完文章後能夠有所吸收,如果有任何問題、或想要進一步與我討論,都歡迎在下方留言喔!
喜歡文章也可以分享,記得告知創作者並且註明出處唷;或是幫這篇文章拍手個5秒喔,感謝各位花時間閱讀至此啦~