10大優秀網頁設計范例賞析：Web留白設計都有哪些學問？

+ 查看更多

 

網站的留白，又稱"負空間"，主要是指不包含任何內容的空間。換句話說，留白就是空白，不過留白并不一定是白色的，它可以是彩色、黑色甚至帶有微妙的紋理。在《少即是多-怎樣在響應式網站中運用"留白"藝術？》中小飛就對留白的定義、好處等進行過詳細的介紹，這里就不一一重復了。雖說留白設計看上去很簡單，但在實際操作時往往卻并不輕松。所以今天小飛就帶來了留白設計的10個優秀范例，希望大家可以從中積累一些經驗。

 

 

 

Bear Creek Distillery是一家釀酒廠商，它在網站主頁上使用了風格鮮明的圖片和粗體顯眼的字體，以幫助自身從同類網站中脫穎而出。除此以外，它還應用了留白設計。除了圖片、標題、文本以外，整個頁面上沒有任何其他元素，這能避免用戶為其他不必要的元素所干擾，讓網站核心信息傳遞得更加精準、直接。

 

 

 

Squarespace是國外知名的自助建站平臺，一直以高品質的原創引領著網頁設計的潮流趨勢（起飛頁正不斷向它看齊）。它在網站中使用了留白以帶來風格簡潔、藝術感極強的UI界面，當然，元素的減少并沒有影響用戶對網站信息的獲取。下圖就是它的網站界面，元素雖少，但都能盡其用：搜索框能讓用戶輕松找到自己想要的信息；炫酷的文案設計可以彰顯品牌的調性；動畫圖片能讓整個網站更顯生機與活力；CTA按鈕的黑色背景與網站整體柔和配色形成反差，幫助增強文本可讀性；免費試用的簡短文案可以有效吸引用戶進行嘗試。

 

 

 

Progressive Punctuation 是一個標點符號作品集的展示網站，網站創始人相信標點符號可以幫助我們更好的完成線上溝通與交流。不過由于這些標點符號并不常見，也不像文字或圖片那樣規范，為了讓訪客對它們有最直觀、清晰的認識，設計師巧妙地使用留白來控制符號之間的間距。

 

 

 

說到留白設計，Apple絕對不能不提。盡管Apple并不是在網頁中使用留白的先驅，但它卻在自家的產品和網頁上將這一技巧應用得淋漓盡致。以下圖為例，頁面中除了產品圖片，就只剩下產品名稱、產品標語了。頁面視覺焦點十分清晰，用戶可以迅速get到頁面想要傳遞出的信息。

 

 

 

Tinker也是一樣，它是一個手表網站，在這用戶可以自定義手表的表盤大小、顏色、表帶顏色等，然后進行點擊購買。而為了突出網站的主題：手表，Tinker 的頁面上根本沒有其他元素，只有手表不同組件的圖片，外加一些可自定義的設置選項（比如表盤大小：34mm、38mm、42mm）。這里留白的應用可以讓用戶對網站核心元素（手表）留下更加深刻的印象。

 

 

 

The Pisacco Chronicle 是一個專注于美食、電影和藝術的線上雜志，它的留白設計很是值得借鑒。品牌標識、導航菜單、關于我們等元素均勻的分布在頁面四周，中間是一個可點擊進行上下滾動的輪播圖。輪播圖片和標題可以快速抓住用戶的實現，這主要是因為頁面上存有大片空白，沒有那么多可讓人注意到的干擾元素。如果網站內容很多的話，那么各個元素的清晰直觀就很難保證了。

 

 

 

Seedlip同樣是一家釀酒廠商，不過他們主推無酒精烈酒。由于這類產品的概念很是新穎，Seedlip直接通過大量的留白和簡短的文案（世界上第一款蒸餾型無酒精烈酒）來突出自己的獨特銷售賣點。而為了強調品牌的質感，設計師還在主頁上使用了巴洛克風格濃郁的華麗 Logo，用戶在打開頁面時一眼就可以注意到，這也得歸功于留白的使用。

 

 

 

企鵝出版社一直以出色的封面設計（加粗的文本、大膽的配色）而聞名。Pocket Penguins 這個網站也完美延續了這一點，而豐富的留白正好可以與大膽的配色形成對比，讓網站品牌和特色更加突出。

 

 

 

將留白與色彩豐富的圖片搭配起來使用，是吸引用戶的一種有效方式，特別是在你想要突出網站產品時。Sweetgreen就很好的貫徹了這一點，由于這是一個售賣沙拉的網站，各種誘人的沙拉圖片就是網站的強有力武器，而留白常常用來烘托這些圖片，讓它們更易為用戶所注意到。

 

 

 

Jomor Design是一家設計公司，它的設計十分簡潔。當你打開它的主頁時，主要信息只有一條顯眼的標語：I wanna help you kick ass，簡單直接，一目了然。而如果這條標語和圖片或其他元素結合起來使用，可能就很少有人能夠記住它了，這就是留白的意義所在。

 

 

從上面這些示例中我們可以看出，巧妙使用留白不僅可以讓頁面設計更有質感，還能構建清晰的視覺層次，幫助傳遞核心信息。另外，它還常與各種流行設計趨勢結合使用，用來創造風格獨特的網站設計。趕緊想想怎樣在自己的網站中使用留白設計吧！