認知理論:完形理論的視覺法則(Gestalt Principle)

  完形心理學是由心理學家 Max Wertheimer 等人於 20 世紀初發展出來,與分群和對齊相關的理論,描述數種人類視覺系統內在的佈局屬性(Chen, 年代未知; Tidwell, 2011)。完形理論的視覺法則描述人類視覺如何認知、辨識與建立畫面元素之間的關聯性,將各自獨立的訊息串聯成整體概念。網頁介面設計者在規劃頁面資訊排列時通常會應用完形理論,安排使用者的視覺焦點及觀看動線,讓使用者能再打開頁面閱讀的瞬間快速釐清資訊之間的關係。

  完形心理學的重要概念是「整體不等於個體的總和。

  完形理論的視覺法則具有下列特性:
  1. 封閉性(law of closure)
  2. Tidwell:我們也想要看到簡單的封閉型狀,像是矩形和一整塊留白,我們會不自覺地受其吸引。將東西群聚在一起後,常常會變成一個完整的形狀。
    Chen:我們在觀察事物的時候,傾向將許多個獨立的元素,視為一個封閉的圖案。我們的大腦會自動填補元素和元素間的空白部分,形成一段不存在的線段。如上圖所示,我們可以將一連串的圓點看成一個較大的圓環,也可以將一個不連串的線段看成一個完整的圓,這種視覺特性稱為封閉性。


    人們在觀察事物時傾向將獨立的元素群聚,視為封閉的圖案。大腦會接受視覺上的暗示,將一連串的圓點聚合成一個圓環,或是將距離相近的圖形組合成一個區塊。這種自動填補元素與元素之間空白部分,形成簡單形狀的視覺特性稱為封閉性。

  3. 相似性(law of similarity)
  4. Tidwell:如果兩個東西具有相同的尺寸、體積、顏色、方位…觀看者也會為他們建立關聯。
    Chen:我們傾向把相似的事物看成一體,如上圖所示,當一連串方塊和一連串的圓形並排時,我們會看成兩列方塊和兩列圓形,而不會看成直排。這是因為相似性讓我們的眼睛和大腦更容易組織相似的事物。


    如果在觀察場域中無法發現封閉性特質時,人們傾向尋找視覺上具有相似性質(如:尺寸、體積、顏色、方位等)的事物,為之建立關聯性。相似性使人們的眼睛和大腦更容易辨識、組織與分類那些看似散亂無章的事物。

  5. 接近性、鄰近性(law of proximity)
  6. Tidwell:如果東西緊密地放在一起,觀看者會將這兩個東西建立關聯。這就是UI上要做內容和控制元件分群的基本原因。
    Chen:但是很有趣的,一旦距離拉開之後,我們便傾向將靠近的事物看成一體,而非相似的事物,此時我們將兩個方塊和兩個圓形看成一個直排。由此可以猜測接近性的權重可能大於相似性。接近性在使用者介面中是常常被大量運用的一種特性,例如:相近的按鈕我們會將其看成一個群組。


    距離會影響人們判斷事物的關聯性。具有相似性質的事物一旦拉開距離,人們可能就會改視其他鄰近的事物為同一群體。即使是不相似的事物也可能因為距離相近,而在視覺上產生群組效果。例如:鄰近的按鈕或控制元件會被視為同一群組、安排內容文字時利用留白區隔不同的段落概念等。以視覺判定群組的比重上,接近性可能優先於相似性。

  7. 連續性(law of symmetry)
  8. Tidwell:我們的眼睛想要看到連續的直線和曲線,可由較小的元素排列而成。
    Chen:我們的大腦傾向將事物看成連續的形體,舉例來說,我們不會將下面的左圖看成兩個相碰的圓環,而是交叉的兩個曲線。我們也不會將右圖看成兩個相觸的菱形,而是交叉的兩條直線。這也許是因為大腦處理連續的事物比處理重疊或不連續的事物要更為敏捷所導致。


    大腦處理連續的事物會比處理重疊或不連續的事物更為敏捷。因此,面對不連續的元素排列時,人們會優先判斷連續性而非分離性。例如:某些項目清單或選單的每一句描述都具有獨立意義,但只要利用對齊排列便可產生視覺上的連續線段,因而被視為同一個群組。

  「人們在欣賞一幅圖畫或一張攝影作品時,畫面裡的每一個部份形成了各自獨立的視覺元素,如果想讓觀者留下深刻的視覺認知,元素與元素之間必須彼此產生某種形式的關連。人類的認知系統,如何把原本各自獨立的局部訊息串聯整合成一個整體概念,正是完形心理學派主要的研究課題。[4]

  完形心理學主張人們對事物的認知不光只是從視覺上取得資訊,而是將視覺資訊與腦中既有的認知、印象、經驗整合後才能真正體認與感覺到事物。使用者操作網頁介面時對圖文資訊的認知不只受到視覺感知資訊的影響,更與使用者過去經驗、認知與既有知識相互結合之後才能理解及操作。因此,使用者認知的介面優使性不只受到個人對於操作介面外觀之視覺美感影響,也與使用者過去的操作經驗、個人偏好、知識背景與認知邏輯具有關聯性。對於介面設計者而言,只設計一個共通的操作介面並無法滿足全體使用者的需求。設計者規劃介面時必須注重個人化經驗,根據不同使用者得特性彈性調整功能、版型與資訊呈現方式,方能異中求同,盡力滿足大部分使用者的需求。



資料來源:
  1. 莊惠淳(譯)(民101)。操作介面設計模式第二版(原作者:J. Tidwell)。台北市:碁峰資訊。(原著出版年:2011)(132-139頁)
  2. Desiring Clicks(2013年6月22日)。完形心理學的視覺法則【網站資料】。取自:http://dclick.fourdesire.com/2012/05/12/%E5%AE%8C%E5%BD%A2%E5%BF%83%E7%90%86%E5%AD%B8%E7%9A%84%E8%A6%96%E8%A6%BA%E6%B3%95%E5%89%87
  3. 飛翔丸子(2013年6月23日)。簡介完形理論【部落格資料】。取自:http://blog.yam.com/jacklinux/article/24018044
  4. 教育行政筆記與生活紀事(2013年6月23日)。格式塔(完形心理學, Gestalt psychology)【部落格資料】。取自:http://blog.xuite.net/kc6191/study/15706646-%E6%A0%BC%E5%BC%8F%E5%A1%94(%E5%AE%8C%E5%BD%A2%E5%BF%83%E7%90%86%E5%AD%B8,+Gestalt+psychology)

留言

熱門文章