想要讓一個(gè)元素足夠吸引用戶的注意力，往往需要通(tōng)過周圍的留白來(lái)襯托，這樣的設計(jì)所營造的用戶體(tǐ)驗更為(wèi)優雅。

在極簡主義風格是主流的今天，「少(shǎo)即是多(duō)」是設計(jì)師(shī)奉為(wèi)圭臬的準則。控制(zhì)配色方案的數(shù)量，限制(zhì)視(shì)覺元素的數(shù)量，在清晰的層級之下，呈現最核心的元素，抓人(rén)眼球，直擊核心。

這樣的設計(jì)對于留白極為(wèi)依賴，因此，留白很(hěn)重要。

留白并不一定必須是白色的，它可(kě)以是其他的任何顔色，而留白的另外一個(gè)名字是「負空(kōng)間(jiān)」。留白能夠襯托和(hé)凸顯視(shì)覺主體(tǐ)，這也是它發揮作(zuò)用的主要途徑。

盡管留白看起來(lái)不複雜，但(dàn)是在複雜多(duō)變的設計(jì)環境之下，往往并不是一件簡單的事情。優秀的留白設計(jì)能夠在簡約的風格和(hé)功能的可(kě)用性之間(jiān)達到平衡，而要做(zuò)到這一點，需要相當的實踐和(hé)積累。

在什麽地方用留白

必須承認，并非每個(gè)設計(jì)都需要大(dà)量的留白。留白的使用一定是有(yǒu)範圍，且有(yǒu)留白會(huì)對設計(jì)中下列因素産生(shēng)影(yǐng)響：

排版布局
影(yǐng)像圖片
功能控件
文本內(nèi)容
邊距間(jiān)隙

Mark Boulton 将留白劃分為(wèi)大(dà)小(xiǎo)兩種。

小(xiǎo)留白是在較小(xiǎo)的元素之間(jiān)小(xiǎo)間(jiān)隙，比如下面的元素周圍的留白就是小(xiǎo)留白：

鏈接
列表
圖标
按鈕
文本段落
相反，在處理(lǐ)相對較大(dà)的元素的時(shí)候，周圍的負空(kōng)間(jiān)是大(dà)留白。

正确使用留白能夠為(wèi)整個(gè)設計(jì)帶來(lái)平衡感。對于文本內(nèi)容，你(nǐ)會(huì)發現易讀性的高(gāo)低(dī)和(hé)其中的小(xiǎo)留白的控制(zhì)有(yǒu)着密切的關聯，這對于內(nèi)容的呈現有(yǒu)着重要的影(yǐng)響。

使用留白的好處還(hái)有(yǒu)很(hěn)多(duō)：

留白能夠增加內(nèi)容的可(kě)理(lǐ)解性。
留白能夠凸顯特定的 UI 元素，CTA 元素大(dà)都如此。
可(kě)以讓設計(jì)更加整潔、友(yǒu)好。
Bear Creek Distillery


充滿形式感和(hé)沖擊力的圖片搭配上(shàng)令人(rén)眼前一亮的文案，Bear Creek Distillery 可(kě)以輕松地從同類網站(zhàn)中脫穎而出。為(wèi)了突出他們作(zuò)為(wèi)酒類供應商的核心競争力「蒸餾技(jì)術(shù)」，設計(jì)師(shī)盡可(kě)能地降低(dī)可(kě)能讓人(rén)分心的因素，從而将信息精準直接地傳遞給訪客。

Squarespace


在保證用戶能夠獲取足夠的信息的前提下，Squarespace 的設計(jì)師(shī)盡量限制(zhì)了界面上(shàng)使用 UI 元素的數(shù)量。搜索框讓用戶能夠輕松找到他們想要的信息，而文案設計(jì)上(shàng)的獨特性使得(de)品牌的調性得(de)到了放大(dà)。文本的字體(tǐ)色彩選用了黑(hēi)色，和(hé)淺色的背景構成了強烈的對比，讓閱讀和(hé)信息的獲取都無比的輕松。

Progressive Punctuation


如何使用标點符号來(lái)傳達複雜的情緒？Progressive Punctuation 這個(gè)網站(zhàn)将這些(xiē)「全新」的标點符号都展示了出來(lái)。

和(hé)其他的頁面不同的地方在于，頁面需要承載多(duō)個(gè)不同的非标準标點符号，為(wèi)了将信息準确的傳達，設計(jì)師(shī)巧妙地使用留白來(lái)控制(zhì)符号之間(jiān)的間(jiān)距，确保整體(tǐ)的優雅性，又保證了信息的傳達。

Apple


關于留白的設計(jì)，很(hěn)難繞過蘋果這麽經典的案例。雖然他們不是先驅，但(dàn)是蘋果将這一技(jì)巧的運用在自家(jiā)的産品設計(jì)和(hé)網站(zhàn)設計(jì)上(shàng)，體(tǐ)現的淋漓盡緻。

