白話格式塔原理

2021-01-13 海鹽社

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

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

2、頁面元素散亂;

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

...


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


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


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


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


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


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


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


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


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



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

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


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


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


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


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


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


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


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


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


在logo設計中

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

在交互中

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


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

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


圖標

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


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


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


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


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


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


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


相關焦點

  • 設計師必須懂的基本原理——格式塔原理
    前言:最近在從新梳理學習過設計原理,無意中翻看到這個經典基本設計原理。可能平時都已經有意無意在實際工作中都已經用到了,但就是沒有一個可靠理論支撐或是叫說法,所以現有重新整理並且發布這個格式塔原理。什麼是格式塔原理 (Gestalt)格式塔心理學誕生於1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象並對它們編訂了目錄。
  • 格式塔原理—超實用設計基本原理
    本文分享的格式塔原理,就是從心理學角度分析設計原則。什麼是格式塔原理格式塔,音譯自德文Gestalt,誕生於19世紀德國的心理學家研究人類視覺而形成的心理學派。該學派認為:人類對於任何視覺圖像的認知,是一種經過知覺系統組織後的形態輪廓,而並非所有各自獨立部分的集合。
  • 如何運用格式塔原理進行攝影創作?
    一、文章綜述在攝影的創作中,格式塔原理在攝影的構圖中起到了重要作用。千人組合成「和」,中國的傳統和為貴格攝影的格式塔原理,把圖像作為有機的整體來理解,而不是作為獨立的各個局部的集合體。運用各種有趣的元素的進行空間組合,組織成一幅完美的畫面,通過攝影的用光,色彩的構成,等其它攝影藝術手段,創作出優秀的攝影藝術作品,這就是格式塔原理在攝影創作中的應用。二、運用格式塔原理進行攝影創作的時候,有幾個重要的關鍵的特徵:
  • 【乾貨】視覺篇-格式塔原理
    我們可以從格式塔中了解到視覺形象對人的心理影響,這裡也包括了對界面,廣告等視覺信息的感知;網上有許多格式塔文章,但觀念不盡相同。在這裡寫下我並不成熟的思考,歡迎大家拍磚斧正;二.格式塔觀念:格式塔心理學派斷言:人們在觀看時,眼腦並不是在一開始就區分一個形象的各個單一的組成部分,而是將各個部分組合起來,使之成為一個更易於理解的統一體。此外,他們堅持認為,在一個格式塔(即一個單一視場,或單一的參照系)內,眼睛的能力只能接受少數幾個不相關聯的整體單位。這種能力的強弱取決於這些整體單位的不同與相似,以及它們之間的相關位置。
  • 【精研篇】深入了解格式塔原理
    想要在界面排版、網頁設計中讓整體視覺井然有序,舒服協調,格式塔就是必須掌握的知識咯,今天的教程用深入淺出的方式給同學們科普格式塔原理以及在設計上的運用,包含大量實例,新手也可以輕鬆看懂!在界面排版,網頁廣告設計等視覺傳達設計工作中,視覺上的畫面瑣碎,零散,信息混亂無序總是視覺設計師無可避免的問題。視覺的整體感做不好,會給人不舒服,不協調的心理感受。
  • 格式塔原理!
    格式塔心理學的原理就是知覺的組織,組織的過程就是將一些元素統一在一起,而我們能夠感知到完整的單位,這不單單是組織過程的結果,元素之間發生著某些相互聯繫,由此而產生完形整體。格式塔原理告訴我們視覺形象首先是作為統一的整體被認知的,而後才以部分的形式被認知,也就是說,我們先看見整體,然後才看見組成整體的各個部分,即是一個不斷組織、簡化、統一的過程,正是通過這一過程,才能產生出易於理解、協調的整體。要想設計出優秀的標誌就應該從視覺心理學的角度,對圖形元素加以組織,創作出傳情達意的標誌作品。
  • 格式塔原理對視覺/互動設計師有多重要?
    而界面設計背後的這個原理則來源———格式塔原理支撐其實產品設計所有的這些界面設計準則是很相似的。這是為什麼呢?答案在於,所有設計準則都基於人類心理學:人們如何感知、學習、推理、記憶,以及把意圖轉換為行為。許多設計準則至少有一些心理學背景,應用在軟體系統設計上。
  • 格式塔原理,教你如何合理的布局設計界面
    APP頁面設計布局最關鍵的是為用戶展現層次清晰的視覺傳達,格式塔原理可以有效地指導界面設計中的用戶交互,它能夠幫助設計師準確對界面進行組織和架構,從而設計出用戶友好型界面。格式塔原理的五個基本原則1、接近原則物體之間的相對距離會影響我們感知它們的關係。相互靠近的物體被認為比相互距離較遠的物體更有關聯性。2、相似原則格式塔原理中的相似和接近兩個原則一起運用在產品設計中。它指出了影響我們感知分組的另外一個原則:有共同視覺元素的物體看起來更有關聯性。
  • 運用格式塔心理學做設計
    我們在做設計的時候利用好格式塔心理學,很可能你的設計就能吸引別人的眼球,從眾多設計中脫穎而出。格式塔心理學,又叫完形心理學。格式塔心理學重要的概念便是「整體不等於並且大於部分之和」而我們在做設計時就要利用格式塔心理學 「整體不等於個體之和」 這一重要概念人類的大腦有一些神奇的功能,因為世界是如此複雜,所以我們的大腦會聰明地嘗試組織各類視覺元素,將他們組成「完整個體」。
  • 引人注目的「格式塔」設計技法!
    文/鳳鳴 格式塔是一個不斷組織、簡化、統一的過程,正是通過這一過程,才產生出易於理解、協調的整體,如果包含了太多的互不相關的元素,我們的大腦就會試圖將其簡化,把各個單位加以組合,使之成為一個知覺上易於處理的整體。
  • 格式塔在界面中的使用思考
    :貼近貼近性原理是指,物體之間的相對距離會影響我們感知它們如何組織在一起。 : 相似格式塔相似性原理是影響我們感知分組的另一個因素:如果其他因素相同,那麼相似的物體看起來歸屬於一組。連續性原理的IBM標誌設計,它由非連續的藍色塊組成,但一目了然,很容易看出它們是三個粗體字母。
  • 神奇的「格式塔」理論~《視覺思維》讀書筆記二
    一、什麼是「格式塔」格式塔心理學誕生於1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象並對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的:我們的視覺系統自動對視覺輸入構建結構,並在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域。
  • 徹底搞懂格式塔原理先!
    這就牽涉到我們今天要聊的主題了,格式塔原理。人類的大腦天生就能把規律性的散點連接起來,並對目之所及的事物賦予意義。設計是一個創造性的領域,是形式和空間的相互融合,並隨之創造各種各樣的體驗。無論我們接觸到什麼樣的設計作品,我們的大腦都會本能地將作品解構為更簡單的各個組件,這些組件由基本的形狀和不同的形態組成,而這些形狀和形態則與空間息息相關。
  • 格式塔設計原理,你知道多少?
    1.  個人認為:簡單原理暗合構圖法則,例如最常見的三角形構圖,均衡構圖,對陣構圖,向心式構圖(圓形)、  對角線,X型,構圖等,其目的都是為了在複雜的信息環境中,構建更易懂的整體。
  • 格式塔學習理論—頓悟
    格式塔心理學派最早產生於德國,之後在美國得到進一步發展。格式塔心理學派否認了建構主義的元素主義和行為主義的刺激與反應之間的聯結。主張應該研究人的經驗及行為,強調經驗與行為的整體性,認為整體並不是部分的簡單相加。格式塔學派代表人物苛勒把格式塔原理應用到發展心理學,並且研究了頓悟學習,認為學習是一種完整的過程,是學習者對情景的重新分析之後得到的。
  • 格式塔視覺規律-我在實戰中的碎碎念
    今天小編給大家帶來的文章是格式塔視覺規律,本篇文章作者如是說:「這篇文章是寫給大多數人看的關于格式塔心裡學規律我在項目裡面的碎碎念。當然這會是全網最容易看懂的格式塔原理。」👀(全文共計2724字,閱讀約需要12分鐘)我在大三的時候第一次聽說到這個名詞「格式塔」。當時就看了一些有關於他的文章等資料,但是可能是我並不聰明的緣故,當時並沒有太懂格式塔是一個什麼東西。現在工作了幾個年頭在看的時候就很容易理解。下面就是我理解的格式塔希望對你有幫助。
  • 機能主義心理學和格式塔心理學的區別及聯繫
    詹姆斯將動物行為、宗教經驗、變態行為等一些課題納入心理學研究,他的第一本著作《心理學原理》後來被視為傳世之作,當時甚至直到現在一直受到重視。威廉·詹姆斯同意鐵欽納關於意識是心理學的研究中心的觀點,但是他認為意識是流動的,就像是一條永遠變化著和流淌著的表象和感覺的河流,而絕不是像結構主義者描述的那樣是無生命的一堆磚頭。
  • 格式塔心理學的建立、基本觀點、評價
    格式塔心理學是西方現代心理學的主要流派之一,其含義是整體、形式和結構…… 主張以整體的觀點來描述意識與行為。1912年在德國誕生,後來在美國得到進一步發展。今天我們來聊一聊格式塔心理學的建立、基本觀點、評價1似動現象的研究與格式塔心理學的建立1. 似動現象的實驗研究惠特海默是以速示器來做實驗的。
  • 格式塔心理學流派—苛勒
    格式塔心理學是由魏特海默、苛勒和考夫卡於1910年至1912年間在德國法蘭克福大學創建的,其產生的正式標誌是魏特海默於1912年發表的論文《關於運動知覺的實驗研究》。格式塔心理學也被稱作「完形心理學」或「完形主義」。格式塔學派認為整體大於部分之和,主張心理學要研究整體的經驗與行為,它最初是以反對元素主義或構造主義心理學起家的。後來,它也反對行為主義對行為研究的還原分析論。
  • 談談格式塔團體的那些事兒........
    最近很多朋友都對格式塔團體產生了濃厚的興趣,很多人都在問格式塔團體的工作模式的操作流程,它跟精神動力團體、會心團體、存在主義團體、