2015-12-21 周周
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
小編語:大家在看這篇文章的時候,我們現了解一個概念——格式塔學派。
格式塔學派(德語:Gestalt theorie)是心理學重要流派之一,興起于20世紀初的德國,由馬科斯·韋特墨(Max.Wetheimer,1880~1943)、苛勒(W.kohler,1887~1967)和考夫卡(K.Koffka,1886~1941)三位德國心理學家在研究似動現象的基礎上創立。格式塔是德文Gestalt的譯音,意即"模式、形狀、形式"。Configuration(配置;結構;外形)”等,意思是指“能動的整體(dynamic wholes)”又稱為“完形心理學”。
在文章末尾有給大家一些資源,以便更好地理解格式塔理論。這是設計基礎,希望大家能好好讀一下。
好了,我們進入文章正題。
1910年,心理學家馬科斯·韋特墨(Max Wertheimer,他是格式塔心理學創始人)很有洞察力,他觀察發現一系列的燈光在鐵路道口上不斷地閃爍。這是類似于使用燈光圍繞著影院選框不斷地閃爍。
小編在這里找了張圖以便大家更好理解上面說的是什么意思
通過觀察,看起來就好像是一個光繞著選框,從一個燈泡到另一個燈泡的移動,在現實中,一系列的燈泡不斷閃爍并且燈光不能移動。
這個觀察報告說明一組原理——我們如何在視覺上直觀的感知對象。我們作為設計師,而這些原則幾乎是我們所做的一切圖形設計的核心。
這是一系列關于設計原則的帖子。為什么我們要從格式塔原則開始呢,因為我們遵從的許多設計原則都出自格式塔理論。在這篇文章中,我會給你們講述一點理論和提供一些格式塔原則的基本定義。
在本系列后續的文章中將考慮設計其他方面,例如空間,平衡性,和視覺層次。在接下來的帖子中,我會指出那些格式塔原則會影響設計這一方面,并且我會提供更多的實際應用和例子關于格式塔原則在網頁設計中是如何使用的。
格式塔理論背后的關鍵思想
“整體是不同于部分之和的—— Kurt Koffka”
上面引用的話是對格式塔心理學簡單的概括。當人們看到一組對象時,在我們看到單個物體之前,我們先察覺到它們的整體性。我們看到的整體比部分的總和還多,即使是部分被徹底分成獨立的尸體,我們也會把他們作為一個整體看成一個組。
有幾個格式塔理論背后的關鍵思想:
1出現(Emergence),在部分之前整體是先被看出的。
出現(Emergence)的過程中形成了從簡單的規則到復雜的圖案過程。當試圖識別一個對象時候,我們先去確定它的輪廓。然后我們知道去找形狀和物體來和這個輪廓圖案相匹配。只有通過這個大綱模式匹配整個出現之后,我們開始識別部分構成整體。
在設計時,請記住,首先人們會通過他們的一般認知形式來確定元素。一個簡單明確的對象比將一個詳細的對象,更迅速地傳達了很難辨認的輪廓。
一個簡單明確的對象比將一個詳細充滿細節的對象,更迅速地傳達出很難辨認的輪廓。
2具象化/物化(Reification)(我們的腦海會填補這些空缺)
物化是知覺得一個方面,其中感知的對象包含比什么是實際存在的更多的空間信息。當我們試圖匹配我們看到的已經存儲在腦海中的熟悉的模式,我們會發現總是沒有完美的匹配模式。相反,我們會找一個近似匹配,然后填補空白,而這個空白則是我們認為我們應該看到內容。
具象化表明我們不需要呈現一個完整的輪廓,以便觀眾看到它。我們可以省去部分的輪廓,只要我們提供它足以讓一個足夠接近的模式來匹配。你可以看封閉原則下一些例子。
3多穩態現象(Multi-stability)(大腦力圖避免不確定性)
多穩態現象是在模糊不清的感性經驗傾向之間不穩定反復移動的另類解讀。一些對象可以被感知的方法不止一種。在下面文章圖像/背景這一塊有一個例子,也許你之前見過這個例子。這張圖片可以看作是兩個人臉的側面,也可以看作是一個花瓶。
你不能立刻同時看到兩個。反而你會快速在兩個可供選擇的物體之間來回反復的穿梭。一個往往會成為你的主導觀念,并且時間越長你越不能夠看到另一面,并且想要看到其他的看法會更困難。
從設計的角度來看,如果你想改變別人的看法,不要試圖立刻改變它。找到一個辦法讓他們看到一個選擇(二中選一),然后努力加強他們已選定的觀點,從而削弱原有觀念。
4不變性(Invariance )(我們擅長辨別異同)
不變性是知覺的一個屬性,其中簡單的對象是公認的獨立旋轉(rotation),平移(translation)和尺寸(scale)。由于我們常會從不同的角度遇到物體,所以我們已經具備了一種認知它們的能力,盡管它們的外觀不同。想象一下,如果你認識的某人,如他們直接站在你面前,面對著你,你可以認出來;如果他們轉到側面,你便不能立刻認出他們側臉。盡管是不同的視覺角度,但我們仍然可以識別認出人們。
你可以看到這些想法在下面的原則中是怎樣運用的。主要的思想是格式塔原則是關于感知的和視覺傳達的對象是什么。原則和視覺語言是我們的工作核心。
格式塔原則
多數原則是相對容易理解。因為會有一個共同的主題貫穿在其中。
“其他所有條件都相同,相關的元素X往往是視覺感知分組成高階單元。”——斯蒂芬·帕爾默
下面的許多原則將遵循這一模式。原則可以定義為X或者高階的感知。
PR?GNANZ 定律(好圖, 簡單法則)
小編在這里給大家解說一下 :
(格式塔學派最基本的規則是蘊涵律(pr?gnanz),閉合律Law of Closure;相似律Law of Similarity;
接近律Law of Proximity;對稱律Law of Symmetry;連續律Law of Continuity)
“人們會用一種最為簡單的形式來感知和解釋含糊不清或復雜的圖像”
這是格式塔的基本原則。我們更喜歡簡單,干凈和有秩序的東西。直覺上這些東西更安全。了解這些原則會讓我們在處理一些復雜或者危險的突發狀況時花費的時間更少。
當面對復雜的形狀,我們傾向于把它們重組成簡單的組件或變成一個簡單的整體。你看到上圖左邊由簡單的圓,正方形和三角形組成,就像你看到的右邊圖形,而不是作為復雜和模糊的整體形狀。
在這種情況下,看到三個獨特的物體比看到一個復雜的對象要簡單。在其它情況下,看到單個對象是簡單的,因此給我們帶來了…(也就是下面的原則)
閉合性原則(CLOSURE)
“當我們看到一些復雜排列的元素時,我們趨向于尋找一個更為單一可辨識的圖案模式。”
正如PR?GNANZ 定律和閉合性原則一樣,都在尋求簡單純粹。閉合性恰巧與我們看到上面PR?GNANZ 圖片總結的定律(三個簡單獨特的圖形比一個圖形更簡單)是相反的。在閉合原則中,我們用部分形成一個簡單的正題。我嗯的眼睛填補這些丟失的信息從而形成一個完整的圖像。
在左上圖中,你應該看到一個白色的三角形,即使這個圖像實際上是由三個黑色的像吃豆人一樣的圖形組成。在右邊的圖片中,你看一只大熊貓,即使它是由一些隨意的圖形組成的。我們看到的三角形和大熊貓實際上要比我們看單個部分要簡單的多。
閉合原則被認為是維持元素的粘合劑。這是關于人類傾向于尋求和發現的模式。
閉包的關鍵是提供足夠的信息,讓眼睛可以填寫其余。如果丟失的信息元素太多,元素將被視為獨立的部分,而不是一個整體。如果提供太多的信息,閉合原則就沒有必要存在。
對稱和秩序
“人們往往傾向于感知圍繞勻稱物體的中心對稱的形狀。”
對稱性給了我們堅固和秩序的感覺,這一點正是我們傾向于尋找的。這是我們的本性強加給混亂秩序。這一原則導致我們在組合物中想要一種平衡,雖然我們的組合物不需要是完全對稱的,以保持平衡。
在上面的圖片中,您應該看到三對雙括號,三個左括號,三個右括號。接近的原則,稍后我們會在這篇文章中,可能會建議我們應該看到別的東西。這表明對稱優先于接近。
由于我們的眼睛會很快發現對稱和秩序,這些原則可以用來迅速有效地傳達信息。
圖/背景(FIGURE/GROUND)
“元素被視為圖(聚焦中的元素)還是地面(圖像中余下的背景)。”
圖/背景指的是正形和負形元素之間的關系。這個理念是眼睛會從它們的背景中區分整個圖形為了理解究竟看到了什么。這是人們首先要做的事情之一就是看任何的構成成分。
圖和背景的關系是否穩定取決于哪個更容易看出來。左上圖中一個經典的例子,圖和背景的關系是不穩定。你看到一個花瓶或是兩個人的側臉,取決于你是將看到的黑顏色作為圖形,白色作為地面,還是將白色作為圖形,黑色作為背景。你可以很容易地兩種看法之間來回穿梭,這展示了它們之間不穩定的關系。
更加穩定的關系,我們就可以引導觀眾更好地專注于我們想要看到的。兩個相關原則可以幫助我們:
區域面積:兩個重疊的對象中較小的被視為圖。較大的被視為背景。你可以看右上圖。較小的形狀是圖(聚焦中心),忽視顏色。
凹凸性:人們趨向于認為凸面的模式要比凹面的模式更能聚焦,因此凸面常被看作是圖。
統一的連通性
“元素在視覺上連續性被認為是相關的多元素沒有連接。”
在下面的圖片中,線連接了兩對元素。這種聯系讓我們覺得被連接的元素在某些方面是相關的。
所有原則都暗示了物體是相關的,統一的連貫性這一原則是最能說明的。在上圖中,盡管我們看到兩個方和兩個圓,我們看到兩對方-圓組合關聯性更強,因為它們的視覺連貫性。需要注意的是線是不需要被感知的連接元素。
共同的領域(COMMON REGIONS)
“如果它們位于同一個封閉的區域,那么元素會被認為是這一組的一部分。”
另一種方式顯示元素之間的連接方式是用某種方式包圍它們。圍場中的一切都被看作是相關的。圍場區域外的被看作是獨立的一部分。下圖中的圓圈都是相同的,然而我們看到兩個不同的團體,每個圍場中的圓圈在某種方式上都是相關的。
表達一個共同的區域的典型方式是在相關元素周圍畫一個盒子,就像我上面畫的那樣。把元素放在不同背景顏色要比它們在直接接觸的周圍環境中起作用。
接近原則
“更接近一起的對象比進一步分開的對象被認為更相關。”
接近原則和共同領域相似,但使用空間作為圍場(外殼)當元素的位置接近另一個時,它們被看作是一個組的一部分,而不是作為單獨的元素。當一組中的元素比它們到組外的任何元素更加靠近的時候,這是尤其真實。
為了被認為是有接近的關系,任何其他方式中對象不都需要類似,超過在空間中相近的元素成為一組的范圍。
連續定律
“在直線上或者曲線上的元素比不在直線或者曲線上的元素被認為更相關。”
我們會本能的跟隨一條河流,是一條小路或者一條警戒線。一旦你在一個特定的方向看或是移動,你在這個方向繼續看或者是移動直到你看到一些重要的東西或者你斷定沒有什么重要的東西要看。
這一原則的另一個解釋是,我們將繼續我們的感知形狀超出了他們的終點。在上面的圖片中,我們看到一條線和曲線交叉,而不是四個不同的線和曲線段匯在了一個點上。
共同性(同步性)COMMON FATE (SYNCHRONY)
到這里小編來總結一下格式塔的組織原則:1圖形與背景;2接近性和連續性;3完整和閉合傾向;4相似性;5轉換率;6共同方向運動。
“在同一方向上的元素比固定元素或者是朝不同方向移動的元素更為緊密相關。”
不管相距多遠元素放置或他們看起來多么不同,如果他們被視為一起移動或改變,它們會被認為是相關的。
元素不需要為了共同方向運動這一原則的存在而移動。
更重要的是他們有一個共同的目的地。例如,如果四個人他們聚在一起,但其中兩個被發現頭朝右,他們仍然被視為有共同運動性。即使兩個只朝同一個方向看,但他們仍然被看作是有共同運動性的。
在上面的圖片中,箭頭就足以表明元素共享一個共同的命運。而運動或變化是沒有必要的,共同命運的跡象比像箭頭一樣的東西或者是僅暗示朝同一個方向看的動作都要強大。
平行性/類似性(PARALLELISM)
“相互平行的元素比不平行的元素更為密切相關。”
這一原則類似于上面的共同命運的原則。行(lines)通常解釋為在某方向指向或移動。平行線被視為指向或朝著同一個方向,因此它們是相關的。
應該注意,并行性被認為,線條也可以曲線或形狀,盡管后者的形狀應該有些行式為了他們出現能夠平行。
相似原則(SIMILARITY)
“有相似特征元素比沒有相似特征的元素被認為更為緊密相關”
任意數量的特征都可以是相似的:顏色、形狀、大小、紋理等。當觀眾看到這些類似的特征,他們認為這些元素被認為是相關的,是由于它們的共同特點。
在下圖,紅色圓圈與其他紅色圓圈和黑色圈與黑色圓圈被認為是相關的,是由于相似的顏色。紅色和黑色圓圈被看作是彼此不同的,盡管他們都是圓形。
一個明顯的地方在網上找到相似的顏色鏈接。一般來說,內部鏈接內容用相同的樣式,通常用藍色和下劃線。這讓觀眾知道,不同的部分文本是相關的。一旦一個人發現是一個鏈接,其它也是鏈接。
焦點(focal points)
“有一個興趣點,強調或差異元素都將捕獲并吸引觀眾的注意力。”
這個原則表明,我們的注意力會朝著相反方向,朝向不像其他某種方式的元素。在下面的圖片中,你的眼睛應該被方形吸引。這是一個與其它元素不同的形狀和顏色。我也給了它一個陰影,以進一步強調它。
焦點原則可能起于我們需要快速識別未知來警告我們潛在的危險。
相似原則和焦點原則是有聯系的,其他元素之間沒有相似的存在焦點也是看不見的。
過去的經驗
“元素往往根據觀察者的過去的經驗被感知。”
過去的經驗也許是最弱的完形原理。與任何的其他原則相結合,其他原則將主導過去經驗原則。
過去的經驗是的個體,所以很難做出假設如何感知。然而我們分享共同的經驗。例如,很多顏色的意義產生于過去的經驗。
看到貫穿于我們生活中的紅綠燈,我們希望紅色意味著停止和綠色意味著前進。由于這三個常見的顏色,你可能認為上圖是作為一個紅綠燈放在那。這就是過去的經驗在起作用。
我們的許多共同經驗也往往是文化上的。顏色又提供了范例。在一些國家,白色被認為是純潔和無邪的,黑色則是代表邪惡和死亡。在其他國家,這些解釋是相反的。約定時可能出現的經驗通常是共有的,但同樣重要的是要記住,我們并不都有著相同的經歷。
總結
格式塔原則是很重要的理解。他們是我們做為視覺設計師作為一切的基礎。它們描述了在視覺上每個人如何感知對象。
上述原則應該是比較容易理解。它們中大多數,定義和圖像可能是你需要了解的原則。與此同時,理解這些原則的基本思路和理解它們是如何影響設計是不一樣的。
在未來幾周內,我們將看到更多的格式塔如何影響設計。我們將看到如何對稱性幫助我們平衡的組成以及如何結合聯絡點和相似性使我們能夠在設計中營造視覺層次。
在我們學習那些之前,我們將深入探討圖像和背景的關系,并考慮我們元素的空間關系。這就是我要寫這一系列文章的原因。
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務