留白不僅是空白！99%的人在做網(wǎng)站設(shè)計(jì)時都用錯了留白！

時間：2023-09-05 10:06:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-05 10:06:01 來源：網(wǎng)站運(yùn)營

留白不僅是空白！99%的人在做網(wǎng)站設(shè)計(jì)時都用錯了留白！：一提起留白，很多人都覺得SO EASY，這留白誰不會呢？留出一塊白色，騰出空間不就是了么？




在回答這個問題之前，先來看看以下4個案例，你覺得哪個案例才是運(yùn)用了留白的手法呢？




A圖：







B圖：







C圖：







D圖：







正確答案是……全選，以上4個案例都有留白的應(yīng)用。如果對“留白”只是望文生義，認(rèn)為留白就是留出白色，就很有可能單選A誤答了。




事實(shí)上，留白并不能從字面意思地進(jìn)行解讀，它不局限于白色。所謂留白，指的是“沒有被使用的空間”，無物，無信息，無裝飾，處于空白的狀態(tài)，所以留白也被稱作“負(fù)空間”，不僅是一片白，也可以是任意一種顏色，甚至連非純色的紋理都能算作留白。




由此可見，留白指代的含義其實(shí)遠(yuǎn)比我們想象中的更廣泛，也有多種不同形式的體現(xiàn)，以下結(jié)合案例總結(jié)出幾種常見的的留白應(yīng)用。




1、為視覺主體增加留白




以下是來自“凡科建站”的服裝行業(yè)網(wǎng)站模板，你的視覺很容易就集中到模特身上，除了因?yàn)槟Ｌ氐呐渖容^鮮艷搶鏡，環(huán)繞模特周圍的留白也起到了很好的作用，花瓣剪影的裝飾也是點(diǎn)到即止。沒有了多余的東西分散了你的注意力，視覺主體自然就突顯出來了。







2、元素與元素間的縫隙




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







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







3、放大圖片中的無裝飾部分




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










4、文字間距的調(diào)節(jié)




文字間的行距、字距也屬于很重要的一種留白元素。像以下這個來自“凡科建站”的蔬果行業(yè)網(wǎng)站模板，中間的文案采用了不同的字體、顏色、大小、間距拉開了對比，讓文案變得更容易閱讀。







5、增加邊框




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







6、背景虛化




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







從以上的案例，我們不難看出留白應(yīng)用在網(wǎng)站設(shè)計(jì)的好處。




1、平衡頁面布局




像以下這個來自“凡科建站”的餐飲行業(yè)網(wǎng)站模板，從BANNER到通欄，都有充分而均衡的留白，顯得寬敞而舒適。







2、讓版塊層次區(qū)分得更鮮明




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







3、焦點(diǎn)元素的突出呈現(xiàn)




這個相信大家都深有體會了，再用以下兩幅簡單的圖片來舉例子，和A圖相比，B圖肯定更容易讓你抓準(zhǔn)重點(diǎn)的心型元素，這就是留白的功勞。




A圖：







B圖：







4、緩解用戶的閱讀疲倦




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







我們總是在想，要把設(shè)計(jì)做得有多么的“大包圍”，有多么的鶴立雞群，有多么的另類怪誕，才能讓閱物無數(shù)的用戶停下來多看一眼，事實(shí)上都是在鉆牛角尖。舍棄繁雜的留白并不是削弱存在感的做法，相反，其實(shí)是突出美感的妙方。少即是多，無物勝有物，正因?yàn)槭呛唵蔚臇|西，反而能讓用戶一眼就看出你的美。




從今天開始，試試留白，不僅是在設(shè)計(jì)上，生活上也給自己留白，騰出空間，允許自己發(fā)呆，允許自己浪費(fèi)時間。不用把所有的格子都填滿，人生也可以很圓滿。