1. Home
  2. /
  3. 網頁設計
  4. /
  5. 這10個網站,你就明白了網頁中留白的技巧

這10個網站,你就明白了網頁中留白的技巧

想要讓一個元素足夠吸引用戶的注意力,往往需要通過周圍的留白來襯托,這樣的設計所營造的用戶體驗更為優雅。在極簡主義風格是主流的今天,「少即是多」是設計師奉為圭臬的準則。

控製配色方案的數量,限制視覺元素的數量,在清晰的層級之下,呈現最核心的元素,抓人眼球,直擊核心。這樣的設計對於留白極為依賴,因此,留白很重要。留白並不一定必須是白色的,它可以是其他的任何顏色,而留白的另外一個名字是「負空間」。

留白能夠襯托和凸顯視覺主體,這也是它發揮作用的主要途徑。儘管留白看起來不復雜,但是在復雜多變的設計環境之下,往往並不是一件簡單的事情。優秀的留白設計能夠在簡約的風格和功能的可用性之間達到平衡,而要做到這一點,需要相當的實踐和積累。

 

在什麼地方用留白

必須承認,並非每個設計都需要大量的留白。留白的使用一定是有範圍,且有留白會對設計中下列因素產生影響:

排版佈局
影像圖片
功能控件
文本內容
邊距間隙

 

Mark Boulton 將留白劃分為大小兩種。

小留白是在較小的元素之間小間隙,比如下面的元素周圍的留白就是小留白:

鏈接
列表
圖標
按鈕
文本段落
相反,在處理相對較大的元素的時候,周圍的負空間是大留白。

正確使用留白能夠為整個設計帶來平衡感。對於文本內容,你會發現易讀性的高低和其中的小留白的控制有著密切的關聯,這對於內容的呈現有著重要的影響。

使用留白的好處還有很多:

留白能夠增加內容的可理解性。
留白能夠凸顯特定的UI 元素,CTA 元素大都如此。
可以讓設計更加整潔、友好。

Bear Creek Distillery

充滿形式感和衝擊力的圖片搭配上令人眼前一亮的文案,Bear Creek Distillery 可以輕鬆地從同類網站中脫穎而出。為了突出他們作為酒類供應商的核心競爭力「蒸餾技術」,設計師盡可能地降低可能讓人分心的因素,從而將信息精准直接地傳遞給訪客。

 

Squarespace

在保證用戶能夠獲取足夠的信息的前提下,Squarespace 的設計師盡量限制了界面上使用UI 元素的數量。搜索框讓用戶能夠輕鬆找到他們想要的信息,而文案設計上的獨特性使得品牌的調性得到了放大。文本的字體色彩選用了黑色,和淺色的背景構成了強烈的對比,讓閱讀和信息的獲取都無比的輕鬆。

Progressive Punctuation

如何使用標點符號來傳達複雜的情緒?Progressive Punctuation 這個網站將這些「全新」的標點符號都展示了出來。

和其他的頁面不同的地方在於,頁面需要承載多個不同的非標準標點符號,為了將信息準確的傳達,設計師巧妙地使用留白來控制符號之間的間距,確保整體的優雅性,又保證了信息的傳達。

Apple

關於留白的設計,很難繞過蘋果這麼經典的案例。雖然他們不是先驅,但是蘋果將這一技巧的運用在自家的產品設計和網站設計上,體現的淋漓盡致。在他們的網站上,你會看到清晰的視覺脈絡,頁面的每個部分都有清晰的視覺焦點,主次分明,用戶永遠不會在這裡迷失和分心。

 

Tinker

你可以在Tinker 定製手表,在網站上,你可以選擇手錶的樣式、色彩和裝飾元素。為了突出產品的可定制性,Tinker 這個網站中所能看到的最顯著的視覺元素是清晰的被分離出來的手錶組件圖片,就像蘋果的官網一樣,設計師不希望你的注意力被別的東西轉移走了,減少次要信息的展示,從而提升核心元素的展現。只展示必須的內容,直接給你需要的一切——手錶就可以了。

 

The Pisacco Chronicle

The Pisacco Chronicle 是一個專注於美食、電影和藝術的線上雜誌,這些是絕大多數人都非常喜歡的東西。有趣的是,網站為了吸引人採用了寶麗來風格的輪播圖。頁面中的標題和導航都非常吸引人,這很大程度上是因為頁面上能讓人注意到的元素確實不多。如果有更多的文本內容,就很難保證各個元素都那麼清晰直觀了。沒有晃眼的色彩和跳出式的配色,這樣讓頁面中的圖片內容沒有不吸引人的理由。

 

Seedlip

這個品牌同樣是釀酒廠,不過這次他們的網站推薦的是軟飲料。這次的飲料是基於全新的概念創造而來,使用帶有大量留白的網站來呈現是個不錯的選擇。網站同樣使用了大量的留白來凸顯信息,更重要的是設計師還強化了瀏覽體驗,用戶向下瀏覽的時候,高清的飲料圖片會成為整個視覺的中心。為了強化品質感,設計師讓用戶可以很快注意到這個品牌巴洛克風格濃郁的華麗LOGO,而這樣的效果同樣和留白的貢獻分不開。

 

Pocket Penguins

企鵝出版社一直以他們出色的封面設計而出名。加粗的文本和大膽的色彩是他們的特色,Pocket Penguins 這個網站就完美的延續了他們的品牌特色,通過色彩和排版讓用戶注意到他們的書本。

 

Sweetgreen

使用留白和色彩豐富的圖片來吸引用戶是非常有效的方法,因為兩者能夠正好構成對比。對於美食尤其是如此,色香味三者當中,色彩和視覺是最先傳達給人的,誘人的圖片是Sweetgreen 這個網站吸引用戶的最有力武器,所以留白盡量襯托出這些圖片,讓這些美食被用戶注意到。

 

Jomor Design

當你想要傳遞信息的時候,讓用戶只專注於那條信息是最有效的方法,如果用戶只有這麼一個信息映入眼簾的時候,自然就怎麼都不會錯過了。Johor Design 這個網站一直致力於傳達清晰的信息。作為一個設計機構,他們使用一個精心設計的文案來抓住你的注意力,「I wanna help you kick ass.」(讓我來幫你成為最牛的。)如果頁面中有圖片的話,這段話是不會被注意到的,因為文本通常沒有圖片吸引人。

 

 

結語

巧妙地使用留白能夠讓你的設計足夠優雅,想要簡明直接,同樣需要運用好留白。消除不必要的干擾,專注於傳遞關鍵性的信息,這些都需要留白的參與。