如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

在設(shè)計(jì)的時(shí)候，各種視覺(jué)要素以有序的方式排列，設(shè)計(jì)師需要通過(guò)對(duì)各部分空間的精妙設(shè)置來(lái)實(shí)現(xiàn)這一點(diǎn)。通常而言，我們的目光總會(huì)被最引人注目的部分吸引——無(wú)論它是視覺(jué)主體還是負(fù)空間。視覺(jué)主體和負(fù)空間，兩者都很重要，尤其當(dāng)你需要平和地呈現(xiàn)一個(gè)和諧、連貫、天衣無(wú)縫的設(shè)計(jì)。那么在一個(gè)網(wǎng)頁(yè)設(shè)計(jì)作品中，設(shè)計(jì)師到底利用空間傳達(dá)出怎樣的一個(gè)故事呢？這就牽涉到我們今天要聊的主題了，格式塔原理。

人類的大腦天生就能把規(guī)律性的散點(diǎn)連接起來(lái)，并對(duì)目之所及的事物賦予意義。設(shè)計(jì)是一個(gè)創(chuàng)造性的領(lǐng)域，是形式和空間的相互融合，并隨之創(chuàng)造各種各樣的體驗(yàn)。無(wú)論我們接觸到什么樣的設(shè)計(jì)作品，我們的大腦都會(huì)本能地將作品解構(gòu)為更簡(jiǎn)單的各個(gè)組件，這些組件由基本的形狀和不同的形態(tài)組成，而這些形狀和形態(tài)則與空間息息相關(guān)。過(guò)往豐富的體驗(yàn)與經(jīng)歷，使得我們的腦海中充滿了各種各樣的記憶，于是我們很容易就能識(shí)別出這些特定的設(shè)計(jì)形式。

正空間，或者說(shuō)顯著的設(shè)計(jì)主體，構(gòu)成了設(shè)計(jì)的「肉體」，它是你看到形狀、顏色、圖案等部分。相反，負(fù)空間多數(shù)情況下是指背景或大量留白。

文森特·梵高（Vincent Van Gogh）的這幅廣受歡迎的作品，是一個(gè)以正負(fù)空間之間有著強(qiáng)對(duì)比的經(jīng)典設(shè)計(jì)案例。

就像正空間似乎支配著負(fù)空間一樣，兩者都被用來(lái)平衡地傳達(dá)一個(gè)和諧、連貫的設(shè)計(jì)理念。

在平衡的構(gòu)圖中，設(shè)計(jì)的正負(fù)空間都是相互配合、相互補(bǔ)充的，形成一個(gè)無(wú)縫、美觀的整體。相反，不平衡的構(gòu)圖會(huì)讓觀眾感到不適，傳達(dá)出一個(gè)不完整的、扭曲的故事。

我們的設(shè)計(jì)在表達(dá)什么？

網(wǎng)頁(yè)設(shè)計(jì)的好壞很大程度上取決于它的實(shí)用性和可用性。如果你的設(shè)計(jì)技巧很差，那么網(wǎng)頁(yè)設(shè)計(jì)的整體效果和表現(xiàn)都會(huì)受到影響。但從另一個(gè)角度來(lái)看，在「內(nèi)容為王」的時(shí)代，如果空間布局使用不當(dāng)，內(nèi)容將對(duì)您的網(wǎng)站產(chǎn)生顯著的負(fù)面影響。

如果你認(rèn)為你的開(kāi)發(fā)技能很棒，但你的設(shè)計(jì)技能可能需要更多的改進(jìn)，那這篇文章對(duì)你就太合適了。在本文中，我們將討論：

• 正負(fù)空間之間的關(guān)系、重要性及應(yīng)用；
• 空間與認(rèn)知知覺(jué)的關(guān)系；
• 格式塔原理及其它在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用。

我們還將討論一些真實(shí)的網(wǎng)頁(yè)設(shè)計(jì)實(shí)例，探討每個(gè)案例如何體現(xiàn)格式塔原理，以及它對(duì)空間的創(chuàng)造性使用。

