高品質(zhì)的網(wǎng)頁(yè)設(shè)計(jì):實(shí)例與技巧系列之一（留白）

接下來(lái)我會(huì)給大家列一些要點(diǎn)，并附上相應(yīng)的例子，與大家分享一下我在別人的網(wǎng)頁(yè)設(shè)計(jì)中尋找“高品質(zhì)”的過(guò)程。

01. 留白
在好的網(wǎng)頁(yè)設(shè)計(jì)中我最留意的是那些對(duì)設(shè)計(jì)元素之間留白的聰明運(yùn)用。留心不同內(nèi)容區(qū)塊之間的間距和排列方式，能讓你的設(shè)計(jì)的整體感官大不一樣，從而提升設(shè)計(jì)的品質(zhì)。

我覺(jué)得處理好留白的關(guān)鍵是從整體上感知設(shè)計(jì)元素。把設(shè)計(jì)稿縮小觀看會(huì)是個(gè)好辦法。

出色的留白處理的實(shí)例
Good.is
頁(yè)面整潔而有開(kāi)放感，全都得益于設(shè)計(jì)師對(duì)文字和圖像之間留白量的準(zhǔn)確把握。

Digital Mash
在大空白上展示的元素往往更具吸引力。Digital Mash的網(wǎng)站創(chuàng)造了極佳的親和力

Creatica Daily 的大量空白
優(yōu)秀的留白運(yùn)用又一次讓網(wǎng)頁(yè)內(nèi)容成為焦點(diǎn)。每篇文章中都有大量?jī)?nèi)容，不過(guò)該站點(diǎn)的設(shè)計(jì)師們并不憚?dòng)诮o這么多內(nèi)容之間填上大量留白。并不是說(shuō)你的文字不夠多，就不能用很多留白。

Postbox 上也有很多空白
仔細(xì)觀察Postbox的網(wǎng)站，你能看到邊緣處的留白應(yīng)該如何處理。它的方框邊緣有60像素的邊內(nèi)留白。聽(tīng)起來(lái)似乎挺大的，實(shí)際看起來(lái)效果卻好極了。

留白時(shí)的錯(cuò)誤
大家在設(shè)計(jì)留白時(shí)的最常見(jiàn)問(wèn)題就是各個(gè)區(qū)塊的內(nèi)容到邊緣距離太小。不論你的設(shè)計(jì)多么有風(fēng)格，如果你硬要把東西塞得緊緊的，這些風(fēng)格連同設(shè)計(jì)的品質(zhì)，就都流失了。

留白不夠的例子
我們已經(jīng)看到PostBox的網(wǎng)站那些大留白創(chuàng)造了多么動(dòng)人的效果，所以下面我們修改一下它的頁(yè)面，看看減少留白會(huì)是什么效果：

品質(zhì)感明顯下降了。留白的影響就有這么大。

高效控制留白的技巧
各種不同情況下，留白要求都不盡相同。你需要不斷訓(xùn)練自己，做到對(duì)留白所能帶來(lái)的改變時(shí)刻心中有數(shù)，從而有效地利用留白滿足設(shè)計(jì)需求。這要靠個(gè)人感覺(jué)的，不過(guò)都能從實(shí)踐中鍛煉出來(lái)。

使用網(wǎng)格輔助設(shè)計(jì)
利用網(wǎng)格當(dāng)然能幫助你理解元素之間的空白。

不斷嘗試
不斷嘗試—失敗—嘗試，直到找到最佳方案。

留白并不是浪費(fèi)空間
空白并不總是等著你去填充的。
沒(méi)錯(cuò)，少就是多
與其用盡心思填滿某個(gè)區(qū)域，不如就把它留空，只保留至關(guān)重要的信息就好。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com