細(xì)節(jié)使得這個(gè)世界從平凡變得不平凡。

一輛豪華汽車與傳統(tǒng)汽車擁有同樣數(shù)量的車輪、座位、門窗，但是使得它在競爭中脫穎而出的卻是花費(fèi)在細(xì)節(jié)上的時(shí)間。加熱真皮座椅，一按即啟動(dòng)引擎，無鑰車門開關(guān)，自動(dòng)泊車系統(tǒng)，豐富的數(shù)字電臺(tái)等等使得它成為一輛昂貴的新型車。

同樣的規(guī)則也適用于網(wǎng)頁設(shè)計(jì)。愿意花費(fèi)時(shí)間專注于細(xì)節(jié)的網(wǎng)頁設(shè)計(jì)師能夠獲得擁有更多價(jià)值的設(shè)計(jì)。這里的關(guān)鍵詞就是價(jià)值。我們無法保證建立網(wǎng)站(天府星空提供專業(yè)

增加價(jià)值的細(xì)節(jié)

這一類型的細(xì)節(jié)是我們?cè)敢庠趯徝缹用嬷�外花費(fèi)額外時(shí)間以改進(jìn)我們工作的細(xì)節(jié)。我們希望專注于可以深入改變用戶體驗(yàn)的視覺調(diào)整，例如用戶對(duì)該網(wǎng)站(天府星空提供專業(yè)

一般的沒有建站經(jīng)驗(yàn)的網(wǎng)站(天府星空提供專業(yè)

那么一個(gè)設(shè)計(jì)細(xì)節(jié)到底如何為網(wǎng)站(天府星空提供專業(yè)

這些差異到底是什么？

進(jìn)一步觀察

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

以Concentrate 網(wǎng)站(天府星空提供專業(yè)

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

像素級(jí)完善

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

其中的一個(gè)單像素線條更引人注意，這是因?yàn)樗�使用了亮橙色。它為兩者之間的陰影和背景提供了對(duì)比，但是真正起作用的卻是第二個(gè)暗橙色的線條。兩個(gè)線條相互配合起來封鎖了這個(gè)頂部區(qū)域。

差異

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

微妙的陰影

陰影效果對(duì)于網(wǎng)頁設(shè)計(jì)者來說已經(jīng)不陌生了。許多網(wǎng)站(天府星空提供專業(yè)

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

還是來看這個(gè)Concentrate網(wǎng)站(天府星空提供專業(yè)

差異

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

值得指出的是這個(gè)網(wǎng)站(天府星空提供專業(yè)

導(dǎo)航細(xì)微差別

除了增強(qiáng)易讀性和強(qiáng)調(diào)可能的網(wǎng)站(天府星空提供專業(yè)

除了為導(dǎo)航的活動(dòng)狀態(tài)選擇好的顏色以外，我們發(fā)現(xiàn)它的設(shè)計(jì)為網(wǎng)站(天府星空提供專業(yè)Home按鈕由于一些顏色變化之外的原因而很顯眼。首先我們可以看到它從導(dǎo)航欄下沉了幾個(gè)像素。其次，按鈕背后被加上了陰影并且對(duì)透明度做了輕微的調(diào)整。這兩個(gè)細(xì)節(jié)一起為這個(gè)鏈接賦予了附加維度的感覺，指示了它的重要性及激活狀態(tài)。

差異

再看一下沒有上面提到的細(xì)節(jié)的導(dǎo)航，我們發(fā)現(xiàn)很多令人興奮的東西都沒了并且我們的激活鏈接會(huì)有完全不同的樣子和感覺。

細(xì)節(jié)更進(jìn)一步

我們研究了一種運(yùn)用CSS3的一些新功能來輔助我們?cè)O(shè)計(jì)的方法(text-shadow)。但CSS3的強(qiáng)大遠(yuǎn)不只是陰影。CSS3動(dòng)畫，表現(xiàn)為transform和transition的屬性，給我們的細(xì)節(jié)工作增加了額外的工具。

只要使用得當(dāng)，CSS3動(dòng)畫為我們的網(wǎng)頁元素添加高效的動(dòng)畫效果，而不需要借助Flash或JavaScript。在細(xì)節(jié)方面，動(dòng)畫允許我們?cè)诟鞣N輸入情況向用戶提供流暢的反饋。例如為鏈接的hover狀態(tài)或按鈕點(diǎn)擊添加過渡動(dòng)畫，可以告訴用戶他們鼠標(biāo)正懸停在（或觸摸，對(duì)于觸屏移動(dòng)設(shè)備）一個(gè)活動(dòng)的元素上面。

與網(wǎng)站(天府星空提供專業(yè)

網(wǎng)站(天府星空提供專業(yè)