話不多說(shuō)，一起開(kāi)始學(xué)習(xí)吧。

一、正負(fù)空間的關(guān)系、重要性及應(yīng)用

空間由兩個(gè)主要維度組成：正空間和負(fù)空間。正空間是可被直接感知到的視覺(jué)元素，負(fù)空間則為元素以外的留白和間隙。如前所述，正的是物體，負(fù)的是物體后面可以通常被忽略的留白區(qū)域。一個(gè)是焦點(diǎn)，另一個(gè)是背景。在前者產(chǎn)生活動(dòng)和刺激時(shí)，后者則保持靜止和模糊。一個(gè)是月亮，另一個(gè)是環(huán)繞著它的暗夜。

在網(wǎng)頁(yè)設(shè)計(jì)中，正負(fù)空間相互作用，共同形成構(gòu)圖，傳達(dá)理念。只有當(dāng)正負(fù)空間通過(guò)對(duì)比來(lái)區(qū)分，同時(shí)又向更大的區(qū)域延伸時(shí)，才會(huì)產(chǎn)生視覺(jué)層次（腦補(bǔ)一下陰陽(yáng)太極圖吧）。

正負(fù)空間的交匯之處就是信息的交匯點(diǎn)。負(fù)空間拱衛(wèi)著正空間元素，讓后者更加突出和顯著。

通常而言，正空間在絕大多數(shù)時(shí)候起主導(dǎo)作用，實(shí)際上負(fù)空間同樣重要。負(fù)空間的優(yōu)點(diǎn)在于:

• 創(chuàng)建易于遵循的視覺(jué)層次；
• 吸引注意力，營(yíng)造焦點(diǎn)，減少分心；
• 幫助營(yíng)造邊界，突出焦點(diǎn)；
• 讓頁(yè)面更容易被掃讀；
• 使頁(yè)面看起來(lái)自然；
• 不借助外力的情況下，闡明視覺(jué)元素之間的關(guān)系；
• 有助于保持頁(yè)面干凈清爽；
• 強(qiáng)化網(wǎng)頁(yè)的視覺(jué)風(fēng)格和外觀。

設(shè)計(jì)中的負(fù)空間相反并不是負(fù)面的。當(dāng)正負(fù)空間比例平衡得當(dāng)時(shí)，兩者在視覺(jué)上會(huì)顯得非常舒適。而當(dāng)其中一個(gè)占據(jù)主導(dǎo)地位，并給人一種「過(guò)于擁擠」或「空洞無(wú)物」的印象時(shí)，混亂才會(huì)發(fā)生。在這兩種情況下，受眾都無(wú)法處理如此復(fù)雜的信息，因此，而這樣的空間設(shè)計(jì)是不符合網(wǎng)頁(yè)設(shè)計(jì)的基本原則和設(shè)計(jì)動(dòng)機(jī)的。

這是一個(gè)網(wǎng)頁(yè)模板，它展現(xiàn)了何為「內(nèi)容錯(cuò)位」和「空間混亂」:

△ 布局混亂

△ 空間失衡

