俗話說(shuō)的好，細(xì)節(jié)能決定成敗。細(xì)節(jié)使得這個(gè)世界從平凡變得不平凡?？梢哉f(shuō)在共同設(shè)計(jì)一件物品時(shí)，同樣的規(guī)則也適應(yīng)于網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，愿意花費(fèi)時(shí)間專注于細(xì)節(jié)的網(wǎng)頁(yè)設(shè)計(jì)師能夠獲得擁有更多價(jià)值的設(shè)計(jì)。這里的關(guān)鍵詞就是價(jià)值。我們無(wú)法保證建立網(wǎng)站所花費(fèi)的時(shí)間和其結(jié)果所帶來(lái)的價(jià)值之間有直接的關(guān)系，總有一些細(xì)節(jié)比其他更加重要，關(guān)鍵是要能夠確定哪些細(xì)節(jié)更具有影響力。

進(jìn)一步觀察

我覺(jué)得Photoshop最令人舒服的是當(dāng)我將圖片放大到500%甚至更大時(shí)，它看上去就像在家一樣舒服。我們來(lái)仔細(xì)研究一些相當(dāng)成功的用細(xì)微細(xì)節(jié)引導(dǎo)用戶體驗(yàn)方面圖片吧。

以Concentrate 網(wǎng)站為例，它看起來(lái)很適合我們初次集中精力來(lái)欣賞。從一個(gè)高層次的視角開(kāi)始，我們可以看到Concentrate網(wǎng)站的使用了一個(gè)富有創(chuàng)意視覺(jué)技巧。

除了這罐橙汁，我們看到一個(gè)橙色為主題的調(diào)色板和背景，很好的模擬了真實(shí)的橙子的果肉口感。進(jìn)一步研究，我們發(fā)現(xiàn)它使用了CSS3為文本增加一些陰影來(lái)增加與背景的對(duì)比。為了真正的欣賞細(xì)節(jié)，我們需要在進(jìn)一步的研究。

像素級(jí)完善

真正的細(xì)節(jié)應(yīng)用在像素級(jí)。我們?cè)賮?lái)看Concentrate的快捷按鈕周圍，靠近網(wǎng)頁(yè)布局頂端的部分。首先，按鈕背后的陰影將頁(yè)面上的這部分突出出來(lái)。該區(qū)域頂端和底部的兩個(gè)簡(jiǎn)單的單像素線是一個(gè)簡(jiǎn)潔的設(shè)計(jì)方式，它使得這個(gè)區(qū)域在視覺(jué)效果上更明顯的區(qū)別于頁(yè)面上的其他元素。

其中的一個(gè)單像素線條更引人注意，這是因?yàn)樗褂昧肆脸壬Ｋ鼮閮烧咧g的陰影和背景提供了對(duì)比，但是真正起作用的卻是第二個(gè)暗橙色的線條。兩個(gè)線條相互配合起來(lái)封鎖了這個(gè)頂部區(qū)域。

差異

當(dāng)這個(gè)頁(yè)面不再包括這些線條的設(shè)計(jì)的時(shí)候，差異就能最好的表現(xiàn)出來(lái)。下面，我將移去這些線條來(lái)向大家展示兩個(gè)像素能夠帶來(lái)怎樣的不同。

微妙的陰影

陰影效果對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)已經(jīng)不陌生了。許多網(wǎng)站很早就開(kāi)始使用它們并且經(jīng)常模擬平面深度及二維介質(zhì)。陰影和高亮可以微妙但強(qiáng)有力地改善我們網(wǎng)站的用戶體驗(yàn)。

我們?cè)谠O(shè)計(jì)中采用CSS3，它可以帶來(lái)的宏偉的差異讓我們很容易為之興奮不已。而對(duì)于我來(lái)說(shuō)，真正值得興奮是有多少細(xì)節(jié)工作可以從圖片處理軟件轉(zhuǎn)移到我們網(wǎng)站的代碼上去。

還是來(lái)看這個(gè)Concentrate網(wǎng)站，它是一個(gè)很不錯(cuò)的例子，使用巧妙而有效地使用文字陰影效果使網(wǎng)站內(nèi)容更容易閱讀。這里以兩種方式使用了CSS3的text-shadow屬性。首先紅色的標(biāo)題在與背景顏色相近的情況下，被賦予淡淡的陰影以產(chǎn)生內(nèi)嵌式的效果?；卧诙温浜竺婧?jiǎn)單地給白色一點(diǎn)發(fā)射效果。

差異

比較上面的截圖以及同樣的頁(yè)面在IE8(不支持text-shadow屬性)下渲染的效果，我們就能發(fā)現(xiàn)它更難看得很多。

值得指出的是這個(gè)網(wǎng)站賣的是Mac軟件，所以自然地不那么重視IE用戶的體驗(yàn)了。

與網(wǎng)站細(xì)節(jié)相伴的工作的美好在于通過(guò)我們共同的努力一步一步邁進(jìn)，我們?nèi)匀豢梢詾槲覀兊挠脩籼峁┎糠謨r(jià)值，而不需要疏遠(yuǎn)那些使用過(guò)時(shí)的瀏覽器的用戶。關(guān)鍵之處在于我們要使用所有這些技術(shù)來(lái)為已經(jīng)很可靠的網(wǎng)頁(yè)設(shè)計(jì)增加價(jià)值，沒(méi)有一個(gè)基本的可靠的設(shè)計(jì)而空談學(xué)習(xí)這些技術(shù)就是本末倒置。