在網頁設計中如何使用格式塔原則？要注意哪些內容呢？

人類的大腦天生就能將這些點連接起來，并從眼睛看到的一切事物中獲得意義。設計是一個創造性的領域，在這里形式和空間交織在一起，為我們提供了各種各樣的體驗。

無論我們遇到的是什么設計，我們的大腦都是硬連線的，將這個片段轉化為由基本形狀和形態組成的更簡單的組件，而這些基本的形狀和形式在空間中發揮著作用。我們的頭腦里充滿了回憶——多虧了我們的經歷——我們很容易識別這些模式。

空間——正面和負面都在統一設計元素方面發揮著關鍵作用。因此，我們看到一個統一的模式（或不）。當元素有序地排列時，空間的巧妙運用吸引我們的目光到最引人注目的空間——是積極的還是消極的。

正面的空間構成了肉或肉的設計，它的一部分，你看到的形狀，顏色，圖案等。另一方面，負空間是背景或夸大的空白（大多數情況下）。

文森特·梵高的《星空》

正空間似乎支配著消極對應物，兩者都用于平衡，以講述一個和諧的，連貫的，無縫的完整的故事。

平衡的構圖，設計的積極部分和消極空間共同作用，相互補充，形成了一個無縫、美觀的整體。相反，不平衡的構圖會給觀眾帶來不適，并傳達一個不完整的，相當扭曲的故事。

但是在網頁設計中空間講述的是什么樣的故事呢？

在這些空間中，網站設計的成敗更多的取決于實用性和可用性。試想一下，如果你的設計技巧很差，網頁設計的整體功效和表現將被打亂。內容就是王，但從另一個角度來看，如果這些空間使用不當，內容就會對你的網站產生影響。

如果你認為你的發展技能搖滾，但你的設計技能可能需要一些更多的改進，你剛剛中了頭獎。在本文中，我將介紹：

• 積極空間與消極空間的關系、重要性及其實現；
• 空間與認知知覺之間的聯系；
• 格式塔原則及其在網頁設計中的應用。

我們也將討論一些真實世界的網頁設計的例子，每一個格式塔原則和空間的創造性使用。

積極與消極空間：關系、重要性與實施

空間包含兩個主要維度：正的和負的。正數是元素，負數為零。正如前面提到的，積極的是對象，消極的是它后面可以忽略的空間。一個是焦點，另一個則是背景。在前者運動和激勵的地方，后者保持靜止和模糊。一個是月亮，另一個是圍繞著它的黑暗天空。

在網頁設計中，空間是互相作用的，以保持整體組合的理念。視覺層次只有當兩個空間被區分為對比，但傾向于更大的圖像時（想想陰陽），視覺層次才會被創建。

“陰陽”，中國古代哲學中的一個二元論概念。（大預覽）

我們在匯點區分正空間和負空間。負值主要表現為空白，它補充了積極的部分，使其彈出。

看來，積極空間起到了帶頭作用，消極空間同樣重要，因為它帶來了無數的好處。這些好處包括：

• 它創建了一個易于遵循的視覺層次；
• 設定注意力的焦點，減少分心；
• 幫助建立規模，讓焦點顯得更大；
• 提高頁面掃描能力；
• 使頁面上的流顯示為自然；
• 它澄清了視覺元素之間的關系，而不需要額外的幫助；
• 它有助于減少頁面的雜亂；
• 提高網頁的風格和外觀。

如果你問我，設計中的消極空間不是那么消極。但是，這兩種空間類型在平衡比率中使用時效果都很好。不幸的是，只有當一方控制另一個并給出“過度擁擠”或“缺乏”的印象時，混亂才會發生。在這兩種情況下，觀眾無法處理如此復雜的信息，因此，創造性地利用空間進行網頁設計的動機就分崩離析了。

下面是一個內容放錯位置或“混沌”空間的網頁模板：

未考慮的 “ 混沌 ” 空間

空間差異以黑白顯示

固定空間顯示空間如何在按比例使用時可以產生清晰和均勻的效果

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

當空間的概念和安排出現時，懷疑開始使這一地區變得模糊。

• 正空間是被否定的空間所包圍還是負空間被正空間所吞噬？
• 如何確定每種空間類型的比例？
• 哪一個應該驗證為焦點物體？
• 是不是一定要強調一個而忽略另一個，向觀眾傳達你想要的觀念？

我如何通過積極和消極空間的交流來實現“設計天堂”？

像這樣的問題只能在對基礎的清楚理解下才能得到回答：根據經驗法則，簡單性是最好的策略（我們之所以這么做，是因為它很合適）！

我們在文章的開頭提到，網頁設計就是要創造一個簡單的用戶界面，幫助你和你的觀眾一石二鳥，或者用字面上的話說，這有助于增加網站設計的視覺吸引力，同時使其更有效，更容易使用——是的，在空間使用上有著難以置信的力量。

