格式塔心理學 | 設計師需要知道的設計原則!

5 評論 8911 瀏覽 65 收藏 19 分鐘

格式塔心理學是一種研究形式、構造與心理之間關系的心理學分支,對于設計師來說,了解和應用格式塔心理學的法則是非常重要的。本篇文章中介紹了7項常用的法則,一起來看看格式塔心理學在設計中的應用。

人的大腦總是傾向于通過以往的經驗或視覺模式來理解、感知這個世界,并將這些信息連接起來。例如:天空中出現的一團“怪異”的云朵,我們會將其看作成某種動物或某個熟悉的物體。

格式塔心理學 | 設計師需要知道的設計原則!

那么,為什么會有這種奇妙的聯系呢,這就要歸功于大腦的運作方式,它以看到的蓬松氣體來感知形狀或形式,一邊過濾大腦中曾接收過的信息、一邊以任意組合并填補空白,直至出現我們認為的那個結果。從以上案例可以看出,視覺和心理是相互聯系、且相互影響。

在設計中,設計師可以通過了解一些基本心理法則知道視覺和大腦是如何建立聯系、如何工作的,這有助于我們理解和控制這些聯系,本文要講的“格式塔原理”就是其中之一。

雖然很多設計師知道格式塔這個詞,但對其核心理念、延展知識卻知之甚少。格式塔到底是什么?在設計中如何運用?本文筆者通過自身積累以及閱讀過的大量文章進行總結,希望能幫你做出更好的設計,不足之處,歡迎一起探討。

一、了解格式塔原理

1.格式塔的起源

1910年,心理學家韋特海墨(M,Wetheimer)所乘坐度假旅行的火車在經過一個鐵道路口時,正在閃爍的燈讓他產生了光在運動的錯覺,隨后下車買了一個西洋鏡來測試,并發現了“似動現象”,這便奠定了格式塔的基礎,后經三位德國心理學家韋特海默、苛勒和考夫卡創立格式塔心理學,并在德國迅速發展。

格式塔的德文為“Gestalt”,意思為「形狀」和「圖形」,在心理學中可以看作是任何一種被分離的整體。格式塔心理學的研究源于視知覺,是現代認知主義學習理論的先驅,為后來的社會心理學的發展打下了堅實的基礎。

2.什么是格式塔

格式塔的核心為“整體大于部分之和”,即人類的視覺感知具有整體性,當感知到復雜的事物時,會從神經系統層面感知形狀、圖形或物體,并在大腦的指揮下將視覺輸入自建結構成為一個整體,而不是單獨的互不相關的邊、線或區域。

在格式塔中,整體不能簡單地看作為個體集合,其特性并不包含于元素之內。例如:矩形+矩形可以組合成一個圓,一些色塊組合起來就是一只熊貓等。

格式塔心理學 | 設計師需要知道的設計原則!

3.為什么選格式塔原理

格式塔原理是設計心理學中的先驅,具備綱領性和指導性,幾乎是所有設計師入門必學的基礎心理學,如我們熟悉「對齊、重復、對比、親密」4原則也是它的另一種總結。合理運用格式塔原理,能用來影響用戶的感知、吸引用戶注意力,最終通過引導用戶做出行為的改變,讓我們有意識地做出真正符合用戶的設計。

格式塔心理學 | 設計師需要知道的設計原則!

4.常用的原則有哪些

格式塔原理描述的是人類視覺從神經系統對事物的感知方式,經心理學研究者總結并得出若干理論,但在設計中,常用的有以下7種:

  • 接近性原則
  • 相似性原則
  • 連續性原則
  • 封閉性原則
  • 簡單對稱性原則
  • 主體與背景原則
  • 共同命運原則

格式塔心理學 | 設計師需要知道的設計原則!

二、接近性原則

1.什么是接近性

接近性原則指出,物體之間的相對距離會影響我們感知它們的關系,元素之間越是接近,組合在一起的可能性就越大,會被看作成一個整體,反之那些距離較遠的則自動劃分到組外。

在復雜的設計中,接近性需要通過對比來考慮各元素之間的內部邏輯關系,來劃分結構和視覺層次。如圖B,我們一眼就能將其分為三組,但細看內部結構對比就很容易發現,每個小組又可以分為兩組,這就是接近性法則最直觀的體現。

格式塔心理學 | 設計師需要知道的設計原則!

2.應用于設計

