在網(wǎng)頁設(shè)計中如何使用格式塔原則？要注意哪些內(nèi)容呢？

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

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

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

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

文森特·梵高的《星空》

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

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

但是在網(wǎng)頁設(shè)計中空間講述的是什么樣的故事呢？

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

如果你認(rèn)為你的發(fā)展技能搖滾，但你的設(shè)計技能可能需要一些更多的改進(jìn)，你剛剛中了頭獎。在本文中，我將介紹：

• 積極空間與消極空間的關(guān)系、重要性及其實現(xiàn)；
• 空間與認(rèn)知知覺之間的聯(lián)系；
• 格式塔原則及其在網(wǎng)頁設(shè)計中的應(yīng)用。

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

積極與消極空間：關(guān)系、重要性與實施

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

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

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

我們在匯點區(qū)分正空間和負(fù)空間。負(fù)值主要表現(xiàn)為空白，它補充了積極的部分，使其彈出。

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

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

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

下面是一個內(nèi)容放錯位置或“混沌”空間的網(wǎng)頁模板：

未考慮的 “ 混沌 ” 空間

空間差異以黑白顯示

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

網(wǎng)頁設(shè)計中空間的有效利用

當(dāng)空間的概念和安排出現(xiàn)時，懷疑開始使這一地區(qū)變得模糊。

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

我如何通過積極和消極空間的交流來實現(xiàn)“設(shè)計天堂”？

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

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

空間與認(rèn)知知覺的關(guān)系

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

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

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

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

網(wǎng)頁設(shè)計中的格式塔原則

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

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

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

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

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

• 位置和位置；
• 接近；
• 對稱與秩序；
• 類似；
• 關(guān)閉；
• 連續(xù)性。

圖和地面

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

圣杯

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

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

圖形與背景的關(guān)系

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

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

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

Trellis

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

接下來是方框中的內(nèi)容。海洋健康指數(shù)巧妙地利用盒裝的內(nèi)容將圖片與背景分開。這就是當(dāng)你看到他們的網(wǎng)站時所看到的：

海洋健康指數(shù)

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

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

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

不加糖

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

接近

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

設(shè)計上的接近性

從圖像到文字，從導(dǎo)航條到網(wǎng)頁表格，近鄰原則在網(wǎng)頁設(shè)計中被大量應(yīng)用。當(dāng)您將相似的內(nèi)容組合在一起時，會在元素之間創(chuàng)建一個無縫的關(guān)系，并向查看者提供更好的視覺體驗。

下面是在Mashable網(wǎng)站導(dǎo)航中顯示的鄰近性示例：

混搭

在上面的快照中，您可以清楚地注意到如何將相同類別的元素放在一起以顯示與主菜單類型的關(guān)系。您可以看到，不相關(guān)的項目是通過一條線來分隔的，這條線作為用戶的向?qū)В鶕?jù)接近原則來關(guān)聯(lián)和分隔項目。

除了劃定導(dǎo)航欄，基于網(wǎng)格的內(nèi)容也符合黃金規(guī)則接近。亞馬遜的產(chǎn)品列表就是最好的例子：

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

現(xiàn)在，我們來仔細(xì)看看Basecamp網(wǎng)絡(luò)表單，它展示了網(wǎng)頁設(shè)計中的另一個理想情況：

Basecamp網(wǎng)頁表單

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

對稱與秩序

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

對稱與不對稱

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

HvD字體

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

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

Xplode Marketing

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

類似

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

設(shè)計相似

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

請看一下這些UrbanDecay調(diào)色板列表：

Urban Decay

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

除了產(chǎn)品展示，正空間還可以與負(fù)空間一起使用。

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

Influenster’s front page

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

關(guān)閉

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

設(shè)計上的封閉性

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

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

Magu Kambucha

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

請看下面“Cult”的截圖：

CULT Website

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

連續(xù)性

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

設(shè)計的連續(xù)性

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

想象的連續(xù)性線是我們在設(shè)計中引入的，以引導(dǎo)我們在區(qū)分正空間和負(fù)空間時的知覺。

讓我們從下面的密碼交易網(wǎng)站得到提示：

Crypton Trading

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

另一個很好的例子是示波器網(wǎng)站：

OscilloScope Website

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

Cargo the movie

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

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

總結(jié)

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

我們?nèi)祟愂歉鶕?jù)我們的感知來思考的——主要是以視覺為基礎(chǔ)的。根據(jù)格式塔原則中的積極和消極空間，我們傾向于看到更大的畫面，而不是第一眼看到單個的元素。

積極和消極的空間幫助我們區(qū)分，幫助我們回憶我們的經(jīng)驗，并認(rèn)識模式。借助格式塔原理，我們能夠更好地將網(wǎng)頁設(shè)計中的空間運用到設(shè)計中，創(chuàng)造出有吸引力的作品。

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

本文由 @小光蛋 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議