網(wǎng)站設(shè)計(jì)的世界是不斷變化的，扁平化、極簡(jiǎn)主義、超現(xiàn)實(shí)主義、折衷主義、等距主義、不對(duì)稱、3D、裝飾藝術(shù)的風(fēng)格和潮流總是在變化。每年都有一個(gè)新的趨勢(shì)，不同的網(wǎng)站設(shè)計(jì)方式正在形成。那么，設(shè)計(jì)師們?cè)诰W(wǎng)站設(shè)計(jì)的基礎(chǔ)上又依賴于什么呢？

是視覺(jué)感知和人類行為。

是的，這是正確的。人類行為的基本心理傾向相當(dāng)穩(wěn)定，特別是在感知方面。

人類如何看待、處理和感知視覺(jué)信息，是設(shè)計(jì)巧妙的網(wǎng)站或應(yīng)用程序的具體基礎(chǔ)，這些設(shè)計(jì)可以讓你的網(wǎng)站或應(yīng)用程序更具親和力和吸引力。

正是在這些方面，德國(guó)心理學(xué)家馬克斯·沃特海默、庫(kù)爾特·科夫卡和沃爾夫?qū)た评沼?0世紀(jì)初創(chuàng)立了格式塔理論——視覺(jué)設(shè)計(jì)的心理學(xué)原則的集合。

格式塔不是一個(gè)設(shè)計(jì)師，格式塔甚至不是一個(gè)人。

如上所述，格式塔原則是德國(guó)心理學(xué)家馬克斯·沃特海默、庫(kù)爾特·科夫卡和沃爾夫?qū)た评盏闹腔郛a(chǎn)物，他們都對(duì)發(fā)現(xiàn)人類如何從混亂的刺激中提取信息和有意義的視覺(jué)感興趣——我們都必須在混亂中尋找秩序的沖動(dòng)。

現(xiàn)在，這可能看起來(lái)與圖形（尤其是標(biāo)識(shí)設(shè)計(jì)）相距甚遠(yuǎn)，但更讓您吃驚的是，您可以使用它們的原則來(lái)指導(dǎo)您的設(shè)計(jì)決策。

格式塔理論的基本核心是基于心理學(xué)原理，即人們把一幅畫看作一個(gè)統(tǒng)一的整體，而不是以不同的方式感知每一個(gè)單獨(dú)的部分。

支配網(wǎng)站設(shè)計(jì)的大多數(shù)原則都起源于這種格式塔理論，它由5個(gè)格式塔原則組成，后來(lái)又增加了幾個(gè)相關(guān)的原則，我們先來(lái)看看格式塔理論的五大原則。

1-鄰近法則

在格式塔心理學(xué)中，接近法則說(shuō)的是，放在彼此附近的物體被視為一個(gè)群體，這表明它們之間存在一種關(guān)系。

因此，即使沒(méi)有文本解釋，一個(gè)設(shè)計(jì)也可以表明這組項(xiàng)目是一個(gè)組，那是另一個(gè)組，這只是利用了接近定律。

作為鄰近原則的衍生，沒(méi)有關(guān)系的物體放在一起時(shí)，會(huì)在觀眾中造成混亂，因?yàn)榇竽X想要將它們視為同一組。

如下圖所示，左邊的圖清楚地表明，您正在處理的是6位信息，它們是獨(dú)立的，但是相似的。

在右側(cè)，似乎有三個(gè)主要的信息組，每個(gè)組中有兩個(gè)子點(diǎn)。

因此，在設(shè)計(jì)時(shí)，保持接近法則可以幫助你的觀眾形成正確的解釋，并識(shí)別視覺(jué)環(huán)境。

這樣的分組能夠在很大程度上定義您的設(shè)計(jì)的視覺(jué)和心理理解。

即使所有的元素在形狀、大小或顏色上都有很大的不同，但放在一起時(shí)它們看起來(lái)就像一組。

所以你把什么東西放在一起，什么東西離開，對(duì)用戶形成的感知是至關(guān)重要的。

這張2002年MTV音樂(lè)大獎(jiǎng)的照片清楚地向你展示了誰(shuí)是組織者，誰(shuí)是贊助商，甚至沒(méi)有任何標(biāo)題說(shuō)明。

它們都是公司的隨機(jī)標(biāo)識(shí)，以自由浮動(dòng)的六邊形排列，然而，你可以通過(guò)格式塔原則，確切地知道誰(shuí)是贊助商，誰(shuí)是組織者。

2-相似定律

相似原理定律指出，看起來(lái)彼此相似的物體被認(rèn)為是一個(gè)群體。

