編者按：說(shuō)起留白，很多奢華品牌網(wǎng)站都邪魅一笑：悄悄地用著，出聲的不要。哼哼，偏偏不讓你得逞，今天@十萬(wàn)個(gè)為什麼?從留白的用色、可讀性、搜索流暢度等方面跟童鞋們分享了留白的使用技巧，聽我說(shuō)，為了廣大設(shè)計(jì)師的貼身福利，幫轉(zhuǎn)一下吧??(?_??)

@十萬(wàn)個(gè)為什麼?：所謂留白，有時(shí)也稱作負(fù)空間，兩者是同一個(gè)概念。盡管這個(gè)術(shù)語(yǔ)尤其指留“白”，但它所指的區(qū)域并不一定要是白色的。它只是網(wǎng)頁(yè)布局中環(huán)繞各元素的空白空間。

這樣的空間體現(xiàn)為多種不同形式，例如圖片、圖表、縫隙、外邊距、列甚至一行行文字之間的空間。盡管它似乎“空無(wú)一物”，里面沒有任何其他設(shè)計(jì)元素占據(jù)一席之地，但我們不應(yīng)該如此看待它。視之為“無(wú)物”，也許打造美感與表現(xiàn)力的機(jī)會(huì)就流失了。

處理得當(dāng)?shù)脑?，留白確實(shí)可以為網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)大量的益處。不應(yīng)減少網(wǎng)頁(yè)設(shè)計(jì)中的留白，相反，應(yīng)該增加網(wǎng)頁(yè)中的負(fù)空間。一些知名的大眾品牌已經(jīng)在朝這個(gè)方向前進(jìn)，更多的設(shè)計(jì)師們也在追隨他們的腳步。

更多的留白，等同于更奢華的品牌與網(wǎng)站

客戶往往要求設(shè)計(jì)師盡可能用盡網(wǎng)頁(yè)里的空間，因?yàn)榫W(wǎng)頁(yè)中的空間是昂貴的，只有有限的屏幕來(lái)展示信息。無(wú)論如何，反其道而行之——增加留白——促使設(shè)計(jì)師在更嚴(yán)格約束的空間中，打造更加光鮮的品牌信息。

另外，大家會(huì)覺得，留白更多的網(wǎng)站，它的內(nèi)容比屏幕空間更重要。所以，品牌也顯得更盡奢華，因?yàn)樗鼱奚烁嗥聊豢臻g，反而將焦點(diǎn)匯聚在內(nèi)容信息上。

奢華的品牌了解這層隱喻，通常都使用更多留白來(lái)達(dá)到這一確切效果。PotteryBarn是個(gè)知名的高檔家具零售商，它的網(wǎng)站很聰明地使用了留白，恰恰反映了這一點(diǎn)。留白支配了主頁(yè)，頁(yè)面旁邊大片的留白，更好地將訪問者的注意力集中在頁(yè)面中間的交易與促銷信息上。甚至頁(yè)面頂部的品牌名稱本身，也在字符之間慷慨地運(yùn)用了留白。

PotteryBarn

留白提升搜索流暢度

兩大搜索引擎Google和Yahoo Search，詮釋了留白簡(jiǎn)潔有效，這個(gè)簡(jiǎn)單的例子再適合不過了。

Google準(zhǔn)確地理解了一點(diǎn)，正在搜索某個(gè)話題的用戶，不想被嘈雜的背景和廣告分散注意力。因此，留白支配了整個(gè)Google搜索引擎頁(yè)面，實(shí)際搜索框只占據(jù)頁(yè)面中央窄窄一絲空間。類似的，Yahoo搜索也體現(xiàn)了使用留白的妙處。雖然這個(gè)頁(yè)面頂部有長(zhǎng)長(zhǎng)一條菜單欄，理念還是相同的：大量的留白，使用戶專注于搜索，別無(wú)他物。

可讀性和易讀性得到應(yīng)有的大幅提升

用好留白，任何網(wǎng)站的可讀性與易讀性都會(huì)得到改善。如果一個(gè)頁(yè)面上的文字過于擁擠，它就會(huì)妨礙舒適的閱讀體驗(yàn)，從而阻礙整體用戶體驗(yàn)。更多的留白使文字更易瀏覽，從而提升閱讀體驗(yàn)，也更易理解。

