白話格式塔原理

2021-02-19 海鹽社

你工作中是否遇到過這樣的問題:

1、就是看著不太舒服,也說不出哪裡不對;

2、頁面元素散亂;

3、頁面看著單薄沒有層次。

...

那麼跟我一起來了解下格式塔原理吧。其實對于格式塔早有耳聞,甚至在工作中已經不知不覺的用到,但是對於其中的具體概念和應用場景沒有一個系統的學習與分析。於是決定對此做一個小小的總結,以便更清晰的解決工作中的一些不確定問題。

格式塔原理源於心理學,它最基本的概念就是整體大於各個部分的總和,給不完整的視覺信息找尋最直接最簡單的解讀方式。也就是說,我們的大腦會直接把肉眼所看到的內容篩選、分組、歸類、完整。而這都基于格式塔的幾個基本原則:

一些元素足夠近的時候,我們會把它們定義為一個整體。而那些距離較遠的,就自動將其視為其他組。在此主要強調位置。

文字部分信息之間間距較小,使用戶將其視為一個整體,與其他內容區分開來。而多個模塊之間間距較大。我們一眼看去,就能給界面明確劃分模塊:頂部導航、文字部分、卡片部分、配圖。雖然界面中的內容幾乎鋪滿,但是有序不散亂。

這個界面整體模塊間分塊清晰。圖文混排部分,使用親密原則將文字和圖片視為一個整體。利用間距空白形成各小組間的天然分割。

以上兩個界面,雖然沒有使用分割線與色塊做分割,但是元素間的間距大小對比使模塊關係都很清晰。原因是相同屬性的內容在一起會提高用戶的感知率,同時無關的元素要遠離,避免造成不必要的誤解。有時候界面會被說散,可能就是親密問題沒有把控好。

實操中要注意一個界面中不要有過多的間距,間距過多也會導致混亂不清。

人眼看到眾多元素在一起的時候,會自動將具有相似特性的元素(形狀、大小、顏色)視為一組。其中顏色屬性最為明顯。

因此我們做界面的時候可以將相同性質的元素做的近似,而需要重點突出的部分用顏色或者形狀區分。比如說界面中吸引用戶點擊轉化的按鈕可以用色彩進行區分。

又比如說列表中使用色塊或分割線將零散的元素圈成一個整體,引導用戶橫向閱讀。一方面使界面清晰,元素關係明確不散亂!另一方面引導用戶視覺。

表單中根據相似原則,利用分割線還有卡片,抵消距離的不確定感,避免因為距離混亂而不能明確將信息分組。

下面這個界面中比較明顯的是用灰色色塊,來將一組的內容框起來。圖中圖文部分比較親密,而和按鈕一行稍微有些疏遠,如果不用色塊做分割可能會造成迷惑。這就是利用了相似性原則引導用戶去將色塊中內容視為一個整體,使整個界面更加清晰。

下圖內容區域的三個模塊都使用了相似原則,在配色、排版以及配圖上都保持相似。整個界面看起來風格統一,比較和諧。

按一定規則連續排列的同種元素被感知為整體則視為連續原則。

人們視覺傾向於感知連續的形式而不是離散的碎片,通常人們會追隨某種連續的方向,視覺上把各個元素連結起來,且人們對於連續性的感知優先於相似性。

比如很多點組成的線,我們通常會把他們看成一條線,而不是很多點。這個原則不管是在界面,平面還是交互動效中都被廣泛的應用。

在界面中,卡片組利用漏出邊界引導用戶的視覺延續。讓用戶知道界面外還有內容,可以滑動觀看,以做到在有限的空間內展示更多的內容。

左圖也是卡片連續,滑動會有大小切換的效果,使界面狀態明確,有空間感,且這種效果使用戶在使用界面時更加流暢自然。

右圖界面左側線條和圓點將界面的內容連接起來,也是連續原則,起到引導用戶視線的作用

在logo設計中

尋找共同點連續,達到一個統一的整體。下面兩個logo都是由線組成的,但是我們第一視覺看到的是它的整體形態,而不是一根根單獨的線。

在交互中

