格式塔在界面中的使用思考

2021-01-13 TXD技術體驗設計


讓我們來思考一下

每當我們抬頭看天的時候,經常會看到如下圖所示的這種形狀奇特的雲,會不會覺得像熟悉的動物或東西 , 那麼你是否曾想過,為什麼僅僅通過一團毛絨絨的氣體你就能在腦中建立起這種特殊聯繫呢?


這其實這就是因為你的大腦總是試圖通過對比以前的經驗或者視覺模型和以及其關聯的點來了解世界。感知形狀和形式、分組信息、填補空白等從而在你的腦中形成大概畫面。


了解大腦如何運作對成為一個理性的設計師,成為視覺傳達的主導者,有很大的幫助。

可以通過使用它們來影響感知,直接或間接的影響行為;當涉及到目標導向、解決問題、直觀設計以及UI設計時非常有用。


現在我們清楚的知道,視覺設計和心理學是相互聯繫且可以相互影響的,格式塔其中的一些原則可以幫助我們理解和把控這種聯繫。


格式塔的產生、發展頗具波折,其影響也涉及眾多領域。單從設計領域來講,格式塔理論可提煉出7大原則。



01  格式塔原則:貼近


貼近性原理是指,物體之間的相對距離會影響我們感知它們如何組織在一起。

互相靠近的物體看起來屬於一組。

左邊的圓相互之間水平方向比垂直方向靠的更近,因為我們看到圓排成了三行;右邊的圓垂直方向上比水平方向上靠的更近,因為我們看到圓排成了三列。



舉個簡單的例子,這個是一個票務的預定入口,

他的排版就是典型的比較零散的樣式,換成模塊圖就是這樣,會更明顯,整個組件脫離了上下文,因為沒有將圖像,標題和連結關聯在一起。



如果使用貼近原則,把三個單獨漂浮在外層空間的元素,作為一個整體組件,在視覺上就會很舒適。


舉個B端頁面中的例子:


在我們的數字卡片設計裡面裡面,很有可能也會出現這種情況,讓同一區域內的元素有一定的聯繫,會讓頁面更整體。



在界面中的運用


以ps的編輯面板來看,通過擺放距離可以知道樣式為一組,按鈕操作為一組;控制項的合理擺放,能減少用戶界面上的視覺凌亂感和代碼數量。

相反,如果無法感知或者分層不清晰,就會比較難理解和使用。




02  格式塔原則 : 相似


格式塔相似性原理是影響我們感知分組的另一個因素:如果其他因素相同,那麼相似的物體看起來歸屬於一組。下圖中相同形狀的看起來感覺屬於一組,相同顏色的看起來感覺屬於同一組。


相似原則可以幫助我們組織和分類組中的對象,並將它們與特定的含義或功能相關聯。

乍一看,我們可能會認為這只是一個我們可以忽略的普通類型系統。

但是當我們看得更近時,問題發生在正文文本和文本連結之間,它們都共享相同的文字系統(20px ),這可能導致用戶混淆並且缺乏用戶信任。

當他們瀏覽網站時,他們可能會猶豫,他們正在交互的是正文文本還是文本連結,那麼就需要進行反覆試驗。


在界面中的運用


下圖中通過相似性我們知道頂部文字組是一組,即菜單欄,左側全部是圖標,為工具欄。




03  格式塔原則 : 共同區域


與貼近原則類似,放置在同一區域內的元素被視為一個分組。


舉個🌰


在界面中的運用


我們可以通過使用線條、顏色、形狀和陰影來達到這個目的。上圖是共同區域原則的一個示例:一個布局合理的網頁,其中不同的信息位表示一個模塊,banner和表格是很好的示例。




04  格式塔原則 : 閉合


有一種常見的視覺歸類方法基於人類的一種完型心理:把局部形象當作一個整體的形象來感知。當提供適量的信息時,我們的大腦將通過填補空白並創建一個統一的整體來得出結論。

通過這種方式,我們可以減少傳遞信息所需的元素數量,降低複雜性也可以幫助我們最小化視覺噪音並傳達信息,在相當小的空間內強化概念。


在界面中的運用


建議我們可以在圖標以及圖形設計中使用閉合原則,可以簡單快速且清晰的傳達想表達的意義,同時視覺樣式也比較透氣。



05  格式塔原則 : 對稱


