【交互】法則的力量(二):格式塔原則① 綜述

格式塔可以講的點(diǎn)實(shí)在是太多了,因此會分成多篇內(nèi)容本慕,目前定在3篇內(nèi)锅尘,如果超了。浪腐。顿乒。那我就回來改這段話(手動狗頭保命)

本篇共分為三大部分:前言 + 格式塔心理學(xué) + 格式塔原則


前言

但凡涉及視覺璧榄,都逃不過格式塔感知原理。掌握這些理論涂身,對于一個設(shè)計師來說的非常必要的蛤售,不管你是做平面設(shè)計悴能、界面設(shè)計還是交互設(shè)計雳灾,這些理論都能為你的設(shè)計提供強(qiáng)有力的支撐。反之炒嘲,如果你沒有把握好這些理論,就很容易在設(shè)計項(xiàng)目中迷失方向空凸,最后通過各種素材網(wǎng)站東拼西湊呀洲,呈現(xiàn)出一堆主旨模糊的頁面啼止,然后進(jìn)入改改改的無限循環(huán)献烦。直到后來,你變禿了也沒有變強(qiáng)吏夯。

格式塔的感知原理有助消除設(shè)計中的”猜測“噪生。一旦定義了頁面中要呈現(xiàn)的內(nèi)容跺嗽,并且確定了目標(biāo)人群页藻,格式塔就能夠幫助你高效的確定如何在頁面上分布元素份帐、如何使用線條、平衡背景陰影肚逸、是否使用漸變彬坏、元素該如何分組等等等等問題栓始。
掌握了格式塔原則幻赚,設(shè)計就會變得更簡單,創(chuàng)意也會變得更加有效箩退。不變禿佳谦,也能變強(qiáng)钻蔑。

如果你還沒有學(xué)習(xí)過這些理論咪笑,那么是時候下決心好好學(xué)習(xí)了。讓格式塔成為你的強(qiáng)有力武器映跟,為你沖鋒陷陣申窘。

關(guān)于格式塔孔轴,我寫了很多內(nèi)容路鹰,希望對你所有幫助晋柱,深刻的理解這些理論,才能靈活運(yùn)用钦椭。
請耐心認(rèn)真看完彪腔,絕對不虛此行进栽。



格式塔心理學(xué)

講格式塔原則之前快毛,必須先講一下格式塔心理學(xué),畢竟格式塔原則來源于格式塔心理學(xué)屯掖。

格式塔心理學(xué)誕生于1912年贴铜,是西方現(xiàn)代心理學(xué)的主要學(xué)派之一阀湿,最初在德國被創(chuàng)建,后來在美國得到進(jìn)一步發(fā)展映砖,其創(chuàng)始人是韋特海墨邑退,代表人物還有考夫卡地技、苛勒莫矗。

格式塔最初試圖解釋人類視覺工作原理作谚。他們觀察了許多重要的視覺現(xiàn)象并對它們進(jìn)行了分析整理妹懒。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺是整體的双吆,即:我們的視覺系統(tǒng)自動對視覺輸入構(gòu)建結(jié)構(gòu)好乐,并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體搂橙,而不是只看到互不相連的邊区转、線和區(qū)域版扩。將這種整體特性運(yùn)用到心理學(xué)研究中礁芦,就產(chǎn)生了格式塔心理學(xué)柿扣。

格式塔系德文“Gestalt”的音譯未状,主要指”完形“司草,即具有不同部分分離特性的有機(jī)整體埋虹,因此這些理論也稱做視覺感知的格式塔原理搔课,格式塔心理學(xué)又稱之為完形心理學(xué)爬泥。

雖然格式塔這個術(shù)語起始于視覺領(lǐng)域的研究急灭,但它又不限于視覺領(lǐng)域葬馋,甚至不限于整個感覺領(lǐng)域畴嘶,其應(yīng)用范圍遠(yuǎn)遠(yuǎn)超過感覺經(jīng)驗(yàn)的限度窗悯。

苛勒認(rèn)為蒋院,形狀意義上的“格式塔”已不再是格式塔心理學(xué)家們的注意中心莲绰,根據(jù)這個概念的功能定義,它可以包括學(xué)習(xí)栅哀、回憶震肮、志向、情緒留拾、思維戳晌、運(yùn)動等等過程。

廣義地說痴柔,格式塔心理學(xué)家們用格式塔這個術(shù)語研究心理學(xué)的整個領(lǐng)域躬厌。