在需要引導和指示的功能點中,通常會用到連續原則。比如引導頁、操作流程指示等,延續用戶的視覺方向,引導用戶操作。

封閉原則是人們通常在視覺上將尚未閉合的圖形看作一個完整的圖形。封閉性原理是對簡單原理的追隨,人們趨向將敞開的形態封閉、易於理解的完整形態。

比如下面兩個圖形,雖然是斷續的線組成的開放圖形,但是我們看到的就是圓形和方形,而不是多個線段。

圖標

斷點圖標就是典型的運用的封閉原則,雖然斷開依然不影響看整體的形態。但是在做成套斷點圖標時,要注意斷開的位置以及大小都要統一,比較複雜的圖標不適合做斷線。有個別不適合斷線的圖標,可以尋求其他的共同點與整體圖標保持統一,而不是強行斷線。

對稱是指物體或圖象對某一點、直線或平面而言,在大小、形狀和排列上相互對應。一般對稱給人的感覺是平衡、和諧。多用在平面設計中。一般在使用的時候為了避免單調,在平面設計中用到對稱的時候,經常會做不完全對稱處理。

我們在感知事物的時候,總是自動的將視覺區域分為主體和背景。一般在元素重疊的時候,我們會將上方小的元素視為主體,其他視為背景。

這裡比較典型的是界面中經常使用的彈窗設計,通過將當前的內容變暗,將之轉換成為背景,之後彈出燈箱,使用戶的視覺焦點轉移。

共同命運主要針對的是運動的元素,一起運動的物體被視為是具有共同命運的一組。就比如下圖中的圖片和左側的文字。

其實這種例子還有很多,比如底部導航欄切換時點擊和未點擊狀態的共同切換,可視為共同命運;還有界面中成組滑動的卡片等。

了解了這些基本的原理,在日常的素材搜集中還要多分析,看那些優秀的設計都使用了哪些原則,我們如何去將它好的點用在自己的設計中去。長此以往才能真正掌握,一起加油鴨~