這可能是在大小、形狀、風(fēng)格、意義、功能或任何其他方面顯示相似性的元素。

它們?cè)谝曈X(jué)上應(yīng)該以任何方式看起來(lái)相似，以確保相似的原則發(fā)揮作用，并幫助觀眾建立聯(lián)想，將物品視為一起和相關(guān)的。

相似原理幫助人們理解相鄰的圖形或重疊的圖像，利用它們不同的外觀和獨(dú)特的視覺(jué)元素。

相似定律經(jīng)常與鄰近定律一起工作，創(chuàng)造出一個(gè)整體的畫面，在人們的頭腦中觸發(fā)正確的感知，并建立一個(gè)視覺(jué)層次。

3-閉合定律

閉合原理提出，大腦會(huì)迅速填補(bǔ)眼睛看不到的部分。

首先，當(dāng)人類遇到一個(gè)缺少元素的模式時(shí)，大腦往往會(huì)填補(bǔ)這個(gè)空白，并產(chǎn)生一個(gè)完整的畫面。

你能在上面的圖片中看到一個(gè)三角形，這難道不令人驚訝嗎？盡管它實(shí)際上只是三個(gè)像吃豆人一樣的圓圈組合在一起，并切出一個(gè)缺口。

格式塔理論中的閉合原理允許設(shè)計(jì)師在不直接勾畫出他們想要表達(dá)的內(nèi)容的情況下做出一些戲劇性的陳述。

閉包背后的想法是為觀眾提供足夠的信息，讓他們自己得出結(jié)論，然后花一點(diǎn)時(shí)間來(lái)欣賞設(shè)計(jì)。

如果不討論保羅·塔加德（Paul Thagard）的《思想與行動(dòng)的一致性》（Coherence in Thought and Action）一書的封面，就很難討論《終結(jié)法則》（law of closure principle）。

這個(gè)例子顯示了八個(gè)由隨機(jī)的線組成的圓圈。

它幫助我們看到一個(gè)三維立方體的良好形式雖然不完全在那里，但它確實(shí)在那里。

4-數(shù)字地面定律

圖形背景的規(guī)律關(guān)系到設(shè)計(jì)的背景與前景之間的和諧關(guān)系。

這些格式塔原則指出，視覺(jué)上的元素要么被視為構(gòu)成前景的圖形，要么被視為構(gòu)成設(shè)計(jì)的焦點(diǎn)，要么被視為構(gòu)成規(guī)劃的背景。

正確地使用它可以影響你在哪里吸引眼球，以及你的設(shè)計(jì)的焦點(diǎn)是什么。

如下圖所示，當(dāng)用戶需要執(zhí)行搜索時(shí)，高亮顯示搜索欄可以清楚地確定網(wǎng)站正在監(jiān)聽用戶輸入。

一旦掌握了這些格式塔原則，設(shè)計(jì)師學(xué)會(huì)了在圖形和地面之間建立一種關(guān)系，就有大量的空間可以發(fā)揮，可以創(chuàng)造一些引人注目的效果。

圖形基礎(chǔ)定律的一些最好的例子是兩個(gè)設(shè)計(jì)元素都有意義的例子；它們是一幅單獨(dú)的清晰的圖畫，當(dāng)作為一個(gè)整體來(lái)看時(shí)，會(huì)產(chǎn)生一種全新的、引人注目的效果。

例如，看看這個(gè)迷人的非洲兒童希望行動(dòng)的標(biāo)志。

你先看到什么？非洲的形象？還是兩個(gè)人類角色的剪影，就像一個(gè)孩子抬頭看著母親？

這兩個(gè)設(shè)計(jì)元素結(jié)合在一起，為非洲兒童創(chuàng)造了一種強(qiáng)烈的希望的情感，極大地公正地對(duì)待了這一倡議。這就是通過(guò)格式塔原則進(jìn)行良好設(shè)計(jì)的力量。

再看看熟悉的舊Mac標(biāo)志"一張笑臉"，從側(cè)面看也像一張笑臉，看著像電腦屏幕一樣的東西。

這是不是意味著一旦你使用了Mac電腦，你就會(huì)很開心？

這些視覺(jué)元素是一些杰出的例子，如果規(guī)律的圖形根據(jù)。

5-共同區(qū)域定律

共域定律假定在一個(gè)確定的邊界內(nèi)的元素被視為一個(gè)組。

因此，無(wú)論每個(gè)單獨(dú)的元素是多么獨(dú)特和不同——如果它與其他細(xì)節(jié)一起出現(xiàn)在一個(gè)封閉的區(qū)域，它就被認(rèn)為與該封閉區(qū)域的所有其他部分都有關(guān)系——公共區(qū)域。