在他們的網站(zhàn)上(shàng)，你(nǐ)會(huì)看到清晰的視(shì)覺脈絡，頁面的每個(gè)部分都有(yǒu)清晰的視(shì)覺焦點，主次分明(míng)，用戶永遠不會(huì)在這裏迷失和(hé)分心。

Tinker


你(nǐ)可(kě)以在 Tinker 定制(zhì)手表，在網站(zhàn)上(shàng)，你(nǐ)可(kě)以選擇手表的樣式、色彩和(hé)裝飾元素。

為(wèi)了突出産品的可(kě)定制(zhì)性，Tinker 這個(gè)網站(zhàn)中所能看到的最顯著的視(shì)覺元素是清晰的被分離出來(lái)的手表組件圖片，就像蘋果的官網一樣，設計(jì)師(shī)不希望你(nǐ)的注意力被别的東西轉移走了，減少(shǎo)次要信息的展示，從而提升核心元素的展現。隻展示必須的內(nèi)容，直接給你(nǐ)需要的一切——手表就可(kě)以了。

The Pisacco Chronicle


The Pisacco Chronicle 是一個(gè)專注于美食、電(diàn)影(yǐng)和(hé)藝術(shù)的線上(shàng)雜志(zhì)，這些(xiē)是絕大(dà)多(duō)數(shù)人(rén)都非常喜歡的東西。

有(yǒu)趣的是，網站(zhàn)為(wèi)了吸引人(rén)采用了寶麗(lì)來(lái)風格的輪播圖。頁面中的标題和(hé)導航都非常吸引人(rén)，這很(hěn)大(dà)程度上(shàng)是因為(wèi)頁面上(shàng)能讓人(rén)注意到的元素确實不多(duō)。如果有(yǒu)更多(duō)的文本內(nèi)容，就很(hěn)難保證各個(gè)元素都那(nà)麽清晰直觀了。

沒有(yǒu)晃眼的色彩和(hé)跳(tiào)出式的配色，這樣讓頁面中的圖片內(nèi)容沒有(yǒu)不吸引人(rén)的理(lǐ)由。

Seedlip


這個(gè)品牌同樣是釀酒廠，不過這次他們的網站(zhàn)推薦的是軟飲料。這次的飲料是基于全新的概念創造而來(lái)，使用帶有(yǒu)大(dà)量留白的網站(zhàn)來(lái)呈現是個(gè)不錯的選擇。

網站(zhàn)同樣使用了大(dà)量的留白來(lái)凸顯信息，更重要的是設計(jì)師(shī)還(hái)強化了浏覽體(tǐ)驗，用戶向下浏覽的時(shí)候，高(gāo)清的飲料圖片會(huì)成為(wèi)整個(gè)視(shì)覺的中心。為(wèi)了強化品質感，設計(jì)師(shī)讓用戶可(kě)以很(hěn)快注意到這個(gè)品牌巴洛克風格濃郁的華麗(lì) LOGO，而這樣的效果同樣和(hé)留白的貢獻分不開(kāi)。

Pocket Penguins


企鵝出版社一直以他們出色的封面設計(jì)而出名。加粗的文本和(hé)大(dà)膽的色彩是他們的特色，Pocket Penguins 這個(gè)網站(zhàn)就完美的延續了他們的品牌特色，通(tōng)過色彩和(hé)排版讓用戶注意到他們的書(shū)本。

Sweetgreen


使用留白和(hé)色彩豐富的圖片來(lái)吸引用戶是非常有(yǒu)效的方法，因為(wèi)兩者能夠正好構成對比。

對于美食尤其是如此，色香味三者當中，色彩和(hé)視(shì)覺是最先傳達給人(rén)的，誘人(rén)的圖片是 Sweetgreen 這個(gè)網站(zhàn)吸引用戶的最有(yǒu)力武器(qì)，所以留白盡量襯托出這些(xiē)圖片，讓這些(xiē)美食被用戶注意到。

Jomor Design



當你(nǐ)想要傳遞信息的時(shí)候，讓用戶隻專注于那(nà)條信息是最有(yǒu)效的方法，如果用戶隻有(yǒu)這麽一個(gè)信息映入眼簾的時(shí)候，自然就怎麽都不會(huì)錯過了。

Johor Design 這個(gè)網站(zhàn)一直緻力于傳達清晰的信息。作(zuò)為(wèi)一個(gè)設計(jì)機構，他們使用一個(gè)精心設計(jì)的文案來(lái)抓住你(nǐ)的注意力，「I wanna help you kick ass.」（讓我來(lái)幫你(nǐ)成為(wèi)最牛的。）

如果頁面中有(yǒu)圖片的話(huà)，這段話(huà)是不會(huì)被注意到的，因為(wèi)文本通(tōng)常沒有(yǒu)圖片吸引人(rén)。

結語

巧妙地使用留白能夠讓你(nǐ)的設計(jì)足夠優雅，想要簡明(míng)直接，同樣需要運用好留白。消除不必要的幹擾，專注于傳遞關鍵性的信息，這些(xiē)都需要留白的參與。