完形心理學在版面設計的應用(上)

我一直想整理一些有關認知科學應用於UI設計的文章,但是因為我設計UI其實只有不到一年的資歷,也沒有特別的作品,所以對於這方面的分享一直裹足不前,不過因為欠台南HPX的聖凱一篇文章,所以我還是先還他一篇有關認知科學應用在版面設計的論文。

這一篇論文是我修人因工程時,在課堂上報告的paper,篇名是「Gestalt Theory in Visual Screen Design A New Look at an Old Subject」,作者是 Dempsey Chang, Laurence Dooley and Juhani E. Tuovinen,這一篇文章講述的是認知心理學中的完形理論在視覺設計的應用。完形理論在心理學的應用並非只有在視覺方面,在心理治療方面也多有著墨,總體而言,完形理論帶有自體填補不完全資訊的意涵,但很可惜的是,完形理論在近十年間的研究銳減,畢竟這個學派有實證上的困難性。

我想介紹的這篇論文將完形理論濃縮成11條法則,都可以應用在視覺設計上,這11條法則其實也有某種相似性,這部份留給各位朋友去思考應用,因為需要另外畫圖說明,所以我會分成三篇文章介紹。

Law of balance/ symmetry

第一條法則是平衡性,在視覺上,人們喜歡呈現平衡的設計,如本圖,即使並不是完全的對稱,視覺上人會自動視作一種平衡,進而讓人感覺舒服,這是由於不對稱的版面設計會讓人有設計未完成的感覺。 各位朋友可以從下圖去感受平衡與不平衡的差異。


Law of continuation

第二條法則是延續性,人的視覺會被呈現一條線的設計所吸引,目光會跟著線的軌跡走,直到線的盡頭,從左圖中,我們在看綠色草地時並不會有特定的視線游走軌跡,但是如果我們看到中間的小徑,就會很習慣的會去沿著小徑去觀察小徑的盡頭。所以如果在設計上,有一些資訊是想讓閱讀者按順序閱讀或是方便視覺上的搜尋,就可以應用此法則。





例如左圖,如果一個圓代表一個icon,在圖A的情況會讓人不知從哪裡先看,也會減低搜尋的效率,在圖B就的情況就會讓人想順著線搜索,如果版面本身的資訊有閱讀上的順序,也很讓使用者找到路徑。




 Law of closure

第三條法則是封閉性,我們的對於圖像的認知會把一些斷續的資訊組合成一個符合我們認知的形體,例如我們都學過CLOSURE這個字,左圖中的CLOSURE其實是用很多色塊組成的,我們還可以看出仿佛有三條橫白線,但是事實上並沒有完整的CLOSURE或是三條橫白線,而是我們大腦處理這些資訊時自動將圖像組合成我們經驗中的樣子。

同樣的情況也會發生在純圖形,左圖的三角形其實是由三個斷角組成,事實上並沒有完整的三角形。

不過如果色塊太過分散就會失去closure的效果,如左圖中的C,太過分散的情況還是會讓我們的大腦認為這是好幾個獨立色塊。


 
 
Law of figure-ground
 
第四條法則是形體與背景,這條法則強調的是使用者觀察不同顏色會讓形體與背景互換,這部份可以運用版面的設計突顯設計師想讓使用者看到的重點。當然我們會習慣重點放在版面的中央,但我們不須畫出完整的資訊,只要用顏色區分出形體與背景,就可可以讓使用者整理出完整的資訊。
 
 
 
Law of focal point
 
 
第五條法則是焦點法則,如果版面上有一條資訊是設計者想要強調的,就要設法做的與眾不同,讓使用者自然把注意力放在上面。左圖中我們可以看圓在正方形群中被突顯,實心方塊在空心方塊中突顯,我們很自然的就把注意力放在上面。




以上是這篇paper前五條法則,如果想直接看原文,請點選paper

留言

熱門文章