編者按:說起留白,很多奢華品牌網(wǎng)站都邪魅一笑:悄悄地用著,出聲的不要。哼哼,偏偏不讓你得逞,今天筆者從留白的用色、可讀性、搜索流暢度等方面跟童鞋們分享了留白的使用技巧,聽我說,為了廣大設(shè)計師的貼身福利,幫轉(zhuǎn)一下吧!
@十萬個為什麼 :所謂留白,有時也稱作負(fù)空間,兩者是同一個概念。盡管這個術(shù)語尤其指留“白”,但它所指的區(qū)域并不一定要是白色的。它只是網(wǎng)頁布局中環(huán)繞各元素的空白空間。
這樣的空間體現(xiàn)為多種不同形式,例如圖片、圖表、縫隙、外邊距、列甚至一行行文字之間的空間。盡管它似乎“空無一物”,里面沒有任何其他設(shè)計元素占據(jù)一席之地,但我們不應(yīng)該如此看待它。視之為“無物”,也許打造美感與表現(xiàn)力的機(jī)會就流失了。
處理得當(dāng)?shù)脑?,留白確實(shí)可以為網(wǎng)頁設(shè)計帶來大量的益處。不應(yīng)減少網(wǎng)頁設(shè)計中的留白,相反,應(yīng)該增加網(wǎng)頁中的負(fù)空間。一些知名的大眾品牌已經(jīng)在朝這個方向前進(jìn),更多的設(shè)計師們也在追隨他們的腳步。
更多的留白,等同于更奢華的品牌與網(wǎng)站
客戶往往要求設(shè)計師盡可能用盡網(wǎng)頁里的空間,因?yàn)榫W(wǎng)頁中的空間是昂貴的,只有有限的屏幕來展示信息。無論如何,反其道而行之——增加留白——促使設(shè)計師在更嚴(yán)格約束的空間中,打造更加光鮮的品牌信息。
另外,大家會覺得,留白更多的網(wǎng)站,它的內(nèi)容比屏幕空間更重要。所以,品牌也顯得更盡奢華,因?yàn)樗鼱奚烁嗥聊豢臻g,反而將焦點(diǎn)匯聚在內(nèi)容信息上。
奢華的品牌了解這層隱喻,通常都使用更多留白來達(dá)到這一確切效果。PotteryBarn是個知名的高檔家具零售商,它的網(wǎng)站很聰明地使用了留白,恰恰反映了這一點(diǎn)。留白支配了主頁,頁面旁邊大片的留白,更好地將訪問者的注意力集中在頁面中間的交易與促銷信息上。甚至頁面頂部的品牌名稱本身,也在字符之間慷慨地運(yùn)用了留白。
PotteryBarn
留白提升搜索流暢度
兩大搜索引擎Google和Yahoo Search,詮釋了留白簡潔有效,這個簡單的例子再適合不過了。
Google準(zhǔn)確地理解了一點(diǎn),正在搜索某個話題的用戶,不想被嘈雜的背景和廣告分散注意力。因此,留白支配了整個Google搜索引擎頁面,實(shí)際搜索框只占據(jù)頁面中央窄窄一絲空間。類似的,Yahoo搜索也體現(xiàn)了使用留白的妙處。雖然這個頁面頂部有長長一條菜單欄,理念還是相同的:大量的留白,使用戶專注于搜索,別無他物。
可讀性和易讀性得到應(yīng)有的大幅提升
用好留白,任何網(wǎng)站的可讀性與易讀性都會得到改善。如果一個頁面上的文字過于擁擠,它就會妨礙舒適的閱讀體驗(yàn),從而阻礙整體用戶體驗(yàn)。更多的留白使文字更易瀏覽,從而提升閱讀體驗(yàn),也更易理解。
Information Highwayman是個掌握這項原則的個人站點(diǎn),是D Bnonn Tennant——一名文案和市場專員的個人網(wǎng)站。擅長夸耀的他,知道什么樣的網(wǎng)頁內(nèi)容對任何小本經(jī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è)計師,留白在他個人主頁上運(yùn)用得行之有效。
AndrewLucas
它讓顏色更鮮明
也許留白最直接,盡管也是最簡單的益處,就是突出網(wǎng)頁中的其他色彩,使它們更加鮮艷。這點(diǎn)對于吸引訪客目光大有幫助,因?yàn)轭伾顪\、飽和度甚至濃度都更加突出。
I Am Dan背后的設(shè)計師處理得非常棒,他在主頁上使用稀疏的色彩,成為了這個概念的典范。他的網(wǎng)站簡直就是零星幾片紅色分割開的留白。通過這種手段,紅色突顯了他作品集的鏈接,吸引訪客瀏覽他的站點(diǎn),有效地突出了他的網(wǎng)站,因此提高了訪客響*喚的幾率。
I Am Dan
Zurb是家網(wǎng)頁設(shè)計公司,他們網(wǎng)站也體現(xiàn)了留白如何能突出色彩。它的特點(diǎn)是主頁頂部單一的純色和不同頁面的彩色圖標(biāo)(就在虛線附近)。除了極少的顏色使用外,首頁的整體設(shè)計以留白為主。
Zurb
像綠色、橙色和紅色這種簡單的顏色,能夠創(chuàng)造出令人愉快同時吸引注意的外觀。上面提到兩個網(wǎng)站,都采用了極簡的用色方案,因?yàn)橛腥绱舜竺娣e的留白。因此,用色非常機(jī)智得當(dāng),使用戶贊賞有加。
留白不是浪費(fèi)空間
網(wǎng)頁設(shè)計師們越來越多拋棄之前的誤解——認(rèn)為設(shè)計頁面時應(yīng)該盡可能在屏幕內(nèi)填塞每個元素、每種顏色。正如上面例子解釋過的,留白被用于突出品牌內(nèi)容、提升可讀性與易讀性、突顯極簡色彩時,展現(xiàn)出了強(qiáng)大的影響力。
俗話說“少即是多”,不論你怎么看,它的確適用于關(guān)于留白的一切觀點(diǎn)。廣義上講,網(wǎng)頁設(shè)計中的這種極簡處理方式,如今正越來越盛行,這項趨勢肯定能持續(xù)下去。
申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!