導讀：本文的作者為一名資深的網(wǎng)頁(yè)設計師，作者論述了改進(jìn)網(wǎng)頁(yè)設計的7個(gè)要點(diǎn)，并配以成功的案例，圖文并茂。

1. 學(xué)好HTML和CSS編程

這條之所以成為第一條是因為它是網(wǎng)頁(yè)設計中最重要的部分。明白網(wǎng)頁(yè)是如何在瀏覽器中渲染的可以防止你做出不合理的設計，比如那些無(wú)法用網(wǎng)頁(yè)實(shí)現的設計。要保持與時(shí)俱進(jìn)，弄清楚現什么效果可以用現在的CSS技術(shù)實(shí)現，什么效果不可以。

使用CSS3最新技術(shù)設計的經(jīng)典案例

Atebits（http://www.atebits.com/）在網(wǎng)頁(yè)文本中使用了文本陰影，這樣就不需要使用圖片了。它還使用了-webkit-transform和-webkit-transition來(lái)向這三個(gè)圖標加入了一些動(dòng)畫(huà)，不過(guò)這些效果只有在支持webkit的瀏覽器中才能看到，比如Chorme和Safari。

Elliot Jay Stocks（http://elliotjaystocks.com/）使用了一種叫做@font-face的CSS3方法來(lái)讓瀏覽器下載特定的字體，這就免去了使用圖片的麻煩。

2. 注重細節

好的設計和偉大設計之間的距離在于是否做好細節。

優(yōu)秀設計細節的例子

Metalab（http://metalabdesign.com/）很好的混合了著(zhù)色（Shading）、漸變和陰影，為網(wǎng)頁(yè)增加了額外的細節。

We Follow（http://wefollow.com/）巧妙的使用了漸變和陰影，為其用戶(hù)界面添加了很好的細節。

3. 善于使用留白

世界上最痛苦的事情莫過(guò)于當你想閱讀一些東西卻發(fā)現頁(yè)面上各種元素的旁邊充滿(mǎn)了文字，頁(yè)面設計者這么做的目的僅僅是想要在頁(yè)面狹小的控件里放下更多的信息，但這只能給別人帶來(lái)一種痛苦的體驗。合理的使用留白可以給頁(yè)面中的元素以呼吸的空間，減少閱讀者眼鏡的壓力，從而讓用戶(hù)有一種愉快的瀏覽體驗。

合理使用留白的例子

Soccernet（http://soccernet.espn.go.com/news/story?id=657760sec=transferscc=5739）在他們的文章頁(yè)面中很好的使用了留白，你可以看出文字都離其它元素有一定的距離，從而提高了可讀性。

Usability Post（http://www.usabilitypost.com/）使用留白的方法和Soccernet差不多。

4. 圖片很重要

如果你有一個(gè)天才的設計，但卻沒(méi)有高質(zhì)量的圖片，那將是非常悲哀的。圖片應當輔助你的設計來(lái)推銷(xiāo)產(chǎn)品或傳達一定的信息，或者僅僅來(lái)吸引眼球。

精彩圖片的例子

Palm（http://www.palm.com/us/products/phones/pre/）在其Palm Pre產(chǎn)品頁(yè)面上使用了一幅精美的圖片來(lái)作為抬頭。通過(guò)一種清新而動(dòng)人的方式展示了其產(chǎn)品。

Tom Pojeta（http://www.pojeta.cz/）在其頁(yè)面上使用了繪畫(huà)圖片，為其站點(diǎn)帶來(lái)了生氣。

5. 充分發(fā)揮色彩的威力

色彩在網(wǎng)頁(yè)設計中的重要性經(jīng)常被忽視。在網(wǎng)頁(yè)設計中應當對色彩的使用給予更多的注意，因為它可以按照你的意愿來(lái)對用戶(hù)進(jìn)行一定的引導。例如，頁(yè)面中的鏈接應當與頁(yè)面正文文字的顏色有所區別，以便用戶(hù)能夠認出它們是鏈接。如果鏈接的顏色和正文的顏色差不多，那么用戶(hù)如何能注意到它們并點(diǎn)擊它們呢？

充分發(fā)揮色彩威力的例子

Sam Brown（http://sam.brown.tc/）在暗色背景上使用了許多種的顏色，當鼠標移動(dòng)到鏈接上時(shí)其背景會(huì )變成彩色，以便鏈接能清晰的顯示。

MIX Online（http://visitmix.com/）采用了彩色的導航條，當點(diǎn)擊一個(gè)彩色導航條以后，頁(yè)面的背景色便會(huì )變成相應的顏色。

6. 不要忘了頁(yè)腳

頁(yè)腳設計經(jīng)常被忽視，因為設計人員沒(méi)有認識到它們的重要性。它們有時(shí)比你想象的要有用的多，因為它們可以包含頁(yè)面任何地方都無(wú)法承載的額外信息。它們也可以作為引導用戶(hù)到站點(diǎn)其它部分的向導。

頁(yè)腳設計的例子

Jason Santa Maria（http://jasonsantamaria.com/）在其超大的頁(yè)腳中放置了許多額外信息。

Web Designer Wall（http://www.webdesignerwall.com/）在頁(yè)腳放置了最新的發(fā)帖和最新的評論，在用戶(hù)滾動(dòng)到頁(yè)面底部時(shí)，這些內容也會(huì )吸引住讀者。這是一種在博客網(wǎng)站上使用的典型設計。

7. 清晰的導航

導航欄是頁(yè)面中最重要的部分，因為它是用戶(hù)使用網(wǎng)站最主要的途徑。通過(guò)使用簡(jiǎn)單清晰的導航欄，可以提升網(wǎng)站的易用性，還可以減少用戶(hù)在尋找自己需要的內容時(shí)遇到的麻煩。

清晰的導航的例子

Disambiguity（http://www.disambiguity.com/）使用了標簽頁(yè)的方式來(lái)給用戶(hù)以清晰的指示。

Dabs（http://www.dabs.com/）同樣使用了標簽頁(yè)，但同時(shí)還在頁(yè)面左側使用了側邊欄，將網(wǎng)站內容的子分類(lèi)予以顯示，而且對不同的大類(lèi)還用不同的顏色加以區分。

作者：Tom Kenny Inspect Element的作者，現在供職于TUI Travel公司，進(jìn)行網(wǎng)頁(yè)設計。其Twitter地址為；http://twitter.com/tkenny（譯/曹巳甲）