七招幫你提高網頁設計水平
 

本文的作者為一名資深的網頁設計師，作者論述了改進網頁設計的7個要點，並配以成功的案例，圖文並茂。

1. 學好HTML和CSS編程

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

使用CSS3最新技術設計的經典案例

Atebits在網頁文本中使用了文本陰影，這樣就不需要使用圖片了。它還使用了-webkit-transform和-webkit-transition來向這三個圖標加入了一些動畫，不過這些效果只有在支持webkit的瀏覽器中才能看到，比如Chorme和Safari。

使用了一種叫做CSS3方法來讓瀏覽器下載特定的字體，這就免去了使用圖片的麻煩。

2. 注重細節

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

Metalab很好的混合了著色（Shading）、漸變和陰影，為網頁增加了額外的細節。

We Follow巧妙的使用了漸變和陰影，為其用戶界面添加了很好的細節。

3. 善於使用留白

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

合理使用留白的例子

Soccernet在他們的文章頁面中很好的使用了留白，你可以看出文字都離其它元素有一定的距離，從而提高了可讀性。

Usability Post使用留白的方法和Soccernet差不多。

4. 圖片很重要

如果你有一個天才的設計，但卻沒有高質量的圖片，那將是非常悲哀的。圖片應網頁設計當輔助你的設計來推銷產品或傳達一定的信息，或者僅僅來吸引眼球。

Palm在其Palm Pre產品頁面上使用了一幅精美的圖片來作為抬頭。通過一種清新而動人的方式展示了其產品。

Tom Pojeta在其頁面上使用了繪畫圖片，為其站點帶來了生氣。

5. 充分發揮色彩的威力

色彩在網頁設計中的重要性經常被忽視。在網頁設計中應當對色彩的使用給予更多的注意，因為它可以按照你的意願來對用戶進行一定的引導。例如，頁面中的鏈接應當與頁面正文文字的顏色有所區別，以便用戶能夠認出它們是鏈接。如果鏈接的顏色和正文的顏色差不多，那麼用戶如何能注意到它們並點擊它們呢？

充分發揮色彩威力的例子

Sam Brown在暗色背景上使用了許多種的顏色，當鼠標移動到鏈接上時其背景會變成彩色，以便鏈接能清晰的顯示。

MIX Online採用了彩色的導航條，當點擊一個彩色導航條以後，頁面的背景色便會變成相應的顏色。

6. 不要忘了頁腳

頁腳設計經常被忽視，因為設計人員沒有認識到它們的重要性。它們有時比你想像的要有用的多，因為它們可以包含頁面任何地方都無法承載的額外信息。它們也可以作為引導用戶到站點其它部分的嚮導。

頁腳設計的例子

Jason Santa Maria在其超大的頁腳中放置了許多額外信息。

Web Designer Wall在頁腳放置了最新的發帖和最新的評論，在用戶滾動到頁面底部時，這些內容也會吸引住讀者。這是一種在博客網站上使用的典型設計。

7. 清晰的導航

導航欄是頁面中最重要的部分，因為它是用戶使用網站最主要的途徑。通過使用簡單清晰的導航欄，可以提升網站的易用性，還可以減少用戶在尋找自己需要的內容時遇到的麻煩。

清晰的導航的例子

Disambiguity使用了標籤頁的方式來給用戶以清晰的指示。

Dabs同樣使用了標籤頁，但同時還在頁面左側使用了側邊欄，將網站內容的子分類予以顯示，而且對不同的大類還用不同的顏色加以區分。