極簡主義網頁設計中的負空間研究

王梓湞 朱 宏（上海大學 上海美術學院，上海 200444）

極簡主義作為一個藝術派系最早起源于美國?，F代極簡主義作為一種新的生活方式正在全世界日趨流行。如今，大多數界面設計中非常流行扁平風格、隱藏式全局導航等，這些設計元素都源于極簡主義對界面設計的影響。極簡主義的實質是“簡而不減”，雖然其提倡簡化，但是是在不減少功能的前提下實行的。如何把握簡化的度是極簡主義網頁設計中的一大學問。如信息過多，在頁面中過度使用負空間，會出現浪費頁面空間的情況，設計師在設計過程中應注重“簡化用戶任務”來運用負空間。目前極簡主義的網頁設計較一般網頁設計來說也存在著很大的優勢，例如更快速的網頁加載速度、更好的設備兼容性等。

一、極簡主義網頁設計中的負空間

在極簡主義設計中負空間的運用是最為重要的，負空間可以引導用戶的視覺流向，使其注意被負空間包圍的重要元素。換一種說法，即大片留白中間的元素信息會更容易引起用戶的注意。

在網頁設計中負空間包含所有網頁內的空白區域，類似于畫面中的留白。而被負空間包圍的頁面中的內容信息則是正空間。從網頁設計的格局方面出發，運用負空間將所有元素區分開，可指導用戶視覺流向，設計用戶在網頁信息的瀏覽路徑。設計師可以利用負空間達成視覺審美與視覺引導之間的完美平衡。

1.大小負空間

（1）大面積負空間

大面積與小面積的負空間的合理運用可以平衡整個頁面的視覺感受。大面積負空間主要運用于頁面設計中獨立的不同元素之間。負空間可以引導用戶視覺流向，讓用戶將視覺停留在被包圍元素上。元素被包圍的負空間面積越大，則該元素越容易獲得用戶的第一關注。但是負空間面積過大，容易造成對象之間關系的削弱，容易割裂信息之間的關系，違背格式塔原則。某網站在網頁標題“Digital art&Experiments”周圍設計了大面積的負空間，使其尤為明顯，其次注意到的是上方的導航欄和下方的其他信息元素。

大面積的負空間設計使該網站顯得非常簡潔，信息元素根據其重要程度安排大小，使得整個頁面在信息瀏覽上簡單明了。

（2）小面積負空間

小面積的負空間主要運用于頁面設計中較小的元素之間，或是較大元素中的次級元素之間。例如排版時的列表、文字、段落、按鈕和圖標之間等。

在格式塔規律中，具有相同功能的元素在視覺上更為接近。小面積的負空間能在頁面設計中起到空間層級的強化，且保持內容不被過于割裂且清晰易讀的功能。例如文章中的排版，段落中的負空間面積要充分考慮文章的整體性審美與可閱讀性。按鈕間的小面積負空間需在整段文章的負空間基礎之上考慮所留面積以及歸屬關系。可以說小面積的負空間運用是整個頁面設計的精髓之處，從細分再到細分，每一個小面積負空間都需要思考與周圍信息的關系。

2.被動負空間與主動負空間

（1）被動負空間

一個網站若沒有足夠的負空間，將會變得無法閱讀從而讓用戶失去方向，大部分精力都在用于對抗混亂的視覺。用空白區域試著讓網站易于理解就是被動的負空間的運用。

被動負空間相較于大面積負空間來說，意味著有足夠多的空間層次去區分元素之間的不同。例如都在網頁頂部的導航和注冊信息，彼此間隔了一定的距離用以區分。被動負空間包括了對于小元素的留白，用以實現字符、文字、段落的最大可讀性，以及當出現列表或下拉框菜單時，每行文字或每個選項間的獨立性。被動空間的主要目的可以說就是不被注意地營造一塊被動空間，使其看起來不引人注意，就簡簡單單，但又能區分出不同為最佳。

（2）主動負空間

主動負空間是運用負空間來實現注意力的吸引，或是將一堆重要信息在同一頁面分散開來。除了大面積的負空間可以吸引注意力，巧妙運用小面積的負空間也可以使其實現主動的方式，例如使用主動負空間將重要的引言或者段落等形成一段文字獨立出來而吸引用戶的注意。