空間與認知知覺的關系

由于我們的大腦總是扮演偵探的角色，尋找隱藏的線索和空間之間缺失的聯系，它比較當前的視覺經驗與以前作為認知過程的一部分。為了成為一個高效的網頁設計師，你必須首先了解大腦是如何關注它周圍的環境的。它可以幫助你確定視覺元素的特殊用途，并使用它們來影響觀眾的感知。

“偉大的設計師懂得心理學在視覺感知中所扮演的強大角色。當有人看到你的設計作品時會發生什么？他們對你的文章所分享的信息有什么反應？”

——歐特克(Autodesk)品牌內容策略師勞拉·布施(Laura Busche)

你們現在必須對視覺設計和心理學是如何聯系在一起并有力量相互影響有一個清晰的概念。換句話說，設計一個簡單的以用戶為中心的界面并使用空間的主要思想是通過考慮格式塔原則。這些可以幫助你理解和控制視覺和心理的聯系。

網頁設計中的格式塔原則

格式塔在德語中是“形式”的意思。它更多的是一個概念，而不是一個詞，它說：

“整體是各部分之和?！?/p>

——庫爾特·科夫卡(Kurt Koffka)

當一個個體以某種方式被統一時，它們的集合在我們看來就像一個整體。我們把這些元素看作一個群體，盡管他們是個性的。這個概念或理論從根本上適用于所有的設計媒介：我們不把文本、顏色和形狀看作是獨立的元素，而是整個網頁作為一個整體實體。同樣的道理也適用于森林：我們看到的不僅僅是一堆樹，就像我們不看到的一樣?？创蠛r，我看到水滴。

格式塔原則描述了當某些條款和條件被應用時，人類大腦如何感知視覺成分。它幫助大腦創造視覺的意象。因此，格式塔原則基于六個主要類別：

• 位置和位置；
• 接近；
• 對稱與秩序；
• 類似；
• 關閉；
• 連續性。

圖和地面

“圖形”是直觀地以及與地面明顯分離的物體。

圣杯

最典型的例子是圣杯 – 兩個鏡面輪廓之間的花瓶。當你第一次看到這個圖像時，你的眼睛會被最直接進入你眼睛的最焦點的視覺對象所吸引，這可能是彼此相對的面孔或花瓶。當你的思緒正在調整你的焦點時，地面或花瓶就會模糊不清，在那一刻，你的思維會直觀地將圖像中的負片或地面剪掉。

過了一會兒，你會注意到背景中的花瓶，并意識到它首先在那里。由于圖和地面原理似乎模棱兩可，設計師通常會創造視覺上吸引人的超現實和虛幻的藝術和網頁設計。

圖形與背景的關系

有時，圖形和背景之間的關系是穩定的，這使得兩者可以相互區別。這種關系有時是不穩定的，這意味著圖形和地面是無法區分的。由于這種關系的模糊性，觀者面臨著感性的困惑。

為了讓您清楚地了解圖形背景關系如何影響網頁設計，讓我們來詳細討論幾個例子。這些例子都集中在圖形與背景關系的三個主要方面：您可以通過使用對比、方框和陰影來為您的網頁設計添加明確的視覺提示。這些技術用于區分顏色、大小和細節層次，將內容分開，并為相應的焦點對象添加深度。

在下面的第一個例子中，Trellis使用了一個“英雄形象”（帶有清晰的CTAs的圖像），具有圖形背景關系，清楚地指示了細節、顏色和大小的等級。

Trellis

文字是在頁面中間的一個大的草書體中的圖形，與背景中的圖片相比，它顯得格外突出。在對比的灰度圖像上方的白色文本吸引了注意力的焦點，這使得文本在它上面可見。從另一個角度看，背景是模糊的，使文字彈出作為圖形。所有這些方面都表明這里的文字優先為圖形或正空間，模糊圖像被用作背景或負空間，從而強烈地暗示了圖形和背景的概念。

接下來是方框中的內容。海洋健康指數巧妙地利用盒裝的內容將圖片與背景分開。這就是當你看到他們的網站時所看到的：

海洋健康指數

當你第一次看到這個網頁時，哪一部分會跳到你的身上？如果你問我，它的主要文本在右上角白色和兩個框的對比的顏色和文字。最上面的粗體白色文字顯然是圖形。（請注意它是如何放置在較暗的圖像上的，以突出顯示）。下面的方框也是數字的一部分，由于它們與地面圖像的對比。這個圖形的另一個方面是第二個對比，它以對比文字的形式放置在盒子里。

