設(shè)計(jì)原則(第一部分):視知覺和格式塔原則

2015-12-21    周周

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

小編語:大家在看這篇文章的時候,我們現(xiàn)了解一個概念——格式塔學(xué)派。

格式塔學(xué)派(德語:Gestalt theorie)是心理學(xué)重要流派之一,興起于20世紀(jì)初的德國,由馬科斯·韋特墨(Max.Wetheimer,1880~1943)、苛勒(W.kohler,1887~1967)和考夫卡(K.Koffka,1886~1941)三位德國心理學(xué)家在研究似動現(xiàn)象的基礎(chǔ)上創(chuàng)立。格式塔是德文Gestalt的譯音,意即"模式、形狀、形式"。Configuration(配置;結(jié)構(gòu);外形)”等,意思是指“能動的整體(dynamic wholes)”又稱為“完形心理學(xué)”。


在文章末尾有給大家一些資源,以便更好地理解格式塔理論。這是設(shè)計(jì)基礎(chǔ),希望大家能好好讀一下。


好了,我們進(jìn)入文章正題。


1910年,心理學(xué)家馬科斯·韋特墨(Max Wertheimer,他是格式塔心理學(xué)創(chuàng)始人)很有洞察力,他觀察發(fā)現(xiàn)一系列的燈光在鐵路道口上不斷地閃爍。這是類似于使用燈光圍繞著影院選框不斷地閃爍。

小編在這里找了張圖以便大家更好理解上面說的是什么意思



通過觀察,看起來就好像是一個光繞著選框,從一個燈泡到另一個燈泡的移動,在現(xiàn)實(shí)中,一系列的燈泡不斷閃爍并且燈光不能移動。

這個觀察報告說明一組原理——我們?nèi)绾卧谝曈X上直觀的感知對象。我們作為設(shè)計(jì)師,而這些原則幾乎是我們所做的一切圖形設(shè)計(jì)的核心。

這是一系列關(guān)于設(shè)計(jì)原則的帖子。為什么我們要從格式塔原則開始呢,因?yàn)槲覀冏駨牡脑S多設(shè)計(jì)原則都出自格式塔理論。在這篇文章中,我會給你們講述一點(diǎn)理論和提供一些格式塔原則的基本定義。

在本系列后續(xù)的文章中將考慮設(shè)計(jì)其他方面,例如空間,平衡性,和視覺層次。在接下來的帖子中,我會指出那些格式塔原則會影響設(shè)計(jì)這一方面,并且我會提供更多的實(shí)際應(yīng)用和例子關(guān)于格式塔原則在網(wǎng)頁設(shè)計(jì)中是如何使用的。



格式塔理論背后的關(guān)鍵思想


“整體是不同于部分之和的—— Kurt Koffka”


上面引用的話是對格式塔心理學(xué)簡單的概括。當(dāng)人們看到一組對象時,在我們看到單個物體之前,我們先察覺到它們的整體性。我們看到的整體比部分的總和還多,即使是部分被徹底分成獨(dú)立的尸體,我們也會把他們作為一個整體看成一個組。

有幾個格式塔理論背后的關(guān)鍵思想:


1出現(xiàn)(Emergence),在部分之前整體是先被看出的。

出現(xiàn)(Emergence)的過程中形成了從簡單的規(guī)則到復(fù)雜的圖案過程。當(dāng)試圖識別一個對象時候,我們先去確定它的輪廓。然后我們知道去找形狀和物體來和這個輪廓圖案相匹配。只有通過這個大綱模式匹配整個出現(xiàn)之后,我們開始識別部分構(gòu)成整體。

在設(shè)計(jì)時,請記住,首先人們會通過他們的一般認(rèn)知形式來確定元素。一個簡單明確的對象比將一個詳細(xì)的對象,更迅速地傳達(dá)了很難辨認(rèn)的輪廓。

一個簡單明確的對象比將一個詳細(xì)充滿細(xì)節(jié)的對象,更迅速地傳達(dá)出很難辨認(rèn)的輪廓。


