提升網(wǎng)頁(yè)和博客設(shè)計(jì)品質(zhì)的一些實(shí)例和技巧

“高品質(zhì)”是所有人追求的目標(biāo)，在網(wǎng)頁(yè)設(shè)計(jì)的世界中也不例外。不過(guò)何為“品質(zhì)”，如何判斷一項(xiàng)設(shè)計(jì)的品質(zhì)是好還是壞？筆者恰好有一套找出網(wǎng)頁(yè)設(shè)計(jì)中品質(zhì)焦點(diǎn)的方法。一旦你了解到如何判斷一項(xiàng)高品質(zhì)的設(shè)計(jì)究竟好在哪里，你就掌握了讓自己的設(shè)計(jì)更趨完美的大量技巧。成都網(wǎng)頁(yè)制作公司

接下來(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ù)，從而有效地利用留白滿(mǎn)足設(shè)計(jì)需求。這要靠個(gè)人感覺(jué)的，不過(guò)都能從實(shí)踐中鍛煉出來(lái)。

使用網(wǎng)格輔助設(shè)計(jì)

利用網(wǎng)格當(dāng)然能幫助你理解元素之間的空白。

不斷嘗試

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

留白并不是浪費(fèi)空間

空白并不總是等著你去填充的。

沒(méi)錯(cuò)，少就是多

與其用盡心思填滿(mǎn)某個(gè)區(qū)域，不如就把它留空，只保留至關(guān)重要的信息就好。

02. 像素級(jí)的完美

有一個(gè)方法能夠看出某人在完成一項(xiàng)網(wǎng)頁(yè)設(shè)計(jì)時(shí)是否真的用心了。有時(shí)候創(chuàng)造奇跡的就是一些小細(xì)節(jié)，一些別人幾乎無(wú)法察覺(jué)的細(xì)節(jié)。我所說(shuō)的“像素級(jí)的完 美”就是指在線條、邊緣和邊框描邊上仔細(xì)推敲。與其就用一條單一的線，不如多加一些細(xì)節(jié)。細(xì)節(jié)可以是細(xì)微的漸變，也完全可以只是一條1像素寬的細(xì)線（用作表現(xiàn)陰影或高光）。有了這些細(xì)節(jié)， 你的設(shè)計(jì)會(huì)大不一樣。有些設(shè)計(jì)師在這方面特擅長(zhǎng)： Collis Ta’eed， David Leggett 以及 Wolfgang Bartelme.

像素級(jí)完美細(xì)節(jié)的實(shí)例

Envato的細(xì)節(jié)鑒賞

下圖的Example 1 （例子1）中，綠色內(nèi)容框的邊緣有一條更亮的綠色線。而Example 2處，區(qū)塊內(nèi)邊緣有柔和的漸變陰影，而邊緣之上還有一像素的白色描邊。這做法非常聰明，用陰影來(lái)強(qiáng)調(diào)高光。后面的綠色區(qū)域有非常柔和細(xì)微的光影效果，有助于將注意力吸引到下面的白色區(qū)塊中那清新脆爽的細(xì)節(jié)上去。 盡管這種做法并不是總能讓設(shè)計(jì)看起來(lái)更加精致，不過(guò)它們的確能幫助你賦予設(shè)計(jì)以三維的真實(shí)感。于是設(shè)計(jì)元素就成了鑲嵌在頁(yè)面上的寶石，而不是平鋪在上面的一張毫無(wú)動(dòng)感的紙。

Tutorial9.net上的細(xì)節(jié)

David Leggett 對(duì)于如何制造 單像素頂邊條 有很深的理解。他最近重新設(shè)計(jì)的 tutorial9 集合了很多非常棒的像素化技巧。 Example 1 處你能看到，他是如何僅僅通過(guò)添加一條1像素的高光，而將導(dǎo)航標(biāo)簽變得更有質(zhì)感。Example 2 處使用的技巧則更多了。相機(jī)圖標(biāo)的投影，下方白色區(qū)域的陰影與高光，以及導(dǎo)航條上的1像素高光。

RedBrick Health上 按鈕和分割線上的完美像素級(jí)細(xì)節(jié)

這個(gè)漂亮的導(dǎo)航菜單，由Ryan Scherf 創(chuàng)造，是使用完美像素級(jí)細(xì)節(jié)提升設(shè)計(jì)品質(zhì)的絕佳實(shí)例。紅色按鈕有1像素的高亮，鏈接之間的分割線也有同等的品質(zhì)與細(xì)節(jié)。正如你所看到的，他沒(méi)有滿(mǎn)足于只用一條灰色線分割，Ryan還在下面添加了一條1像素寬的高光線，避免了設(shè)計(jì)看起來(lái)過(guò)于平坦。

完美像素級(jí)細(xì)節(jié)也適用于Grunge風(fēng)格： AvalonStar

譯注：Grunge風(fēng)格有“做舊”、“迷幻搖滾”、“做臟”等幾層意思在里面，算是平面藝術(shù)中的一個(gè)流派。

下面的例子是漂亮的AvalonStar：Distortion（扭曲）主題博客，有著極贊的grunge風(fēng)格。不過(guò)，即便是骯臟做舊的grunge風(fēng)，利用1像素高光也能創(chuàng)造大不同。下圖的Example 1 處，上面的棕色區(qū)域有一個(gè)漸變陰影，下面的綠色區(qū)塊的頂部則有著一條1像素高亮線。陰影與1像素線的結(jié)合，讓這些區(qū)塊顯得更為精致。