專注于互聯網服務

專業設計,網站建設,應用軟件開(kāi)發(fā),電子商務平台及商務應用系統開(kāi)發(fā).

如何在網頁中使用留白

2015-1-15 返回

  所謂留白,有時(shí)也稱作負空間,兩(liǎng)者是同一個概念。盡管這(zhè)個術語尤其指留“白”,但它所指的區域并不一定要是白色的。它隻是網頁布局中環繞各元素的空白空間。

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

  處理得當的話,留白确實可以爲網頁設計帶來大量的益處。不應減少網頁設計中的留白,相反,應該增加網頁中的負空間。一些知名的大衆品牌已經(jīng)在朝這(zhè)個方向(xiàng)前進(jìn),更多的設計師們也在追随他們的腳步。

  更多的留白,等同于更奢華的品牌與網站

  客戶往往要求設計師盡可能(néng)用盡網頁裡(lǐ)的空間,因爲網頁中的空間是昂貴的,隻有有限的屏幕來展示信息。無論如何,反其道(dào)而行之——增加留白——促使設計師在更嚴格約束的空間中,打造更加光鮮的品牌信息。

  另外,大家會(huì)覺得,留白更多的網站,它的内容比屏幕空間更重要。所以,品牌也顯得更盡奢華,因爲它犧牲了更多屏幕空間,反而將(jiāng)焦點彙聚在内容信息上。

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


 

  留白提升搜索流暢度

  兩(liǎng)大搜索引擎Google和Yahoo Search,诠釋了留白簡潔有效,這(zhè)個簡單的例子再适合不過(guò)了。

  Google準确地理解了一點,正在搜索某個話題的用戶,不想被(bèi)嘈雜的背景和廣告分散注意力。因此,留白支配了整個Google搜索引擎頁面(miàn), 實際搜索框隻占據頁面(miàn)中央窄窄一絲空間。類似的,Yahoo搜索也體現了使用留白的妙處。雖然這(zhè)個頁面(miàn)頂部有長(cháng)長(cháng)一條菜單欄,理念還(hái)是相同的:大量的留 白,使用戶專注于搜索,别無他物。

  可讀性和易讀性得到應有的大幅提升

  用好(hǎo)留白,任何網站的可讀性與易讀性都(dōu)會(huì)得到改善。如果一個頁面(miàn)上的文字過(guò)于擁擠,它就(jiù)會(huì)妨礙舒适的閱讀體驗,從而阻礙整體用戶體驗。更多的留白使文字更易浏覽,從而提升閱讀體驗,也更易理解。

  Information Highwayman是 個掌握這(zhè)項原則的個人站點,是D Bnonn Tennant——一名文案和市場專員的個人網站。擅長(cháng)誇耀的他,知道(dào)什麼(me)樣(yàng)的網頁内容對(duì)任何小本經(jīng)營管用,令人欣慰的是,Tennant在他自己的網站 上實踐了他所宣揚的東西。标題的字間距、文字段落和菜單欄間距,有利于确保可讀性和易讀性。


 

  留白也可以用于不同内容區塊之間,不隻是爲了提升閱讀體驗,也爲了將(jiāng)内容分隔成(chéng)不同部分,使得信息的吸收更加專注。AndrewLucas的網站很好(hǎo)地展示了這(zhè)一點。他是名倫敦的設計師,留白在他個人主頁上運用得行之有效。

  它讓顔色更鮮明

  也許留白最直接,盡管也是最簡單的益處,就(jiù)是突出網頁中的其他色彩,使它們更加鮮豔。這(zhè)點對(duì)于吸引訪客目光大有幫助,因爲顔色深淺、飽和度甚至濃度都(dōu)更加突出。

  I Am Dan背後(hòu)的設計師處理得非常棒,他在主頁上使用稀疏的色彩,成(chéng)爲了這(zhè)個概念的典範。他的網站簡直就(jiù)是零星幾片紅色分割開(kāi)的留白。通過(guò)這(zhè)種(zhǒng)手段,紅色突顯了他作品集的鏈接,吸引訪客浏覽他的站點,有效地突出了他的網站,因此提高了訪客響應召喚的幾率。

  Zurb是家網頁設計公司,他們網站也體現了留白如何能(néng)突出色彩。它的特點是主頁頂部單一的純色和不同頁面(miàn)的彩色圖标(就(jiù)在虛線附近)。除了極少的顔色使用外,首頁的整體設計以留白爲主。

 

  像綠色、橙色和紅色這(zhè)種(zhǒng)簡單的顔色,能(néng)夠創造出令人愉快同時(shí)吸引注意的外觀。上面(miàn)提到兩(liǎng)個網站,都(dōu)采用了極簡的用色方案,因爲有如此大面(miàn)積的留白。因此,用色非常機智得當,使用戶贊賞有加。

  留白不是浪費空間

  網頁設計師們越來越多抛棄之前的誤解,認爲設計頁面(miàn)時(shí)應該盡可能(néng)在屏幕内填塞每個元素、每種(zhǒng)顔色。正如上面(miàn)例子解釋過(guò)的,留白被(bèi)用于突出品牌内容、提升可讀性與易讀性、突顯極簡色彩時(shí),展現出了強大的影響力。

  俗話說(shuō)“少即是多”,不論你怎麼(me)看,它的确适用于關于留白的一切觀點。廣義上講,網頁設計中的這(zhè)種(zhǒng)極簡處理方式,如今正越來越盛行,這(zhè)項趨勢肯定能(néng)持續下去。

公益廣告

登錄 參與評論

評論

暫無任何評論