二、運用負空間定義網頁視覺層次結構

1.使用分組進行理解

該網頁的頁腳設計是使用負空間創建組內容的非常好的例子。所有的頁腳鏈接分成并排對齊的垂直列。

頁腳中每一組鏈接之間的垂直行間距是相同的，表明了鏈接之間的并列關系。其次每個單獨組列之間的間距也是相同的，表明了每一組導航列之間的并列關系。在色彩的運用中，用白色文本與下列灰色鏈接進行對比，迫使用戶在仔細閱讀每一條鏈接之前首先查看該鏈接的標題。

從白色空間垂直與水平的距離來看，水平空間遠大于鏈路之間發現的垂直空間。間距與對比的結合使用戶注意到白色的標題，同時用戶會理解為所有的鏈接是相關的。不需要頁腳標簽或任何其他效果，這使得頁面設計更為簡約。如格式塔原則所指出的，更接近的元素似乎相關。該網站是一個響應式網站，當用戶調整布局的大小時，頁腳欄便會垂直下降。當用戶查看較小的響應布局時，頁腳列之間會創建更多的垂直空間來適應頁面。因此，用戶可以在該網頁中看到一個列表的結束和另一個列表的開始。

2.空白和對比

空白和對比的效果在Geckoboard網站的頁腳區域十分明顯。該網站將鏈接分為3列，但第一列白色對比強烈的重要信息并不是標題，而是并列連接中較為主要的產品、收益和定價。

網站頁腳中的負空間巧妙地利用了文本。頁腳周圍的負空間與鏈接文本水平和垂直間隔的負空間略有區分且恰到好處，給每組鏈接營造了一個單獨的文本塊易于區分。所有這些負空間在列、鏈接和單個字母之間的額外空間創造了一種寬敞的感覺。文字顏色的對比度定義出信息級別更高的文本，額外的負空間很好地向用戶傳達了鏈接組之間的關系。

標題、側邊欄以及頁內內容都可以使用小面積的負空間和文字的高低對比度顏色來構建上下文關系和信息的不同層級。

3.導航欄中變化的空間

導航中的負空間區域會非常不同。網站會基于所有導航鏈接的內容密度將多個子鏈接對接到單個導航內。上文提到的示例只是簡單的登陸頁，有幾個簡單的信息鏈接。但是登錄頁上的內容越少，網頁設計師在導航布局中可進行的創造性控制會越多，他可以將導航鏈接設計為大型的排版塊或將該版塊設計為隱藏式的彈窗鏈接。

圖1 Microsoft的首頁（來源：Microsoft官網）

以Microsoft網站的首頁為例，該網站支持所有公司旗下產品的鏈接。微軟公司旗下的產品范圍非常廣泛，從平板電腦到游戲機和各類游戲等，網站在設計時必須也要考慮到這一因素。該網站的設計運用負空間，非常微妙地使所有元素達到了一個平衡。網站的導航菜單具有一系列帶有下拉菜單的鏈接，每個下拉列表使用具有第三產品鏈接的彈出式二級菜單。導航的大部分是使用精致的負空間，這使得二級菜單中的所有鏈接都像塊級元素一樣具有大量填充性。用戶可以將鼠標懸停在鏈接區域的任何地方，彈出的鏈接會變為可點擊，讓導航網站順利和容易。

結語

極簡風格的網頁能在用戶從大量繁亂的信息中尋找所需時，為用戶提供一個簡單直接的界面，從而提高用戶使用的效率，為用戶節省時間。同時，負空間的運用使網頁更具藝術感與層次感。國外的網頁設計受極簡主義影響較早，因此設計已趨于成熟。國內對于網頁設計的認知度和關注度也在不斷提高，目前負空間的運用已作為網頁設計的大趨勢之一，也在逐漸影響著國內的網頁設計，一些知名國內網站，例如百度也在不斷地學習和借鑒國外有關負空間與網頁設計相結合的經驗，在網頁設計之路上不斷前進。