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

2010-03-22 10:50?來源 

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

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

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

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

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

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

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

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

編輯：