格式塔學(xué)派既反對美國構(gòu)造主義心理學(xué)的元素主義,也反對行為主義心理學(xué)的刺激-反應(yīng)公式竞帽,主張研究直接經(jīng)驗(yàn)(即意識)和行為扛施,強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性,認(rèn)為整體不等于并且大于部分之和,主張以整體的動力結(jié)構(gòu)觀來研究心理現(xiàn)象啦租。

格式塔心理學(xué)的理論核心是整體決定部分的性質(zhì),部分依從于整體恳蹲。
基本原則是:人們會用一種更為簡單的方式,來感知和解釋含糊不清或復(fù)雜的圖像错忱。

構(gòu)成格式塔心理學(xué)的4個關(guān)鍵法則:Emergence 出現(xiàn)、Reification 物化箕肃、Multistability 多穩(wěn)定性、Invariance 恒定性

1涩维、Emergence 出現(xiàn) :整體比部分更先被識別

有些地方稱為”整體性、簡單性“睡蟋。

  • 我們的視覺傾向于把復(fù)雜的物象解析為簡單的物象;
  • 當(dāng)我們試圖識別一個對象的時候信卡,首先會確定這個對象的輪廓,之后才會注意到組成部分。也就是先看到整體泛领,再看到部分。

例如當(dāng)你看到下圖儡湾,第一印象會是:這是一條狗子徐钠,之后才會開始注意這是條斑點(diǎn)狗、有頭爹袁、腿不全档址、沒尾巴等細(xì)節(jié)部分:


這是由于大腦的”節(jié)能“性質(zhì),說白了就是”懶“。相對于一個細(xì)節(jié)復(fù)雜的物象辆童,大腦會更快、更容易接受簡單明確的物象,或者說傾向于復(fù)雜問題簡單化怠缸。因此在我們看到上圖的時候,大腦會更快的接受這是一條狗這個簡單信息恨樟,之后才開始接受其他信息。(所以,我懶不怪我匙握,怪腦子秦忿?)

應(yīng)用到設(shè)計中:人類首先會通過他們的一般認(rèn)知形式來確定元素潜秋,簡單明確的對象比復(fù)雜模糊的對象傳遞信息速度更快,也就是更容易辨認(rèn)。這也就是為什么設(shè)計中經(jīng)常使用對稱構(gòu)圖、三角形構(gòu)圖方面、圓形構(gòu)圖等方法,目的就是為了在復(fù)雜的信息環(huán)境中横腿,構(gòu)建更易懂的整體,以便快速獲得受眾注意力丹擎。

2榜苫、Reification 物化:大腦會自動填補(bǔ)空缺

又稱為”具象化、具體化“。

  • 物化是對外貌感知的構(gòu)建或生成,并且視覺系統(tǒng)在物化過程中,更傾向于根據(jù)已有經(jīng)驗(yàn)自晰,將其感知為空間信息更明確的物象劣光,而不是物理真實(shí)的物象;
  • 即使一個圖像有部分缺失缠犀,大腦也會根據(jù)已有經(jīng)驗(yàn)箱残,將所看到的物象與記憶中熟悉的模式相匹配,自動“填補(bǔ)”缺失部分。

這條原則四舍五入= 腦補(bǔ)奏路。

看下圖兩個例子就很容易理解了 ↓

第一張圖中嚴(yán)格物理來說并沒有三角形,但是你會更先辨認(rèn)出三角形,因?yàn)閷Ρ热绷艘粔K的三個圓形,三角形更簡單;右邊的熊貓圖案并不是完整的,但依然不影響你認(rèn)出這是個熊貓。

應(yīng)用到設(shè)計中:具象化表明我們不需要呈現(xiàn)一個完整的輪廓重归,以便用戶看到它狈网∈颗福可以在設(shè)計中省去部分的輪廓肥照,以及未必要使用線條來進(jìn)行版塊的切割,只需適當(dāng)留白努溃,用戶一樣可以感知到這些區(qū)塊的不同第队。利用這條原則能夠讓界面更加簡潔,減少信息干擾眠屎。比如最近風(fēng)很大的卡片式設(shè)計驯镊。

3、Multistability 多穩(wěn)定性:大腦力圖避免不確定性

