許多設計師為了設計一個豐富多彩的網頁把產品設計的過於複雜、繁瑣，這是犯了一個大錯誤。如果不是故意的，則應避免創建複雜的接口，而應使用更多空間。空間是Web設計中的基本方法，因為它可以為頁面上的所有元素帶來很大的不同。在這篇文章中，作者闡明瞭負空間的重要性，並分享瞭如何在網頁設計中正確使用負空間的技巧。

一、什麼是負空間？

在開始之前，我們首先要確切定義什麼是負空間。負空間（或空格）表示網頁上任何未使用的空間。在頁面上沒有引起用戶註意的任何內容都是負空格。這並不意味著空格必須一定是白色的：它可以是任何顏色，圖像或任何其他背景。

負空間有兩個層次：微觀和宏觀。微負空間與線條、字符等小元素之間的空間有關，而宏負空間則是較大的模塊或元素之間的空間。這兩個級別對於網站設計的整體有效性都很重要。

讓我們看一下以下使用負空間的網頁設計。

1. 蘋果

Apple一直非常重視設計，他們自己的網站也不例外。只要看看他們如何熟練地使用微觀和宏觀的負空間。該網站佈局整潔，號召性用語（CTA）非常清晰。

您的註意力集中在核心功能，產品本身上，沒有任何東西可以分散您對該頁面的註意力。在頁面中心僅查看一個對象是吸引用戶註意力的理想方法。

2. 百度

百度可以說是中國網頁負空間的鼻祖。搜索巨人利用了大量的負面空間和簡潔的設計來吸引我們對搜索欄本身的關註。

百度只是將用戶引導到頁面中最具操作性的區域，即搜索欄。設計保持簡潔明瞭，避免混淆。

3. Dropbox

Dropbox主頁將完美的微觀和宏觀底片空間，自然的調色板和和諧的字體融為一體，營造出平靜的氛圍並提供流暢的用戶體驗。由於負空間的正確使用，該網站看起來很老練，從而帶來了簡潔和整潔。

4. 得物

得物（原毒物）電子商務平臺的網站使用大量空白來實現其主要目的：引導訪問者下載移動終端。得物將商品表單周圍留有大量空白，以確保訪問者在在瀏覽商品時被其他元素干擾。此外，他們明智地顯示了網站導航，以免將註意力從頁面的主要部分轉移開。

你會看到負空間使用讓用戶在瀏覽網頁時，更具有呼吸感。現在，讓我們來看一下如何在您的網站上正確使用此負空間的提示。

二、如何使用負空間權？

1. 使用負空格來分頁

破壞網頁上的空間是設計中最重要的視覺組件之一。當網站上的信息太多而空間又太少時，訪問者很難專註於主要信息。

負空間使用戶有時間吸收他們在頁面上看到的信息。有一些規則可以幫助設計人員在頁面上創建對稱的構圖，並確保人們可以感知信息。構圖各組成部分之間的均等空間可設置適當的設計結構，並幫助用戶清楚地感知信息。根據網頁設計的組成規則，這些微型塊之間的空間應占據宏塊之間的空間的三分之一。

有效的中斷頁面的結構，並突出重點

2. 進行內容理解

內容的可讀性和可讀性是網頁設計中非常重要的方面。負空間可以同時優化它們。正確使用線條、字符之間的空間會使閱讀理解提高幾倍。

在優化內容理解時，應註意兩個主要方面：頁邊距和行距。每行之間的間距，或只是行間距，可以增加正文的整體可讀性，如以下示例所示：

3. 創建視覺層次

負空間不僅是頁面上元素之間的空白，而且是構建視覺層次結構的必要工具。負空間可以組成或分離UI元素，因此它們可以創建有效的頁面設計。

它提供了一個受歡迎的佈局，可以使訪問者在頁面上停留更長的時間。此外，負空間會引起用戶對重要元素的註意，併為眼睛提供休息。

4.澄清關係

格式塔心理學家在學習人們如何組織視覺信息的同時，制定了鄰近定律。該法則規定，彼此相鄰的所有視覺對象看起來都類似於人眼。

在網頁設計中，適當的負間距是實現接近原理並使設計更具視覺吸引力的有效方法。例如，此原理非常適合博客架構。通過將大量文本和諧地分為段落和塊，這樣的佈局更易讓用戶消化和愉悅。

底線

如你所見，負空間是Web設計中最強大的工具之一。通過遵循本文中給出的一些簡單規則外，設計師可以創建一個完美的視覺吸引力設計，讓用戶賞析。

原文：https://speckyboy.com/negative-space-web-design/

作者：Anastasia Diachenko

編譯作者：無尾熊，公眾號：冬熊設計，歡迎關註，一起成長！

本文由@無尾熊 翻譯發佈於人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。