巧用格式塔原則處理網頁設計中的正負空間

　　本文中，我們讨論了關于網頁正負空間的格式塔原則。文章雖然有點長(cháng)但講解詳細，希望能(néng)對(duì)你有所幫助。

　　正文：

　　當元素以有序的方式排列時(shí)，空間的智能(néng)使用將(jiāng)我們的目光引向(xiàng)最引人注目的空間——無論正面(miàn)還(hái)是負面(miàn)。盡管正空間似乎支配著(zhe)負空間，但兩(liǎng)者都(dōu)被用來平衡地講述一個和諧、連貫、完整的故事(shì)。但是空間在網頁設計中講述了什麼(me)樣的故事(shì)?

　　人類的大腦通過(guò)硬連線來連接點，并使眼睛看到的一切都(dōu)具有意義。設計是一個創造性的領域，形式和空間相互融合，給我們帶來多樣化的體驗。無論我們遇到什麼(me)樣的設計，我們的大腦天生就(jiù)能(néng)把那件作品變成(chéng)更簡單的組件，這(zhè)些組件由與空間相關的基本形狀和形式組成(chéng)。我們的大腦中充滿了回憶，并且由于我們的經(jīng)曆，我們很容易識别出這(zhè)些模式。

　　空間——正面(miàn)和負面(miàn)——在統一設計元素中扮演著(zhe)關鍵的角色。因此，我們看到一個統一的模式(或不是）。當元素以有序的方式排列時(shí)，空間的智能(néng)使用將(jiāng)我們的目光引向(xiàng)最引人注目的空間——無論正面(miàn)還(hái)是負面(miàn)。

　　正空間形成(chéng)設計的客體，它是你看到的形狀、顔色圖案等部分；相反，負空間是背景或誇張的留白（大多數情況）

　　

　　文森特·梵高的《星月夜》

　　盡管正空間似乎支配著(zhe)負空間，但兩(liǎng)者都(dōu)被用來平衡地講述一個和諧、連貫、完整的故事(shì)。

　　在平衡的構圖中，設計的正負空間相互配合，形成(chéng)一個完美無縫的整體。相反，不平衡的構圖會(huì)讓受衆感到不适，并傳達出一個不完整的、扭曲的故事(shì)。

　　但是空間在網頁設計中講述了什麼(me)樣的故事(shì)？

　　在空間中，網頁設計的成(chéng)敗更多地取決于實用性和可用性。如果你的設計技巧很差，那麼(me)網頁設計的整體效果和表現都(dōu)會(huì)受到影響。從另一個角度來看，如果空間使用不當，將(jiāng)對(duì)你的網站産生負面(miàn)影響。

　　如果你認爲你的開(kāi)發(fā)技能(néng)很棒，但你的設計技能(néng)可能(néng)需要更多的改進(jìn)，那麼(me)你就(jiù)中了頭彩。在本文中，我們將(jiāng)讨論:

　　1、正負空間的關系、重要性與實施；

　　2、空間與認知感知之間的聯系；

　　3、格式塔原則及其在網頁設計中的應用；

　　我們還(hái)將(jiāng)讨論一些創造性利用空間和格式塔原則的真實網頁設計示例。

　　事(shì)不宜遲，我們開(kāi)始吧；

　　1、正負空間的關系、重要性和實施

　　空間由兩(liǎng)個主要維度組成(chéng):正面(miàn)和負面(miàn)。正的是元素，負的不是元素。如前所述，正的是客體，負的是其背後(hòu)可忽略不計的空間。一個是焦點，另一個是背景。前者活動和激勵，後(hòu)者保持靜止和模糊。一個是月亮，另一個是周圍的黑暗天空。

　　在網頁設計中，空間相互作用以保持整體構圖的概念。隻有當兩(liǎng)個空間通過(guò)對(duì)比區分，同時(shí)又傾向(xiàng)于更大的畫面(miàn)時(shí)，才會(huì)産生視覺層級(想想陰陽)。

　　

　　"陰陽”是中國(guó)古代哲學(xué)中的二元論概念

　　我們在交點處對(duì)正空間和負空間進(jìn)行微分，負面(miàn)主要出現在空白區域，補充正面(miàn)使其突出。

　　似乎正空間起(qǐ)主導作用，但負空間同樣有益。其中一些益處是：

　　a. 創建了一個淺顯易懂的視覺層級；

　　b. 設定注意力焦點，減少分心；

　　c. 幫助建立規模，讓焦點更大；

　　d. 提高了頁面(miàn)掃描能(néng)力;

　　e. 使頁面(miàn)上的流程顯得自然；

　　f. 不需借助額外輔助工具，闡明視覺元素之間的關系；

　　g. 有助頁面(miàn)整理；

　　h. 增強網頁的樣式和外觀。

　　如果你說(shuō)，設計中的負空間并不是那麼(me)消極。然而，當平衡使用比例時(shí)，這(zhè)兩(liǎng)種(zhǒng)空間類型都(dōu)表現得很好(hǎo)。隻有當其中一個占據主導地位，給人一種(zhǒng)“過(guò)于擁擠”或“缺乏”的印象時(shí)，混亂才會(huì)發(fā)生。在這(zhè)兩(liǎng)種(zhǒng)情況下，用戶都(dōu)無法處理如此複雜的信息，因此，創造性地利用空間進(jìn)行網頁設計的動機就(jiù)會(huì)土崩瓦解。

　　這(zhè)是一個内容錯位或空間“混亂”的網頁模闆:

　　

　　欠考慮的“混亂”空間

　　

　　黑白間的空間差異

　　

　　固定空間，以顯示按比例使用時(shí)空間如何增強清晰度和均勻度

　　

　　在網頁設計中有效利用空間

　　當空間的概念和布局出現時(shí)，困惑随之而來：

　　a. 是正空間被負空間包圍還(hái)是負空間被正空間吞噬?

　　b. 如何确定每種(zhǒng)空間類型的比例?

　　c. 哪一個應該作爲驗證焦點對(duì)象？

　　d. 是否必須突出一個忽略另一個來向(xiàng)用戶傳達理念?

　　e. 如何通過(guò)正負面(miàn)空間的交流來實現“設計的涅磐”?

　　隻有清楚的了解基礎知識，才能(néng)回答這(zhè)些問題。根據黃金法則:簡單是最好(hǎo)的策略(我們這(zhè)麼(me)做是因爲它适合!)

　　在開(kāi)始提到，網頁設計就(jiù)是要創建一個簡單的用戶界面(miàn)，一石二鳥，幫助你和你的用戶。或從字面(miàn)意義上來說(shuō),有助于增強網站設計的視覺吸引力以及使其有效且易于使用——是的，空間的利用有著(zhe)不可思議的力量。

　　2、空間與認知感知之間的聯系

　　由于我們的大腦總是在扮演偵探的角色，尋找隐藏的線索和空間之間缺失的聯系，所以它將(jiāng)當前的視覺效果與之前經(jīng)曆過(guò)的視覺效果作爲認知過(guò)程中的一部分進(jìn)行比較。成(chéng)爲一名高效的網頁設計師，你必須先了解大腦是如何關注周圍環境的，它可以幫助你鎖定視覺元素的特定用途，并利用它們來影響用戶的感知。

　　“偉大的設計師，明白心理學(xué)在視覺感知中所扮演的重要角色。當他人看見你的設計創作時(shí)會(huì)發(fā)生什麼(me)?他們對(duì)你分享的信息有何反應?”

　　——Autodesk品牌内容策略師，Laura Busche

　　你現在必須清楚地了解視覺設計和心理學(xué)是如何聯系在一起(qǐ)并相互影響的。換句話說(shuō)，主要是通過(guò)格式塔原則利用空間，設計以用戶爲中心的簡易界面(miàn)。這(zhè)些可以幫助你理解和控制視覺心理上的聯系。

　　3、網頁設計中的格式塔原則

　　格式塔是德文“Gestalt”的音譯，”模式、形狀、形式”的意思，它更多的是一個概念而不是一個詞，它指出：

　　“整體不是各部分的總和。”

　　——Kurt Koffka

　　當單個單元以某種(zhǒng)方式統一時(shí)，在我們看來就(jiù)是一個整體。我們將(jiāng)元素看作一個整體，盡管它們各具特色。這(zhè)個概念或理論從根本上适用于所有設計媒介:我們不把文本、顔色和形狀看作單獨的元素，而是把整個網頁看作整體。同樣的道(dào)理也适用于森林:我們看到的不隻是一堆樹，就(jiù)像我們看海洋時(shí)看不到水滴一樣。

　　格式塔原則描述了當特定的條款和條件被應用時(shí)，人類的大腦是如何感知視覺對(duì)象的。它幫助大腦創造視覺圖像。因此，格式塔原則基于六個主要類别:

　　a、圖形與背景

　　b、鄰近性

　　c、對(duì)稱和有序

　　d、相似性

　　e、閉合性

　　f、連續性

　　a、圖形與背景

　　“圖形”是直觀且明顯與背景區分的物體

　　

　　聖杯

　　最典型的例子是聖杯——兩(liǎng)個鏡像面(miàn)孔之間的花瓶。當你第一次看到這(zhè)張圖片的時(shí)候，你的眼睛會(huì)立即被吸引到你注意到的最集中的視覺物體上，可能(néng)是相互對(duì)立的面(miàn)孔，也可能(néng)是花瓶。當你的大腦在調整你的焦點時(shí)，背景或花瓶模糊不清，在那一刻，你的大腦直覺地在圖像中呈現出負面(miàn)或背景。

　　過(guò)了一會(huì)兒，你會(huì)注意到背景中的花瓶，并意識到它本來就(jiù)在那裡(lǐ)。由于圖形和基本原則看起(qǐ)來模棱兩(liǎng)可，設計師通常創造視覺上吸引人的超現實和虛幻的藝術和網頁設計。

　　

　　圖形與背景的關系

　　有時(shí)，圖形與背景之間的關系是穩定的，使得他們彼此區别開(kāi)來。有時(shí)是不穩定的，這(zhè)意味著(zhe)圖形和背景彼此難以區分。由于這(zhè)種(zhǒng)關系的模糊性，用戶遭受感知困擾。

　　爲了讓你清楚地了解圖形-背景關系如何影響網頁設計，我們詳細讨論幾個示例。每個示例都(dōu)集中在圖形-背景關系的三個主要方面(miàn):你可以通過(guò)使用對(duì)比、方框和陰影爲網頁設計添加明确的視覺效果。這(zhè)些技術用于區分顔色、大小和細節層級來區分内容，并爲各自的焦點對(duì)象添加深度。

　　下面(miàn)第一個示例中，Trellis使用了有圖形背景關系的主頁橫幅(具有明确CTA的圖像)，其清楚地顯示了細節層級、顔色和大小。

　　

　　Trellis（圖片來源）

　　頁面(miàn)中央的大草書文本，與背景中的圖像相比顯得很突出。白色文本對(duì)比灰度圖像吸引注意焦點，使其可見。換角度來看，背景模糊，來突出圖像上的文本。這(zhè)些都(dōu)表明，這(zhè)裡(lǐ)的文本被優先考慮爲圖形或正空間，而模糊的圖像被用作背景或負空間，從而強烈暗示了圖形和背景的概念。

　　接下來是方框中的内容。Ocean Health Index巧妙地利用了方框内容，區分圖形與背景。這(zhè)是你在訪問其網站時(shí)看到的:

　　

　　Ocean Health Index（圖片來源）

　　當你第一次浏覽這(zhè)個網頁時(shí)，會(huì)先看到哪個圖形?如果你問我，我會(huì)告訴你，它是右上角的白色主文本以及兩(liǎng)個顔色、文字對(duì)比鮮明的方框。頂部粗體的白色文本顯然就(jiù)是這(zhè)個圖形。(注意文本在較暗的圖像上是如何擺放的)下面(miàn)的方框也是圖形的一部分，因爲它們與背景圖像形成(chéng)了對(duì)比。該圖的第二個對(duì)比，是放置在框内的對(duì)比色文本。

　　背景使用微妙色調，以助突出圖形，這(zhè)是一個細節。這(zhè)些方框也與背景圖像重疊，使它們在圖像上清晰可見。

　　一些網站還(hái)通過(guò)圖形添加陰影來展示圖形背景關系，表現圖形置于背景之上的感覺。這(zhè)是Seriously Unsweetened網頁截圖：

　　

　　Seriously Unsweetened（圖片來源）

　　Seriously Unsweetened的登陸頁面(miàn)使用了多種(zhǒng)技術來保持圖形與背景的平衡關系；有明亮的顔色和陰影；背景使用白色，使得圖形更容易顯示在上面(miàn)；在正空間中，圖上的物體呈現出在背景“頂部”的錯覺；主圖内部添加陰影，這(zhè)讓我們注意到在主圖内還(hái)有另外的圖形背景關系，妙!

　　b、鄰近性

　　鄰近性是指頁面(miàn)中元素的親密度。web頁面(miàn)不同元素可以進(jìn)行組合，以建立更大的關聯。除了相似之外，用戶的腦海裡(lǐ)也會(huì)自動匹配這(zhè)些元素與其他頁面(miàn)元素之間的親密度。

　　

　　設計中的鄰近性

　　從圖像到文本，導航欄到web菜單，鄰近性原則在網頁設計中非常重要。當將(jiāng)類似的内容組合在一起(qǐ)時(shí)，它會(huì)將(jiāng)元素無縫連接，并爲用戶提供更好(hǎo)的視覺體驗。

　　以下是Mashable網站導航中顯示的鄰近性示例：

　　

　　 Mashable（圖片來源）

　　在上面(miàn)的圖片中，清楚地看到如何將(jiāng)同類别元素放在一起(qǐ)，來顯示與主菜單間的關系。由于使用了顔色和大小字号文本，用戶的視線會(huì)被自動吸引到主菜單欄下的子菜單欄。不同項目間利用分割線隔開(kāi)，該分割線根據鄰近性原則,用作關聯和分隔項目的用戶指南。

　　除了劃定導航欄，基于網格的内容還(hái)符合鄰近性黃金法則。亞馬遜的産品列表就(jiù)是最好(hǎo)的例子：

　　

　　Amazon Products（圖片來源）

　　如圖所見，正空間中的類似産品使用留白進(jìn)行分組和分隔。指導用戶從類似的産品列表中挑選想要的。此外，閉合原則也在類似項目清單中起(qǐ)作用。

　　現在，我們來仔細看看Basecamp 網頁表格，它顯示了網頁設計中鄰近性原則的另一種(zhǒng)情況:

　　

　　Basecamp Web Form（圖片來源）

　　可注意到表單是如何被劃分爲兩(liǎng)個主要部分的:個人信息和ID生成(chéng)。第一段暗指爲最重要的部分，其次是次要的。兩(liǎng)個部分的标題各不相同，如顔色和字體大小的差異所示。在這(zhè)個網頁表單中，接近性指示内容按重要程度進(jìn)行信息分組。

　　c、對(duì)稱和有序

　　對(duì)稱性是指兩(liǎng)個相對(duì)平面(miàn)的精确反射或鏡像。可以被看作是把一個物體二等分的平衡。現實生活中的對(duì)稱包括等邊三角形、圓形和正方形等幾何圖形。

　　

　　對(duì)稱與不對(duì)稱

　　人類的大腦渴望在人臉上找到“平衡”，在美學(xué)上是令人愉悅的。大腦也傾向(xiàng)于在其他物體中找到對(duì)稱，比如圖像，因爲對(duì)稱創造和諧，讓觀衆在觀看圖像時(shí)感到舒适。

　　以下是HvD字體網展示的網頁設計對(duì)稱性的一個很好(hǎo)的例子：

　　

　　HvD Fonts（圖片來源）

　　這(zhè)個網頁不僅展示了典型的圖形背景關系，還(hái)極好(hǎo)的展示了對(duì)稱性。頁面(miàn)被四等分，文案使用相同的字體顔色和字号，每個部分沿用相同主題的灰度背景。你也可以注意到負空間不一定是白色的;它是背景中的圖像。

　　對(duì)稱性理念引出了另一個概念:不對(duì)稱會(huì)讓人感到困惑，網頁設計中須謹慎使用。許多網站使用不對(duì)稱作爲間距的主要平衡元素，非常規的正空間與中性的背景相互平衡，反之亦然。根據不對(duì)稱的概念，Xplode Marketing展示了不對(duì)稱性獨特的美學(xué)方式，令人賞心悅目。

　　

 

　　Xplode Marketing（圖片來源）

　　該網頁利用視錯覺和不對(duì)稱性立刻抓住用戶眼球。正空間物體以不同尋常的方式放置在負空間上，從而産生吸引力。色彩是兩(liǎng)個空間和諧的主要标志，并爲觀衆創造了一種(zhǒng)自然的聯系。左邊的圖形和右邊的主導物（鹦鹉）也有很強的平衡。

　　d、相似性

　　接近性與相似性密切相關的原因是相似分組對(duì)象之間共享屬性的性質。無論是顔色、形狀、姿勢、大小、方向(xiàng)或任何其他屬性，當其中的一個或多個在鄰近區域顯示的所有對(duì)象中共享時(shí)，將(jiāng)建立連通性。

　　

　　設計中的相似性

　　即使正空間元素看起(qǐ)來沒(méi)有明顯的聯系，由于相似性原理，它們也會(huì)與負空間元素區分開(kāi)來。

　　隻需看看UrbanDecay這(zhè)些産品列表：

　　

　　Urban Decay（圖片來源）

　　正空間即圖形，它們雖各不相同，但在位置、色彩、産品布局、表現方式等方面(miàn)卻有一定的相似性。唯一的不同是眼影産品廣告，在同類産品中獨樹一幟。這(zhè)顯然是一種(zhǒng)營銷策略，旨在不破環頁面(miàn)的整體對(duì)稱性和美感的情況下吸引注意力。這(zhè)裡(lǐ)要考慮的另一點是，尺寸上的相似性使其他圖像與相似的産品類别區分開(kāi)來。

　　除了産品展示之外，正空間可以與相似性及負空間結合使用。

　　來看看influenster網頁：

　　

　　Influenster的首頁（圖片來源）

　　上例中，對(duì)齊的方框清楚地顯示了相似性。雖然每個正空間中産品不同，但整個頁面(miàn)中一緻的文案傳達出相似感。相似的風格、布局和主題，給頁面(miàn)提供了完美的視覺效果。

　　e、閉合性

　　你是否曾遇到過(guò)看上去閉合但實際開(kāi)放的畫面(miàn)?這(zhè)是因爲閉合性原則。我們的大腦傾向(xiàng)于“閉合”不完整對(duì)象中的間隙，并使用我們的視覺感知來完成(chéng)圖形，將(jiāng)其視爲一個整體。

　　

　　閉合性設計

　　正負空間緊密結合形成(chéng)一個整體。最好(hǎo)的例子是設計内外負空間中隐藏的形狀和形式，這(zhè)就(jiù)要求對(duì)設計内部的信息進(jìn)行智能(néng)評估。在封閉空間創造性地使用正負空間，可以産生有趣卻簡易的設計。

　　看看下面(miàn)Magu Kambucha的截圖：

　　

　　Magu Kambucha（圖片來源）

　　此例中，可以看到閉合性保持了完整的圖形-背景關系。瓶子和其後(hòu)面(miàn)的粗體文字顯然是圖形，背景是柔和的粉紅色。閉合性在哪裡(lǐ)?看到瓶子後(hòu)面(miàn)的文字了嗎?你不能(néng)完全看到它，但仍然知道(dào)它是“Kambucha”。除了第一個“K”和最後(hòu)一個“A”，其他半隐藏字母憑直覺完成(chéng)，整個形式開(kāi)始成(chéng)形，意義也随之而成(chéng)。朋友，這(zhè)是一個很好(hǎo)的閉合性示例!

　　看一下Cult的截圖：

　　

　　CULT Website（圖片來源）

　　雖然文本沒(méi)有顯示的很清楚，但我們很容易地讀出CULT這(zhè)個詞。即使文案不完整，文本的排列和對(duì)齊使其易于辨認。

　　f、連續性

　　根據格式塔原則，連續性遵循模式通過(guò)引導眼睛遵循一緻的路徑，并在物體之間建立線性模式。最好(hǎo)的例子是通過(guò)正空間直線和負空間曲線來理解。兩(liǎng)條線的顔色都(dōu)表明這(zhè)兩(liǎng)條線互相彎曲，但連續性模式卻表明相反的情況。

　　

　　連續性設計

　　在上圖中，盡管顔色減淡，但觀衆更傾向(xiàng)看到直線。這(zhè)使我們相信連續性原則比色彩更能(néng)引導感知。這(zhè)個概念在這(zhè)兩(liǎng)種(zhǒng)空間中流暢地流動。當我們在負空間插入一個主題時(shí)，我們的眼睛傾向(xiàng)于在正負空間之間劃一條區别線。

　　我們傾向(xiàng)于在設計中引入假想的連續性線，以引導我們的感知區分正負空間的差異。

　　我們來看看Crypton Trading網站：

　　

　　Crypton Trading（圖片來源）

　　看到頁面(miàn)右半部分設計的完美延續了嗎?不管背景的明暗色調如何，圖案在頁面(miàn)上都(dōu)非常明顯。當向(xiàng)下滾動時(shí)，你會(huì)看到圖案和顔色是如何連續無縫變化的。在這(zhè)裡(lǐ)，色調的變化是可以忽略的，我們所看到的是一個連續性點線模式。

　　另一個很好(hǎo)的例子是OscilloScope網站：

　　

　　OscilloScope網站（圖片來源）

　　該網站利用連續性法則，將(jiāng)網站訪問者帶到工作室的360度視圖中，在那裡(lǐ)他們可以導航到所需的部分。

　　

　　Cargo the movie（圖片來源）

　　影片《Cargo》的登錄頁面(miàn)也使用了連續性法則:它使用滾動導航讓文本以線性運動的方式漂浮在網站上。由于logo是半可見垂直顯示，所以觀衆必須向(xiàng)下滾動才能(néng)看到它的全貌。當頁面(miàn)向(xiàng)下滾動時(shí)，靜态logo與平行文本塊開(kāi)始一起(qǐ)浮動。導航引導用戶通過(guò)無幹擾的不同層次的體驗。

　　由于我們的眼睛通常遵循最平滑的路徑，圖形設計師可以使用這(zhè)樣的例子使他們遵循所需路徑，并沿直線定位元素。

　　總結

　　本文中，我們讨論了關于網頁正負空間的格式塔原則。還(hái)提供了一些真實的示例，讓你清楚地知道(dào)如何使用簡單而有效的技術來影響用戶感知。這(zhè)裡(lǐ)的關鍵是使用這(zhè)些原則來創建一個看起(qǐ)來大于其各部分之和的網頁設計。

　　人類主要基于視覺感知來思考，根據關于網頁正負空間的格式塔原則，我們傾向(xiàng)于看到更大的圖景，而不是第一眼看到的單個元素。

　　在格式塔原則的幫助下，我們能(néng)夠更好(hǎo)地想象如何在網頁設計中利用空間來創建吸引人的作品。因爲空間對(duì)于任何設計師來說(shuō)都(dōu)是一件錯綜複雜的事(shì)情，所以最好(hǎo)的方法就(jiù)是保持格式塔原則的完整性。隻有這(zhè)樣，你才能(néng)真正認識到空間在設計中的重要性、有效性和用途，并毫不費力地成(chéng)爲網頁設計領域的有效貢獻者。