Information Highwayman是個(gè)掌握這項(xiàng)原則的個(gè)人站點(diǎn)，是D Bnonn Tennant——一名文案和市場(chǎng)專員的個(gè)人網(wǎng)站。擅長(zhǎng)夸耀的他，知道什么樣的網(wǎng)頁(yè)內(nèi)容對(duì)任何小本經(jīng)營(yíng)管用，令人欣慰的是，Tennant在他自己的網(wǎng)站上實(shí)踐了他所宣揚(yáng)的東西。標(biāo)題的字間距、文字段落和菜單欄間距，有利于確?？勺x性和易讀性。

Information Highwayman

留白也可以用于不同內(nèi)容區(qū)塊之間，不只是為了提升閱讀體驗(yàn)，也為了將內(nèi)容分隔成不同部分，使得信息的吸收更加專注。Andrew
Lucas的網(wǎng)站很好地展示了這一點(diǎn)。他是名倫敦的設(shè)計(jì)師，留白在他個(gè)人主頁(yè)上運(yùn)用得行之有效。

AndrewLucas

它讓顏色更鮮明

也許留白最直接，盡管也是最簡(jiǎn)單的益處，就是突出網(wǎng)頁(yè)中的其他色彩，使它們更加鮮艷。這點(diǎn)對(duì)于吸引訪客目光大有幫助，因?yàn)轭伾顪\、飽和度甚至濃度都更加突出。

I Am Dan背后的設(shè)計(jì)師處理得非常棒，他在主頁(yè)上使用稀疏的色彩，成為了這個(gè)概念的典范。他的網(wǎng)站簡(jiǎn)直就是零星幾片紅色分割開的留白。通過這種手段，紅色突顯了他作品集的鏈接，吸引訪客瀏覽他的站點(diǎn)，有效地突出了他的網(wǎng)站，因此提高了訪客響應(yīng)召喚的幾率。

I Am Dan

Zurb是家網(wǎng)頁(yè)設(shè)計(jì)公司，他們網(wǎng)站也體現(xiàn)了留白如何能突出色彩。它的特點(diǎn)是主頁(yè)頂部單一的純色和不同頁(yè)面的彩色圖標(biāo)（就在虛線附近）。除了極少的顏色使用外，首頁(yè)的整體設(shè)計(jì)以留白為主。

Zurb

像綠色、橙色和紅色這種簡(jiǎn)單的顏色，能夠創(chuàng)造出令人愉快同時(shí)吸引注意的外觀。上面提到兩個(gè)網(wǎng)站，都采用了極簡(jiǎn)的用色方案，因?yàn)橛腥绱舜竺娣e的留白。因此，用色非常機(jī)智得當(dāng)，使用戶贊賞有加。

留白不是浪費(fèi)空間

網(wǎng)頁(yè)設(shè)計(jì)師們?cè)絹?lái)越多拋棄之前的誤解——認(rèn)為設(shè)計(jì)頁(yè)面時(shí)應(yīng)該盡可能在屏幕內(nèi)填塞每個(gè)元素、每種顏色。正如上面例子解釋過的，留白被用于突出品牌內(nèi)容、提升可讀性與易讀性、突顯極簡(jiǎn)色彩時(shí)，展現(xiàn)出了強(qiáng)大的影響力。

俗話說(shuō)“少即是多”，不論你怎么看，它的確適用于關(guān)于留白的一切觀點(diǎn)。廣義上講，網(wǎng)頁(yè)設(shè)計(jì)中的這種極簡(jiǎn)處理方式，如今正越來(lái)越盛行，這項(xiàng)趨勢(shì)肯定能持續(xù)下去。

留白好文推薦：
《推薦！通過留白打造簡(jiǎn)潔有效的設(shè)計(jì)》
《此處無(wú)物勝有物！留白在網(wǎng)頁(yè)設(shè)計(jì)中的合理使用》

原文地址：webdesignerdepot
譯文地址：colachan
譯者：@十萬(wàn)個(gè)為什麼

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量74萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：