設計師想要表達信息的層級關系時,就需要合理運用接近性法則,它能讓界面層次清晰有序。例如列表頁設計,將相關的信息組合在一起并重復排列出來,就能明顯感知不同小組之間的界限,當同一小組內元素關系明確時,將其更加靠攏,用戶視覺就會更聚焦。

下圖的人員列表,首先我們可以快速將其分為四組內容,但在組內通過距離對比,又可以將頭像、介紹、操作分為三個小組。

格式塔心理學 | 設計師需要知道的設計原則!

三、相似性原則

1.什么是相似性

相似性認為,有共同視覺元素的物體看起來更有關聯性,我們傾向于將彼此相似的元素(形狀、尺寸、方向、顏色…)分為一組,這就意味著當功能、含義和層次結構相同時,應該讓它們在視覺上保持一致。

如下圖,整體是一個正方形,我們分別可以從顏色、大小、形狀等共同屬性將其分為不同的小組。

格式塔心理學 | 設計師需要知道的設計原則!

2.應用于設計

在UI設計中,當界面元素過多,接近形原則不足以滿足信息層級區分時,可以使用相似性原則來統一視覺樣式、表達統一的功能性。

例如下圖的金剛區,使用不同的大小、顏色、形狀來創建對比或視覺權重,呈現出不一樣的視覺效果,以達到弱化(降低視覺)或凸顯(強化視覺)某些內容。除此之外,還有底部Tab欄、超鏈接、按鈕、標題等設計,都會用到相似性原則。

格式塔心理學 | 設計師需要知道的設計原則!

四、連續性原則

1.什么是連續性

連續性指出,人的視覺傾向于完整的連接一個圖形,而不是零散的碎片,通過感知事物的形狀和運動方向將分散的元素連接在一起,使直線繼續成為直線、曲線繼續成為曲線并朝著特定的方向延續。

連續性需要基于人們已有的認知來感知事物的存在,利用視覺慣性進行延續,直至閉合,如果形象過于陌生則無法產生閉合聯想。如下圖,雖然是矩形組合,但我們一眼就能認出這些幾何圖形。

格式塔心理學 | 設計師需要知道的設計原則!

2.應用于設計

在互聯網產品中,做字體設計時,合理的通過斷點來打破常規并不影響識別度,這正是利用的連續性原則。UI界面中的banner輪播圖交互模塊、圖標等,很多都結合了連續性設計來提升用戶的視覺體驗。

如下圖的字體、圖標,雖然有多個元素拼合或斷點處理,但碎而不散,我們依然能通過慣性思維感知到這是一個完整的元素。

格式塔心理學 | 設計師需要知道的設計原則!

五、封閉性原則

1.什么是封閉性

封閉性認為,人們的視覺系統傾向于將不完整的局部當做一個整體來感知,看起來與連續性有諸多相似,不過連續性是通過物體的形狀和運動方向、按照視覺慣性來制定閉合規律,而封閉性則并無特定規律,只要把握好不完整物體的尺度、使各元素之間相互輔助,就能讓其與我們認知模型中的原型匹配。所以,不管是缺少了一部分還是更多,我們都可以自行腦補后將其視作一個完整物體。

如下圖的熊貓剪影,好幾個地方都沒有明顯的封閉界限,即便有多個零散的色塊,都不會影響識別度。IBM的LOGO像是被“刀砍過”、蘋果的LOGO被“咬了一口”,我們依然可以識別出完整的圖形,這些都是封閉性原則中非常著名的案例。

格式塔心理學 | 設計師需要知道的設計原則!

2.應用于設計

在圖形用戶界面中,運用封閉性原則做省略或減法處理,可以節省很多空間資源。例如界面的橫向滑動組件,右側只顯示少部分內容用來提示,用戶便能自行聯想出隱藏的更多內容。還有一些卡片設計,下方直接被水平截斷,用戶看到不完整的形狀后也能腦補出缺失的部分。

格式塔心理學 | 設計師需要知道的設計原則!

六、簡單對稱性原則

1.什么是簡單對稱性

在觀察事物的過程中,人們的第一印象更傾向于簡單且對稱的物體,當看到一個復雜的事物時,神經系統會潛意識地移除無關細節并簡化它們,使其成為簡單且統一的形狀這就是簡單對稱性原則。

