當你想到網頁設計中的空白時，蘋果或谷歌等例子可能是第一個想到的。雖然這些公司在他們的設計中使用白色空間做得很好，但還有很多其他方法可以充分利用空間......即使它不總是白色。

白色空間是您設計計劃的重要組成部分。在這里，我們將看看空間作為設計工具的重要性，以及五個充分利用空白空間的網站例子（這根本不是白色的）。

白色空間101

白色空間是指設計元素未觸及的任何設計部分。這包括圖形或圖像之間，文本之間以及邊距和排水溝之間的空間。設計元素內部的開放空間，例如FedEx徽標內的“隱藏”箭頭，稱為負空間，盡管交換術語已變得相當普遍。

空白空間非常重要，因為它在促進設計的整體可讀性和組織性方面發揮著重要作用。

使用戶更容易掃描文本。

有助于創建類似元素的自然分組。

優先考慮設計中的元素，例如號召性用語，搜索或導航。

創造和諧和復雜的感覺。

建立平衡和視覺層次結構。

有助于使更多的文本塊更易于消化（并且更有可能被讀取）

以合理的方式引導用戶完成設計。

空間不必是“白色”

有關空白的這個神話需要揭穿：空白不一定是白色的。

白色空間可以是純色，也可以是模糊的背景，甚至是一點運動。共同的因素是空間就是這個空間。它不包含其他內容或設計元素。如果用戶看過去或遠離它，則不會丟失任何信息。

門檻是所有的白色空間實際上可能都是白色的，但設計師選擇以另一種方式創造視覺效果，同時仍然使用空間原理。

白色空間可以出現在設計的任何部分，并應該作為一種工具來增強從頁面頂部到底部和整個輔助頁面的可用性。一個好的設計模式會一直使用空白來幫助用戶更容易地消化視覺效果。

例1：U +設計

 

U + Design從字面上顛覆了白色空間的概念，在文字元素的黑色畫布上大量開放。圖像生活在一個較輕的空間，創造了陰陽效果，而沒有一個空間在技術上是白色的，它全部是空白的。

空間在滾動下方也同樣適用，有足夠的空間容納元素，并且空間和設計元素的移動模式幾乎可以促進滾動。

如果您正在尋找關于如何創建可讀文本的課程，請查看此設計。盡管使用了多種文本樣式和顏色，但所有內容都可讀，文本位置和大小提供了一個良好的層次結構框架。

例2：Emark

 

Emark使用剪貼畫和幾何圖案來創建空白區域，并為圖像和文字增添視覺趣味。空間是白色和顏色的組合，形狀和線條有助于提供視覺流。

該設計還使用包含大量白色空間的白色背景的顏色塊。明亮的顏色和空間組合創建獨特的文本容器，可以實現雙倍高度可點擊的號召性用語。由于彩色空白區域，用戶知道每個塊都設計為單擊。

整個設計在文本元素周圍使用放大的空白區域，并使用大量填充和行距來增強可讀性。（隨著移動文本間距概念開始滲入更多基于桌面的網站設計，我們可能會看到更多的趨勢之一。）

例3：玩笑德冬

 

Joke de Winter在他的網站背景中使用模糊的黑白照片作為白色空間的模板。外觀是一種現代分層設計，具有獨特的感覺和流暢性。

在滾動下方，更多空白用于邊距過大的文本元素，以強調特定的文本元素。設計中的白色空間在白色和灰色之間交替出現，并且與前面的示例類似，包含的空間比我們在文本之間經常看到的要多。

在整個設計中，所有的邊緣都有不對稱的風格和充足的空間。表面平衡“平衡”是和諧和視覺上有趣的。

例4：宇航員通緝

 

像宇航員的快節奏行動可能不是首先想到的。但視頻頂部的徽標，文字和元素正是以這種方式工作的。重要的滾動信息很容易閱讀，盡管在后臺采取了行動。它的中心是在任何一邊都有足夠的空間。（而這個用負面空間制作的標志有助于關注整體效果。）

在靜止圖像頂部的文本塊滾動下方使用相同的概念。空間設計精美，設計中唯一真正的白色元素就是文字本身。

例5：Le Farfalle

 

Le Farfalle在英雄形象中使用了一個簡單的剪裁，比如前面的例子之一，但是最讓人印象深刻的使用空間出現在您用大尺寸空白交替顯示的圖像上，以獲得與包含文字的超大空白區域平衡的圖像。

這種風格使用戶可以輕松地從圖像移動到文本，然后再通過所有內容向后翻頁。什么可能是一個沉重的設計變得輕量級和易于閱讀。

此外，該設計使用了大量的邊距和填充，以便每個元素都有自己的空間。這種空間的使用創造出與餐廳氛圍相符的復雜美學。

意派Coolsite360交互式線網頁編輯系統

“創意不該受技術束縛，交互可以變得簡單有趣”