盒子外的物品被認(rèn)為是不同于群體的。

因此，向頁(yè)面添加邊框可以建立明確的組，并與頁(yè)面上的其他可視元素創(chuàng)建隔離。

與下面的格式塔原則示例一樣，第一幅圖顯示了三組度量標(biāo)準(zhǔn)，它們彼此獨(dú)立且不同。

然而，第二個(gè)圖暗示了所有這三個(gè)度量可以是非常密切相關(guān)的，甚至是同一事物的不同表示。

這就是格式塔理論的五個(gè)原則，它們構(gòu)成了我們今天所遵循的大多數(shù)用戶體驗(yàn)原則的基礎(chǔ)。

在格式塔中還有其他幾個(gè)法則，隨著時(shí)間的推移也變得流行起來(lái)，現(xiàn)在在塑造視覺(jué)感知中起著關(guān)鍵的作用。其中一些是:

6-共同命運(yùn)的法則

共同的命運(yùn)法則指出，當(dāng)人們看到視覺(jué)元素朝同一方向移動(dòng)時(shí)，即使這個(gè)運(yùn)動(dòng)僅僅是在一張完全靜止的照片中暗示出來(lái)的，他們也會(huì)傾向于認(rèn)為所有這些元素都是由相同的刺激觸發(fā)的。

他們前往相同的目的地，或至少相似的目的地，因此似乎是在同一潮流。

當(dāng)你看到滾動(dòng)條的移動(dòng)與頁(yè)面的移動(dòng)同步時(shí)，這是格式塔視覺(jué)層次中共同命運(yùn)法則的一個(gè)經(jīng)典例子。

7-連續(xù)性定律

連續(xù)性定律指出，排列在一條直線或曲線上的元素被認(rèn)為比不落在軌道或曲線上的元素之間的聯(lián)系更緊密。

這個(gè)法則幫助設(shè)計(jì)師呈現(xiàn)視覺(jué)線索，讓瀏覽者看到頁(yè)面的特定部分，非常熟練地引導(dǎo)他們的視線。

8-對(duì)稱定律

對(duì)稱性法則認(rèn)為，人類傾向于把物體看作是對(duì)稱的形狀，在靠近中心的地方形成，并向兩邊均勻延伸。

因此，對(duì)稱的設(shè)計(jì)很容易在眼睛上，并有助于創(chuàng)造更平衡的組成。

為什么格式塔原則很重要？

當(dāng)你通讀完所有這些格式塔原則時(shí)，你會(huì)發(fā)現(xiàn)自己對(duì)所有這些原則都表示贊同，不是嗎？

當(dāng)涉及到視覺(jué)感知時(shí)，有著如此多不同國(guó)家、文化、身份和偏好的數(shù)十億人，往往表現(xiàn)出高度相似的傾向，這是非常令人驚訝的。

在這樣一個(gè)時(shí)代,設(shè)計(jì)不僅僅是一個(gè)頁(yè)面的樣子,其實(shí)當(dāng)一個(gè)設(shè)計(jì)是一個(gè)重要的營(yíng)銷工具為每一個(gè)業(yè)務(wù),獲得了新鮮的完形原則將幫助您理解工藝最好的網(wǎng)絡(luò)和應(yīng)用程序的頁(yè)面吸引客戶,讓他們看看你想讓他們看到的東西。

格式塔理論在設(shè)計(jì)中的實(shí)例

人類大腦以無(wú)法解釋的方式創(chuàng)造奇跡；我們天生就能看到模式、邏輯和結(jié)構(gòu)，并理解這個(gè)多路復(fù)用的世界。

一個(gè)時(shí)代以來(lái)，許多設(shè)計(jì)師和廣告商一直在利用格式塔原則和理論。那么，讓我們開始吧，好嗎？

關(guān)閉或修改

人類的大腦可以填補(bǔ)這些空白！

閉合或具體化定律描述了我們的大腦填補(bǔ)形狀缺失部分的能力。

例如，虛線仍然可以為我們構(gòu)成一個(gè)圓或正方形。

這樣，即使線條不是完全閉合的，也不會(huì)阻止我們?cè)谀X海中創(chuàng)造出熟悉的形狀。

一個(gè)很好的例子就是阿迪達(dá)斯的商標(biāo)。

三個(gè)大帳篷形狀的葉片（三葉草），但明顯的突破無(wú)縫創(chuàng)造了標(biāo)志性的阿迪達(dá)斯品牌的三條紋。

盡管如此，這些條紋并沒(méi)有阻止我們看到整個(gè)圖像——它們只是給它增加了另一層復(fù)雜性。