△ 適當(dāng)?shù)牟季终{(diào)整

△ 網(wǎng)頁(yè)設(shè)計(jì)中空間的合理運(yùn)用

有意思的是，當(dāng)談到空間的概念和布局出現(xiàn)時(shí)，質(zhì)疑聲也隨之而起。

• 是正空間被負(fù)空間包圍，還是負(fù)空間被正空間吞噬？
• 如何確定正負(fù)空間的比例？
• 兩種空間類型中，哪一個(gè)作為焦點(diǎn)對(duì)象？
• 是否必須突出其中一個(gè)而忽略另一個(gè)，以便向觀眾傳達(dá)設(shè)計(jì)師的預(yù)期感知？
• 我將如何通過(guò)正負(fù)空間之間的變化讓設(shè)計(jì)出現(xiàn)質(zhì)的變化？

類似的問(wèn)題只能在理解基本概念后再來(lái)作答。黃金經(jīng)驗(yàn)法則告訴我們——簡(jiǎn)單是最好的策略。

在文章開(kāi)頭，我曾提到在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，盡量創(chuàng)建簡(jiǎn)單的用戶界面，這是一舉兩得的舉措，既可以造福你自己，也可以惠及用戶?；驈谋砻嫔峡?，網(wǎng)頁(yè)設(shè)計(jì)的重點(diǎn)在于增加網(wǎng)站的視覺(jué)吸引力，使用戶操作更為簡(jiǎn)便。

二、空間與認(rèn)知知覺(jué)之間的聯(lián)系

我們的大腦總是在扮演偵探的角色，試圖尋找隱藏的線索和空間之間缺失的聯(lián)系。因此它會(huì)將當(dāng)前的視覺(jué)信息與之前的經(jīng)驗(yàn)進(jìn)行比對(duì)。為了成為一名的網(wǎng)頁(yè)設(shè)計(jì)師，你必須先了解大腦是如何感知周圍環(huán)境的。它可以幫助你選擇特定的視覺(jué)元素，利用它們來(lái)影響觀眾的感知。

偉大的設(shè)計(jì)師明白心理學(xué)在視覺(jué)感知中所扮演的強(qiáng)大角色。當(dāng)某人的目光與你的設(shè)計(jì)作品相遇時(shí)會(huì)發(fā)生什么？他們對(duì)你的文章所傳達(dá)的信息有何反應(yīng)？——?jiǎng)诶げ际玻珹utodesk 品牌內(nèi)容策略師

作為設(shè)計(jì)師，你必須清楚地了解視覺(jué)設(shè)計(jì)和心理學(xué)是如何相互聯(lián)系、相互影響的。換句話說(shuō)，開(kāi)發(fā)以用戶為中心的簡(jiǎn)單界面，借助正負(fù)空間進(jìn)行設(shè)計(jì)主要依靠格式塔原理，它可以幫助你理解和控制視覺(jué)和心理的聯(lián)系。

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

格式塔在德語(yǔ)中是「形式」的意思。它更多的是一個(gè)概念而不是一個(gè)單純的詞匯，它最基本的概念是：

整體大于各個(gè)部分的總和?！獛?kù)爾特·考夫卡（美籍德裔心理學(xué)家，格式塔心理學(xué)的代表人物之一）

當(dāng)單個(gè)部分的集合以某種方式統(tǒng)一時(shí)，它們?cè)谖覀兊母兄?dāng)中就是一組。我們把元素看作一個(gè)整體，這一概念或理論基本適用于所有的設(shè)計(jì)媒介：我們不把文本、顏色和形狀看作單獨(dú)的元素，而是把整個(gè)網(wǎng)頁(yè)看作一個(gè)整體。同樣的道理也適用于森林：我們看到的不僅僅是一堆樹(shù)，就像我們?cè)诳春Ｑ髸r(shí)看不到水滴一樣。

格式塔原則描述了當(dāng)特定的條件出現(xiàn)時(shí)，人類大腦是如何感知視覺(jué)成分的。它幫助大腦創(chuàng)造視覺(jué)圖像。因此，格式塔原理通常會(huì)應(yīng)到下面六個(gè)主要類別：

• 圖形和背景
• 接近性原則
• 對(duì)稱和秩序
• 相似性
• 封閉性
• 連續(xù)性

1. 圖像和背景

「圖形」是直觀地、明顯地與背景分離的物體。

目前最經(jīng)典的例子是圣杯——兩個(gè)鏡面對(duì)稱輪廓構(gòu)成了花瓶。當(dāng)你第一次看到這張照片的時(shí)候，你的眼睛會(huì)立即被吸引到畫(huà)面上看起來(lái)最聚焦的視覺(jué)主體上，可能是相互對(duì)立的面孔，也可能是花瓶。當(dāng)你的大腦在調(diào)整你的焦點(diǎn)時(shí)，背景或花瓶被模糊了，在那一刻，你的大腦直覺(jué)地在圖像中感知到背景。