又稱為“多穩(wěn)態(tài)知覺、組織性”。

  • 我們常常會用不止一種方式來解讀模棱兩可的事物梗搅,大腦會在尋找確定性的選擇之間來回穿梭,但在同一個時間點(diǎn),卻只能給予一種解讀的方式 ,而不是同時具有兩種以上的解讀方式抽兆。也就是說,我們不會同時看到兩種解讀結(jié)果澎胡;
  • 當(dāng)一種視角變得更加主導(dǎo)槐瑞,另一種視角將變得更難看到。

左圖义郑,可以看成是一個花瓶,也可以看成兩個人的側(cè)臉,但你卻不能同時看到花瓶和側(cè)臉;右圖的立方體到底朝向哪榨汤?

應(yīng)用到設(shè)計中:必須要思考,你最希望受眾看到什么樣的信息? 信息傳遞要精準(zhǔn),避免模陵兩可的圖片或文字摊聋,因?yàn)槟阌肋h(yuǎn)無法知道,受眾看到的跟你想傳達(dá)的是不是一樣歇僧。

換個角度來想讲仰,如果你想改變受眾的認(rèn)知耙册,最好不要使用劇烈的方式斑粱,容易引起用戶反感。通過巧妙的設(shè)計來模糊他們的認(rèn)知,然后不斷引導(dǎo)、加強(qiáng)呈現(xiàn)你想表達(dá)的信息耗跛,從而讓受眾在不自覺中做出改變。

4董虱、Invariance 恒定性:大腦擅長辨別異同

又稱為“恒常性撮慨、不變性”匣缘。

  • 人們在識別物象時表鳍,不會受到它旋轉(zhuǎn)盯漂、縮放狞甚、變形的干擾春霍;
  • 大腦可以從不同的角度感知物體莲趣,盡管它們的外觀不同炼蛤。

就像對于一個熟悉的人理朋,不管這人是蹲著、站著彼念、坐著,你都能認(rèn)出是他壳快。

對于圖中幾何體,我們更傾向于認(rèn)知為成這是一個幾何體的不同角度羽嫡,而不是不同多個的幾何體本姥。 而且你能輕易將上下兩組辨認(rèn)成是不同的兩個幾何體。

應(yīng)用到設(shè)計中:可以利用人類的這種視覺特性增加設(shè)計的趣味性杭棵,比如一些動效設(shè)計婚惫,因?yàn)榧词挂粋€icon進(jìn)行動態(tài)變化,用戶也不會覺得這不是同一個icon了魂爪;

另一個最常見的應(yīng)用場景就是驗(yàn)證碼先舷,[證明你不是機(jī)器人]這種設(shè)計你肯定見過。這也是目前人類在視覺上勝過計算機(jī)的優(yōu)勢滓侍,當(dāng)然這樣的優(yōu)勢也即將被計算機(jī)取代蒋川。當(dāng)然有時候也會遇到反人類驗(yàn)證碼,恒常性失效撩笆。沒錯捺球,說的就是你缸浦!12306!搶不到票超生氣╰(‵□′)╯

以上就是格式塔心理學(xué)的4個關(guān)鍵法則氮兵,也是格式塔的四大基礎(chǔ)裂逐。這些法則既適用于空間也適用于時間,既適用于知覺也適用于其他心理現(xiàn)象胆剧。其中許多法則不僅適用于人類絮姆,也適用于動物。

開胃菜吃太多會吃不下么秩霍?所以,下面才是真正的格式塔原則蚁阳。

免責(zé)聲明:撐到概不負(fù)責(zé)哦铃绒。


格式塔原則

設(shè)計中運(yùn)用的格式塔原則,依然是由韋恩海默率先提出螺捐,考夫卡和科勒依然緊隨其后對其進(jìn)行了豐富颠悬。

考夫卡的兩大理論:心物場 (Psycho-physical)和同型論(Isomorphism),對格式塔在視覺設(shè)計中的應(yīng)用影響深遠(yuǎn)定血。以心物場和同型論為總綱赔癌,由此派生出若干亞原則,稱作Gestalt Laws of Organization澜沟,譯為:組織律 /組織法則 /完形法則灾票,是格式塔原則鼻祖級原則。

在格式塔心理學(xué)家看來茫虽,完形趨向就是趨向于良好刊苍、完善,或完形是組織完形的一條總法則濒析,其他法則是這一總法則的不同表現(xiàn)形式正什。

