很多設(shè)計(jì)師都犯了一個(gè)大錯(cuò)誤，他們創(chuàng)建了過(guò)于復(fù)雜、繁忙和豐富多彩的網(wǎng)頁(yè)。如果不是有意的，你應(yīng)避免創(chuàng)建復(fù)雜的接口，并使用更多的空間。空間是網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)基本方法，因?yàn)樗梢越o網(wǎng)頁(yè)上的所有元素帶來(lái)很大的差異。在這篇文章中，我們闡明了負(fù)空間的重要性，并分享了如何在網(wǎng)頁(yè)設(shè)計(jì)中正確使用負(fù)空間的技巧。

什么是負(fù)空間？

在我們開始之前，讓我們先定義什么是負(fù)空間。負(fù)空間，或空白區(qū)域，是指網(wǎng)頁(yè)上未使用的空間。任何在頁(yè)面上沒(méi)有引起用戶注意的東西都是負(fù)空間。這并不意味著空間必須是白色的：它可以是任何顏色、圖像或任何其他背景。

“空白應(yīng)被視為一個(gè)活躍的元素，而不是被動(dòng)的背景?！?- Jan Tschichold

負(fù)空間有兩個(gè)層次：微觀和宏觀。微觀負(fù)空間與線條、詞語(yǔ)、字母等小元素之間的空間有關(guān)，而宏觀負(fù)空間則是較大塊或元素之間的空間。這兩個(gè)層次對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的整體有效性都很重要。

讓我們來(lái)看看下面的網(wǎng)頁(yè)設(shè)計(jì)，它很好地利用了負(fù)空間。

蘋果

蘋果一直非常關(guān)注設(shè)計(jì)，他們自己的網(wǎng)站也不例外?？纯此麄?nèi)绾吻擅畹厥褂梦⒂^和宏觀負(fù)空間，其網(wǎng)站布局清晰，擁有一個(gè)極為明確的行動(dòng)號(hào)召(CTA)。

你的注意力通常集中在核心功能，即產(chǎn)品本身，沒(méi)有什么可以分散你在這一頁(yè)上的注意力。在頁(yè)面中央查看單個(gè)對(duì)象是吸引用戶注意力的完美方式。

谷歌

谷歌可能是網(wǎng)頁(yè)負(fù)面空間的鼻祖。這家搜索巨頭使用了大量的負(fù)空間和干凈的設(shè)計(jì)來(lái)吸引我們對(duì)搜索欄本身的注意。

谷歌只是引導(dǎo)用戶進(jìn)入頁(yè)面中最可操作的領(lǐng)域，即Gmail、圖片和搜索欄。為了避免混淆，設(shè)計(jì)保持清晰和簡(jiǎn)單。

Dropbox

Dropbox主頁(yè)結(jié)合了完美的微觀和宏觀的負(fù)空間，自然的調(diào)色板和和諧的字體，營(yíng)造了平靜的氛圍，提供了流暢的用戶體驗(yàn)。由于使用了適當(dāng)?shù)呢?fù)空間，網(wǎng)站看起來(lái)非常復(fù)雜，而反過(guò)來(lái)又創(chuàng)造了簡(jiǎn)潔和整潔的特性。

你可以看到，負(fù)空間字面上允許你的設(shè)計(jì)空間有呼吸感。現(xiàn)在讓我們來(lái)看看如何在你的網(wǎng)站上正確使用這個(gè)負(fù)空間的技巧。

如何使用負(fù)空間

1.使用負(fù)空間來(lái)分解頁(yè)面

打破網(wǎng)頁(yè)上的空間是設(shè)計(jì)中最基本的視覺(jué)組件之一。當(dāng)一個(gè)網(wǎng)站信息太多而空間太少的時(shí)候，訪問(wèn)者很難專注于主要信息。

負(fù)空間讓用戶有時(shí)間吸收他們?cè)陧?yè)面上看到的信息。有一些規(guī)則可以幫助設(shè)計(jì)師在頁(yè)面上創(chuàng)建對(duì)稱的構(gòu)圖，并確保人們能夠感知信息。組件之間的相等空間設(shè)置了適當(dāng)?shù)脑O(shè)計(jì)結(jié)構(gòu)，幫助用戶清晰地感知信息。根據(jù)網(wǎng)頁(yè)設(shè)計(jì)的組成規(guī)則，這些微塊之間的空間應(yīng)占宏塊之間空間的三分之一。

2.內(nèi)容理解方面的工作

內(nèi)容可讀性和易讀性是網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)非常重要的方面。負(fù)空間可以優(yōu)化兩者。正確使用線條、詞語(yǔ)和字母之間的空間可以使閱讀理解能力提高好幾倍。

在優(yōu)化內(nèi)容理解的同時(shí)，段落邊距和行距是兩個(gè)主要的考慮因素。每一行之間的空間，或簡(jiǎn)稱行間距，增加了正文文本的整體可讀性，如下面的示例所示：

3.創(chuàng)建視覺(jué)層次結(jié)構(gòu)

負(fù)空間不僅僅是頁(yè)面中元素之間的空白，它還是構(gòu)建視覺(jué)層次結(jié)構(gòu)的重要工具。負(fù)空間可以組成或分離ui元素，從而創(chuàng)建有效的頁(yè)面設(shè)計(jì)。

它提供了一個(gè)溫馨的布局，使訪問(wèn)者在頁(yè)面上的訪問(wèn)時(shí)間更長(zhǎng)。 此外，負(fù)空間也會(huì)引起用戶對(duì)重要元素的注意，并為眼睛提供短暫休息。

4.明晰關(guān)系

格式塔心理學(xué)家在學(xué)習(xí)人們?nèi)绾谓M織視覺(jué)信息的同時(shí)，制定了“鄰近法則”。該定律指出，所有彼此相鄰的視覺(jué)對(duì)象看起來(lái)與人眼相似。

在網(wǎng)頁(yè)設(shè)計(jì)中，適當(dāng)?shù)呢?fù)間距是實(shí)現(xiàn)鄰接原則、使設(shè)計(jì)更具視覺(jué)吸引力的有效途徑。例如，這一原則對(duì)博客架構(gòu)非常適用。通過(guò)將大量文本和諧地分割成段落和塊，設(shè)計(jì)人員可以實(shí)現(xiàn)更易于消化和更令人愉快的布局。

本質(zhì)內(nèi)容

正如你所看到的，負(fù)空間是網(wǎng)頁(yè)設(shè)計(jì)中最強(qiáng)大的工具之一。通過(guò)遵循本文中給出的一些簡(jiǎn)單規(guī)則，設(shè)計(jì)師可以創(chuàng)造出一個(gè)完美的視覺(jué)上的吸引人的設(shè)計(jì)，會(huì)得到任何訪問(wèn)者的欣賞。