網頁設計中負空間的有效使用

♝點擊上方「交互設計學堂」關注我們,送電子書

很多設計師都犯了一個大錯誤，他們創建了過於複雜、繁忙和豐富多彩的網頁。如果不是有意的，你應避免創建複雜的接口，並使用更多的空間。空間是網頁設計的一個基本方法，因為它可以給網頁上的所有元素帶來很大的差異。在這篇文章中，我們闡明了負空間的重要性，並分享了如何在網頁設計中正確使用負空間的技巧。

什麼是負空間？

在我們開始之前，讓我們先定義什麼是負空間。負空間，或空白區域，是指網頁上未使用的空間。任何在頁面上沒有引起用戶注意的東西都是負空間。這並不意味著空間必須是白色的：它可以是任何顏色、圖像或任何其他背景。

「空白應被視為一個活躍的元素，而不是被動的背景。」– Jan Tschichold

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

讓我們來看看下面的網頁設計，它很好地利用了負空間。

蘋果

蘋果一直非常關注設計，他們自己的網站也不例外。看看他們如何巧妙地使用微觀和宏觀負空間，其網站布局清晰，擁有一個極為明確的行動號召(CTA)。

你的注意力通常集中在核心功能，即產品本身，沒有什麼可以分散你在這一頁上的注意力。在頁面中央查看單個對象是吸引用戶注意力的完美方式。

Google

Google可能是網頁負面空間的鼻祖。這家搜尋巨頭使用了大量的負空間和乾淨的設計來吸引我們對搜尋欄本身的注意。

Google只是引導用戶進入頁面中最可操作的領域，即Gmail、圖片和搜尋欄。為了避免混淆，設計保持清晰和簡單。

Dropbox

Dropbox主頁結合了完美的微觀和宏觀的負空間，自然的調色板和和諧的字體，營造了平靜的氛圍，提供了流暢的用戶體驗。由於使用了適當的負空間，網站看起來非常複雜，而反過來又創造了簡潔和整潔的特性。

你可以看到，負空間字面上允許你的設計空間有呼吸感。現在讓我們來看看如何在你的網站上正確使用這個負空間的技巧。

如何使用負空間

1.使用負空間來分解頁面

打破網頁上的空間是設計中最基本的視覺組件之一。當一個網站信息太多而空間太少的時候，訪問者很難專注於主要信息。

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

2.內容理解方面的工作

內容可讀性和易讀性是網頁設計中一個非常重要的方面。負空間可以優化兩者。正確使用線條、詞語和字母之間的空間可以使閱讀理解能力提高好幾倍。

在優化內容理解的同時，段落邊距和行距是兩個主要的考慮因素。每一行之間的空間，或簡稱行間距，增加了正文文本的整體可讀性，如下面的示例所示：

3.創建視覺層次結構

負空間不僅僅是頁面中元素之間的空白，它還是構建視覺層次結構的重要工具。負空間可以組成或分離ui元素，從而創建有效的頁面設計。

它提供了一個溫馨的布局，使訪問者在頁面上的訪問時間更長。 此外，負空間也會引起用戶對重要元素的注意，並為眼睛提供短暫休息。

4.明晰關係

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

在網頁設計中，適當的負間距是做到鄰接原則、使設計更具視覺吸引力的有效途徑。例如，這一原則對博客架構非常適用。通過將大量文本和諧地分割成段落和塊，設計人員可以做到更易於消化和更令人愉快的布局。

本質內容

正如你所看到的，負空間是網頁設計中最強大的工具之一。通過遵循本文中給出的一些簡單規則，設計師可以創造出一個完美的視覺上的吸引人的設計，會得到任何訪問者的欣賞。

感謝閱讀！

原文鏈接：https://www.ui.cn/detail/425975.html

作者：zyl0127

加老D私人微信18605817040，和老D一起學交互，老D會在朋友圈發精選文章和招聘信息

交互設計學堂已經開設了新的欄目-行知書院，旨在幫助小夥伴們來高效的學習現在市面上優秀的用戶體驗書籍比如《交互設計精髓》等等，同時結合老D的工作經驗來幫助你們從不同的高度和角度來解讀書中的內容。每天一課，積少成多。已有222位小夥伴加入。詳細了解行知書院