于細(xì)微處下功夫 設(shè)計(jì)像藝術(shù)品般的網(wǎng)頁

2010-03-22 10:50?來源 

有句話說：精品是用細(xì)節(jié)堆起來的。

　　深以為然。在網(wǎng)站設(shè)計(jì)中，處理好越多的細(xì)節(jié)，給用戶的體驗(yàn)就越完善。這段時間在設(shè)計(jì)潮汕風(fēng)情網(wǎng)的圖庫欄目(http://image.csfqw.com)，越發(fā)體會到處理好細(xì)節(jié)的重要性。

　　其實(shí)網(wǎng)頁設(shè)計(jì)中涉及到的細(xì)節(jié)問題，歸納起來也不回太多，下面試列舉出我處理過的一些細(xì)節(jié)：

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

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

　　文本長度限制。文章的標(biāo)題太長了，也需要處理好。最好的處理方法自然是通過編輯、作者自己寫好適合網(wǎng)頁顯示規(guī)格的長度的標(biāo)題。比如說新浪、網(wǎng)頁等大網(wǎng)站的首頁新聞標(biāo)題，大多數(shù)使用這種方式。他們的網(wǎng)頁可謂字字千金，自然只有通過編輯、作者的仔細(xì)斟酌，寫出既能表達(dá)完整意思，又符合字?jǐn)?shù)長度的題目。其次是通過程序截取。程序截取對于中文來說比較好處理，對英文就有點(diǎn)有心無力了，因?yàn)橛⑽淖帜甘遣坏葘挼模⑶医厝〕鰜淼臉?biāo)題，可能包含有不完整的單詞。最后一種方式是通過css隱藏超出規(guī)格部分文字。這跟使用程序截取的效果是一樣的，不過實(shí)現(xiàn)的方式不一樣罷了。

　　輸入檢驗(yàn)。給用戶輸入、提交數(shù)據(jù)的表單，根據(jù)各部分?jǐn)?shù)據(jù)的要求設(shè)計(jì)靈活的檢驗(yàn)機(jī)制，并且能在適當(dāng)?shù)臅r候給用戶提示，讓用戶方便的了解他需要輸入什么數(shù)據(jù)，有什么限制。這既可以保證數(shù)據(jù)的準(zhǔn)確性，又能為用戶節(jié)省時間。

　　暫時能夠想到的就這么多。當(dāng)然還有更多的細(xì)節(jié)等待我們?nèi)チ私狻⑻幚怼Ｎ页８O(shè)計(jì)的同事說，有一些網(wǎng)站，我們使用起來覺得很方便，得心應(yīng)手，但是說不出來為什么，其實(shí)就是他處理好了很多不為我們了解的細(xì)節(jié)，于細(xì)微之處下功夫。這樣的網(wǎng)站已經(jīng)超越的應(yīng)用的范圍，它已經(jīng)成為用戶體驗(yàn)的精品，是一件藝術(shù)品

編輯：