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