如何使用負空間創建令人驚嘆的網站

網站和應用程序具有必須共存的各種視覺元素——按鈕、列、圖標、圖像、線條、媒體和排版。 所有這些元素都需要一個畫布（空白網頁），而那個畫布需要空白空間，即負空間或空白空間。 沒有它，觀看者的眼睛無法處理它所看到的東西。

訂閱我們的 YouTube 頻道

什麼是負空間？

正空間是作品中充滿主題或其他焦點的部分。 負空間佔據了其餘部分。 它可能是空白的或白色的，在顏色或設計上形成對比，一個微妙的背景圖像——無論它是什麼，它都會讓人感覺空虛而不是飽滿或雜亂。 然而，僅僅因為負空間是空心的，這並不意味著它不重要——它會引起人們對正空間的關注，有時甚至從不同的角度來看，它本身也會變成正空間。

負空間的例子

負空間——及其對應的正空間——存在於各種藝術和設計中，包括網頁設計。 讓我們看看聯邦快遞的標誌。 你看到紫色和橙色的字母，對吧？ 但是，在空白處有一個箭頭：

隱藏的聯邦快遞箭頭以類似於繪畫的方式使用負空間——輪廓的創建就像正空間的創建一樣。 在這樣的例子中，負空間不是僅僅因為它是正空間不存在的地方而創建的。

NBC孔雀做同樣的事情：

雖然負空間的重點通常是將重點放在正空間上，但它有時會成為巧妙設計的重點。 這是另一個例子——看看狼的牙齒是如何形成一棵樹的：

有一個術語：圖形背景反轉。 這基本上意味著前景色和背景色交換位置以改變視角和解釋。 如果您對此感興趣，請查看 MC Escher 的作品，尤其是他的變形版畫。

負空間在攝影中扮演著同樣的角色。 看看我為我表弟的兒子 Julian 拍的這張照片。 黑色的背景把所有的注意力都集中在他身上：

你可以在自然界中找到負空間，比如花瓣之間的空間，在功能設計中，比如通過咖啡杯把手的空間。

我們也在我們的網站上使用它。 我們的主頁有大量信息，但由於我們將其間隔開的方式，它並沒有太多。 即使背景有一些顏色的暗示和一些形狀可以添加到設計中，它也不會分散注意力——它仍然給人一種令人愉悅的空曠而不乏味的感覺（而且它是品牌的）。

負空間的類型

有幾種類型的負空間。 微觀和宏觀是指構圖中負空間的大小。 主動和被動指的是這些區域為用戶做什麼。

微觀與宏觀負空間

微負空間是指元素之間的小空間——文本行之間的間距或導航菜單中鏈接之間的區域。 這會影響內容對讀者的可讀性。 如果行與行之間沒有足夠的空間或文本超出邊距，用戶將很難閱讀和理解它。

宏觀負空間較大； 它是佈局周圍的空間以及大型設計元素之間的空間。 一個例子是內容塊之間的區域。 容器的空部分容納了整個設計。

具有少量宏觀負空間的網站往往具有很高的信息量。 具有大量宏觀負空間的網站通常是極簡主義或展示奢華的。 第一個例子是小宏觀負空間，第二個例子是大宏觀負空間：

主動與被動負空間

積極的負空間增加了頁面結構，改善了內容的流動並引導用戶去你想要他們去的地方。 被動負空間改善了網站的外觀，但不會讓用戶通過任何特定的流程。 當空間偏離中心和不對稱時，它通常是活躍的。 當它平衡和對稱時，它通常是被動的——它喚起較少的運動，這不會強迫用戶以某種方式看待它。 這是一個主動負空間的例子：

這是被動負空間的一個例子：

負空間和構圖

負空間對於構圖很重要，原因如下：

• 您需要查看構圖中的空間，以保持其勻稱。
• 它還允許您處理設計中不同對象之間的關係。
• 在網頁設計中，它可以發揮重要作用，讓人們留在您的頁面上。
• 一個元素周圍的空間大小決定了該元素有多少焦點——更多的空間意味著更多的焦點。

選擇正負空間的正確平衡

您使用多少負面和正面空間將取決於您想要的外觀以及您想要在觀眾中喚起的東西。

• 如果你想要一個美觀的設計，你可能會使用相等的負空間和正空間。
• 對於故意顯得鮮明和極簡主義的設計，您會選擇更多的負空間。
• 為了看起來壓倒性和麵對面，您可以選擇更積極的空間。

設計師必須在空間上發揮作用，直到他們為品牌和網站的預期目的取得適當的平衡。

用負空間整理文本繁重的網站

當您必須將大量信息擠到一頁上時，找出放置負空間的位置變得棘手 - 特別是如果該信息是大量文本，可能會很快看起來雜亂無章。 HostingDude 是太多積極空間的一個很好的例子：

另一方面，《紐約時報》已經想出瞭如何在不讓你的眼睛發瘋的情況下用他們的新聞包裝他們的主頁，這一切都歸功於間距（和顏色選擇）。 雖然宏觀空間的空間不大，但他們利用了微觀空間：

儘管 HostingDude 上的元素更接近，但由於它們之間的額外空間，紐約時報網站上的元素看起來更加統一。 眼睛可以更輕鬆地理解頁面，從而使其設計更完整、更有凝聚力。 當眼睛有機會休息時，它能夠更好地吸收所看到的東西。 負空間認為少即是多。

用負空間分解文本

您已經看到設計師如何創建美觀且文本豐富的主頁，但是較長的文本塊本身又如何呢？ 將短段落與長段落混合、加粗標題、創建列表和在整篇文章中添加媒體都有助於在單詞周圍建立負空間，使其更吸引讀者。 外觀很重要，即使是複製品，偉大的設計師也會考慮到這一點。

向客戶解釋負空間點

網站設計師可能會與客戶就負空間發生衝突。 客戶看到了更多的空間來擠入重要的賺錢信息。 他們覺得空白是浪費空間。 另一方面，設計師看到眼睛實際吸收已經存在的信息所需的視覺衝擊。 他們知道網站上的所有空間都很重要，即使是沒有內容的空間。

這是模型和原型製作工具派上用場的地方。 向客戶展示他們網站的兩個版本，一個有令人滿意的負空間，另一個是充滿正空間的。 讓他們並排查看網站並讓他們玩弄它們。 我的猜測是，他們會很輕鬆地瀏覽設計良好的網站，而對設計不佳的網站感到迷失。

包起來

網站有很多不同的元素，如果你想讓這些元素和諧相處並吸引觀眾，你需要在它們周圍留出空白。 您使用的空白量及其運作方式取決於 (a) 您的品牌和 (b) 您希望用戶採取的行動。 您也可以通過白色空間獲得創意，例如通過反轉顏色或使用負空間繪製以有趣或令人瞠目結舌的方式定義它。

無論你採取什麼方法，空白區域都應該是平衡的——不過，這並不一定意味著對稱。 相反，這意味著元素存在於頁面上而不會相互競爭，同時吸引您希望它們擁有的注意力類型。 對於瀏覽者來說，平衡意味著能夠在瀏覽網站時不會感到困惑或不知所措。

在您的網站上嘗試留白。 添加一些，取出一些。 減少宏觀和增加微觀，反之亦然。 測試某些元素周圍或多或少的空白如何鼓勵用戶採取行動。 留白的美妙之處在於它是一種藝術技巧，這意味著沒有硬性規定。

設計旅遊網站？ 您可能會使用大量的宏空間。 查看我們的旅遊網站 Divi 兒童主題綜述。

精選圖片來自 StockVector / Shutterstock.com