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