淺談網(wǎng)頁設(shè)計(jì)的細(xì)節(jié)創(chuàng)造價(jià)值(三）
2011-09-03 文章來源: 和君設(shè)計(jì)
導(dǎo)航細(xì)微差別
除了增強(qiáng)易讀性和強(qiáng)調(diào)可能的網(wǎng)站操作，細(xì)節(jié)對(duì)網(wǎng)站導(dǎo)航也有很大的幫助。任何網(wǎng)頁最重要的部分之一就是如何將用戶導(dǎo)航到另一個(gè)頁面。畢竟鏈接是起初使得網(wǎng)頁之所以稱之為網(wǎng)頁的核心，所以為什么不多花一點(diǎn)點(diǎn)時(shí)間在適航性上呢?舉個(gè)例子，我們來看 Lipperhey 站點(diǎn)。
除了為導(dǎo)航的活動(dòng)狀態(tài)選擇好的顏色以外，我們發(fā)現(xiàn)它的設(shè)計(jì)為網(wǎng)站的主導(dǎo)航欄添加了一些用趣的細(xì)節(jié)。
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)站細(xì)節(jié)相伴的工作的美好在于通過進(jìn)一步努力，我們?nèi)匀豢梢詾槲覀兊挠脩籼峁┎糠謨r(jià)值，而不需要疏遠(yuǎn)那些使用過時(shí)的瀏覽器的用戶。關(guān)鍵之處在于我們要使用所有這些技術(shù)來為已經(jīng)很可靠的網(wǎng)頁設(shè)計(jì)增加價(jià)值，沒有一個(gè)基本的可靠的設(shè)計(jì)而空談學(xué)習(xí)這些技術(shù)就是本末倒置。
網(wǎng)站還能在哪些細(xì)節(jié)方面改進(jìn)來增加它的價(jià)值呢?你做過的項(xiàng)目還成功地使用過哪些類型的細(xì)節(jié)技術(shù)?
