淺談網(wǎng)頁設(shè)計(jì)的細(xì)節(jié)創(chuàng)造價(jià)值（二）
2011-09-03 文章來源: 和君設(shè)計(jì)
像素級完善
真正的細(xì)節(jié)應(yīng)用在像素級。我們再來看Concentrate的快捷按鈕周圍，靠近網(wǎng)頁布局頂端的部分。首先，按鈕背后的陰影將頁面上的這部分突出出來。該區(qū)域頂端和底部的兩個(gè)簡單的單像素線是一個(gè)簡潔的設(shè)計(jì)方式，它使得這個(gè)區(qū)域在視覺效果上更明顯的區(qū)別于頁面上的其他元素。
其中的一個(gè)單像素線條更引人注意，這是因?yàn)樗褂昧肆脸壬Ｋ鼮閮烧咧g的陰影和背景提供了對比，但是真正起作用的卻是第二個(gè)暗橙色的線條。兩個(gè)線條相互配合起來封鎖了這個(gè)頂部區(qū)域。
差異
當(dāng)這個(gè)頁面不再包括這些線條的設(shè)計(jì)的時(shí)候，差異就能最好的表現(xiàn)出來。下面，我將移去這些線條來向大家展示兩個(gè)像素能夠帶來怎樣的不同。
微妙的陰影
陰影效果對于網(wǎng)頁設(shè)計(jì)者來說已經(jīng)不陌生了。許多網(wǎng)站很早就開始使用它們并且經(jīng)常模擬平面深度及二維介質(zhì)。陰影和高亮可以微妙但強(qiáng)有力地改善我們網(wǎng)站的用戶體驗(yàn)。
我們在設(shè)計(jì)中采用CSS3，它可以帶來的宏偉的差異讓我們很容易為之興奮不已。而對于我來說，真正值得興奮是有多少細(xì)節(jié)工作可以從圖片處理軟件轉(zhuǎn)移到我們網(wǎng)站的代碼上去。
還是來看這個(gè)Concentrate網(wǎng)站，它是一個(gè)很不錯(cuò)的例子，使用巧妙而有效地使用文字陰影效果使網(wǎng)站內(nèi)容更容易閱讀。這里以兩種方式使用了CSS3 的text-shadow屬性。首先紅色的標(biāo)題在與背景顏色相近的情況下，被賦予淡淡的陰影以產(chǎn)生內(nèi)嵌式的效果?；卧诙温浜竺婧唵蔚亟o白色一點(diǎn)發(fā)射效果。
差異
比較上面的截圖以及同樣的頁面在IE8(不支持text-shadow屬性)下渲染的效果，我們就能發(fā)現(xiàn)它更難看得很多。
值得指出的是這個(gè)網(wǎng)站賣的是Mac軟件，所以自然地不那么重視IE用戶的體驗(yàn)了。
