在製作一個網站時會有很多的問題，所以網頁設計師常常必須扮演多重的腳色，並且要非常了解如何建構一個有效實用的網站佈局。

大多數你在網頁設計所學到的教訓(lesson)都來自工作經驗，學習是一個反覆的過程，並且沒有比犯錯更好的方式來獲得知識(從錯誤中學習)。

在這篇文章中，我們將討論10個必要的與常態的做法，這是每一個新手的網頁設計師都應該知道。

 

1. 優化網頁圖片讓頁面讀取速度加快

學習如何透過選擇正確的格式去優化你的網頁圖片，並確保檔案大小在可行的範圍內是足夠小的。

雖然現在人們已經都在使用寬頻連線，但仍然有人使用撥號網路上網。

此外隨著行動裝置技術的普及，但行動裝置卻不一定支援像寬頻一樣的速度，圖片的檔案大小可能引起網頁下載時間變慢，是有可能把瀏覽者趕走的。

這邊有個技巧，就是選擇適合的文件格式：圖片如果有單純的(solid)顏色，那最好存成PNG檔或者GIF檔；如果圖片是連續性的色調(如照片)則最好存成JPG格式。

 

 

有很多的工具可以幫助你進一步優化你的圖片，降低他們的檔案大小。

可以參考這個工具列表來幫助優化你的圖片。

透過盡量將圖片的數量減到最低並且聰明的使用圖片，並且盡你所能的減小檔案大小，將可以大大的減少頁面的讀取時間和改善網頁的效能。

 

2. 保持乾淨和簡單

一個好的網頁設計不光只是看起來悅目而已，還包含對使用者而言也要友善的。

一個乾淨，簡單的網頁設計通常最終會成為一個可用性高的網頁設計，因為它在與瀏覽者的互動中不會使其產生混淆。

當頁面上有太多的網站功能和組件時，將會分散網站瀏覽者的注意力而失去原本瀏覽網站的目的。確保每個頁面元素都有一個目的，然後問自己以下問題：

• • ‧這個設計是否真的需要呢？
  • ‧這是什麼元件是做什麼用，它如何協助用戶瀏覽？
  • ‧如果我突然刪除此元件，大多數人會希望它回來嗎 ？
  • ‧如何把這些元素和目標、消息和網站的宗旨互相配合？

儘管它可能為您的網站拿出一個超級棒的新概念或界面設計模式，你還是要確保該設計對你的用戶而言仍然是方便和直觀的。

人們習慣於通用性(common)的互動模式，網站功能，和網路介面，如果你的設計的確很獨特，確保它不是太模糊和令人難以理解。

有創意，而且還保持簡單。

 

3. 導覽將是你最重要的設計

一個網站最重要的部分就是整個網站的導覽-沒有它，無論在哪個頁面中，使用者都會發生卡在這個頁面離不開的狀況。

有了這明顯的實際方向，我們將討論一些當建構網站導覽時重要的點。

 

首先，在網站的導覽架構上，它是非常重要的需要投入足夠的時間和很多規畫。

這是常識，但仍然令人吃驚的是，有多少的網站認為設計網站導覽是理所當然的呢?

擺放位置、風格、技術(使用javascript或只有CSS?)、可用性和網頁易讀性，這些是當你製作導覽設計時需要考慮的部分。

 

再來，你的導覽設計應該沒有CSS的狀況下也可以運作，這是基於文字基礎的瀏覽器相容性。

你可以盡量去嘲笑文字基礎的瀏覽器，但他們還是流行在很多的移動設備上。

也許更重要的是，沒有CSS的導覽功能對螢幕瀏覽者來說也是令人激賞的(99.99%的情況下)

 

 

接著是導覽功能應該容易進入和使用的，而不需要為客戶端技術如JavaScript或Flash，用戶可能沒有啟用或安裝等各種原因，包含安全性或公司政策而造成無法瀏覽。

 

所以有一個導覽系統可以放置的良好位置是必須要的，例如放在一個顯眼可見的地方。

一個好的導覽功能事只要網頁載入就出現，而不需要滑鼠再向下滾動。

這是為什麼頁面要保持乾淨和簡單的重要作用，一個複雜且非常規的設計可能會讓使用者混淆。

即使只有一瞬間，用戶也必須從不會納悶：「哪裡是網站的導覽處?」

 

最後，對網站建立階層架構，多層次的管理。確保它易於在父層與子層之間導覽。

此外，不管在哪一個網頁當中也應該能很容易到達最高層的頁面(例如網站首頁)。

最主要的目標就是你的網站導覽，盡可能的減少動作、行動和努力而讓使用者到達他想要瀏覽的內容。

 

4. 聰明的和有條理的使用字體

雖然有成千上萬的字體在那裡，但你真的能用的只是一小部分（至少直到完全支持對 CSS3主要瀏覽器）。

所以有一個設計點是堅持使用網頁安全字體。

如果你不喜歡網頁安全字體，可以考慮逐步增強的網頁設計，利用sIFR那樣或Cufon。

 

保持字體的使用是一致的，確認標題和段落的內容一制。

使用留白、調整行高、字體大小和字母間距屬性，以內容輕鬆愉快的閱讀和掃描。

 

也許一個網頁設計師常常犯的錯誤就是使用不對的字體大小。

因為我們想盡可能的將內容都塞在一個網頁中呈現，所以我們有時設置字體大小而讓使用者感覺到不舒服。

如果可能的話，盡量保持字體大小12px以上，特別是對段落內容。

雖然很多沒有遇到因為字體太小而造成閱讀上的困難，但是想想老人家、近視眼和其他類似視覺障礙的族群吧。

 

5. 了解色彩的運用

談完字體，我們還需要指出使用正確顏色的重要性。

例如，黑色文字在白色背景，如果使用高對比度，橙色背景上的紅色文字會令你的眼睛感到緊張。

此外，使用一些對特殊形式色盲的用戶友善的顏色（檢查工具稱為Vischeck，將幫助您測試對於某些類型的色盲）。

 

 

有些色彩足合只適合運用在前景色的部分，而不適合當作背景色。

舉個例子來說，深藍色的文字搭配粉紅色的背景與粉紅色的文字搭配深藍色的背景，都是使用兩種一樣的顏色，但應用在不同的部分則影響了它的可讀性和閱讀的舒適度。

重要的結論就是，不僅要使用良好的色彩組合，而且要將它應用到頁面上正確的地方。

 

 

總結以上的五點：我們必須要提升網頁讀取的速度，並且保持網頁的簡單與乾淨。

再則是有明顯的導覽功能，不會讓使用者在你的網站中迷路。

然後針對網頁閱讀的友善性，善用字體的選擇以及顏色的搭配。

接下來另外的五點，則讓我們在下篇中分享。

Reference：10 Things Every Web Designer Just Starting Out Should Know