淺談網(wǎng)頁設(shè)計的細節(jié)創(chuàng)造價值(三）
2011-09-03 文章來源: 和君設(shè)計
導(dǎo)航細微差別
除了增強易讀性和強調(diào)可能的網(wǎng)站操作，細節(jié)對網(wǎng)站導(dǎo)航也有很大的幫助。任何網(wǎng)頁最重要的部分之一就是如何將用戶導(dǎo)航到另一個頁面。畢竟鏈接是起初使得網(wǎng)頁之所以稱之為網(wǎng)頁的核心，所以為什么不多花一點點時間在適航性上呢?舉個例子，我們來看 Lipperhey 站點。
除了為導(dǎo)航的活動狀態(tài)選擇好的顏色以外，我們發(fā)現(xiàn)它的設(shè)計為網(wǎng)站的主導(dǎo)航欄添加了一些用趣的細節(jié)。
Home按鈕由于一些顏色變化之外的原因而很顯眼。首先我們可以看到它從導(dǎo)航欄下沉了幾個像素。其次，按鈕背后被加上了陰影并且對透明度做了輕微的調(diào)整。這兩個細節(jié)一起為這個鏈接賦予了附加維度的感覺，指示了它的重要性及激活狀態(tài)。
差異
再看一下沒有上面提到的細節(jié)的導(dǎo)航，我們發(fā)現(xiàn)很多令人興奮的東西都沒了并且我們的激活鏈接會有完全不同的樣子和感覺。
細節(jié)更進一步
我們研究了一種運用CSS3的一些新功能來輔助我們設(shè)計的方法(text-shadow)。但CSS3的強大遠不只是陰影。CSS3動畫，表現(xiàn)為transform和transition的屬性，給我們的細節(jié)工作增加了額外的工具。
只要使用得當，CSS3動畫為我們的網(wǎng)頁元素添加高效的動畫效果，而不需要借助Flash或JavaScript。在細節(jié)方面，動畫允許我們在各種輸入情況向用戶提供流暢的反饋。例如為鏈接的hover狀態(tài)或按鈕點擊添加過渡動畫，可以告訴用戶他們鼠標正懸停在(或觸摸，對于觸屏移動設(shè)備)一個活動的元素上面。
與網(wǎng)站細節(jié)相伴的工作的美好在于通過進一步努力，我們?nèi)匀豢梢詾槲覀兊挠脩籼峁┎糠謨r值，而不需要疏遠那些使用過時的瀏覽器的用戶。關(guān)鍵之處在于我們要使用所有這些技術(shù)來為已經(jīng)很可靠的網(wǎng)頁設(shè)計增加價值，沒有一個基本的可靠的設(shè)計而空談學(xué)習(xí)這些技術(shù)就是本末倒置。
網(wǎng)站還能在哪些細節(jié)方面改進來增加它的價值呢?你做過的項目還成功地使用過哪些類型的細節(jié)技術(shù)?