對稱元素簡單,和諧,視覺上令人愉悅 , 對快速有效地傳遞信息非常有用 , 幫助專注於重要的事情。

但它們也會變得有點沉悶和靜止。視覺對稱往往更有活力,更有趣。在對稱設計中添加不對稱元素有助於在留下印象時引起注意。在任何設計中,對稱以及合理的不對稱都很重要。


在界面中的運用


對稱的形式對於在界面中識別內容有很多的幫助,用於產品展示,列表,導航,banner和任何內容豐富的頁面,減輕閱讀壓力。



06  格式塔原則 : 連續


我們的視覺傾向於感知連續的形式而不是了散的碎片。連續性原理的IBM標誌設計,它由非連續的藍色塊組成,但一目了然,很容易看出它們是三個粗體字母。



在界面中的運用


連續性通過構圖來解釋方向和運動。加強了對分組信息的感知,創建了秩序並引導用戶通過不同的內容細分。

連續性的中斷可以表示一個部分的結尾,引起對新內容的關注。

行和列的線性排列是連續性的良好示例。我們可以在菜單和子菜單,列表,輪播,服務或流程/進度顯示中使用它們。




07  格式塔原則 : 共同命運


當元素在同一方向、同一時間和同一速度同步移動時,共同命運原則更為有效。它可以幫助對相關信息進行分組,並將行動與結果聯繫起來。同步運動的中斷可以吸引用戶的注意力,並將其引導到特定的元素或特性。


在界面中的運用


不管這些元素相距多遠,或者它們看起來有多麼不同,如果它們一起移動或變化,它們就被認為是相關的。這種效果可以發生,即使運動是隱含的。

建議我們可以在可擴展菜單,產品滑塊,視差滾動和滑動指示器中使用共同命運原則。




寫在最後


前面就是所有的格式塔對應的原則和建議使用的地方 , 一些真實的案例,讓大家清楚地知道如何運用簡單有效的方法來改變設計的觀感。關鍵是使用這些原理來設計的時候,可以達到 1 + 1 > 2 的效果。


格式塔原則的體現在設計中比比皆是,我們只有更好的利用視覺空間設計作品,減少設計的複雜性,儘量保持格式塔原則的完整,著眼頁面中的細節,才能讓我們的產品更好更容易地被用戶理解。



參考


用格式塔原理分析頁面中的用戶體驗

https://www.jianshu.com/p/311939783be5

如何在UI設計中使用格式塔原則

https://mp.weixin.qq.com/s/F7RYn_cgM1stJXOQPKej9g




📢 📢


大家對此有什麼想法呢?歡迎在評論提出~



記得持續關注我們哦~





喜歡我們,就點一下「在看」吧

👇 👇 👇




