營(yíng)銷網(wǎng)站建設(shè)
全網(wǎng)營(yíng)銷網(wǎng)站
高端網(wǎng)站建設(shè)
商城網(wǎng)站建設(shè)
外貿(mào)網(wǎng)站建設(shè)
小程序開(kāi)發(fā)
區(qū)塊鏈開(kāi)發(fā)
物聯(lián)網(wǎng)項(xiàng)目開(kāi)發(fā)
定制app開(kāi)發(fā)
在線教育網(wǎng)站
速成網(wǎng)站建設(shè)
服裝網(wǎng)站建設(shè)
餐飲網(wǎng)站建設(shè)
珠寶首飾網(wǎng)站
機(jī)械制造網(wǎng)站
文化旅游網(wǎng)站
家裝建材網(wǎng)站
美容化妝品網(wǎng)站
數(shù)碼產(chǎn)品網(wǎng)站
模板案例庫(kù)
文章編輯:網(wǎng)站建設(shè) 文章來(lái)源:建站行業(yè)資訊 瀏覽量:次
在回答這個(gè)問(wèn)題之前,先來(lái)看看以下 4 個(gè)案例,你覺(jué)得哪個(gè)案例才是運(yùn)用了留白的手法呢?
A圖:

B圖:

C圖:

D圖:

正確答案是……全選,以上 4 個(gè)案例都有留白的應(yīng)用。如果對(duì)“留白”只是望文生義,認(rèn)為留白就是留出白色,就很有可能單選A誤答了。
由此可見(jiàn),留白指代的含義其實(shí)遠(yuǎn)比我們想象中的更廣泛,也有多種不同形式的體現(xiàn),以下結(jié)合案例總結(jié)出幾種常見(jiàn)的的留白應(yīng)用。事實(shí)上,留白并不能從字面意思地進(jìn)行解讀,它不局限于白色。所謂留白,指的是“沒(méi)有被使用的空間”,無(wú)物,無(wú)信息,無(wú)裝飾,處于空白的狀態(tài),所以留白也被稱作“負(fù)空間”,不僅是一片白,也可以是任意一種顏色,甚至連非純色的紋理都能算作留白。
1、為視覺(jué)主體增加留白
以下是來(lái)自“福田建站”的服裝行業(yè)網(wǎng)站模板,你的視覺(jué)很容易就集中到模特身上,除了因?yàn)槟L氐呐渖容^鮮艷搶鏡,環(huán)繞模特周圍的留白也起到了很好的作用,花瓣剪影的裝飾也是點(diǎn)到即止。沒(méi)有了多余的東西分散了你的注意力,視覺(jué)主體自然就突顯出來(lái)了。

2、元素與元素間的縫隙
留白,是不是就只能保留主體,其他一律刪去?其實(shí)不一定,像以下這個(gè)來(lái)自“福田建站”的飾品行業(yè)網(wǎng)站模板,雖然內(nèi)含元素很多,卻不會(huì)給你一種很擁擠很凌亂的感覺(jué),因?yàn)樵嘏c元素之間都留有了適度的距離,呈現(xiàn)出一種呼吸感。

元素的多與少并不影響留白的應(yīng)用,關(guān)鍵是看你想傳達(dá)怎樣的調(diào)性。以上的網(wǎng)站我們?cè)倌昧硪环鵅ANNER圖對(duì)比,多元素的留白顯得更活潑親和,而少元素的留白則顯得更大氣逼格,兩種設(shè)計(jì)并沒(méi)有優(yōu)劣之分,抓準(zhǔn)了產(chǎn)品定位和目標(biāo)人群就是對(duì)的設(shè)計(jì)。

3、放大圖片中的無(wú)裝飾部分
很多時(shí)候我們會(huì)需要在圖片上插入文字,當(dāng)圖片沒(méi)有足夠的適合排版文字的空間,而你又不想把字體縮小,那么可以把圖片中的無(wú)裝飾部分放大。像以下這個(gè)例子,原圖的近景和遠(yuǎn)景接近了五五比例,近景部分明顯不太適合排版文字,所以我們放大圖片的遠(yuǎn)景部分,這樣一來(lái)就能順利地進(jìn)行文字排版了,留白給了文字理想的展現(xiàn)空間。