2具象化/物化(Reification)(我們的腦海會填補(bǔ)這些空缺)

物化是知覺得一個方面,其中感知的對象包含比什么是實(shí)際存在的更多的空間信息。當(dāng)我們試圖匹配我們看到的已經(jīng)存儲在腦海中的熟悉的模式,我們會發(fā)現(xiàn)總是沒有完美的匹配模式。相反,我們會找一個近似匹配,然后填補(bǔ)空白,而這個空白則是我們認(rèn)為我們應(yīng)該看到內(nèi)容。

具象化表明我們不需要呈現(xiàn)一個完整的輪廓,以便觀眾看到它。我們可以省去部分的輪廓,只要我們提供它足以讓一個足夠接近的模式來匹配。你可以看封閉原則下一些例子。


3多穩(wěn)態(tài)現(xiàn)象(Multi-stability)(大腦力圖避免不確定性)

多穩(wěn)態(tài)現(xiàn)象是在模糊不清的感性經(jīng)驗(yàn)傾向之間不穩(wěn)定反復(fù)移動的另類解讀。一些對象可以被感知的方法不止一種。在下面文章圖像/背景這一塊有一個例子,也許你之前見過這個例子。這張圖片可以看作是兩個人臉的側(cè)面,也可以看作是一個花瓶。

你不能立刻同時看到兩個。反而你會快速在兩個可供選擇的物體之間來回反復(fù)的穿梭。一個往往會成為你的主導(dǎo)觀念,并且時間越長你越不能夠看到另一面,并且想要看到其他的看法會更困難。

從設(shè)計(jì)的角度來看,如果你想改變別人的看法,不要試圖立刻改變它。找到一個辦法讓他們看到一個選擇(二中選一),然后努力加強(qiáng)他們已選定的觀點(diǎn),從而削弱原有觀念。


4不變性(Invariance )(我們擅長辨別異同)

不變性是知覺的一個屬性,其中簡單的對象是公認(rèn)的獨(dú)立旋轉(zhuǎn)(rotation),平移(translation)和尺寸(scale)。由于我們常會從不同的角度遇到物體,所以我們已經(jīng)具備了一種認(rèn)知它們的能力,盡管它們的外觀不同。想象一下,如果你認(rèn)識的某人,如他們直接站在你面前,面對著你,你可以認(rèn)出來;如果他們轉(zhuǎn)到側(cè)面,你便不能立刻認(rèn)出他們側(cè)臉。盡管是不同的視覺角度,但我們?nèi)匀豢梢宰R別認(rèn)出人們。


你可以看到這些想法在下面的原則中是怎樣運(yùn)用的。主要的思想是格式塔原則是關(guān)于感知的和視覺傳達(dá)的對象是什么。原則和視覺語言是我們的工作核心。


格式塔原則

多數(shù)原則是相對容易理解。因?yàn)闀幸粋€共同的主題貫穿在其中。

 

“其他所有條件都相同,相關(guān)的元素X往往是視覺感知分組成高階單元。”——斯蒂芬·帕爾默

                                      

下面的許多原則將遵循這一模式。原則可以定義為X或者高階的感知。


PR?GNANZ 定律(好圖, 簡單法則)

小編在這里給大家解說一下 :

(格式塔學(xué)派最基本的規(guī)則是蘊(yùn)涵律(pr?gnanz),閉合律Law of Closure;相似律Law of Similarity;

接近律Law of Proximity;對稱律Law of Symmetry;連續(xù)律Law of Continuity)



“人們會用一種最為簡單的形式來感知和解釋含糊不清或復(fù)雜的圖像”


這是格式塔的基本原則。我們更喜歡簡單,干凈和有秩序的東西。直覺上這些東西更安全。了解這些原則會讓我們在處理一些復(fù)雜或者危險的突發(fā)狀況時花費(fèi)的時間更少。



當(dāng)面對復(fù)雜的形狀,我們傾向于把它們重組成簡單的組件或變成一個簡單的整體。你看到上圖左邊由簡單的圓,正方形和三角形組成,就像你看到的右邊圖形,而不是作為復(fù)雜和模糊的整體形狀。