過(guò)了一會(huì)兒，你會(huì)注意到背景中的花瓶，并意識(shí)到它本來(lái)就在那里。盡管圖形和基本原則看起來(lái)模棱兩可，設(shè)計(jì)師常常創(chuàng)造視覺(jué)上吸引人的超現(xiàn)實(shí)和虛幻藝術(shù)，并將之運(yùn)用于網(wǎng)頁(yè)設(shè)計(jì)。

有時(shí)，圖形與背景之間的關(guān)系是穩(wěn)定的，而這種穩(wěn)固的視覺(jué)關(guān)系使得兩者之間，產(chǎn)生區(qū)別。這種關(guān)系有的時(shí)候又是不穩(wěn)定的，這意味著圖形和背景是無(wú)法清晰區(qū)分的。由于這種關(guān)系的模糊性，用戶會(huì)很自然地開(kāi)始困惑。

為了讓大家直觀地感受到圖形和背景之間的關(guān)系，讓我們?cè)敿?xì)的拿幾個(gè)案例來(lái)進(jìn)行討論。這些例子都集中在圖形-背景關(guān)系中的三個(gè)主要方面：對(duì)比度、Box 區(qū)塊和陰影。這三方面涉及到諸多屬性，包括顏色、尺寸和信息量，它們關(guān)系到內(nèi)容的區(qū)分和視覺(jué)的縱深。

在下面的第一個(gè)例子中，Trellis 使用了一個(gè)全屏大圖背景，并且搭配上清晰的 CTA 元素，圖形-背景關(guān)系明確，該關(guān)系清楚地展示出了細(xì)節(jié)、色彩和尺寸上的差異。

頁(yè)面中的文字是位于中央的手寫(xiě)風(fēng)格字體，與背景中的圖像相比顯得很突出。和灰色背景圖片構(gòu)成對(duì)比的白色文本是吸引用戶注意力的焦點(diǎn)，這使得文本在畫(huà)面中是高度可見(jiàn)的。從另一個(gè)角度來(lái)看，背景圖片是模糊的，所以清晰的文本會(huì)非常醒目。這些都表明，這里的文本被優(yōu)先考慮為圖形或正空間，而模糊的圖像被用作背景或負(fù)空間，從而強(qiáng)烈地暗示了圖形和背景之間的關(guān)系。

下一個(gè)案例是下圖方框里的內(nèi)容。 Ocean Health Index 巧妙地利用了框內(nèi)區(qū)域的內(nèi)容將圖片與背景分離開(kāi)來(lái)。這是你在瀏覽他們的網(wǎng)站時(shí)看到的：

當(dāng)你第一次瀏覽這個(gè)頁(yè)面時(shí)，哪個(gè)部分會(huì)吸引你的注意力？你會(huì)發(fā)現(xiàn)，它的主要文本為白色和藍(lán)色背景構(gòu)成對(duì)比，而更加醒目的是是兩個(gè)與文字對(duì)比鮮明的 Box 區(qū)塊。前者借助了深色背景和文本色彩上的差異，構(gòu)造對(duì)比度。而 Box 區(qū)塊本身的色彩和背景色構(gòu)成對(duì)比的同時(shí)，還和更靠前的文本構(gòu)成色彩對(duì)比。

背景使用了微妙的色調(diào)，使數(shù)字得以鮮明地展現(xiàn)，并突出細(xì)節(jié)。方框的運(yùn)用使它們?cè)陧?yè)面上清晰可見(jiàn)。

一些網(wǎng)站還通過(guò)添加陰影來(lái)表現(xiàn)物與背景的關(guān)系，產(chǎn)生一種圖象被置于背景之上的感覺(jué)。以下截圖來(lái)自于 serious unsweet.com：