背景使用微妙的色調，幫助人物出現鮮明，在這里顯示了一個模式的細節。方框也重疊的背景圖像，使他們在清晰的視野超過圖像。

有些網站還通過給圖形添加陰影來展現圖形與背景的關系，以產生一種圖形被置于背景之上的感覺。下面的截圖來自“不加糖”：

不加糖

認真說不甜的登陸頁使用多種技術來維持圖形與地面的關系，以平衡的方式。有明亮的顏色和陰影。地面仍然是白色的，這使得人物更容易準確地出現在地面上。在正空間中，圖像中的物體被呈現在背景頂部的幻覺之下。影子游戲是在主要人物的內部進行的，這讓我們注意到，在主要人物的內部有另一種圖形背景關系。聰明！

接近

鄰近性是指頁面中元素的接近性。網頁中的不同元素可以組合在一起，形成更大的關聯。除了相似之外，這些元素與其他頁面元素之間的親密程度將自動地在查看者的頭腦中配對。

設計上的接近性

從圖像到文字，從導航條到網頁表格，近鄰原則在網頁設計中被大量應用。當您將相似的內容組合在一起時，會在元素之間創建一個無縫的關系，并向查看者提供更好的視覺體驗。

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

混搭

在上面的快照中，您可以清楚地注意到如何將相同類別的元素放在一起以顯示與主菜單類型的關系。您可以看到，不相關的項目是通過一條線來分隔的，這條線作為用戶的向導，根據接近原則來關聯和分隔項目。

除了劃定導航欄，基于網格的內容也符合黃金規則接近。亞馬遜的產品列表就是最好的例子：

鄰近性與相似性是一致的，這一點尚待討論。正如您可以看到的，正空間中的相似產品是使用狹窄的空白進行分組和分隔的。這指示用戶從相似產品列表中排序他們喜歡的項目。此外，關閉原則也適用于類似項目清單。

現在，我們來仔細看看Basecamp網絡表單，它展示了網頁設計中的另一個理想情況：

Basecamp網頁表單

您可以注意到表單是如何劃分為兩個主要部分：個人詳細信息和ID生成。第一部分是隱含為最重要的領域，其次是次要的重要要求。這兩個部分的標題因顏色和字體大小的不同而有所不同。在這種網絡形式中，鄰近性是一個指示符，它將信息從最高到最低的分組排列并按優先級排列。

對稱與秩序

對稱指的是兩個相反平面的精確反射或鏡像。它可以被看作是一個物體被分成兩個相等的一半的平衡。真實世界中的對稱例子包括幾何圖形，如等邊三角形、圓和正方形等。

對稱與不對稱

人類的頭腦渴望在人的面孔中找到“平衡”，并從中找到審美愉悅。大腦也傾向于在其他物體中找到對稱，比如圖像，因為對稱創造了和諧，允許觀眾在觀看圖像時感到舒適。
下面是一個在網頁設計中對稱的很好的例子，由HvD字體展示：

HvD字體

這個網頁不僅顯示了典型的圖形背景關系，而且還顯示出極大的對稱性。頁面被分成四等分的部分，字體大小和顏色相似。每個部分的背景沿著同一個主題，并帶有灰度效果。你也可以注意到，負空間不一定是白色的；它是背景中的圖像。

對稱的概念引出了另一個概念：不對稱可能會讓人混淆，在網頁設計中使用時必須十分小心。許多網站使用不對稱作為空間間隔的主要平衡元素，其中非常規的正空間與一個中性背景平衡，反之亦然。而按照不對稱的概念，Xplode營銷以其獨特的美感促進了不對稱。

Xplode Marketing

這個網頁立即抓住眼睛使用視覺錯覺以及不對稱。積極的空間物體被放置在創造吸引力的負空間上不尋常的模式中。顏色是兩個空間之間和諧的主要指示器，并發展了一個自然的連接，讓觀眾注意到這一點。左邊的圖形也有很強的平衡，右邊是強大的、占主導地位的翅膀。你怎么想？

類似

接近原則與相似性原則緊密相關的原因是相似分組對象之間的共享屬性的質量。不管是顏色、形狀、姿勢、大小、形狀、方向或任何其他屬性，當一個或多個連接性在所顯示的所有對象中共享時，連接就會占上風。

設計相似

即使正空間元素看上去沒有明顯的聯系，但由于相似性原則，它們將與負空間元素區分開來。

請看一下這些UrbanDecay調色板列表：

Urban Decay

正空間即圖形之間是不同的，但它們在位置、色彩、產品布局和表現方式等方面具有一定的相似性。唯一不同的對象是廣告的眼睛陰影底漆，脫穎而出，在線的同類產品類別。這顯然是一種營銷策略，旨在在不損害頁面的整體對稱和美麗的情況下吸引注意力。這里要考慮的另一點是，大小上的相似性使其他圖像與相似的產品類別不同。

