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