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