在這種情況下,看到三個獨(dú)特的物體比看到一個復(fù)雜的對象要簡單。在其它情況下,看到單個對象是簡單的,因此給我們帶來了…(也就是下面的原則)


閉合性原則(CLOSURE)

“當(dāng)我們看到一些復(fù)雜排列的元素時,我們趨向于尋找一個更為單一可辨識的圖案模式?!?

正如PR?GNANZ 定律和閉合性原則一樣,都在尋求簡單純粹。閉合性恰巧與我們看到上面PR?GNANZ 圖片總結(jié)的定律(三個簡單獨(dú)特的圖形比一個圖形更簡單)是相反的。在閉合原則中,我們用部分形成一個簡單的正題。我嗯的眼睛填補(bǔ)這些丟失的信息從而形成一個完整的圖像。



在左上圖中,你應(yīng)該看到一個白色的三角形,即使這個圖像實(shí)際上是由三個黑色的像吃豆人一樣的圖形組成。在右邊的圖片中,你看一只大熊貓,即使它是由一些隨意的圖形組成的。我們看到的三角形和大熊貓實(shí)際上要比我們看單個部分要簡單的多。

閉合原則被認(rèn)為是維持元素的粘合劑。這是關(guān)于人類傾向于尋求和發(fā)現(xiàn)的模式。

閉包的關(guān)鍵是提供足夠的信息,讓眼睛可以填寫其余。如果丟失的信息元素太多,元素將被視為獨(dú)立的部分,而不是一個整體。如果提供太多的信息,閉合原則就沒有必要存在。



對稱和秩序

“人們往往傾向于感知圍繞勻稱物體的中心對稱的形狀?!?

對稱性給了我們堅(jiān)固和秩序的感覺,這一點(diǎn)正是我們傾向于尋找的。這是我們的本性強(qiáng)加給混亂秩序。這一原則導(dǎo)致我們在組合物中想要一種平衡,雖然我們的組合物不需要是完全對稱的,以保持平衡。



在上面的圖片中,您應(yīng)該看到三對雙括號,三個左括號,三個右括號。接近的原則,稍后我們會在這篇文章中,可能會建議我們應(yīng)該看到別的東西。這表明對稱優(yōu)先于接近。

由于我們的眼睛會很快發(fā)現(xiàn)對稱和秩序,這些原則可以用來迅速有效地傳達(dá)信息。



圖/背景(FIGURE/GROUND)

“元素被視為圖(聚焦中的元素)還是地面(圖像中余下的背景)?!?

圖/背景指的是正形和負(fù)形元素之間的關(guān)系。這個理念是眼睛會從它們的背景中區(qū)分整個圖形為了理解究竟看到了什么。這是人們首先要做的事情之一就是看任何的構(gòu)成成分。




圖和背景的關(guān)系是否穩(wěn)定取決于哪個更容易看出來。左上圖中一個經(jīng)典的例子,圖和背景的關(guān)系是不穩(wěn)定。你看到一個花瓶或是兩個人的側(cè)臉,取決于你是將看到的黑顏色作為圖形,白色作為地面,還是將白色作為圖形,黑色作為背景。你可以很容易地兩種看法之間來回穿梭,這展示了它們之間不穩(wěn)定的關(guān)系。


更加穩(wěn)定的關(guān)系,我們就可以引導(dǎo)觀眾更好地專注于我們想要看到的。兩個相關(guān)原則可以幫助我們:


區(qū)域面積:兩個重疊的對象中較小的被視為圖。較大的被視為背景。你可以看右上圖。較小的形狀是圖(聚焦中心),忽視顏色。

凹凸性:人們趨向于認(rèn)為凸面的模式要比凹面的模式更能聚焦,因此凸面常被看作是圖。


統(tǒng)一的連通性

“元素在視覺上連續(xù)性被認(rèn)為是相關(guān)的多元素沒有連接。”

在下面的圖片中,線連接了兩對元素。這種聯(lián)系讓我們覺得被連接的元素在某些方面是相關(guān)的。



