網頁設計中負空間的有效使用
本文介紹了網頁設計中的負空間,通過幾個案例介紹了使用負空間的作用,並提出瞭如何使用負空間的幾個方法。
很多設計師都犯了一個大錯誤,他們建立了過於複雜、繁忙和豐富多彩的網頁。如果不是有意的,你應避免建立複雜的介面,並使用更多的空間。空間是網頁設計的一個基本方法,因為它可以給網頁上的所有元素帶來很大的差異。在這篇文章中,我們闡明瞭負空間的重要性,並分享瞭如何在網頁設計中正確使用負空間的技巧。
什麼是負空間?
在我們開始之前,讓我們先定義什麼是負空間。負空間,或空白區域,是指網頁上未使用的空間。任何在頁面上沒有引起使用者注意的東西都是負空間。這並不意味著空間必須是白色的:它可以是任何顏色、影象或任何其他背景。
“空白應被視為一個活躍的元素,而不是被動的背景。”-- Jan Tschichold
負空間有兩個層次:微觀和巨集觀。微觀負空間與線條、詞語、字母等小元素之間的空間有關,而巨集觀負空間則是較大塊或元素之間的空間。這兩個層次對於網頁設計的整體有效性都很重要。
讓我們來看看下面的網頁設計,它很好地利用了負空間。
蘋果
蘋果一直非常關注設計,他們自己的網站也不例外。看看他們如何巧妙地使用微觀和巨集觀負空間,其網站佈局清晰,擁有一個極為明確的行動號召(CTA)。
你的注意力通常集中在核心功能,即產品本身,沒有什麼可以分散你在這一頁上的注意力。在頁面中央檢視單個物件是吸引使用者注意力的完美方式。
谷歌可能是網頁負面空間的鼻祖。這家搜尋巨頭使用了大量的負空間和乾淨的設計來吸引我們對搜尋欄本身的注意。
谷歌只是引導使用者進入頁面中最可操作的領域,即Gmail、圖片和搜尋欄。為了避免混淆,設計保持清晰和簡單。
Dropbox
Dropbox主頁結合了完美的微觀和巨集觀的負空間,自然的調色盤和和諧的字型,營造了平靜的氛圍,提供了流暢的使用者體驗。由於使用了適當的負空間,網站看起來非常複雜,而反過來又創造了簡潔和整潔的特性。
你可以看到,負空間字面上允許你的設計空間有呼吸感。現在讓我們來看看如何在你的網站上正確使用這個負空間的技巧。
如何使用負空間
1.使用負空間來分解頁面
打破網頁上的空間是設計中最基本的視覺元件之一。當一個網站資訊太多而空間太少的時候,訪問者很難專注於主要資訊。
負空間讓使用者有時間吸收他們在頁面上看到的資訊。有一些規則可以幫助設計師在頁面上建立對稱的構圖,並確保人們能夠感知資訊。元件之間的相等空間設定了適當的設計結構,幫助使用者清晰地感知資訊。根據網頁設計的組成規則,這些微塊之間的空間應占巨集塊之間空間的三分之一。
2.內容理解方面的工作
內容可讀性和易讀性是網頁設計中一個非常重要的方面。負空間可以優化兩者。正確使用線條、詞語和字母之間的空間可以使閱讀理解能力提高好幾倍。
在優化內容理解的同時,段落邊距和行距是兩個主要的考慮因素。每一行之間的空間,或簡稱行間距,增加了正文文字的整體可讀性,如下面的示例所示:
3.建立視覺層次結構
負空間不僅僅是頁面中元素之間的空白,它還是構建視覺層次結構的重要工具。負空間可以組成或分離ui元素,從而建立有效的頁面設計。
它提供了一個溫馨的佈局,使訪問者在頁面上的訪問時間更長。 此外,負空間也會引起使用者對重要元素的注意,併為眼睛提供短暫休息。
4.明晰關係
格式塔心理學家在學習人們如何組織視覺資訊的同時,制定了“鄰近法則”。該定律指出,所有彼此相鄰的視覺物件看起來與人眼相似。
在網頁設計中,適當的負間距是實現鄰接原則、使設計更具視覺吸引力的有效途徑。例如,這一原則對部落格架構非常適用。通過將大量文字和諧地分割成段落和塊,設計人員可以實現更易於消化和更令人愉快的佈局。
本質內容
正如你所看到的,負空間是網頁設計中最強大的工具之一。通過遵循本文中給出的一些簡單規則,設計師可以創造出一個完美的視覺上的吸引人的設計,會得到任何訪問者的欣賞。