4、文字間距的調(diào)節(jié)
文字間的行距、字距也屬于很重要的一種留白元素。像以下這個(gè)來(lái)自“福田建站”的蔬果行業(yè)網(wǎng)站模板,中間的文案采用了不同的字體、顏色、大小、間距拉開(kāi)了對(duì)比,讓文案變得更容易閱讀。

5、增加邊框
增加邊框,劃分出留白空間。這種留白形式常用于網(wǎng)站BANNER,在居中位置劃出邊框圍繞文本,諸如以下這個(gè)來(lái)自“深圳福田建站”的日用品行業(yè)網(wǎng)站模板,邊框配以卡通元素的點(diǎn)綴,小清新的感覺(jué)立馬出來(lái)了。

對(duì)!你沒(méi)看錯(cuò)!過(guò)度模糊的圖片也是一種留白,雖然圖片里含有信息元素,但由于被虛化得看不真切,相當(dāng)于被藏起來(lái)了,所以也能看作是留白。背景虛化在攝影上用得尤為廣泛,像以下這幅圖片,將景深變淺,視覺(jué)聚焦在帆船瓶子,也讓畫面看起來(lái)通透純凈。
6、背景虛化

從以上的案例,我們不難看出留白應(yīng)用在網(wǎng)站設(shè)計(jì)的好處。
1、平衡頁(yè)面布局
像以下這個(gè)來(lái)自“福田網(wǎng)站建設(shè)”的餐飲行業(yè)網(wǎng)站模板,從BANNER到通欄,都有充分而均衡的留白,顯得寬敞而舒適。

2、讓版塊層次區(qū)分得更鮮明
像以下這個(gè)來(lái)自“福田建站”的禮品行業(yè)網(wǎng)站模板,我們很容易就區(qū)分出“關(guān)于我們”和“新品上架”這兩個(gè)不同的版塊,留白在這里就充當(dāng)了一條分割線,讓不同版塊之間的層次更鮮明易見(jiàn),不會(huì)讓內(nèi)容糅雜在一起。

3、焦點(diǎn)元素的突出呈現(xiàn)
這個(gè)相信大家都深有體會(huì)了,再用以下兩幅簡(jiǎn)單的圖片來(lái)舉例子,和A圖相比,B圖肯定更容易讓你抓準(zhǔn)重點(diǎn)的心型元素,這就是留白的功勞。
A圖:

B圖:

4、緩解用戶的閱讀疲倦
這對(duì)于信息量大的網(wǎng)站來(lái)說(shuō)特別重要,密集的內(nèi)容顯得冗長(zhǎng)難讀,會(huì)讓用戶感到透不過(guò)氣來(lái),從而放棄了瀏覽。所以要留白,要有行距、間距、邊寬,給予用戶“喘息”的機(jī)會(huì)。以下兩種文本排版,相信右圖會(huì)讓你更有閱讀的欲望。

我們總是在想,要把設(shè)計(jì)做得有多么的“大包圍”,有多么的鶴立雞群,有多么的另類怪誕,才能讓閱物無(wú)數(shù)的用戶停下來(lái)多看一眼,事實(shí)上都是在鉆牛角尖。舍棄繁雜的留白并不是削弱存在感的做法,相反,其實(shí)是突出美感的妙方。少即是多,無(wú)物勝有物,正因?yàn)槭呛?jiǎn)單的東西,反而能讓用戶一眼就看出你的美。
從今天開(kāi)始,試試留白,不僅是在設(shè)計(jì)上,生活上也給自己留白,騰出空間,允許自己發(fā)呆,允許自己浪費(fèi)時(shí)間。不用把所有的格子都填滿,人生也可以很圓滿。深圳網(wǎng)站制作公司博納網(wǎng)絡(luò)編輯整理。
[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息,此類稿件不代表本網(wǎng)觀點(diǎn),本網(wǎng)不承擔(dān)此類稿件侵權(quán)行為的連帶責(zé)任。故此,如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán),請(qǐng)您的相關(guān)內(nèi)容發(fā)至此郵箱【qin@198bona.com 】,我們?cè)诖_認(rèn)后,會(huì)立即刪除,保證您的版權(quán)。
技術(shù)咨詢
價(jià)格咨詢
建議投訴
0755-82538016
關(guān)閉窗口