所有原則都暗示了物體是相關(guān)的,統(tǒng)一的連貫性這一原則是最能說明的。在上圖中,盡管我們看到兩個方和兩個圓,我們看到兩對方-圓組合關(guān)聯(lián)性更強(qiáng),因?yàn)樗鼈兊囊曈X連貫性。需要注意的是線是不需要被感知的連接元素。



共同的領(lǐng)域(COMMON REGIONS)

“如果它們位于同一個封閉的區(qū)域,那么元素會被認(rèn)為是這一組的一部分。”

另一種方式顯示元素之間的連接方式是用某種方式包圍它們。圍場中的一切都被看作是相關(guān)的。圍場區(qū)域外的被看作是獨(dú)立的一部分。下圖中的圓圈都是相同的,然而我們看到兩個不同的團(tuán)體,每個圍場中的圓圈在某種方式上都是相關(guān)的。



表達(dá)一個共同的區(qū)域的典型方式是在相關(guān)元素周圍畫一個盒子,就像我上面畫的那樣。把元素放在不同背景顏色要比它們在直接接觸的周圍環(huán)境中起作用。



接近原則

“更接近一起的對象比進(jìn)一步分開的對象被認(rèn)為更相關(guān)?!?

接近原則和共同領(lǐng)域相似,但使用空間作為圍場(外殼)當(dāng)元素的位置接近另一個時,它們被看作是一個組的一部分,而不是作為單獨(dú)的元素。當(dāng)一組中的元素比它們到組外的任何元素更加靠近的時候,這是尤其真實(shí)。



為了被認(rèn)為是有接近的關(guān)系,任何其他方式中對象不都需要類似,超過在空間中相近的元素成為一組的范圍。



連續(xù)定律

“在直線上或者曲線上的元素比不在直線或者曲線上的元素被認(rèn)為更相關(guān)?!?

我們會本能的跟隨一條河流,是一條小路或者一條警戒線。一旦你在一個特定的方向看或是移動,你在這個方向繼續(xù)看或者是移動直到你看到一些重要的東西或者你斷定沒有什么重要的東西要看。



這一原則的另一個解釋是,我們將繼續(xù)我們的感知形狀超出了他們的終點(diǎn)。在上面的圖片中,我們看到一條線和曲線交叉,而不是四個不同的線和曲線段匯在了一個點(diǎn)上。



共同性(同步性)COMMON FATE (SYNCHRONY)

到這里小編來總結(jié)一下格式塔的組織原則:1圖形與背景;2接近性和連續(xù)性;3完整和閉合傾向;4相似性;5轉(zhuǎn)換率;6共同方向運(yùn)動。



“在同一方向上的元素比固定元素或者是朝不同方向移動的元素更為緊密相關(guān)?!?


不管相距多遠(yuǎn)元素放置或他們看起來多么不同,如果他們被視為一起移動或改變,它們會被認(rèn)為是相關(guān)的。

元素不需要為了共同方向運(yùn)動這一原則的存在而移動。

更重要的是他們有一個共同的目的地。例如,如果四個人他們聚在一起,但其中兩個被發(fā)現(xiàn)頭朝右,他們?nèi)匀槐灰暈橛泄餐\(yùn)動性。即使兩個只朝同一個方向看,但他們?nèi)匀槐豢醋魇怯泄餐\(yùn)動性的。



在上面的圖片中,箭頭就足以表明元素共享一個共同的命運(yùn)。而運(yùn)動或變化是沒有必要的,共同命運(yùn)的跡象比像箭頭一樣的東西或者是僅暗示朝同一個方向看的動作都要強(qiáng)大。



平行性/類似性(PARALLELISM)

“相互平行的元素比不平行的元素更為密切相關(guān)?!?


這一原則類似于上面的共同命運(yùn)的原則。行(lines)通常解釋為在某方向指向或移動。平行線被視為指向或朝著同一個方向,因此它們是相關(guān)的。



應(yīng)該注意,并行性被認(rèn)為,線條也可以曲線或形狀,盡管后者的形狀應(yīng)該有些行式為了他們出現(xiàn)能夠平行。