看到這里,你大概也就能理解為什么網(wǎng)上流傳的有關(guān)格式塔的法則号杏,有4條婴氮、5條、6條盾致、還有7條主经、8條...其實(shí)都是一樣的東西,格式塔如果終極簡化绰上,1條也夠用旨怠,下面匯總一下網(wǎng)上流傳的各種版本,對比一下就能明顯看出蜈块,有的法則是包含關(guān)系鉴腻,根本不用太多條迷扇。

網(wǎng)傳版本終極匯總:

  • 千言萬語1條版:完形法則 /組織法則

  • 稍微多點(diǎn)2條版:心物場爽哎、同型論蜓席;

  • 再多一點(diǎn)5條版:鄰近法則(相近法則/接近法則/親密法則)、延續(xù)法則(連續(xù)法則)课锌、相似法則厨内、封閉法則(閉合法則)、簡單法則(對稱法則/良形法則)渺贤;

  • 還能再多6條版:接近法則雏胃、相似法則封閉法則志鞍、良形法則瞭亮、連續(xù)法則共同命運(yùn)法則(共同區(qū)域法則)固棚;

  • 繼續(xù)增加7條版:接近法則统翩、連續(xù)法則相似法則此洲、封閉法則厂汗、簡單法則主體-背景法則呜师、共同命運(yùn)法則娶桦;

  • 目前最多8條版:接近法則連續(xù)法則匣掸、相似法則趟紊、封閉法則主體-背景法則碰酝、熟悉法則霎匈、知覺恒常法則(包括明度/顏色/大小/形狀的恒常)、共同命運(yùn)法則送爸;

  • 必須親生8條版:接近法則铛嘱、相似法則、封閉法則袭厂、簡單法則墨吓、共同命運(yùn)法則、連續(xù)法則纹磺、良形法則帖烘、熟悉法則

不管有幾條橄杨,都離不開格式塔的核心——完形秘症,可能是為了寫報告的時候能寫更多字照卦?才衍生出了更多條?

這些法則的名字聽起來挺唬人的乡摹,其實(shí)每一條都特別好理解役耕,都可以用非常簡短的語言來解釋。

所謂萬變不離其宗聪廉,不要被這些衍生法則唬暈了瞬痘。我之所以翻遍全網(wǎng)做匯總,不就是為了給可愛的你縷清思路的么板熊!我這么好框全,趕快關(guān)注叭~

經(jīng)過本仙八萬年思考,最終決定使用7條版邻邮,來詳細(xì)分析:

1竣况、Law of Figure Ground Relationship 主體背景關(guān)系

  • 元素會被識別成主體(視覺焦點(diǎn))或(主體所處的背景或風(fēng)景)
    摸著良心問問自己,你是怎么區(qū)別這倆的主體背景關(guān)系的筒严?

2、Law of Pr?gnanz 簡單法則

Pr?gnanz這貨是個德文情萤,本意為簡潔鸭蛙、精確,用在設(shè)計中英語解釋為Good Figure筋岛,有完形娶视、良形的意思。
The Law of Pr?gnanz睁宰,也被稱為The law of good figure 良形律 或The law of simplicity 簡單律肪获。

  • 人類傾向于,將模糊或復(fù)雜的圖像解釋為簡單而完整的圖像柒傻。
你會把此圖看作五環(huán)孝赫,而不是好多根連在一起的曲線或多個異形

3、Law of Similarity 相似法則

  • 與不具有相似視覺特征的元素相比红符,具有相似視覺特征的元素被認(rèn)為更加相關(guān)青柄;
  • 形狀、大小预侯、顏色致开、強(qiáng)度等物理屬性方面比較相似時,就容易被組織起來而構(gòu)成一個整體萎馅;

說人話就是:長得像的双戳,容易被認(rèn)為是一伙的。

4糜芳、Law of Good Continuation 連續(xù)法則

  • 排列在直線或曲線上的元素飒货,會被識別成平滑的”線“魄衅,自動連結(jié)在一起。
圖中的點(diǎn)會被識別為是一條”線“膏斤,而不是線段和角

5徐绑、Law of Closure 閉合法則

  • 當(dāng)看到復(fù)雜排列的多個元素時,通常被識別成單個可識別的形式或圖形莫辨。
  • "閉合“也發(fā)生在對象不完整或部分不封閉的時候傲茄。就是前面的說過的”腦補(bǔ)“功能。
想想你是怎么辨認(rèn)圖上部分的括號的沮榜?又是怎么辨認(rèn)下面這些圖形的盘榨?

6、Law of Common Fate 共同命運(yùn)法則

