如何在網頁設計中有效地使用空白

[ad_1]

如果您不是設計師,請確保您的網站看起來完美無缺。 使用優質主題可以帶來很多幫助,但是如果您想要最好的結果,那麼您還需要學習一些基本原理。 這包括了解「空白」設計的概念。

空白確實是聽起來像的樣子,儘管表面上看起來很簡單,但它是任何視覺設計的重要組成部分。 例如,太多的內容會使頁面看起來空白,而太多的內容會使頁面顯得混亂。 另一方面,達到適當的平衡可以對網站的外觀和易用性起到很大作用。

空白介紹

空格是在許多情況下使用的通用設計術語。 這些包括印刷,美術和(當然)網頁設計。 即使您以前從未聽過該短語,您也可能僅憑名稱就對它的含義有所了解。

看一下以下頁面:

熊溪釀酒廠網站。

此主頁顯示圖像,標題和一些文本,所有這些都是頁面的內容。 內容周圍的「空白」稱為空白。

當然,重要的是不要從字面上理解這個術語。 空格實際上不必一定是白色的,它可以是任何其他背景顏色(甚至是背景圖像或設計)。 它只是頁面的空白部分。 鑒於此,它有時也稱為「負空間」。

很容易將頁面的空白部分視為無關緊要。 但是,從某種意義上說,每個頁面的空白與其分隔的內容一樣重要。 讓我們談談這是為什麼。

為什麼空白是至關重要的設計概念

當您將網站放在一起或建立博客時,可能會在每個頁面上儘可能多地容納內容。 畢竟,您想與讀者或客戶分享很多東西。 因此,容易進入「越多越好」的心態。

但是,讓我們看看將這種哲學推向自然的極端時會發生什麼:

Gates N Fences網站。

該頁面幾乎完全沒有空白,因此受到影響。 它看起來非常混亂,很難找到想要的東西。 到達這樣的站點後,大多數訪問者很可能會立即離開。

儘管這可能是一個頂住的示例,但頁面使用的空白空間不足很普遍。 該站點也很好地說明了這一點:

未來歷史學家網站。

這裡進行的工作較少,但是元素之間的壓縮關係仍然過於緊密。 這使頁面看上去不堪重負(當然,顏色和視覺效果的選擇也無濟於事)。

這裡的要點是,在網頁上使用足夠的空白是使它們既美觀又易於瀏覽的關鍵。 元素之間具有足夠的空白也已被反覆證明可以提高閱讀理解力,並對整體用戶體驗(UX)產生積極影響。

當然,您也可以將這個概念推向相反的方向。 太多的空白可能會使您的設計顯得空曠,不連貫和不專業:

蘇珊·柯林斯(Suzanne Collins)的網站。

同時,Google的首頁幾乎只有空白,並且非常有效:

Google的首頁。

這只是表明,對於任何給定的網頁,多少空白是「正確的」,取決於其目標和所包含內容的類型。 在構建或重新設計自己的網站時,首先要在負空間和已佔用空間之間找到完美的平衡。

如何在網頁上有效使用空白設計

正如我們所指出的,太多或太少的空白都會成為一個問題。 但是實際上,問題是幾乎總是忘記在網頁上其他元素之間使用足夠的負空間。 這就是為什麼空白設計在很大程度上圍繞使用空白來平衡內容元素的原因。

為了更具體,實際上有兩種類型的空白。

微空白

「微空白」是指在文本行,網格或畫廊中的圖像,菜單鏈接以及其他此類元素之間發現的較小間隙:

菜單鏈接之間的空格。

此空間對於確保訪問者可以閱讀您頁面上的文本以及分隔元素以表明它們與眾不同至關重要。 在大多數情況下,頁面上的所有內容都應至少包含一點微空白。

也可以將其視為邊界或邊距,並且在連續使用時通常最有效。 例如,這意味著在每行文本之間使用相同的間距,並在所有圖像周圍包括相同寬度的邊框:

具有白色邊框的圖片庫。

宏空白

如您所料,另一個需要考慮的方面是「宏空白」。 這些是頁面各部分之間,內容塊周圍或側邊欄,頁眉和頁腳與主要內容分開的較大空白區域:

具有明確定義的部分的網站。

宏空白可幫助訪問者了解您的網頁結構。 它可以快速顯示一個部分的結束位置,另一個部分的開始位置。 此外,它確保可以輕鬆區分諸如導航之類的關鍵元素。

根據經驗,一個元素與另一個元素越不同,則它們之間應包含更多的空白。 它們之間負空間較小的部分將被視為更緊密相關。 另一方面,較大的差距表示已切換到新型內容或功能:

蘋果網站。

最後,空白還可以用來幫助頁面上最重要的元素脫穎而出。 例如,大多數網站至少有一個號召性用語(CTA)。 這些是您希望訪客採取的重要步驟。 例如,這可能意味著單擊購買按鈕,或填寫訂閱表格。

用大量空白包圍CTA元素是吸引訪問者注意的最佳方法之一。 當CTA本身也通過獨特的顏色和設計使其與眾不同時,這尤其有效:

Spotify上的CTA。

在頁面上實現適當的空白平衡可能需要一些工作。 但是,值得付出努力。 信任自己的眼睛並讓測試人員以嶄新的視角瀏覽您的頁面也很重要。

另外,如果在確定是否在活動站點中包含足夠的空白時遇到麻煩,則可以使用熱圖工具來分析訪問者的行為。 如果您看不到與導航和CTA等關鍵元素的交互作用,則可以從它們的呼吸空間中受益。 在空白設計方面,少即是多。

結論

據說在音樂中,音符之間的沉默與聲音本身一樣重要,因為這是塑造和區分這些聲音的原因。 同樣的原則也適用於您的網站-內容之間的間隔比您最初預期的更為重要。

在您的網站上使用空白設計原則時,平衡是關鍵。 太少的空白會使您的頁面感到混亂和混亂,而太多則無法提供清晰的結構。 為避免這些問題,您可以策略性地使用負數空間來顯示緊密相連的元素,以及被視為分離而又不同的元素。

相關文章