相關焦點

  • 設計師必須懂的基本原理——格式塔原理
    前言:最近在從新梳理學習過設計原理,無意中翻看到這個經典基本設計原理。可能平時都已經有意無意在實際工作中都已經用到了,但就是沒有一個可靠理論支撐或是叫說法,所以現有重新整理並且發布這個格式塔原理。什麼是格式塔原理 (Gestalt)格式塔心理學誕生於1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象並對它們編訂了目錄。
  • 格式塔原理—超實用設計基本原理
    本文分享的格式塔原理,就是從心理學角度分析設計原則。什麼是格式塔原理格式塔,音譯自德文Gestalt,誕生於19世紀德國的心理學家研究人類視覺而形成的心理學派。格式塔具體包含哪些原則,有各種版本,個人比較認同以上幾種設計原則。以後的分享中,有機會的話(如果我記得的話),我也會提提排版方面有用什麼設計原則。
  • 如何運用格式塔原理進行攝影創作?
    一、文章綜述在攝影的創作中,格式塔原理在攝影的構圖中起到了重要作用。千人組合成「和」,中國的傳統和為貴格攝影的格式塔原理,把圖像作為有機的整體來理解,而不是作為獨立的各個局部的集合體。運用各種有趣的元素的進行空間組合,組織成一幅完美的畫面,通過攝影的用光,色彩的構成,等其它攝影藝術手段,創作出優秀的攝影藝術作品,這就是格式塔原理在攝影創作中的應用。二、運用格式塔原理進行攝影創作的時候,有幾個重要的關鍵的特徵:
  • 格式塔原理!
    格式塔心理學的原理就是知覺的組織,組織的過程就是將一些元素統一在一起,而我們能夠感知到完整的單位,這不單單是組織過程的結果,元素之間發生著某些相互聯繫,由此而產生完形整體。格式塔原理告訴我們視覺形象首先是作為統一的整體被認知的,而後才以部分的形式被認知,也就是說,我們先看見整體,然後才看見組成整體的各個部分,即是一個不斷組織、簡化、統一的過程,正是通過這一過程,才能產生出易於理解、協調的整體。要想設計出優秀的標誌就應該從視覺心理學的角度,對圖形元素加以組織,創作出傳情達意的標誌作品。
  • 格式塔原理,教你如何合理的布局設計界面
    APP頁面設計布局最關鍵的是為用戶展現層次清晰的視覺傳達,格式塔原理可以有效地指導界面設計中的用戶交互,它能夠幫助設計師準確對界面進行組織和架構,從而設計出用戶友好型界面。格式塔原理的五個基本原則1、接近原則物體之間的相對距離會影響我們感知它們的關係。相互靠近的物體被認為比相互距離較遠的物體更有關聯性。
  • 運用格式塔心理學做設計
    我們在做設計的時候利用好格式塔心理學,很可能你的設計就能吸引別人的眼球,從眾多設計中脫穎而出。格式塔心理學,又叫完形心理學。格式塔心理學重要的概念便是「整體不等於並且大於部分之和」而我們在做設計時就要利用格式塔心理學 「整體不等於個體之和」 這一重要概念人類的大腦有一些神奇的功能,因為世界是如此複雜,所以我們的大腦會聰明地嘗試組織各類視覺元素,將他們組成「完整個體」。
  • 徹底搞懂格式塔原理先!
    這就牽涉到我們今天要聊的主題了,格式塔原理。人類的大腦天生就能把規律性的散點連接起來,並對目之所及的事物賦予意義。設計是一個創造性的領域,是形式和空間的相互融合,並隨之創造各種各樣的體驗。無論我們接觸到什麼樣的設計作品,我們的大腦都會本能地將作品解構為更簡單的各個組件,這些組件由基本的形狀和不同的形態組成,而這些形狀和形態則與空間息息相關。
  • 引人注目的「格式塔」設計技法!
    文/鳳鳴 格式塔是一個不斷組織、簡化、統一的過程,正是通過這一過程,才產生出易於理解、協調的整體,如果包含了太多的互不相關的元素,我們的大腦就會試圖將其簡化,把各個單位加以組合,使之成為一個知覺上易於處理的整體。
  • 神奇的「格式塔」理論~《視覺思維》讀書筆記二
    一、什麼是「格式塔」格式塔心理學誕生於1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象並對它們編訂了目錄。「形狀」和「圖形」在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。「格式塔」是形狀(空間結構)與形式(空間排列)的統一;中文又叫「完形」,是知覺進行了積極組織或建構的結果(功能),是一個全「新」的知覺整體。
  • 【Vue原理】Watch - 白話版
    專注 Vue 源碼分享,為了方便大家理解,分為了白話版和 源碼版,白話版可以輕鬆理解工作原理和設計思想,源碼版可以更清楚內部操作和 Vue的美,喜歡我就關注我,好吧兄弟,不會讓你失望的今天我們用白話文解讀 watch 的工作原理,輕鬆快速理解 watch 內部工作原理。你說,你只懂怎麼用的,卻不懂他內部是怎麼工作的,這樣能有什麼用?
  • 經驗的完形--「格式塔心理學」學習筆記(一)
    杜老師就閱讀理解和完形填空部分進行了重點分析,其中針對完形填空備考重難點的分析中,提出了「格式塔心理學」這個心理學專業術語,完形填空題型命題原理就是「格式塔心理學」即「完形心理學」。因此,可以說明在此處打了絆子,「Improper pause出現了不當的停頓」完形填空(Cloze)又稱綜合填空,其命題原理是格式塔心理學(Gestalt Psychology),又叫完形心理學,強調整體感知和對文章從語義上的整體把握。從近幾年的高考試題看,完形填空以語義空格為主,語法部分的內容已經弱化為對詞法的考查。
  • 格式塔心理學理論
    格式塔心理學家試圖用場論解釋心理現象及其機制問題。考夫卡在《格式塔心理學原理》中提出了一系列新名詞:「行為場」、「環境場」、「物理場」、「心理場」、「心理物理場」等。普朗克是現代理論物理學家,對場論有過重大貢獻,他強調事件的自然屬性及對量的測定背後特殊過程的探討,他反對經驗論和對量的測定的過分倚重。苛勒在1920年出版的《靜止狀態中的物理格式塔》一書的序言裡專門向普朗克致謝。
  • 格式塔學習理論—頓悟
    格式塔心理學派最早產生於德國,之後在美國得到進一步發展。格式塔心理學派否認了建構主義的元素主義和行為主義的刺激與反應之間的聯結。主張應該研究人的經驗及行為,強調經驗與行為的整體性,認為整體並不是部分的簡單相加。格式塔學派代表人物苛勒把格式塔原理應用到發展心理學,並且研究了頓悟學習,認為學習是一種完整的過程,是學習者對情景的重新分析之後得到的。
  • 格式塔視覺規律-我在實戰中的碎碎念
    今天小編給大家帶來的文章是格式塔視覺規律,本篇文章作者如是說:「這篇文章是寫給大多數人看的關于格式塔心裡學規律我在項目裡面的碎碎念。當然這會是全網最容易看懂的格式塔原理。」👀(全文共計2724字,閱讀約需要12分鐘)我在大三的時候第一次聽說到這個名詞「格式塔」。當時就看了一些有關於他的文章等資料,但是可能是我並不聰明的緣故,當時並沒有太懂格式塔是一個什麼東西。現在工作了幾個年頭在看的時候就很容易理解。下面就是我理解的格式塔希望對你有幫助。
  • 格式塔心理學的思想淵源與代表人物
    格式塔心理學是西方現代心理學的主要流派之一。1912年在德國誕生,後來在美國得到進一步發展,與馮特的心理學和構造主義相對立。格式塔是德文(Gestalt)譯音,其含義是整體、形式和結構等等(其英文詞是configuration)。格式塔心理學反對心理學中的元素主義,認為心理元素的分析並不能使我們了解整體的心理現象,所以它主張以整體的觀點來描述意識與行為。
  • 以Apple Music為例,為你解讀格式塔7大法則
    下面簡單說一下本文的選題理由:(1)為什麼選格式塔原理格式塔原理是設計心理學裡具備綱領性和指導性的設計法則,我們非常熟悉的設計4原則「對齊、重複、對比、親密」其實就是格式塔原理的另一種總結。從某種程度上說,自從圖形用戶界面的計算機問世以來,格式塔原理一直被廣泛運用在設計領域,並且已經深入人心。所以,筆者有必要在系列文章裡分享一下格式塔原理。
  • 心理科普丨關于格式塔心理學
    心理學作為格式塔心理學的代表人物之一,考夫卡在《格式塔心理學原理》一書中採納並堅持了兩個重要的概念:心物場(psycho-physical field)和同型論(isomorphism)。心物場考夫卡認為,世界是心物的,經驗世界與物理世界不一樣。
  • 格式塔心理學和美學的「異質同構」,你有多少了解和認識?
    一、格式塔心理學的基本原理   格式塔心理學誕生於1912年,它強調經驗和行為的整體性,反對當時流行的構造主義元素學說和行為主義「刺激一反映」的公式,認為整體不等於部分之和,意識不等於感覺元素的集合,行為不等於反射弧的循環。
  • 裝修參考:格式塔心理學原理在平面設計中的運用
    在日常生活中,我們肯定見到過一張相同的圖片卻有好幾種不同的視覺效果,這就是因為平面設計首先是從形開始的,這也是格式塔心理學的起點。格式塔心理學認為,行是設計的主要方面,任何一個設計作品都有其內在的整體效果,受眾者可以根據形而產生視覺上的不同效果,進而心理上也會有所不同,通過視知覺而傳達到的信息和理解方式來滿足受眾者的心理需求。簡單而言就是抓住受眾者的心理,用外形去刺激他的感官。就比如一盤辣椒放在我們面前,我們知道它是辣的,一盤甜點放在我們面前,它是甜的。
  • 機能主義心理學和格式塔心理學的區別及聯繫
    詹姆斯將動物行為、宗教經驗、變態行為等一些課題納入心理學研究,他的第一本著作《心理學原理》後來被視為傳世之作,當時甚至直到現在一直受到重視。威廉·詹姆斯同意鐵欽納關於意識是心理學的研究中心的觀點,但是他認為意識是流動的,就像是一條永遠變化著和流淌著的表象和感覺的河流,而絕不是像結構主義者描述的那樣是無生命的一堆磚頭。