極簡主義網(wǎng)頁設(shè)計中的負空間研究

王梓湞 朱 宏（上海大學(xué) 上海美術(shù)學(xué)院，上海 200444）

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

一、極簡主義網(wǎng)頁設(shè)計中的負空間

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

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

1.大小負空間

（1）大面積負空間

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

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

（2）小面積負空間

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

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

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

（1）被動負空間

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

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

（2）主動負空間

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

二、運用負空間定義網(wǎng)頁視覺層次結(jié)構(gòu)

1.使用分組進行理解

該網(wǎng)頁的頁腳設(shè)計是使用負空間創(chuàng)建組內(nèi)容的非常好的例子。所有的頁腳鏈接分成并排對齊的垂直列。

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

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

2.空白和對比

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

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

標(biāo)題、側(cè)邊欄以及頁內(nèi)內(nèi)容都可以使用小面積的負空間和文字的高低對比度顏色來構(gòu)建上下文關(guān)系和信息的不同層級。

3.導(dǎo)航欄中變化的空間

導(dǎo)航中的負空間區(qū)域會非常不同。網(wǎng)站會基于所有導(dǎo)航鏈接的內(nèi)容密度將多個子鏈接對接到單個導(dǎo)航內(nèi)。上文提到的示例只是簡單的登陸頁，有幾個簡單的信息鏈接。但是登錄頁上的內(nèi)容越少，網(wǎng)頁設(shè)計師在導(dǎo)航布局中可進行的創(chuàng)造性控制會越多，他可以將導(dǎo)航鏈接設(shè)計為大型的排版塊或?qū)⒃摪鎵K設(shè)計為隱藏式的彈窗鏈接。

圖1 Microsoft的首頁（來源：Microsoft官網(wǎng)）

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

結(jié)語

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