跳到主要內容區塊

政府網站營運交流平台-中文

網路趨勢與社群應用分享

UI設計的完形心理學

UI介面設計的使用者認知心理學基礎

格式塔學派(德語:Gestalttheorie)是心理學重要流派之一,興起於20世紀初的德國,又稱為完形心理學,格式塔學派主張人腦的運作原理是整體的,「整體不同於其部件的總和」。例如,我們對一朵花的感知,並非純粹單從對花的形狀、顏色、大小等感官資訊而來,還包括我們對花過去的經驗和印象,加起來才是我們對一朵花的感知。(Wikipedia, 2019)
完形心理學也是與分群和對齊相關的理論,描述數種人類視覺系統內在的佈局屬性。(Tidwell, 2011)而使用者在閱讀UI介面,亦是透過他們自身的心理認知系統,進行對介面上的元素解讀,而這過程當中如何認知、辨識與建立畫面的關聯性,則仰賴完形心理學的實際運用。也因此網頁相關的介面設計,在規劃與設計版面時,通常會應用完形定理,透過完形定理可以有效的讓使用者快速的釐清版面資訊與元素之間的關係,此外也能讓設計師與規劃者在設計介面時,能有明確的參考審核依據與共同的溝通語彙。

完形心理包含了以下幾特點:
一、相似性&接近性
二、連續性
三、封閉性

一、接近性&相似性

我們的大腦傾向將事物看成連續的形體,關於「接近性」是若元素緊密地放在一起,觀看者會將這兩個東西在心智上建立關連,這就是UI上要做內容和控制元件分群的基本原因。「相似性」是若兩個元素具有相同的尺寸、體積、顏色、方位...觀看者也會將他們建立關聯。元素之間的距離會引響觀看者判斷事物的接近性,而具有相同外型的元素會引響觀看者判斷事物的相似性,而接近性對觀看者的引響會大過於相似性。

圖一、相似性圖二、接近性

圖三、接近性與相似性UI介面設計運用

二、連續性

我們的眼睛想要看到連續的直線和曲線,可由較小的元素排列而成。我們的大腦傾向將事物看成連續的形體,舉例來說,我們不會將下圖看成兩個相碰的圓環,而是交叉的兩個曲線。我們也不會將右圖看成兩個相觸的菱形,而是交叉的兩條直線。這也許是因為大腦處理連續的事物比處理重疊或不連續的事物要更為敏捷所導致。大腦處理連續的事物會比處理重疊或不連續的事物更為敏捷。因此,面對不連續的元素排列時,人們會優先判斷連續性而非分離性。

圖四、連續性之特性

圖五、連續性UI介面設計運用

三、封閉性

大腦會將許多個獨立的元素,視之為完整封閉的圖形概念,觀看者會想要看到簡單的封閉形狀,如下圖四個黑色的圓各被去除掉四分之一,所保留下來的四個直角互相對應,產生出封閉形狀的負空間,即讓觀看者的大腦辨識到負空間的方形,進而認知上在大腦中聯想與建立起完整的方形概念。

圖六、封閉性之特性圖七、封閉性UI介面設計運用

連續性和封閉性解釋了為何元素要對齊。對齊元素使元素的邊緣形成一連綿不斷且井然有序的線條,使得觀看者假定這線條上的元素是有關連性的。此外,運用相似大小的形狀置放在界面中,也能夠有效的強化此區塊元素與元素之間的關連性。
上述之完形呈現各種原則在介面設計上的運用基礎,可藉由此基礎建立一個更有效的整體設計。完形定理是可以交互使用的,在介面的設計上妥善運用此定理,亦或是在審核介面UI稿件時,憑最直觀的感受去思考介面上元素之關連性,我們更能掌握設計方向以及需要調整的方法。

 

資料來源:

  1. 莊惠淳(譯)。操作介面設計模式第二版(原作者:J. Tidwell)。台北市:歐萊禮。(原著出版年:2011)(132-139頁)
  2. Between the world Blog. 認知理論:完形理論的視覺法則(Gestalt Principle)。http://reasonc.blogspot.com/2013/06/gestalt-principle.html#more
  3. Wikipedia. 格式塔學派。 https://zh.wikipedia.org/wiki/%E6%A0%BC%E5%BC%8F%E5%A1%94%E5%AD%A6%E6%B4%BE

 

圖片來源:

圖一、圖二、圖四、圖六。用「完形心理學」,增加介面設計有感度 。 https://medium.com/as-a-product-designer/%E7%94%A8-%E5%AE%8C%E5%BD%A2%E5%BF%83%E7%90%86%E5%AD%B8-%E5%A2%9E%E5%8A%A0%E4%BB%8B%E9%9D%A2%E8%A8%AD%E8%A8%88%E6%9C%89%E6%84%9F%E5%BA%A6-2fa0018b906e

 

張 健一

好視設計的校長兼撞鐘 專治設計疑難雜症