於細微處下功夫Web Design設計像藝術品般的網頁

有句話說:精品是用細節堆起來的。

深以為然。在網站設計中,處理好越多的網頁設計細節,給用戶的體驗就越完善。這段時間在設計潮汕風情網的圖庫欄目(http://newsbook.cn/dedicatedservers.html),越發體會到處理好細節的重要性。

其實網頁設計中涉及到的細節問題,歸納起來也不回太多,下面試列舉出我處理過的一些細節:

鏈結狀態處理。超連結有四種狀態,包括link,visited,hover,active,給這四種狀態設計不同的樣式,可以幫助用戶方便的區分鏈結與普通文本、訪問過的、每訪問過的等鏈結狀態。有一種連接樣式我非產讚賞,就是給外部網站設計鏈結加上一個小圖示,指示“這是一個連接到站外的鏈結”。

圖片縮放。圖片在網頁中的運用佔有較大的比例。在頁面上顯示圖片,有時圖片會超出容器的規格,如果不加限制,就會破壞整個頁面的結構和美觀。服務器租用此時最好的處理辦法是控制圖片的規格,讓圖片上傳之際就被壓縮成合適的規格。另外一種替代方案就是運用JavaScript進行同比例縮放,這樣可以避免圖片變形,但是載入速度可能會受影響(圖片本身太大)。至於使用css設置一個規定的長度和寬度,雖然也能避免破壞頁面佈局和美觀,但是會造成網頁寄存圖片變形。

文本長度限制。伺服器托管文章的標題太長了,也需要處理好。最好的處理方法自然是通過編輯、作者自己寫好適合網頁顯示規格的長度的標題。伺服器租用比如說新浪、網頁等大網站的首頁新聞標題,大多數使用這種方式。他們的網頁可謂字字千金,自然只有通過編輯、作者的仔細斟酌,寫出既能表達完整意思,又符合字數長度的題目。其次是通過程式截取。程式截取對於中文來說比較好處理,對英文就有點有心無力了,因為英文字母是不等寬的,並且截取出來的標題,可能包含有不完整的單詞。最後一種方式是通過css隱藏超出規格部分文字。這跟使用程式截取的效果是一樣的,不過實現的方式不一樣罷了。

輸入檢驗。給用戶輸入、提交資料的表單,虛擬主機根據各部分資料的要求設計靈活的檢驗機制,並且能在適當的時候給用戶提示,讓用戶方便的瞭解他需要輸入什麼資料,有什麼限制。這既可以保證資料的準確性,又能為用戶節省時間。

暫時能夠想到的就這麼多。當然還有更多的細節等待我們去瞭解、處理。我常跟設計的同事說,有一些網站,我們使用起來覺得很方便,得心應手,但是說不出來為什麼,其實就是他處理好了很多不為我們瞭解的細節,於細微之處下功夫。這樣的網站已經超越的應用的範圍,它已經成為用戶體驗的精品,是一件藝術品。