簡單的物體可以降低大腦的認知負荷,更容易被識別。規則、對稱的物體能給人一種堅不可摧的感覺,不管有多遠的距離,都可以將其歸屬在一起并成為一個相對的整體,不過有時候,對稱的物體會比較煩悶 ,可以通過添加一些修飾元素來吸引人們的注意力。

格式塔心理學 | 設計師需要知道的設計原則!

2.應用于設計

在UI設計中,大家也會經常利用簡單對稱原則做設計。如下圖,我們會將其解構為獨立且大小相同(近大遠小/近實遠虛的物理聯想)的三張圖片。

格式塔心理學 | 設計師需要知道的設計原則!

瀑布流也是該原則最直觀的體現,尤其是這種以圖片流為主的產品,在很大程度上減輕了用戶的閱讀壓力,提高瀏覽效率。

格式塔心理學 | 設計師需要知道的設計原則!

七、主體與背景原則

1.什么是主體與背景

人們在感知事物的時候,總是會將視覺區域分為主體和背景兩個部分,主體指的是最吸引視覺注意力的元素,其他的元素皆為背景,這對于我們區分重要信息和次要信息至關重要。在同一畫面中,不管有多少元素,都只能存在一個主體。

區分主體與背景需要從多個維度,從場景角度,我們傾向于將大場景中的小元素視為主題,大場景則為背景;從層級角度,可直接忽略大小,處于視覺第一層級的則為主體。設計師通過對主體與背景關系的處理,向用戶傳遞出不同內容的優先級。

格式塔心理學 | 設計師需要知道的設計原則!

2.應用于設計

將主體與背景原則運用于UI設計中,能幫助設計師在設計過程中抓住用戶注意力。如下圖界面中的彈窗設計,就是利用了這一原則,通過拉大主體與背景的差異性,突出彈窗,讓用戶優先看到我們想讓他們看到的信息。

格式塔心理學 | 設計師需要知道的設計原則!

八、共同命運原則

1.什么是共同命運

共同命運原則指出,人們傾向于將具有共同運動形式的事物感知為一個彼此相關的整體,無論元素之間的距離有多遠、或其他屬性(形狀、顏色、大?。└鳟?,但只要沿著相同的方向、相同的速度運動,共同命運就會將其歸類。

共同命運針對的是運動的物體,適合用在交互設計中,與前面提到的相似性、接近性相關。當某些元素的動作需要保持相似性或一致的運動方向時,人的視覺神經系統就可以將這些元素分離出來并視為同一個小組。

格式塔心理學 | 設計師需要知道的設計原則!

2.應用于設計

移動端產品中有很多這樣的案例,如iOS系統中,長按刪除某個APP時,所有桌面圖標會抖動、且左上角都有一個相同的刪除圖標,通過一致性的動作告知用戶圖標的可操作狀態,非常直觀。

格式塔心理學 | 設計師需要知道的設計原則!

電商APP的購物車也是一樣,當添加了太多商品需要刪除一部分,點擊管理后,每個商品都會保持相同的動作及視覺樣式,將可編輯與不可編輯的內容形成隔離效果,具有很強的視覺引導性。

格式塔心理學 | 設計師需要知道的設計原則!

結語

設計要求和諧有序、層次分明,這不僅是輔助傳達內在業務信息的存在,還是一門關于溝通、性能和便利性的學問,靈活運用格式塔原理能幫助我們實現這些目標,對產品體驗的提升有很大的幫助,所以不管是產品經理還是設計師,都應該重視格式塔原理。

從上述的設計案例中不難發現,這7項常用的法則并不是獨立存在的,它們之間相輔相成,具有高度的關聯性。在實際工作中,我們需要根據不同的需求和使用場景,將這些基本法則組合使用,才能使你的設計方案更加有據可依,用戶也能更好地理解、使用我們的產品。

筆者總結本篇文章的目的在于讓更多設計師知道格式塔心理學在設計中的重要性。當然,格式塔心理學雖然可以幫助我們提升設計水平,但只要善于學習、持續探索,便會發現還有更多的心理學能幫助我們做出更好的設計,格式塔只是最基本的理論知識而已。

專欄作家

大漠飛鷹;公眾號:能量眼球,人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 學到了

    來自廣東 回復
  2. 一直找不到心理學轉實用上的教學,很有啟發

    來自四川 回復
    1. 感謝認可

      來自河南 回復
  3. 受教了

    來自北京 回復
    1. ??

      來自湖北 回復