從網站元素與内容都(dōu)有細緻的方法可循，附上優秀案例剖析，整個過(guò)程由淺入深，層次分明，非常值得馬克學(xué)習 >>>

由于屏幕是有限的，因此網頁設計也是有限的。可以這(zhè)麼(me)說，在屏幕這(zhè)個小小的盒子中，每個像素都(dōu)是一塊不動産。

就算是菜鳥，也懂得一個頁面(miàn)不能(néng)加載過(guò)多的内容，但涉及到究竟應該規劃多少留白，包括經(jīng)驗老道(dào)的設計師或許也很茫然。

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

留白，另一說爲“負空間”，這(zhè)兩(liǎng)個詞常常互換使用。它們共同所指的都(dōu)是屏幕中出現的元素之間的一種(zhǒng)關系。所謂留白不一定是要白色，或黑色。就算是圖案、色彩或紋理背景都(dōu)可以被(bèi)稱爲留白。負

空間是在内容外創造一個空白的環境，好(hǎo)讓觀者將(jiāng)注意力更加集中于内容。

這(zhè)篇文章中，我們將(jiāng)讨論，怎樣(yàng)運用設計師的錦囊妙招中的超強緻勝工具：留白。

留白的原因

就像已經(jīng)被(bèi)大家所讨論過(guò)的，負空間一開(kāi)始是作爲審美而不可或缺的一部分。

在網頁設計中，在哪裡(lǐ)留白顯得更加重要。可以這(zhè)麼(me)說，它決不僅僅處于視覺審美的需要，它得肩負更重要的角色，即在視覺審美與引導用戶之間達成(chéng)完美平衡。而且，如果現在有一段文字，留白還(hái)需

在此基礎上讓文字清晰，創造具有可讀性的環境。總的來說，留白直接的影響如下。

1、眼球掃描

在網頁中，兩(liǎng)塊較大内容元素之間的空間（在此稱大空間），這(zhè)類留白能(néng)吸引并引導用戶的眼球掃描頁面(miàn)的方式。當運用得當，就能(néng)引導用戶的視線去注意那些你想突顯的元素。這(zhè)在品牌标識展示或增加用戶交互行爲的時候最爲有效。

2、清晰度

在兩(liǎng)個較小的内容元素之間的空間（在此稱小空間）諸如一個文字，或一行文字，列表，圖标等，恰當的留白也能(néng)讓這(zhè)些元素更加易于辨認。

3、視覺審美

當你看到一張大圖片，留白在視覺審美中發(fā)揮了很大的作用。舉例來說，如果内容亂七八糟絕不會是一張好(hǎo)看的圖片。

4、高品位

豐富的留白將(jiāng)爲你的頁面(miàn)灌注一種(zhǒng)精緻優雅的氛圍。

爲了更好(hǎo)的理解和運用它，我們將(jiāng)要梳理不同類型的留白（大空間和小空間），以及運用它們的不同的方法（被(bèi)動和主動）。

大空間和小空間

網頁設計中，在哪裡(lǐ)運用以及怎樣(yàng)運用負空間將(jiāng)取決于它們的角色。簡言之，我們把這(zhè)些角色大緻分爲大元素和小元素。

1、大元素的留白

大元素的留白是涉及到兩(liǎng)個大型元素之間的留白。主要運用于：

總體内容

獨立的不同元素

文本分列

Margin

Padding

圖片之間的距離

譯者注：這(zhè)裡(lǐ)的Margin和Padding指的是網頁設計中元素标簽外部範圍的區域。參考下圖可以幫助理解。

這(zhè)類型的留白空間很大程度影響用戶的視覺流，不管是潛在引導或者強勢推動都(dōu)可以讓注意力引導到你想要他們停留的地方。但在此要強調的一個法則即是距離越大動力越強。想要打破平衡，然而，由

于太多的留白違反了格式塔原則，其結果就是消弱了對(duì)象間的關系。

大多數用戶首先都(dōu)會注意到頁面(miàn)标題，也就是“Digital art&Experiments”這(zhè)句話，而在它外圍的則是大面(miàn)積的留白，這(zhè)樣(yàng)就使得用戶的注意力完全集中于此。

盡管頁面(miàn)的頂部和底部隻有一側留白，但它們也同樣(yàng)可以引起(qǐ)注意。總而言之，在此，留白的區域很好(hǎo)發(fā)揮了吸引注意力的作用，而設計也就似乎看上去不可思議的簡潔起(qǐ)來。

設計師實際上是采用留白區域作爲一個空白幕布，以便給觀衆留下驚喜，好(hǎo)讓我們可以看到他的作品的豐富細節。一旦鼠标移動到底部導航的任一欄目時，幕布上就會出現作品的圖片作爲背景全屏展示

。這(zhè)種(zhǒng)效果創造出類似年幼時的一種(zhǒng)探索和發(fā)現的樂趣：無意間闖入一片空白的場所，發(fā)現了每個抽屜都(dōu)藏匿著(zhe)豐富多彩的視覺盛宴。