人類傾向于認(rèn)為蟆融,同一方向運(yùn)動的元素比靜止或不同方向運(yùn)動的元素更相關(guān)草巡。

想想你剛剛在“相似”部分是怎么分組的?現(xiàn)在呢型酥?

7山憨、Law of Proximity 接近法則

  • 相互接近的事物被認(rèn)為比相隔較遠(yuǎn)的事物更加相關(guān)。

這些原則的英文名稱雖然使用Laws(定律)這個單詞弥喉,但更準(zhǔn)確的術(shù)語應(yīng)該是Principles(法則/原則)郁竟,這些法則更像是Heuristic(啟發(fā)式),是一種解決問題的捷徑由境。

如果你堅持不懈棚亩、認(rèn)真仔細(xì)的看到了這里,那么不用我說你也應(yīng)該發(fā)現(xiàn)了一個事實(shí):

這些法則幾乎都是彼此的變體虏杰,并且在多方面密切相關(guān)讥蟆。



關(guān)于這個事實(shí),有個很合理的解釋:因?yàn)樗麄兌忌婕暗?strong>”關(guān)系“纺阔。人類的感知是由關(guān)系決定的瘸彤,事物如何相似或不同、彼此之間如何對立或混合州弟,以及事物的排列如何暗示層級關(guān)系钧栖、如何受環(huán)境影響等。

我們常說婆翔,沒有對比就沒有傷害拯杠,不也是因?yàn)椤标P(guān)系“么?

格式塔能說的點(diǎn)實(shí)在是太多了,就先到這里叭,剩下的實(shí)例應(yīng)用拯爽,我尋思著還得好多內(nèi)容炕横。一次性說太多我尋思著體驗(yàn)不太好依溯?所以我尋思著....那就下次見 叭老厌!



以上,Over??


Reference:


合法原創(chuàng)內(nèi)容黎炉,禁止以任何形式私自盜用枝秤!

圖片也不行!圖片也是我畫的慷嗜!

盜文盜圖者禿頭淀弹!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市庆械,隨后出現(xiàn)的幾起案子薇溃,更是在濱河造成了極大的恐慌,老刑警劉巖缭乘,帶你破解...
    沈念sama閱讀 222,252評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件沐序,死亡現(xiàn)場離奇詭異,居然都是意外死亡堕绩,警方通過查閱死者的電腦和手機(jī)策幼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來奴紧,“玉大人垄惧,你說我怎么就攤上這事〈履” “怎么了?”我有些...
    開封第一講書人閱讀 168,814評論 0 361
  • 文/不壞的土叔 我叫張陵铣口,是天一觀的道長滤钱。 經(jīng)常有香客問我,道長脑题,這世上最難降的妖魔是什么件缸? 我笑而不...
    開封第一講書人閱讀 59,869評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮叔遂,結(jié)果婚禮上他炊,老公的妹妹穿的比我還像新娘。我一直安慰自己已艰,他們只是感情好痊末,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,888評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著哩掺,像睡著了一般凿叠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,475評論 1 312
  • 那天盒件,我揣著相機(jī)與錄音蹬碧,去河邊找鬼。 笑死炒刁,一個胖子當(dāng)著我的面吹牛恩沽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播翔始,決...
    沈念sama閱讀 41,010評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼罗心,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了绽昏?” 一聲冷哼從身側(cè)響起协屡,我...
    開封第一講書人閱讀 39,924評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎全谤,沒想到半個月后肤晓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,469評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡认然,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,552評論 3 342
  • 正文 我和宋清朗相戀三年补憾,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卷员。...
    茶點(diǎn)故事閱讀 40,680評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡盈匾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出毕骡,到底是詐尸還是另有隱情削饵,我是刑警寧澤,帶...
    沈念sama閱讀 36,362評論 5 351
  • 正文 年R本政府宣布未巫,位于F島的核電站窿撬,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏叙凡。R本人自食惡果不足惜劈伴,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,037評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望握爷。 院中可真熱鬧跛璧,春花似錦、人聲如沸新啼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽师抄。三九已至漓柑,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背辆布。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評論 1 274
  • 我被黑心中介騙來泰國打工瞬矩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人锋玲。 一個月前我還...
    沈念sama閱讀 49,099評論 3 378
  • 正文 我出身青樓景用,卻偏偏與公主長得像,于是被迫代替她去往敵國和親惭蹂。 傳聞我的和親對象是個殘疾皇子伞插,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,691評論 2 361

推薦閱讀更多精彩內(nèi)容