相似原則(SIMILARITY)

“有相似特征元素比沒有相似特征的元素被認(rèn)為更為緊密相關(guān)”


任意數(shù)量的特征都可以是相似的:顏色、形狀、大小、紋理等。當(dāng)觀眾看到這些類似的特征,他們認(rèn)為這些元素被認(rèn)為是相關(guān)的,是由于它們的共同特點(diǎn)。

在下圖,紅色圓圈與其他紅色圓圈和黑色圈與黑色圓圈被認(rèn)為是相關(guān)的,是由于相似的顏色。紅色和黑色圓圈被看作是彼此不同的,盡管他們都是圓形。



一個明顯的地方在網(wǎng)上找到相似的顏色鏈接。一般來說,內(nèi)部鏈接內(nèi)容用相同的樣式,通常用藍(lán)色和下劃線。這讓觀眾知道,不同的部分文本是相關(guān)的。一旦一個人發(fā)現(xiàn)是一個鏈接,其它也是鏈接。



焦點(diǎn)(focal points)

“有一個興趣點(diǎn),強(qiáng)調(diào)或差異元素都將捕獲并吸引觀眾的注意力?!?


這個原則表明,我們的注意力會朝著相反方向,朝向不像其他某種方式的元素。在下面的圖片中,你的眼睛應(yīng)該被方形吸引。這是一個與其它元素不同的形狀和顏色。我也給了它一個陰影,以進(jìn)一步強(qiáng)調(diào)它。



焦點(diǎn)原則可能起于我們需要快速識別未知來警告我們潛在的危險。

相似原則和焦點(diǎn)原則是有聯(lián)系的,其他元素之間沒有相似的存在焦點(diǎn)也是看不見的。



過去的經(jīng)驗(yàn)

“元素往往根據(jù)觀察者的過去的經(jīng)驗(yàn)被感知。”

過去的經(jīng)驗(yàn)也許是最弱的完形原理。與任何的其他原則相結(jié)合,其他原則將主導(dǎo)過去經(jīng)驗(yàn)原則。

過去的經(jīng)驗(yàn)是的個體,所以很難做出假設(shè)如何感知。然而我們分享共同的經(jīng)驗(yàn)。例如,很多顏色的意義產(chǎn)生于過去的經(jīng)驗(yàn)。



看到貫穿于我們生活中的紅綠燈,我們希望紅色意味著停止和綠色意味著前進(jìn)。由于這三個常見的顏色,你可能認(rèn)為上圖是作為一個紅綠燈放在那。這就是過去的經(jīng)驗(yàn)在起作用。

  

我們的許多共同經(jīng)驗(yàn)也往往是文化上的。顏色又提供了范例。在一些國家,白色被認(rèn)為是純潔和無邪的,黑色則是代表邪惡和死亡。在其他國家,這些解釋是相反的。約定時可能出現(xiàn)的經(jīng)驗(yàn)通常是共有的,但同樣重要的是要記住,我們并不都有著相同的經(jīng)歷。



總結(jié)

格式塔原則是很重要的理解。他們是我們做為視覺設(shè)計(jì)師作為一切的基礎(chǔ)。它們描述了在視覺上每個人如何感知對象。

上述原則應(yīng)該是比較容易理解。它們中大多數(shù),定義和圖像可能是你需要了解的原則。與此同時,理解這些原則的基本思路和理解它們是如何影響設(shè)計(jì)是不一樣的。

在未來幾周內(nèi),我們將看到更多的格式塔如何影響設(shè)計(jì)。我們將看到如何對稱性幫助我們平衡的組成以及如何結(jié)合聯(lián)絡(luò)點(diǎn)和相似性使我們能夠在設(shè)計(jì)中營造視覺層次。

在我們學(xué)習(xí)那些之前,我們將深入探討圖像和背景的關(guān)系,并考慮我們元素的空間關(guān)系。這就是我要寫這一系列文章的原因。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 

分享本文至:

日歷

鏈接

個人資料

存檔