你可以試試鼠标滑過(guò)時屏幕上發(fā)生的戲劇性效果。

通過(guò)留白區域作爲工具來誘導用戶注意到他的作品，設計師創造出了一種(zhǒng)新鮮奇特的體驗。在第一個作品出現後(hòu)，我們就很想看看他還(hái)有哪些佳作。這(zhè)感覺蠻吸引的，因爲你將(jiāng)會抑制不住地想要找到最

爲重要的内容。但這(zhè)都(dōu)要建立在一個完美的點燃你好(hǎo)奇的切入點基礎上。

2、小元素的留白

另一方面(miàn)來說，當設計師們談到小元素留白，他們通常是指的較小的元素或是較大元素中的次級元素的留白。他們包括：

字體

行距

段落

列表

按鈕

圖标

小元素的留白最多被(bèi)用在強調網站整體的清晰度上面(miàn)，尤其是在排版的清晰度上。當你試圖利用文字間的留白打破平衡，保持清晰易讀的同時又能(néng)不至于太過(guò)而讓它偏離了重要的内容。我在這(zhè)裡(lǐ)，僅僅

是一個提議，建議將(jiāng)英文行距設置爲1.5px最爲完美。（譯者按：這(zhè)裡(lǐ)的作者沒(méi)有考慮中文字體的行距）

就像格式塔規律中談到的，讓距離較近的元素視覺上更爲接近，這(zhè)將(jiāng)暗示它們具有相同的功能(néng)。小元素的留白將(jiāng)會讓用戶知道(dào)按鈕與鏈接之間的關系，而同樣(yàng)的留白將(jiāng)強化這(zhè)種(zhǒng)機制，這(zhè)在用戶使用過(guò)程

中進(jìn)一步增強認知度。

盡管留白被(bèi)分爲了大元素和小元素兩(liǎng)種(zhǒng)類型，每一種(zhǒng)類型也有主動與被(bèi)動兩(liǎng)種(zhǒng)用法。

被(bèi)動留白與主動留白

留白的應用其實都(dōu)是取決于内容。

就像此前談到的，留白越多，内容的吸引力就越強。但是，你不會想要頁面(miàn)的每個元素都(dōu)具有最大吸引力，更别提有限的屏幕空間了。

那就讓我們看看被(bèi)動和主動的留白是如何幫助負空間達到視覺平衡的。

1、被(bèi)動空間

我們把被(bèi)動的留白視爲空的最小化。

沒(méi)有足夠的留白，一個網站將(jiāng)會變得無法閱讀而失去方向(xiàng)，所有的精力都(dōu)被(bèi)用于對(duì)抗視覺的混亂。被(bèi)動的留白就是用空白區域去試著(zhe)讓網站易于理解。

請看上面(miàn)的例子，導航裡(lǐ)的每個鏈接間的距離，再看看下面(miàn)這(zhè)行文字，行距，字間距等。你能(néng)看出什麼(me)不同尋常的嗎？……答案是你一定找不出。沒(méi)錯！這(zhè)些空間和距離都(dōu)是如此微不足道(dào)，根本不會引

起(qǐ)你的注意。這(zhè)就是所謂的被(bèi)動留白。

對(duì)于大元素的留白，被(bèi)動空間意味著(zhe)足夠多的border和margin的空間去強調元素之間的不同，避免混淆。舉例來說，就像導航和注冊都(dōu)在網頁頂部，但彼此間間隔了一定的距離。

對(duì)于小元素的留白，被(bèi)動空間就包括了字符，文字，段落的最大可讀性，以及當出現列表或下拉框菜單時，每行文字或每個選項間的獨立性。

被(bèi)動空間的應用應該是自然而然的。實際上，被(bèi)動留白的主要目的甚至可以說就是不被(bèi)注意。當你試著(zhe)營造一塊被(bèi)動空間，那麼(me)你要讓它看起(qǐ)來不那麼(me)引人注意，就簡簡單單的視之正常爲最佳。

當安置好(hǎo)所有的被(bèi)動空間，接下來才涉及到主動的部分。

2、主動空間

在上面(miàn)的這(zhè)個網頁中頁面(miàn)裡(lǐ)有好(hǎo)幾個元素：菜單欄按鈕、下拉箭頭、下拉提示等，然而，屏幕中占據主導地位的是中間的黑色文字，這(zhè)讓其他的元素都(dōu)放在了周圍，設計師放大了中間的留白區域，然後(hòu)

把最重要的信息放在這(zhè)裡(lǐ)，讓用戶的注意力完全集中于此。

同時，減少兩(liǎng)行元素間的距離，這(zhè)一過(guò)程也許可稱得上是一種(zhǒng)“隐藏”的方式。就像你常常在網站上見到的法律申明和版權信息一樣(yàng)。請看如下的例子，“FiberSensing is an HBM Brand”的展示效果

很容易讓人忽略。

大元素的留白通常是用于創造首要的注意力，或是將(jiāng)一堆重要信息分散開(kāi)來。