相關焦點

  • 格式塔原理,教你如何合理的布局設計界面
    APP頁面設計布局最關鍵的是為用戶展現層次清晰的視覺傳達,格式塔原理可以有效地指導界面設計中的用戶交互,它能夠幫助設計師準確對界面進行組織和架構,從而設計出用戶友好型界面。格式塔原理的五個基本原則1、接近原則物體之間的相對距離會影響我們感知它們的關係。相互靠近的物體被認為比相互距離較遠的物體更有關聯性。2、相似原則格式塔原理中的相似和接近兩個原則一起運用在產品設計中。它指出了影響我們感知分組的另外一個原則:有共同視覺元素的物體看起來更有關聯性。
  • 【乾貨】視覺篇-格式塔原理
    前言:在界面排版,網頁廣告設計等視覺傳達設計工作中,視覺上的畫面瑣碎,零散,信息混亂無序總是視覺設計師無可避免的問題。視覺的整體感做不好,會給人不舒服,不協調的心理感受。這些問題來自人們的主觀感受(「不舒服」,「奇怪」),通常難以描述清楚。同時,設計師們也意識到:表現作品的整體感與和諧感是十分重要的。
  • 格式塔心理學5項法則的學習與思考
    格式塔理論是心理學中為數不多的理性主義理論之一。格式塔學派以某些相當抽象的,與知覺和思維的性質及心理經驗的結構有關的觀念解釋了熟悉的觀察資料。格式塔心理學派斷言:人們在觀看時,眼腦並不是在一開始就區分一個形象的各個單一的組成部分,而是將各個部分組合起來,使之成為一個更易於理解的統一體。此外,他們堅持認為,在一個格式塔(即一個單一視場,或單一的參照系)內,眼睛的能力只能接受少數幾個不相關聯的整體單位。這種能力的強弱取決於這些整體單位的不同與相似,以及它們之間的相關位置。
  • 【精研篇】深入了解格式塔原理
    想要在界面排版、網頁設計中讓整體視覺井然有序,舒服協調,格式塔就是必須掌握的知識咯,今天的教程用深入淺出的方式給同學們科普格式塔原理以及在設計上的運用,包含大量實例,新手也可以輕鬆看懂!在界面排版,網頁廣告設計等視覺傳達設計工作中,視覺上的畫面瑣碎,零散,信息混亂無序總是視覺設計師無可避免的問題。視覺的整體感做不好,會給人不舒服,不協調的心理感受。
  • 格式塔視覺規律-我在實戰中的碎碎念
    👀(全文共計2724字,閱讀約需要12分鐘)我在大三的時候第一次聽說到這個名詞「格式塔」。當時就看了一些有關於他的文章等資料,但是可能是我並不聰明的緣故,當時並沒有太懂格式塔是一個什麼東西。現在工作了幾個年頭在看的時候就很容易理解。下面就是我理解的格式塔希望對你有幫助。
  • 格式塔原理對視覺/互動設計師有多重要?
    我們既然了解到這個視覺認知的原理,那在平時設計中有所運用?上圖的界面,拋開界面配色外,只從界面布局上看,很容易看出界面左側一豎排icons我們很自然會把它們歸類為一組,這就是格式塔原理的接近性原理。相似性原理指出了影響我們感知分組的另一個因素:如果其他因素相同,那麼相似的物體看起來歸屬一組。
  • 白話格式塔原理
    於是決定對此做一個小小的總結,以便更清晰的解決工作中的一些不確定問題。格式塔原理源於心理學,它最基本的概念就是整體大於各個部分的總和,給不完整的視覺信息找尋最直接最簡單的解讀方式。也就是說,我們的大腦會直接把肉眼所看到的內容篩選、分組、歸類、完整。
  • 廣告設計中的格式塔心理!
    格式塔心理學認為人在視知覺過程中,會自然地有一種自我完善事物的結構整體或完形的行為,當外界的一個事物呈現在我們面前時,內心會有一個格式塔與之相對應,如果內心的格式塔與這個事物不相符時,格式塔就出現「缺失」,這時我們的內心就表現出彌補缺失的活動傾向,活動的結果讓我們內心的格式塔本身達到完善化,形成良好的「完形」。這個理論讓我們能從一個新的角度來研究廣告設計。
  • 人工智慧在格式塔心理學測試中表現得像一個人
    推理表明,ANNs的可解釋性越強,就越容易發現其推理中的潛在缺陷。如果我們了解什麼時候或者為什麼我們的系統會阻塞,我們就會知道什麼時候不使用它們——這是構建負責任的人工智慧的基礎。已經有幾種方法可以利用人工智慧推理,但Kim解開人工智慧黑盒子的靈感來自一個完全不同的領域:認知心理學。
  • 寫作:鮮為人知的格式塔心理療法(中)
    寫在前面上篇文章,我在提及之前的認知行為療法和精神分析療法後,引入了新的心理療法——格式塔心理療法,並探討其與寫作的關係。可見,寫作完全可以作為一種系統的修行、規範的修煉和有效的心理療愈方法。寫作:鮮為人知的格式塔心理療法(上)格式塔心理療法與寫作的關係1.「生活在現在」,寫作也是如此,首先應專注於當下的感受,重點是描述當下的自己,自己內心的感受,其他都是次要的。所謂「既過不戀,未來不迎」,說的也是這個道理。在進行寫作的時候,我們完全可以以「我……」或者「我現在」等語句進行開頭。2.
  • 談談格式塔團體的那些事兒........
    那麼來自於文獻研究方面的證據,格式塔團體形成於上個世紀的五十年代,在其整個發展的歷程中逐漸形成三種側重於不同焦點的格式塔團體模式,「注重個體工作模式」、「注重團體動力工作模式」、「注重雙重焦點工作模式」
  • 格式塔原理—超實用設計基本原理
    工作生活中,看到的各種設計,例如海報、APP界面、傳單等,給人第一映像就會有好看不好看的感覺。其實這跟我們的一些潛意識有關。本文分享的格式塔原理,就是從心理學角度分析設計原則。什麼是格式塔原理格式塔,音譯自德文Gestalt,誕生於19世紀德國的心理學家研究人類視覺而形成的心理學派。該學派認為:人類對於任何視覺圖像的認知,是一種經過知覺系統組織後的形態輪廓,而並非所有各自獨立部分的集合。
  • 教師編考試知識點:心理學流派之格式塔心理學
    本文現將教師招聘考試中格式塔心理學流派相關知識點進行總結,希望對各位考生的備考有所幫助!(一)格式塔心理學研究對象格式塔心理學反對構造主義心理學那樣把意識分解成元素,若把意識分解成元素,那麼心理學的研究將變得毫無意義。格式塔心理學主張把人的心理作為一個整體來探討。
  • 格式塔心理學流派—苛勒
    格式塔心理學是由魏特海默、苛勒和考夫卡於1910年至1912年間在德國法蘭克福大學創建的,其產生的正式標誌是魏特海默於1912年發表的論文《關於運動知覺的實驗研究》。格式塔心理學也被稱作「完形心理學」或「完形主義」。格式塔學派認為整體大於部分之和,主張心理學要研究整體的經驗與行為,它最初是以反對元素主義或構造主義心理學起家的。後來,它也反對行為主義對行為研究的還原分析論。
  • 格式塔學習理論—頓悟
    格式塔心理學派最早產生於德國,之後在美國得到進一步發展。格式塔心理學派否認了建構主義的元素主義和行為主義的刺激與反應之間的聯結。主張應該研究人的經驗及行為,強調經驗與行為的整體性,認為整體並不是部分的簡單相加。格式塔學派代表人物苛勒把格式塔原理應用到發展心理學,並且研究了頓悟學習,認為學習是一種完整的過程,是學習者對情景的重新分析之後得到的。
  • 設計師必須懂的基本原理——格式塔原理
    可能平時都已經有意無意在實際工作中都已經用到了,但就是沒有一個可靠理論支撐或是叫說法,所以現有重新整理並且發布這個格式塔原理。什麼是格式塔原理 (Gestalt)格式塔心理學誕生於1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象並對它們編訂了目錄。
  • 汽車設計「格式塔」無處不在,你竟然對它還一無所知?
    如果你是一個喜歡思考的人,肯定會問,為什麼會出現這種奇特的現象呢?有人會說這是每個人的想像力不同,但這麼虛無縹緲的東西實在難以琢磨,而且不夠直擊要害。準確說,是「格式塔效應」在作祟。比如下圖是《哈利波特與混血王子》中的一幕,這也是最簡單的「格式塔效應」。雖然被破爛的門窗擋住,但你一眼就能辨別出這是霍格沃茲三人組(如果對這一幕很熟悉,你肯定會知道他們正在監視馬爾福一家)。到此,好像都和汽車沒什麼關係。但如果你看過沃爾沃在2001年推出的SCC(Safety Concept Car)概念車就不會這麼想了。
  • 格式塔心理學的建立、基本觀點、評價
    在黑暗中有三個燈管,位置如上圖,當a燈管先亮,60毫秒後b、c燈管同時發亮,結果發現由a向b與由a向c同時發生了似動運動。由於眼球運動至少需要130毫秒,因此,在60毫秒的時間內不可能同時出現似動現象。解釋2:以赫爾姆霍茨為代表。當a線先出現,而b線後出現,人們通過推理,產生了錯覺。
  • 格式塔心理學在景觀中的應用
    此崖中的空洞作為寺廟是非常重要的,包圍它的山崖殘留下來,構成了模糊的「背景」筆者曾訪問過義大利東南部馬特臘城市遺址,見到了在山崖中挖掘成的教堂。打開山腳下的門進入內部,其中確確實實地存在著一個石砌的教堂內部空間。這到底是怎樣形成的呢?
  • 關于格式塔完形——頓悟學習理論的解讀
    前面的文章小編說過會在持續的一段時間裡將自己複習經驗、招教考試所考知識點等分享給正在備考教師的小夥伴們,那麼今天小編要為解讀格式塔的完形頓悟學習理論。格式塔學派的完形頓悟學習理論認為,學習就是打破舊的完形,主動構造新的完形過程。