Seriously Unsweetened 的著陸頁(yè)使用了不止一種方法來(lái)保持圖形與背景的平衡關(guān)系。明亮顏色和陰影的配合；背景是純粹的白色，使得前景元素更容易從中出來(lái)。背景之上的元素都是「正空間」，圖中的物體呈現(xiàn)在背景的映襯下，有一種被置于「頂部」的錯(cuò)覺(jué)。而陰影并沒(méi)有直接用在圖片和文本上，而是應(yīng)用在圖片的內(nèi)部，這讓我們注意到在主要圖像內(nèi)部還有另一層視覺(jué)元素，這意味著里面還有一層圖片-背景關(guān)系——這是一個(gè)非常智慧的設(shè)計(jì)。

2. 接近性原理

接近性是指頁(yè)面中元素之間的接近程度。網(wǎng)頁(yè)中的不同元素可以組合在一起，不同的接近程度會(huì)帶來(lái)不同的關(guān)聯(lián)屬性。除了視覺(jué)特征上的接近性之外，這些元素與其他頁(yè)面元素之間的距離接近度也會(huì)自動(dòng)地在觀眾的腦海中產(chǎn)生關(guān)聯(lián)感。

從圖像到文本、導(dǎo)航欄到網(wǎng)頁(yè)表單，這種接近性原則在網(wǎng)頁(yè)設(shè)計(jì)中適用范圍非常廣。將類似的內(nèi)容組合在一起時(shí)，它將在元素之間創(chuàng)建關(guān)聯(lián)，為觀者提供更好的視覺(jué)體驗(yàn)。

以下是 Mashable 網(wǎng)站導(dǎo)航顯示的運(yùn)用接近度的案例：

在上方的截圖中，我們可以清楚地看到如何將相同類別的元素放在一起，以顯示它們與主菜單的關(guān)系。由于顏色和文本大小的選擇，使觀者的目光自動(dòng)被吸引到主標(biāo)題下的子欄目上。

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

這個(gè)案例體現(xiàn)的是接近性還是相似性還有待討論。如你所見(jiàn)，具備視覺(jué)接近性的同類產(chǎn)品使用狹窄的留白進(jìn)行分組和分隔。這種接近性會(huì)指示用戶在類似的產(chǎn)品列表中，對(duì)其目標(biāo)產(chǎn)品基于購(gòu)買(mǎi)偏好進(jìn)行排序。此外，封閉性原則也在類似項(xiàng)目的清單中發(fā)揮了作用。

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

可以看到上圖中的表單是被劃分為兩個(gè)主要部分的：個(gè)人信息和 ID 生成兩個(gè)部分。第一部分被暗示為最重要的字段，第二部分則是一個(gè)次要的需求。這兩個(gè)部分的標(biāo)題都因顏色和字體大小的不同而產(chǎn)生區(qū)別。在這個(gè)網(wǎng)頁(yè)表單中，接近度是一個(gè)重要指標(biāo)，它將網(wǎng)頁(yè)中呈現(xiàn)的信息按優(yōu)先級(jí)排列。

3. 對(duì)稱和秩序

對(duì)稱是指兩個(gè)元素呈現(xiàn)出鏡像關(guān)系。它可以被看作是把一個(gè)物體一分為二的平衡。真實(shí)的對(duì)稱圖形包括等邊三角形、圓形和正方形等幾何圖像。

人類的大腦會(huì)本能地渴望在面孔中找尋「平衡」和「對(duì)稱」，這在美學(xué)上是令人愉悅的。大腦也傾向于在其他物體中找到對(duì)稱，因?yàn)閷?duì)稱創(chuàng)造和諧，讓觀者在觀看圖像時(shí)感到舒適。

下面是 HvD Fonts 在網(wǎng)頁(yè)設(shè)計(jì)中體現(xiàn)對(duì)稱性的一個(gè)很好的案例：

這個(gè)頁(yè)面不僅顯示了典型的圖形-背景關(guān)系，而且強(qiáng)調(diào)了對(duì)稱性原則的運(yùn)用。頁(yè)面被分成四等份，字體大小和顏色相似。四個(gè)部分中的每個(gè)部分的背景都具有相同的主題色和灰度效果。你也可以注意到負(fù)空間不一定是白色的，黑色甚至其他的顏色也可以以圖像作為背景。