然而，有時候小元素的留白也可以采用主動的方式，有的設計師就使用主動的空間將(jiāng)重要的引言或者段落等形成(chéng)一段文字獨立出來而吸引注意。這(zhè)的确是一個強調重點内容的好(hǎo)辦法。

極簡主義

留白越多，也可以說你的頁面(miàn)就越趨向(xiàng)極簡風格，你通過(guò)删減很多元素來避免淩亂。

極簡風格是一種(zhǒng)設計的哲學(xué)，可以說它不好(hǎo)但也不壞。它祛除了所有能(néng)帶給用戶視覺幹擾的雜碎，而讓用戶關注到你所展示的重要内容。沒(méi)有了噪音，剩下的精華内容就呈現在一片優雅的留白中。

極簡風格在兩(liǎng)個方面(miàn)影響你的網站：現存的元素數量，高品位的氛圍。

1、元素數量

你的頁面(miàn)存在的元素越少，那麼(me)頁面(miàn)剩下的元素就顯得越重要。

如果頁面(miàn)隻有一個元素，即使它蜷縮在角落裡(lǐ)，仍然是你的用戶關注的焦點。如果你的頁面(miàn)有成(chéng)千上萬的小元素，你的用戶也許會随機地尋找他們的興趣點，或者由于選擇太多而放棄。

這(zhè)樣(yàng)一種(zhǒng)相關性，讓我們深知，在你的設計中要增加留白，最簡單的方式就是減少頁面(miàn)元素數量。但我們知道(dào)說起(qǐ)來容易做起(qǐ)來難。極簡主義可以說适用于任何網站，你絕不會想要把用戶不需要的也填

充到網頁上。然而，作爲視覺審美來說，極簡風未必适合所有的網站，尤其是對(duì)于内容豐富的網站來說，就不會願意這(zhè)樣(yàng)光秃秃的一覽無餘的畫面(miàn)。

當提到極簡主義，請大家記得，我們不是僅僅在談論審美方面(miàn)，它也不是我們的目标。恰如其分達到極簡風格的水平是去精簡頁面(miàn)元素，直到不能(néng)使用。這(zhè)需要在用戶中進(jìn)行大量測試，然後(hòu)在你減少的

最多時停止。

就像上面(miàn)的例子中，整個頁面(miàn)隻有兩(liǎng)個可點擊元素：菜單欄圖标和下拉箭頭。信息已經(jīng)被(bèi)極簡化處理放在了屏幕右側。元素少之又少，因而用戶注意力就放在了中間的那張極富感染力的圖片上，同時視

線也會引導至下拉箭頭。

你怎樣(yàng)去平衡元素的重要性完全由自己決定。有些頁面(miàn)就隻設置一個可點擊的鏈接，這(zhè)樣(yàng)确保了用戶去到設計師想要他們去的地方。而有的頁面(miàn)給了多個下拉選項供用戶選擇。你可以考慮去掉标語，突

出内容，簡化導航，當然這(zhè)全取決于你的品牌和産品。

2、高品位的氛圍

極簡風現在變成(chéng)了高品位的同義詞，它能(néng)魔法般地營造出一種(zhǒng)精細、時尚和優雅的氛圍。時尚行業的網站在數字設計方面(miàn)都(dōu)是傾向(xiàng)極簡的，但是對(duì)于一些零售行業的企業來說，還(hái)很少看到有類似的設計

。

高品位的氛圍是與留白有著(zhe)直接的聯系的：

重度留白：可以見到一些奢華、高端的品牌中使用。

中度留白：比較平衡但仍是有品質的。

低度留白：可見于一些廉價的、質低的、淩亂的展示效果中

你可以用亞馬遜的網站和剛剛上面(miàn)那個網站進(jìn)行對(duì)比，亞馬遜的網站内容淩亂而導航的選項繁多。兩(liǎng)個網站都(dōu)出售了高端的時尚産品，但典型時尚客戶會更喜歡哪一個呢？而那些理性的喜歡追逐價廉物

美的購物者又喜歡哪一種(zhǒng)？

這(zhè)些是應用在大元素和小元素的留白空間，但同樣(yàng)重要的是網站使用的圖片。浏覽那些時尚網站所用的圖片，你會發(fā)現比其他普通網站使用的圖片更具有藝術感。

總之，你還(hái)是需要從了解自己的客戶需求開(kāi)始。研究你的用戶，他們的特點，然後(hòu)再考慮用多少留白來展示自己的信息，讓用戶體驗最優化。

總結

作爲一種(zhǒng)視覺藝術，設計不能(néng)忽略最重要的視覺藝術基本原則。它需要滿足審美的同時也要創造出更爲長(cháng)遠的實際價值，比如更多的互動，更人性化的交互。

對(duì)于入門的設計師來說，做網頁設計隻是增加一個頁面(miàn)的可操作元素。但是對(duì)于高級設計師，做網頁設計是如何巧妙的使用留白去引導用戶進(jìn)行交互。

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。