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

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

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

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

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

文森特·梵高的《星空》

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

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

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

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

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

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

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

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

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

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

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

我們?cè)趨R點(diǎn)區(qū)分正空間和負(fù)空間。負(fù)值主要表現(xiàn)為空白，它補(bǔ)充了積極的部分，使其彈出。

看來(lái)，積極空間起到了帶頭作用，消極空間同樣重要，因?yàn)樗鼛?lái)了無(wú)數(shù)的好處。這些好處包括：

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

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

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

未考慮的 “ 混沌 ” 空間

空間差異以黑白顯示

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

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

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

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

我如何通過(guò)積極和消極空間的交流來(lái)實(shí)現(xiàn)“設(shè)計(jì)天堂”？

像這樣的問(wèn)題只能在對(duì)基礎(chǔ)的清楚理解下才能得到回答：根據(jù)經(jīng)驗(yàn)法則，簡(jiǎn)單性是最好的策略（我們之所以這么做，是因?yàn)樗芎线m）！

我們?cè)谖恼碌拈_(kāi)頭提到，網(wǎng)頁(yè)設(shè)計(jì)就是要?jiǎng)?chuàng)造一個(gè)簡(jiǎn)單的用戶界面，幫助你和你的觀眾一石二鳥(niǎo)，或者用字面上的話說(shuō)，這有助于增加網(wǎng)站設(shè)計(jì)的視覺(jué)吸引力，同時(shí)使其更有效，更容易使用——是的，在空間使用上有著難以置信的力量。

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

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

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

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

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

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

格式塔在德語(yǔ)中是“形式”的意思。它更多的是一個(gè)概念，而不是一個(gè)詞，它說(shuō)：

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

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

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

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

• 位置和位置；
• 接近；
• 對(duì)稱(chēng)與秩序；
• 類(lèi)似；
• 關(guān)閉；
• 連續(xù)性。

圖和地面

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

圣杯

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

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

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

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

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

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

Trellis

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

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

海洋健康指數(shù)

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

背景使用微妙的色調(diào)，幫助人物出現(xiàn)鮮明，在這里顯示了一個(gè)模式的細(xì)節(jié)。方框也重疊的背景圖像，使他們?cè)谇逦囊曇俺^(guò)圖像。

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

不加糖

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

接近

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

設(shè)計(jì)上的接近性

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

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

混搭

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

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

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

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

Basecamp網(wǎng)頁(yè)表單

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

對(duì)稱(chēng)與秩序

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

對(duì)稱(chēng)與不對(duì)稱(chēng)

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

HvD字體

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

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

Xplode Marketing

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

類(lèi)似

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

設(shè)計(jì)相似

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

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

Urban Decay

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

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

讓我們看一下影響到頁(yè)面：

Influenster’s front page

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

關(guān)閉

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

設(shè)計(jì)上的封閉性

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

請(qǐng)看下面馬古坎布查的截圖：

Magu Kambucha

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

請(qǐng)看下面“Cult”的截圖：

CULT Website

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

連續(xù)性

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

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

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

想象的連續(xù)性線是我們?cè)谠O(shè)計(jì)中引入的，以引導(dǎo)我們?cè)趨^(qū)分正空間和負(fù)空間時(shí)的知覺(jué)。

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

Crypton Trading

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

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

OscilloScope Website

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

Cargo the movie

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

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

總結(jié)

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

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

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

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

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

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