但你會(huì)如何利用這一點(diǎn)呢？

好吧，如果你想讓某些東西單調(diào)，把所有的陰影部分減為黑色，剩下的部分保持透明。

即使只有很少的信息，我們的大腦也可以跨越這些間隙，形成圖片——比如世界自然基金會(huì)的標(biāo)志（世界自然基金會(huì)，而不是摔跤運(yùn)動(dòng)員……）

鄰近或共同的命運(yùn)/地區(qū)

這些格式塔原則表明，我們將向同一方向移動(dòng)的事物進(jìn)行分組，并且我們也通過(guò)它們與其他元素的接近程度，不知不覺(jué)地對(duì)項(xiàng)目進(jìn)行分組。

這使我們能夠?qū)⒃S多小部件解釋為一個(gè)整體，當(dāng)我們想要向某些東西添加模式或紋理時(shí)，這在設(shè)計(jì)中很有用，同時(shí)又不會(huì)丟失整體的圖像。

這一原則的一個(gè)很好的例子就是威拉的標(biāo)志。

他們使用線條藝術(shù)來(lái)描繪吹起的發(fā)絲，使眼睛通過(guò)線條或發(fā)絲滑過(guò)標(biāo)志名稱。

這里值得注意的是，設(shè)計(jì)師故意添加了兩條額外的線，由于它們的接近，觀眾把它們歸類為頭發(fā)，看到的是一個(gè)更完整的畫面。

如果你想創(chuàng)建一個(gè)更大的圖像從較小的圖像都有各自的重量，這將是一個(gè)偉大的方式做到這一點(diǎn)-堆肥幾何形狀到圖像是一種流行的方法，利用這種效果。

延續(xù)性

延續(xù)原則指出，觀眾將在線條和形狀中尋找延續(xù)，并將它們分組。

這一點(diǎn)在可口可樂(lè)和耐克的標(biāo)志中尤為明顯，我們的眼睛會(huì)自然地跟隨圖像的流動(dòng)線條。

鋸齒狀的線條可以營(yíng)造出一種混亂的感覺(jué)，而平滑的曲線可以營(yíng)造出一種平靜與和平的感覺(jué)。

通過(guò)這種方式，你可以使用長(zhǎng)線條，通過(guò)你的設(shè)計(jì)不斷地喚起觀眾的平靜的情緒反應(yīng)，或者你也可以做相反的事情。

元素連接

遵循元素連通性原則的人會(huì)遵循從一個(gè)圖像到另一個(gè)圖像的連接來(lái)連接它們。

PlayStation的標(biāo)志就是一個(gè)很好的例子，盡管它有三個(gè)獨(dú)立的部分，但在我們看來(lái)，它是兩個(gè)不同平面上相互連接的字母，即，垂直和水平。

人類思維的能力，以連接這兩個(gè)是必要的，使這個(gè)標(biāo)志的工作。

當(dāng)觀察者看到兩個(gè)元素在視覺(jué)上有聯(lián)系時(shí)，他們會(huì)立即認(rèn)為這兩個(gè)元素是有聯(lián)系的，盡管這些對(duì)象在其他方面是不相關(guān)的。

您可以使用它來(lái)連接查看器的兩個(gè)東西。

流程圖和其他圖表，其中的線和箭頭鏈接不同的圖標(biāo)是一個(gè)很好的例子。

你也可以用一條簡(jiǎn)單的線來(lái)創(chuàng)造一種連接感——就是這么簡(jiǎn)單。

圖/地

這一原理適用于人類天生的感知深度的能力，即使深度并不存在。

標(biāo)識(shí)常常被扭曲，以提供一個(gè)視角，因此，可以有效地欺騙眼睛，使其相信它們實(shí)際上是三維的。

這是由于圖形/地面效應(yīng)，它指出，當(dāng)一個(gè)較小的物體出現(xiàn)在一個(gè)相當(dāng)大的均勻背景上時(shí)，我們看到它們是兩個(gè)物體，一個(gè)在另一個(gè)的前面，而不是一個(gè)平面圖像。

這種效果在索尼隨身聽的商標(biāo)上很明顯。

但是，除此之外，即使是沒(méi)有使用透視點(diǎn)的圖像也可以通過(guò)疊加圖像和使用色調(diào)范圍來(lái)創(chuàng)建深度來(lái)顯示3D。

Crossref的logo運(yùn)用了這個(gè)原理，創(chuàng)造了一個(gè)"螺旋"的效果，而不是僅僅三個(gè)菱形互相部分覆蓋。

