2019-4-22 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
在設(shè)計(jì)的時(shí)候，各種視覺要素以有序的方式排列，設(shè)計(jì)師需要通過對各部分空間的精妙設(shè)置來實(shí)現(xiàn)這一點(diǎn)。通常而言，我們的目光總會(huì)被最引人注目的部分吸引——無論它是視覺主體還是負(fù)空間。視覺主體和負(fù)空間，兩者都很重要，尤其當(dāng)你需要平和地呈現(xiàn)一個(gè)和諧、連貫、天衣無縫的設(shè)計(jì)。那么在一個(gè)網(wǎng)頁設(shè)計(jì)作品中，設(shè)計(jì)師到底利用空間傳達(dá)出怎樣的一個(gè)故事呢？這就牽涉到我們今天要聊的主題了，格式塔原理。人類的大腦天生就能把規(guī)律性的散點(diǎn)連接起來，并對目之所及的事物賦予意義。設(shè)計(jì)是一個(gè)創(chuàng)造性的領(lǐng)域，是形式和空間的相互融合，并隨之創(chuàng)造各種各樣的體驗(yàn)。無論我們接觸到什么樣的設(shè)計(jì)作品，我們的大腦都會(huì)本能地將作品解構(gòu)為更簡單的各個(gè)組件，這些組件由基本的形狀和不同的形態(tài)組成，而這些形狀和形態(tài)則與空間息息相關(guān)。過往豐富的體驗(yàn)與經(jīng)歷，使得我們的腦海中充滿了各種各樣的記憶，于是我們很容易就能識別出這些特定的設(shè)計(jì)形式。
正空間，或者說顯著的設(shè)計(jì)主體，構(gòu)成了設(shè)計(jì)的「肉體」，它是你看到形狀、顏色、圖案等部分。相反，負(fù)空間多數(shù)情況下是指背景或大量留白。
文森特·梵高（Vincent Van Gogh）的這幅廣受歡迎的作品，是一個(gè)以正負(fù)空間之間有著強(qiáng)對比的經(jīng)典設(shè)計(jì)案例。
就像正空間似乎支配著負(fù)空間一樣，兩者都被用來平衡地傳達(dá)一個(gè)和諧、連貫的設(shè)計(jì)理念。
在平衡的構(gòu)圖中，設(shè)計(jì)的正負(fù)空間都是相互配合、相互補(bǔ)充的，形成一個(gè)無縫、美觀的整體。相反，不平衡的構(gòu)圖會(huì)讓觀眾感到不適，傳達(dá)出一個(gè)不完整的、扭曲的故事。
網(wǎng)頁設(shè)計(jì)的好壞很大程度上取決于它的實(shí)用性和可用性。如果你的設(shè)計(jì)技巧很差，那么網(wǎng)頁設(shè)計(jì)的整體效果和表現(xiàn)都會(huì)受到影響。但從另一個(gè)角度來看，在「內(nèi)容為王」的時(shí)代，如果空間布局使用不當(dāng)，內(nèi)容將對您的網(wǎng)站產(chǎn)生顯著的負(fù)面影響。
如果你認(rèn)為你的開發(fā)技能很棒，但你的設(shè)計(jì)技能可能需要更多的改進(jìn)，那這篇文章對你就太合適了。在本文中，我們將討論：
我們還將討論一些真實(shí)的網(wǎng)頁設(shè)計(jì)實(shí)例，探討每個(gè)案例如何體現(xiàn)格式塔原理，以及它對空間的創(chuàng)造性使用。
話不多說，一起開始學(xué)習(xí)吧。
空間由兩個(gè)主要維度組成：正空間和負(fù)空間。正空間是可被直接感知到的視覺元素，負(fù)空間則為元素以外的留白和間隙。如前所述，正的是物體，負(fù)的是物體后面可以通常被忽略的留白區(qū)域。一個(gè)是焦點(diǎn)，另一個(gè)是背景。在前者產(chǎn)生活動(dòng)和刺激時(shí)，后者則保持靜止和模糊。一個(gè)是月亮，另一個(gè)是環(huán)繞著它的暗夜。
在網(wǎng)頁設(shè)計(jì)中，正負(fù)空間相互作用，共同形成構(gòu)圖，傳達(dá)理念。只有當(dāng)正負(fù)空間通過對比來區(qū)分，同時(shí)又向更大的區(qū)域延伸時(shí)，才會(huì)產(chǎn)生視覺層次（腦補(bǔ)一下陰陽太極圖吧）。
正負(fù)空間的交匯之處就是信息的交匯點(diǎn)。負(fù)空間拱衛(wèi)著正空間元素，讓后者更加突出和顯著。
通常而言，正空間在絕大多數(shù)時(shí)候起主導(dǎo)作用，實(shí)際上負(fù)空間同樣重要。負(fù)空間的優(yōu)點(diǎn)在于:
設(shè)計(jì)中的負(fù)空間相反并不是負(fù)面的。當(dāng)正負(fù)空間比例平衡得當(dāng)時(shí)，兩者在視覺上會(huì)顯得非常舒適。而當(dāng)其中一個(gè)占據(jù)主導(dǎo)地位，并給人一種「過于擁擠」或「空洞無物」的印象時(shí)，混亂才會(huì)發(fā)生。在這兩種情況下，受眾都無法處理如此復(fù)雜的信息，因此，而這樣的空間設(shè)計(jì)是不符合網(wǎng)頁設(shè)計(jì)的基本原則和設(shè)計(jì)動(dòng)機(jī)的。
這是一個(gè)網(wǎng)頁模板，它展現(xiàn)了何為「內(nèi)容錯(cuò)位」和「空間混亂」:
△ 布局混亂
△ 空間失衡
△ 適當(dāng)?shù)牟季终{(diào)整
△ 網(wǎng)頁設(shè)計(jì)中空間的合理運(yùn)用
有意思的是，當(dāng)談到空間的概念和布局出現(xiàn)時(shí)，質(zhì)疑聲也隨之而起。
類似的問題只能在理解基本概念后再來作答。黃金經(jīng)驗(yàn)法則告訴我們——簡單是最好的策略。
在文章開頭，我曾提到在設(shè)計(jì)網(wǎng)頁的時(shí)候，盡量創(chuàng)建簡單的用戶界面，這是一舉兩得的舉措，既可以造福你自己，也可以惠及用戶?；驈谋砻嫔峡?，網(wǎng)頁設(shè)計(jì)的重點(diǎn)在于增加網(wǎng)站的視覺吸引力，使用戶操作更為簡便。
我們的大腦總是在扮演偵探的角色，試圖尋找隱藏的線索和空間之間缺失的聯(lián)系。因此它會(huì)將當(dāng)前的視覺信息與之前的經(jīng)驗(yàn)進(jìn)行比對。為了成為一名的網(wǎng)頁設(shè)計(jì)師，你必須先了解大腦是如何感知周圍環(huán)境的。它可以幫助你選擇特定的視覺元素，利用它們來影響觀眾的感知。
作為設(shè)計(jì)師，你必須清楚地了解視覺設(shè)計(jì)和心理學(xué)是如何相互聯(lián)系、相互影響的。換句話說，開發(fā)以用戶為中心的簡單界面，借助正負(fù)空間進(jìn)行設(shè)計(jì)主要依靠格式塔原理，它可以幫助你理解和控制視覺和心理的聯(lián)系。
格式塔在德語中是「形式」的意思。它更多的是一個(gè)概念而不是一個(gè)單純的詞匯，它最基本的概念是：
當(dāng)單個(gè)部分的集合以某種方式統(tǒng)一時(shí)，它們在我們的感知當(dāng)中就是一組。我們把元素看作一個(gè)整體，這一概念或理論基本適用于所有的設(shè)計(jì)媒介：我們不把文本、顏色和形狀看作單獨(dú)的元素，而是把整個(gè)網(wǎng)頁看作一個(gè)整體。同樣的道理也適用于森林：我們看到的不僅僅是一堆樹，就像我們在看海洋時(shí)看不到水滴一樣。
格式塔原則描述了當(dāng)特定的條件出現(xiàn)時(shí)，人類大腦是如何感知視覺成分的。它幫助大腦創(chuàng)造視覺圖像。因此，格式塔原理通常會(huì)應(yīng)到下面六個(gè)主要類別：
1. 圖像和背景
「圖形」是直觀地、明顯地與背景分離的物體。
目前最經(jīng)典的例子是圣杯——兩個(gè)鏡面對稱輪廓構(gòu)成了花瓶。當(dāng)你第一次看到這張照片的時(shí)候，你的眼睛會(huì)立即被吸引到畫面上看起來最聚焦的視覺主體上，可能是相互對立的面孔，也可能是花瓶。當(dāng)你的大腦在調(diào)整你的焦點(diǎn)時(shí)，背景或花瓶被模糊了，在那一刻，你的大腦直覺地在圖像中感知到背景。
過了一會(huì)兒，你會(huì)注意到背景中的花瓶，并意識到它本來就在那里。盡管圖形和基本原則看起來模棱兩可，設(shè)計(jì)師常常創(chuàng)造視覺上吸引人的超現(xiàn)實(shí)和虛幻藝術(shù)，并將之運(yùn)用于網(wǎng)頁設(shè)計(jì)。
有時(shí)，圖形與背景之間的關(guān)系是穩(wěn)定的，而這種穩(wěn)固的視覺關(guān)系使得兩者之間，產(chǎn)生區(qū)別。這種關(guān)系有的時(shí)候又是不穩(wěn)定的，這意味著圖形和背景是無法清晰區(qū)分的。由于這種關(guān)系的模糊性，用戶會(huì)很自然地開始困惑。
為了讓大家直觀地感受到圖形和背景之間的關(guān)系，讓我們詳細(xì)的拿幾個(gè)案例來進(jìn)行討論。這些例子都集中在圖形-背景關(guān)系中的三個(gè)主要方面：對比度、Box 區(qū)塊和陰影。這三方面涉及到諸多屬性，包括顏色、尺寸和信息量，它們關(guān)系到內(nèi)容的區(qū)分和視覺的縱深。
在下面的第一個(gè)例子中，Trellis 使用了一個(gè)全屏大圖背景，并且搭配上清晰的 CTA 元素，圖形-背景關(guān)系明確，該關(guān)系清楚地展示出了細(xì)節(jié)、色彩和尺寸上的差異。
頁面中的文字是位于中央的手寫風(fēng)格字體，與背景中的圖像相比顯得很突出。和灰色背景圖片構(gòu)成對比的白色文本是吸引用戶注意力的焦點(diǎn)，這使得文本在畫面中是高度可見的。從另一個(gè)角度來看，背景圖片是模糊的，所以清晰的文本會(huì)非常醒目。這些都表明，這里的文本被優(yōu)先考慮為圖形或正空間，而模糊的圖像被用作背景或負(fù)空間，從而強(qiáng)烈地暗示了圖形和背景之間的關(guān)系。
下一個(gè)案例是下圖方框里的內(nèi)容。 Ocean Health Index 巧妙地利用了框內(nèi)區(qū)域的內(nèi)容將圖片與背景分離開來。這是你在瀏覽他們的網(wǎng)站時(shí)看到的：
當(dāng)你第一次瀏覽這個(gè)頁面時(shí)，哪個(gè)部分會(huì)吸引你的注意力？你會(huì)發(fā)現(xiàn)，它的主要文本為白色和藍(lán)色背景構(gòu)成對比，而更加醒目的是是兩個(gè)與文字對比鮮明的 Box 區(qū)塊。前者借助了深色背景和文本色彩上的差異，構(gòu)造對比度。而 Box 區(qū)塊本身的色彩和背景色構(gòu)成對比的同時(shí)，還和更靠前的文本構(gòu)成色彩對比。
背景使用了微妙的色調(diào)，使數(shù)字得以鮮明地展現(xiàn)，并突出細(xì)節(jié)。方框的運(yùn)用使它們在頁面上清晰可見。
一些網(wǎng)站還通過添加陰影來表現(xiàn)物與背景的關(guān)系，產(chǎn)生一種圖象被置于背景之上的感覺。以下截圖來自于 serious unsweet.com：
Seriously Unsweetened 的著陸頁使用了不止一種方法來保持圖形與背景的平衡關(guān)系。明亮顏色和陰影的配合；背景是純粹的白色，使得前景元素更容易從中出來。背景之上的元素都是「正空間」，圖中的物體呈現(xiàn)在背景的映襯下，有一種被置于「頂部」的錯(cuò)覺。而陰影并沒有直接用在圖片和文本上，而是應(yīng)用在圖片的內(nèi)部，這讓我們注意到在主要圖像內(nèi)部還有另一層視覺元素，這意味著里面還有一層圖片-背景關(guān)系——這是一個(gè)非常智慧的設(shè)計(jì)。
2. 接近性原理
接近性是指頁面中元素之間的接近程度。網(wǎng)頁中的不同元素可以組合在一起，不同的接近程度會(huì)帶來不同的關(guān)聯(lián)屬性。除了視覺特征上的接近性之外，這些元素與其他頁面元素之間的距離接近度也會(huì)自動(dòng)地在觀眾的腦海中產(chǎn)生關(guān)聯(lián)感。
從圖像到文本、導(dǎo)航欄到網(wǎng)頁表單，這種接近性原則在網(wǎng)頁設(shè)計(jì)中適用范圍非常廣。將類似的內(nèi)容組合在一起時(shí)，它將在元素之間創(chuàng)建關(guān)聯(lián)，為觀者提供更好的視覺體驗(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)的是接近性還是相似性還有待討論。如你所見，具備視覺接近性的同類產(chǎn)品使用狹窄的留白進(jìn)行分組和分隔。這種接近性會(huì)指示用戶在類似的產(chǎn)品列表中，對其目標(biāo)產(chǎn)品基于購買偏好進(jìn)行排序。此外，封閉性原則也在類似項(xiàng)目的清單中發(fā)揮了作用。
現(xiàn)在，我們來仔細(xì)看看 Basecamp 的網(wǎng)頁表單設(shè)計(jì)，它在網(wǎng)頁設(shè)計(jì)中顯示了另一種接近性的理想情況：
可以看到上圖中的表單是被劃分為兩個(gè)主要部分的：個(gè)人信息和 ID 生成兩個(gè)部分。第一部分被暗示為最重要的字段，第二部分則是一個(gè)次要的需求。這兩個(gè)部分的標(biāo)題都因顏色和字體大小的不同而產(chǎn)生區(qū)別。在這個(gè)網(wǎng)頁表單中，接近度是一個(gè)重要指標(biāo)，它將網(wǎng)頁中呈現(xiàn)的信息按優(yōu)先級排列。
3. 對稱和秩序
對稱是指兩個(gè)元素呈現(xiàn)出鏡像關(guān)系。它可以被看作是把一個(gè)物體一分為二的平衡。真實(shí)的對稱圖形包括等邊三角形、圓形和正方形等幾何圖像。
人類的大腦會(huì)本能地渴望在面孔中找尋「平衡」和「對稱」，這在美學(xué)上是令人愉悅的。大腦也傾向于在其他物體中找到對稱，因?yàn)閷ΨQ創(chuàng)造和諧，讓觀者在觀看圖像時(shí)感到舒適。
下面是 HvD Fonts 在網(wǎng)頁設(shè)計(jì)中體現(xiàn)對稱性的一個(gè)很好的案例：
這個(gè)頁面不僅顯示了典型的圖形-背景關(guān)系，而且強(qiáng)調(diào)了對稱性原則的運(yùn)用。頁面被分成四等份，字體大小和顏色相似。四個(gè)部分中的每個(gè)部分的背景都具有相同的主題色和灰度效果。你也可以注意到負(fù)空間不一定是白色的，黑色甚至其他的顏色也可以以圖像作為背景。
對稱性原則還可以衍生出了另一個(gè)概念：在網(wǎng)頁設(shè)計(jì)中，不對稱會(huì)使觀感不佳，必須謹(jǐn)慎使用。許多網(wǎng)站使用不對稱作為平衡間距的元素——非常規(guī)的正空間元素與中性的背景相互平衡，反之亦然。而 Xplode 的營銷理念是不對稱，Xplode 以獨(dú)特的美觀悅目的方式引發(fā)不對稱。
這個(gè)網(wǎng)頁利用視覺錯(cuò)覺和不對稱，抓住了觀者的眼球。作為正空間的物體被放置在一個(gè)不對稱的布局之下，在負(fù)空間中創(chuàng)造了強(qiáng)烈的視覺吸引力。色彩是兩個(gè)空間和諧的主要因素，并為觀者創(chuàng)造了一種自然的聯(lián)系。左邊的圖形也有很強(qiáng)的平衡性，而右邊的則是帶來更強(qiáng)的視覺吸引力。你覺得這個(gè)設(shè)計(jì)如何呢？
4. 相似性原理
相似性與接近性原理密切相關(guān)的原因，是相似分組對象之間共享屬性的質(zhì)量。無論是顏色、形狀、形態(tài)、大小、方向或任何其他屬性，當(dāng)這些屬性中的一個(gè)或多個(gè)在鄰近對象中共享時(shí)，相似性將占上風(fēng)。
即使正空間的元素看起來沒有明顯的聯(lián)系，由于相似性原理，它們也會(huì)與負(fù)空間元素區(qū)分開。
看看這些 UrbanDecay 的商品列表：
雖然上面的商品各不相同，但在位置、色彩、產(chǎn)品布局、表現(xiàn)方式等方面卻有一定的相似性。唯一不同的是左上角的眼影廣告，在同類產(chǎn)品中獨(dú)樹一幟。這顯然是一種營銷策略，目的是在不損害頁面整體對稱和美觀的情況下吸引注意力。這里要考慮的另一點(diǎn)是，尺寸上的相似性使其他圖像與相似的產(chǎn)品類別區(qū)分開來。
除了產(chǎn)品展示之外，正空間可以與相似度結(jié)合使用，也可以與負(fù)空間結(jié)合使用。
讓我們來看看 influenster 的著陸頁：
上面例子中對齊的邊框也運(yùn)用了相似性原理。雖然每個(gè)正空間元素是不同的，但是相似的感覺是通過整個(gè)頁面中一致的文本字段來傳達(dá)的。風(fēng)格、布局和主題都是相似的，因此帶來了統(tǒng)一的視覺效果。
5. 封閉性原理
你是否曾經(jīng)遇到過這樣一幅畫面，看上去是閉合的，但實(shí)際上是開放的？這是由于它采用封閉性原理。我們的大腦傾向于「腦補(bǔ)」不完整物體的空白，并利用我們的視覺感知來使圖形完整化。
正空間和負(fù)空間一起構(gòu)成一個(gè)整體。最好的案例就是負(fù)空間中隱藏的形狀和形式，這要求對正空間中要傳達(dá)的信息進(jìn)行評估。在封閉空間創(chuàng)造性地使用著正負(fù)空間，可以產(chǎn)生有趣但簡單的設(shè)計(jì)。
下面是 Magu Kambucha 的設(shè)計(jì)圖：
在這個(gè)案例中，可以看到封閉性和圖形-背景關(guān)系的平衡。瓶子和后面的粗體文字構(gòu)成對比，背景則是和兩者都構(gòu)成對比的柔粉色。封閉性體現(xiàn)在哪里？看到瓶子后面的文字了嗎？雖然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一個(gè)「K」和最后一個(gè)「A」，其他字母都是半隱藏的，這些字母都是憑觀者的直覺自動(dòng)完成的，整個(gè)形式開始成形，意義也隨之成形。
下面是 Cult 的截圖：
即使文本沒有寫得很清楚，我們的頭腦可以很容易地讀到 CULT 這個(gè)詞。即使單詞不完整，文本的排列和對齊也可以使其易于辨認(rèn)。
6. 連續(xù)性原理
最后，根據(jù)一般格式塔原則，連續(xù)性遵循模式，即引導(dǎo)實(shí)現(xiàn)遵循一致的路徑，建立從一個(gè)對象到另一個(gè)對象的線性模式。
在上面的圖片中，盡管圓形色塊的顏色變淡了，但是觀者更傾向于將中間的間隙其看作一條直線。這使我們相信連續(xù)性的原理比色彩的力量更能引導(dǎo)用戶的視覺感知。當(dāng)我們借助負(fù)空間在視覺元素中畫出路徑，我們的眼睛傾向于優(yōu)先感知正負(fù)空間之間的界限。
腦補(bǔ)出來的這條連續(xù)的線條是我們在設(shè)計(jì)中更應(yīng)該引入的視覺線索。
讓我們來看看 Crypton Trading 網(wǎng)站中的視覺線索設(shè)計(jì)：
看到頁面右半部分設(shè)計(jì)的完美延續(xù)了嗎？不管背景的明暗色調(diào)如何變化，圖案在頁面上的變化都非常顯著。當(dāng)你向下滾動(dòng)時(shí)，你會(huì)看到圖案和顏色是如何以連續(xù)和無縫的運(yùn)動(dòng)變化的。在這里，色調(diào)的變化是可以忽略的，我們所看到的是一個(gè)連續(xù)的線和點(diǎn)的模式。
另一個(gè)很好的例子是 OscilloScope 網(wǎng)站：
該網(wǎng)站借用連續(xù)性法則，將網(wǎng)站用戶引入到工作室的 360 度視角中，他們可以在導(dǎo)航中選擇所需的子欄目。
影片《Cargo》的著陸頁也使用了連續(xù)性法則：滾動(dòng)式的導(dǎo)航，以線性運(yùn)動(dòng)的方式讓文本漂浮在網(wǎng)站上。由于 LOGO 是垂直展現(xiàn)的，所以用戶必須向下滾動(dòng)才能看到它的全貌。當(dāng)頁面向下滾動(dòng)時(shí)，靜態(tài) LOGO 開始與并行的文本塊一起浮動(dòng)。導(dǎo)航引導(dǎo)用戶經(jīng)歷不同層次的體驗(yàn)，而不會(huì)干擾隱藏在下面的內(nèi)容。
由于我們的眼睛通常遵循最平滑的路徑，設(shè)計(jì)師可以使用這樣的方式來創(chuàng)建引導(dǎo)路徑。
在這篇文章中，我們討論了格式塔原則與網(wǎng)站 UI 的正負(fù)空間之間的關(guān)系。通過一些真實(shí)的案例，讓大家清楚地知道如何運(yùn)用簡單有效的方法來改變設(shè)計(jì)的觀感。關(guān)鍵是使用這些原理來設(shè)計(jì)的時(shí)候，可以達(dá)到 1 + 1 > 2 的效果。
人類是根據(jù)感知來思考的——主要是基于視覺。根據(jù)格式塔原理，我們傾向于看到更大的整體性圖景，而不是第一眼看到的某一單個(gè)元素。
正負(fù)空間幫助我們區(qū)分、回憶、感知并識別理解。在格式塔原理的引導(dǎo)下，我們能夠更好地在網(wǎng)頁設(shè)計(jì)中利用不同元素來創(chuàng)造吸引人的作品。因?yàn)榭臻g對于任何設(shè)計(jì)師來說都是一件復(fù)雜的事情，所以最好的方法就是保持格式塔原則的完整性。只有這樣才能真正認(rèn)識到空間在設(shè)計(jì)中的重要性、有效性，繼而使自己成為網(wǎng)頁設(shè)計(jì)領(lǐng)域的佼佼者。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com