對(duì)稱性原則還可以衍生出了另一個(gè)概念：在網(wǎng)頁(yè)設(shè)計(jì)中，不對(duì)稱會(huì)使觀感不佳，必須謹(jǐn)慎使用。許多網(wǎng)站使用不對(duì)稱作為平衡間距的元素——非常規(guī)的正空間元素與中性的背景相互平衡，反之亦然。而 Xplode 的營(yíng)銷理念是不對(duì)稱，Xplode 以獨(dú)特的美觀悅目的方式引發(fā)不對(duì)稱。

這個(gè)網(wǎng)頁(yè)利用視覺(jué)錯(cuò)覺(jué)和不對(duì)稱，抓住了觀者的眼球。作為正空間的物體被放置在一個(gè)不對(duì)稱的布局之下，在負(fù)空間中創(chuàng)造了強(qiáng)烈的視覺(jué)吸引力。色彩是兩個(gè)空間和諧的主要因素，并為觀者創(chuàng)造了一種自然的聯(lián)系。左邊的圖形也有很強(qiáng)的平衡性，而右邊的則是帶來(lái)更強(qiáng)的視覺(jué)吸引力。你覺(jué)得這個(gè)設(shè)計(jì)如何呢？

4. 相似性原理

相似性與接近性原理密切相關(guān)的原因，是相似分組對(duì)象之間共享屬性的質(zhì)量。無(wú)論是顏色、形狀、形態(tài)、大小、方向或任何其他屬性，當(dāng)這些屬性中的一個(gè)或多個(gè)在鄰近對(duì)象中共享時(shí)，相似性將占上風(fēng)。

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

看看這些 UrbanDecay 的商品列表：

雖然上面的商品各不相同，但在位置、色彩、產(chǎn)品布局、表現(xiàn)方式等方面卻有一定的相似性。唯一不同的是左上角的眼影廣告，在同類產(chǎn)品中獨(dú)樹(shù)一幟。這顯然是一種營(yíng)銷策略，目的是在不損害頁(yè)面整體對(duì)稱和美觀的情況下吸引注意力。這里要考慮的另一點(diǎn)是，尺寸上的相似性使其他圖像與相似的產(chǎn)品類別區(qū)分開(kāi)來(lái)。

除了產(chǎn)品展示之外，正空間可以與相似度結(jié)合使用，也可以與負(fù)空間結(jié)合使用。

讓我們來(lái)看看 influenster 的著陸頁(yè)：

上面例子中對(duì)齊的邊框也運(yùn)用了相似性原理。雖然每個(gè)正空間元素是不同的，但是相似的感覺(jué)是通過(guò)整個(gè)頁(yè)面中一致的文本字段來(lái)傳達(dá)的。風(fēng)格、布局和主題都是相似的，因此帶來(lái)了統(tǒng)一的視覺(jué)效果。

5. 封閉性原理

你是否曾經(jīng)遇到過(guò)這樣一幅畫(huà)面，看上去是閉合的，但實(shí)際上是開(kāi)放的？這是由于它采用封閉性原理。我們的大腦傾向于「腦補(bǔ)」不完整物體的空白，并利用我們的視覺(jué)感知來(lái)使圖形完整化。

正空間和負(fù)空間一起構(gòu)成一個(gè)整體。最好的案例就是負(fù)空間中隱藏的形狀和形式，這要求對(duì)正空間中要傳達(dá)的信息進(jìn)行評(píng)估。在封閉空間創(chuàng)造性地使用著正負(fù)空間，可以產(chǎn)生有趣但簡(jiǎn)單的設(shè)計(jì)。

下面是 Magu Kambucha 的設(shè)計(jì)圖：

在這個(gè)案例中，可以看到封閉性和圖形-背景關(guān)系的平衡。瓶子和后面的粗體文字構(gòu)成對(duì)比，背景則是和兩者都構(gòu)成對(duì)比的柔粉色。封閉性體現(xiàn)在哪里？看到瓶子后面的文字了嗎？雖然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一個(gè)「K」和最后一個(gè)「A」，其他字母都是半隱藏的，這些字母都是憑觀者的直覺(jué)自動(dòng)完成的，整個(gè)形式開(kāi)始成形，意義也隨之成形。