即使是像臉部輪廓這樣簡(jiǎn)單的東西也能創(chuàng)造出一種深度感——就像兩張臉/花瓶一樣的視覺(jué)錯(cuò)覺(jué)。

給你的設(shè)計(jì)兩個(gè)"版本"可以是一個(gè)很好的方式來(lái)增加你的設(shè)計(jì)的復(fù)雜性，而不是真正創(chuàng)造一些非常復(fù)雜的東西。

相似性和不變性

這種相似性原則依賴于人類識(shí)別和歸類"相似"圖像或元素的能力，不管它們的位置或鄰近程度如何。

然而，這種相似性原則并不總是適用于一幅畫。

這些格式塔原則沒(méi)有達(dá)到預(yù)期效果的一個(gè)著名例子是洛杉磯的當(dāng)代藝術(shù)博物館。

他們的標(biāo)志有三個(gè)形狀和一個(gè)字母——正方形、圓形、三角形和字母C。

這些形狀本應(yīng)拼成"MOCA"，但人類大腦先將形狀分組，然后再將字母分組，這破壞了他們?cè)噲D創(chuàng)造的相似效果，讓觀眾感到困惑。

如果你有信心，觀眾將能夠分組一樣的對(duì)象，盡管他們的安排，你將有更多的信心來(lái)利用空間。

利用單詞之間的大空間出現(xiàn)的設(shè)計(jì)就是這種相似性的一個(gè)很好的例子。

我們自然會(huì)一起閱讀這些元素，因?yàn)樗鼈冊(cè)诒举|(zhì)上是相似的。

多重穩(wěn)定性

多穩(wěn)定性是一種奇怪的能力，人類必須在不完整的數(shù)據(jù)基礎(chǔ)上同時(shí)感知兩幅圖像。

這類似于光學(xué)錯(cuò)覺(jué)，問(wèn)你看到的是兩張臉還是一個(gè)花瓶，是兔子還是鴨子。

同樣，秋葉標(biāo)志利用完形原則和它的葉子元素，這也顯示了一個(gè)無(wú)葉的秋樹在它的中脈。

流動(dòng)的原則，NBC標(biāo)志有明亮的顏色元素設(shè)置在一個(gè)圓形。

但是，這是雙叉的，看起來(lái)就像孔雀的羽毛（你可以從中間看到它的頭），它們看起來(lái)也像早晨太陽(yáng)升起時(shí)的陽(yáng)光。

為了利用完形原則，設(shè)計(jì)師需要顛覆事物的樣子，讓它們模仿別的東西，同時(shí)又不失去它們的本質(zhì)。

看看一個(gè)單一的設(shè)計(jì)，并詢問(wèn)如何將元素轉(zhuǎn)換成其他的東西，為其添加一層意義。

對(duì)稱

盡管人類是非常敏銳的動(dòng)物，但他們確實(shí)喜歡所有東西都裝在整潔的小盒子里。

那些偏離中心或偏離方向的事情會(huì)讓我們煩惱不已。

因此，我們喜歡對(duì)稱性和集中化也就不足為奇了。

當(dāng)元素整齊地排列在一起時(shí)，我們可以在其中畫一條線，我們會(huì)發(fā)現(xiàn)它在視覺(jué)上非常令人愉悅。

這就像網(wǎng)上那些能給你帶來(lái)"滿足感"的視頻，但它們都是與其他東西完美契合的東西。

格式塔對(duì)稱原理與之非常相似。

當(dāng)涉及到設(shè)計(jì)一個(gè)標(biāo)志，我們可以使用一個(gè)平衡來(lái)創(chuàng)建模式，我們覺(jué)得有趣的看。

BP和Rare Disease Day的標(biāo)志都利用了對(duì)稱來(lái)創(chuàng)造令人興奮和美觀的標(biāo)志。

結(jié)論

心理學(xué)和設(shè)計(jì)是兩個(gè)獨(dú)立但又相互交織的世界，雖然它們可以并且確實(shí)獨(dú)立存在，但它們有許多共同的元素和特征，很難忽視它們的存在。

使用格式塔原則乍一看似乎是一項(xiàng)艱巨的任務(wù)，但如果你回顧以前的網(wǎng)站設(shè)計(jì)工作，你無(wú)疑會(huì)毫無(wú)意義地使用其中的一些原則。有意識(shí)地將這些原則運(yùn)用到你未來(lái)的網(wǎng)站設(shè)計(jì)工作中，這對(duì)你和你的客戶都有好處。

而且，當(dāng)你知道如何最好地使用完形心理學(xué)時(shí)，你就可以取悅你的用戶的視覺(jué)感受并激發(fā)他們的興趣。