除了產品展示，正空間還可以與負空間一起使用。

讓我們看一下影響到頁面：

Influenster’s front page

上面示例中的相似性顯示了明確對齊的框。盡管每個正空間中的產品不同，但在整個頁面中一致的文本字段傳達了相似的感知。體裁，布局和主題都是相似的，因此提供了一個無縫的視覺效果。

關閉

你是否曾經看到過一個似乎很接近卻又敞開的畫面？這是因為關閉的原則。我們的大腦傾向于“封閉”不完整物體中的縫隙，用我們的視覺感知來完成這個圖形，把它看作一個整體。

設計上的封閉性

正負空間靠攏形成一個整體。最好的例子是在設計內外的負空間中隱藏的形狀和形式，這就要求在設計中對信息進行智能評估。在閉包中創造性地使用這兩個空間可以產生一個有趣的但簡化的設計。

請看下面馬古坎布查的截圖：

Magu Kambucha

在這個例子中，您可以看到閉包保持了與圖形-背景關系原則的完整性。瓶子和粗體的文字背后顯然是圖形，那里的背景是堅實的軟粉色。關門在哪里？看到瓶子后面的文字了嗎？你不能完全看到它，但仍然知道它是’錦繡’。除了第一個“K”和最后一個“A”，其他字母都是半隱藏的，它們是通過直覺完成的，整個形式開始成形，因此，意義也就形成了。我的朋友，這是個很好的例子，讓我們結束了！

請看下面“Cult”的截圖：

CULT Website

即使文字寫的不是很清楚，我們的頭腦可以很容易地閱讀這個詞崇拜。文本的排列和排列使其易于理解，即使是不完整的詞也是如此。

連續性

最后，按照一般格式塔原則，連續性遵循模式，引導眼睛遵循一致的路徑，并建立一個從對象到對象的線性模式。最好用負空間上帶有彎曲的正的空間線的例子來理解它。這兩條線的顏色顯示出彼此彎曲的線條，但連續性的圖案表明情況并非如此。

設計的連續性

在上圖中，盡管顏色退化了，但是觀眾更傾向于看到一條直線。這讓我們相信連續性原則比色彩的力量更能指導我們的感知。這個概念在兩種不同的空間中平滑流動。當我們在負向空間插入一個主題時，我們的眼睛傾向于在正空間和負空間之間劃一條界限。

想象的連續性線是我們在設計中引入的，以引導我們在區分正空間和負空間時的知覺。

讓我們從下面的密碼交易網站得到提示：

Crypton Trading

看到頁面右半部設計的完美延續了嗎？不管背景中的明暗色調如何，頁面上的圖案都非常明顯。當你向下滾動的時候，你會看到圖案以及顏色是如何以連續和無縫的運動變化的。音調的變化在這里是可以忽略的，我們所看到的是一個連續的線條和點的圖案。

另一個很好的例子是示波器網站：

OscilloScope Website

該網站使用連續性法則，讓網站訪問者以360度的視角瀏覽工作室，在那里他們可以導航到想要的部分。

Cargo the movie

《Cargo》有一個著陸頁，它也使用了連續性法則：它的文本以線性移動的形式在整個網站上，使用了只使用滾動的導航。因為半可見的標志是垂直顯示，觀眾必須向下滾動以獲得它的完整視圖。當頁面向下滾動時，靜態徽標會隨著平行于它運行的文本塊一起浮動。導航引導用戶通過不同層次的經驗，而不會干擾隱藏在下面的黑暗。

由于我們的眼睛通常遵循最平滑的路徑，圖形設計師可以使用這樣的例子，使他們沿著所需的路徑和位置的元素沿著一條線。

總結

在這篇文章中，我們涵蓋格式塔原則有關積極和消極的空間的網站。我們也確保了一些真實的例子，讓你清楚地知道如何使用簡單而有效的技巧來影響你的觀眾的感知。這里的關鍵是使用這些原則來創建一個網頁設計，它看起來比它的各個部分的總和還要多。

我們人類是根據我們的感知來思考的——主要是以視覺為基礎的。根據格式塔原則中的積極和消極空間，我們傾向于看到更大的畫面，而不是第一眼看到單個的元素。

積極和消極的空間幫助我們區分，幫助我們回憶我們的經驗，并認識模式。借助格式塔原理，我們能夠更好地將網頁設計中的空間運用到設計中，創造出有吸引力的作品。

既然空間對于任何設計師來說都是一個復雜的事情，那么最好的方法就是保持你完整的格式塔原則。只有這樣，你才能真正意識到空間在你的設計中的重要性、用途和有效性，并且毫不費力地成為網頁設計領域的有效貢獻者。

本文由 @小光蛋 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議