下面是 Cult 的截圖：

即使文本沒(méi)有寫(xiě)得很清楚，我們的頭腦可以很容易地讀到 CULT 這個(gè)詞。即使單詞不完整，文本的排列和對(duì)齊也可以使其易于辨認(rèn)。

6. 連續(xù)性原理

最后，根據(jù)一般格式塔原則，連續(xù)性遵循模式，即引導(dǎo)實(shí)現(xiàn)遵循一致的路徑，建立從一個(gè)對(duì)象到另一個(gè)對(duì)象的線性模式。

在上面的圖片中，盡管圓形色塊的顏色變淡了，但是觀者更傾向于將中間的間隙其看作一條直線。這使我們相信連續(xù)性的原理比色彩的力量更能引導(dǎo)用戶的視覺(jué)感知。當(dāng)我們借助負(fù)空間在視覺(jué)元素中畫(huà)出路徑，我們的眼睛傾向于優(yōu)先感知正負(fù)空間之間的界限。

腦補(bǔ)出來(lái)的這條連續(xù)的線條是我們?cè)谠O(shè)計(jì)中更應(yīng)該引入的視覺(jué)線索。

讓我們來(lái)看看 Crypton Trading 網(wǎng)站中的視覺(jué)線索設(shè)計(jì)：

看到頁(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è)很好的例子是 OscilloScope 網(wǎng)站：

該網(wǎng)站借用連續(xù)性法則，將網(wǎng)站用戶引入到工作室的 360 度視角中，他們可以在導(dǎo)航中選擇所需的子欄目。

影片《Cargo》的著陸頁(yè)也使用了連續(xù)性法則：滾動(dòng)式的導(dǎo)航，以線性運(yùn)動(dòng)的方式讓文本漂浮在網(wǎng)站上。由于 LOGO 是垂直展現(xiàn)的，所以用戶必須向下滾動(dòng)才能看到它的全貌。當(dāng)頁(yè)面向下滾動(dòng)時(shí)，靜態(tài) LOGO 開(kāi)始與并行的文本塊一起浮動(dòng)。導(dǎo)航引導(dǎo)用戶經(jīng)歷不同層次的體驗(yàn)，而不會(huì)干擾隱藏在下面的內(nèi)容。

由于我們的眼睛通常遵循最平滑的路徑，設(shè)計(jì)師可以使用這樣的方式來(lái)創(chuàng)建引導(dǎo)路徑。

總結(jié)

在這篇文章中，我們討論了格式塔原則與網(wǎng)站 UI 的正負(fù)空間之間的關(guān)系。通過(guò)一些真實(shí)的案例，讓大家清楚地知道如何運(yùn)用簡(jiǎn)單有效的方法來(lái)改變?cè)O(shè)計(jì)的觀感。關(guān)鍵是使用這些原理來(lái)設(shè)計(jì)的時(shí)候，可以達(dá)到 1 + 1 > 2 的效果。

人類是根據(jù)感知來(lái)思考的——主要是基于視覺(jué)。根據(jù)格式塔原理，我們傾向于看到更大的整體性圖景，而不是第一眼看到的某一單個(gè)元素。

正負(fù)空間幫助我們區(qū)分、回憶、感知并識(shí)別理解。在格式塔原理的引導(dǎo)下，我們能夠更好地在網(wǎng)頁(yè)設(shè)計(jì)中利用不同元素來(lái)創(chuàng)造吸引人的作品。因?yàn)榭臻g對(duì)于任何設(shè)計(jì)師來(lái)說(shuō)都是一件復(fù)雜的事情，所以最好的方法就是保持格式塔原則的完整性。只有這樣才能真正認(rèn)識(shí)到空間在設(shè)計(jì)中的重要性、有效性，繼而使自己成為網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的佼佼者。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。