電子商務網站網頁設計規則

電子商務網站的網頁設計規則也可以適用于很多非商務方面的網站。 總結網站頁面建設經驗，網頁設計需遵循下面五個規則：頁面易讀、容易流覽、方便查找、風格佈局保持一致、頁面快速下載。 換句話說，你的網站應該讓你的目標客戶容易使用。 為了使你的網站能被你的目標客戶欣賞，而且能被網站目錄的編輯者許可，必須遵守所有這些規則。 這些規則的優勢在於：它們不僅可以應用到你的網站目錄提交上，還可以應用到你的目標客戶身上。

規則一：頁面易讀

可能你的目標使用者正在使用完全不同的電腦、顯示器、網路連接，以及瀏覽器。 事實上，沒有人能夠確切知道潛在消費者是怎樣查看你的網站的，他們可能使用筆記本電腦、可能使用撥號連線或者高速連接、可能使用蘋果電腦，故網站設計者需要提供盡可能多的平臺、瀏覽器，以及網路速度。 因此，作為一個通用的規則，在你向主要的網站目錄提交你的網站之前，網頁中的每一專案都需要在主要的瀏覽器和兩種電腦上時清晰易讀。 下面列出了頁面易讀方面的細節：

（1）你的網站設計者不該將你文本的字體設置得太小或者太大。 如果網站是專門為視力損傷的客戶設計，那麼文檔的字體大小應該進行相應地調整。

（2）所有圖片中的文本都應該清晰易讀。 高對比的顏色，以及字體與字樣的選擇對於圖片的易讀性是非常重要的。

（3）文字的顏色也很重要，不要使背景的顏色沖淡了文字的視覺效果，一般來說，以淡色背景下的深色文字為佳。

（4）為方便或快速閱讀可將網站的內容分欄設計，甚至雙欄也要比整整一頁的視覺效果要好很多。

（5）使用詞語要正確得體，一個語法混亂、錯別字連篇的網站是不會受人歡迎的。 對於電子商務網站也要考慮到鼓動性和吸引性的用語。

（6）動畫都不應該動得太快，那樣會使你的目標客戶無法閱讀。 如果你的目標使用者必須迴圈地看三遍甚至更多遍才能捕捉全部資訊，那麼動畫就是動得太快。

（7）當你的網站設計或者再設計正處於範本階段，試著用不同的瀏覽器、不同的平臺、不同的網路連接查看。 要注意IE6.0、IE7.0和Firefox對網頁顯示的不同，還要注意寬屏筆記本和窄屏，以及解析度的差別的自我調整性。

（8）搜索的HTML文檔必須在圖片開啟和圖片關閉的情況下都能清晰易讀。 這就意味著在製作HTML文檔、背景圖片和圖片中文本的時候，要使用對比度高的顏色。

（9）網站設計者不該使用那些使你的文檔變得模糊的背景，或者那些給閱讀造成困難的顏色。

規則二：容易流覽

「容易流覽」意味著你的目標客戶在任何時候訪問網站都能知道他們所處的位置。 如果他們迷路了，他們應該能去看看網站地圖、説明部分、網站搜索，或者從任何一個網頁到主頁。 這可以讓流覽者清楚，他們在哪兒，他們想去哪兒，以及他們曾經去過哪兒。

網站目錄的編輯者通常會考慮到你的目標客戶。 如果專業的網站目錄編輯者，通常是經驗豐富的網路消費者，當你在流覽你的網站時遇到了許多困難，你的目標客戶就很可能也會在流覽你網站時遇到同樣的問題。 導航明確、導向清晰、使用方便。 由於人們習慣于從左至右、從上到下閱讀，所以主要的導航條應放置在頁面左邊，對於較長頁面來說，在最底部設置一個簡單導航也很有必要（只要兩項就夠了：主頁和頁面頂部）。 確定一種你滿意的模式之後，最好將這種模式應用到同一網站的每個頁面，這樣，流覽者就知道如何尋找資訊。

你文本連結的顏色應該被你的目標客戶所熟悉。 藍色加底線的文本通常標記一個還未訪問的連結；紫色或褐紅色加底線的文本通常標記一個已經訪問過的連結。 使用超文字連結或圖片連結，使人們能夠在網站上自如地前進或後退，而不要讓他們總是使用瀏覽器上的前進或後退按鈕。 連結文本的顏色最好用約定俗成的（未訪問為藍色，點擊過的用紫色或栗色）；在所有圖片上ALT識別碼注明圖片名稱或解釋，以便那些不願意自動載入圖片的使用者能夠瞭解圖片的含義；在每個頁面上都應提供「上一頁」「下一頁」「首頁」「 回子目錄」等超連結。

你所有的超連結應該對你的目標客戶都很清晰。 像瀏覽按鈕或者檔定位字元這樣的圖片應該明顯地標記出來，方便閱讀。 正如網站設計的第一條規則中說的那樣，你的網站設計者應該選擇網站圖片的顏色、背景、紋理和特殊效果，這樣才能對主要的瀏覽器、電腦螢幕，以及平臺來說都是清晰易讀的。 許多網站設計者喜歡不在文本超連結上加底線。 如果你設計的網站針對的使用者是有經驗的網路消費者，那麼只要超連結文本是獨特的，這個設計技術就沒有問題。 然而，如果你的目標使用者並沒有很多網路經驗，那麼最好在超文字連結下面加上底線。

規則三：方便查找

網站提供的獨特的產品、服務，以及資訊應該很容易地在你的目標使用者登錄網站後找到。 一般來說，你的目標客戶不想在登錄你的主頁後四處尋找資訊，人們願意流覽直接包含他們尋找的資訊的網頁。 如果他們不能直接去那些包含特定資訊的網頁，他們往往要非常不情願地通過七八次的點擊才能找到資訊。 如果他們必須點擊更多次，可能就會灰心，然後離開你的網站。

你的目標客戶在找到包含他們尋找的資訊的網頁後，需要看到那些資訊「在折疊的上方」或者是在螢幕的頂端。 即使人們不能馬上在螢幕的頂端看到你的產品或者服務，他們需要瞭解的搜索內容就在這個特定的網頁上。 因為人們不一定會滾動網頁，以確認他們搜索的資訊在這個網頁上可以獲得。

一個經常被問到的問題（FAQs）網頁就是一個那些網站設計者沒能很好地利用「在折疊的上方」策略的例子。 比如說你將10個問題放在你的FAQs網頁上，而你的目標使用者尋找的資訊是問題6的答案。 如果你一個問題一個答案地進行排列，可能問題6就不在上面需要下拉，這容易讓人忽略，如果你將問題列在一起，然後提供超連結跳轉到答案，這樣就可以讓使用者第一眼就可以找到所需要的內容。 你所有的FAQs網頁都應該按照這樣的格式排列。 這個策略是很有利的，不僅因為對那些最終客戶有益，而且這種格式是搜尋引擎友好的佈局。

頂部或者尾部要放上相關的內容，如：「關於我們」的網頁或區域、「聯繫我們」的網頁或區域、「位址」的網頁或區域等。 潛在消費者尋找你的聯繫資訊和你公司的正確拼寫檢查的最可能的地方就是「關於我們」網頁，因此，即使你在其他地方提供了聯繫資訊，但將這些資訊放在「關於我們」部分也是一個好主意。 尤其是在你把你的聯繫資訊放在尾部時，許多最終使用者是不會滾動到他們所看網頁的底部去查找資訊的。

規則四：風格佈局保持一致

網站的風格和佈局應該保持一致。 佈局意味著在你的網站上欄目排布、導航、圖片和留白的位置。 這是你放置你的文本、圖片以及流覽內容的地方，是你螢幕中的「真正的財產」。 佈局設計的一致性能夠説明你的目標客戶在流覽你的網站時，使他感覺和你做生意很舒服。 設計意味著利用你的圖片、字體和樣式的特殊效果，以及你網站的顏色。 在網站的設計過程中，有許多方面都是重複的。 網站中的每一個網頁在主體文本、超連結，以及標題中使用的字體、樣式，以及顏色應該都是一樣的。

如果網站中顯示你提供的產品的照片，那麼照片的尺寸的差別應該很小。 水準照片的尺寸都應該完全一樣，垂直照片的尺寸也應該完全一樣。 如果你在產品照片中使用陰影效果，則你應該在所有的產品照片中都使用陰影效果。 圖片和文本不該隨機地或者隨意地被擺放在網頁上。 網頁上的每一個專案都應該和其他專案有視覺上的聯繫。 相關的專案，比如主巡覽列和次巡覽列應該放在一起，這樣它們就會被看作是聚集成組的而不是不相關的專案。

兩個巡覽列在視覺上的不同，在造成視覺上對比的同時也顯示了它們是怎樣聯繫的。 比如，主巡覽列會用特殊的顏色被顯示在網頁的頂端，同時次巡覽列會用不同設置的顏色在螢幕的左邊開啟，這些顏色設置與主巡覽列配合得很好。 最終客戶正在訪問的網站的那部分的主巡覽列按鈕顏色會改變。 當最終使用者點擊主巡覽列的連結、次巡覽列，或者子巡覽列就會打開。 子巡覽列中的文本重複主巡覽列中的文本，更進一步表明左邊的導覽按鈕是主巡覽列的子集。

控制小片顯示最終客戶正在訪問的網頁。 主標題表明最終使用者正在訪問的網頁，副標題強調網站這個部分的主要特色。 副標題上的尖頭巧妙地提示它們是超連結。

網頁底端的文本連結與主巡覽列按鈕對應，這些連結表明目標客戶已經訪問過的網頁。 超連結的顏色與瀏覽器預設的顏色相近，因為它不認為目標客戶像經常在網路上工作的人那樣精通網路。 如果目標客戶迷路了，或者需要調整它們的位置，頁面切換圖片可以連結到主頁和網站地圖。 巡覽列的這個設置在每個網頁上都是一樣的。

規則五：頁面快速下載

我們都知道，頁面下載速度是網站留住訪問者的關鍵因素。 如果5秒還不能打開一個網頁，一般人就會沒有耐心。 頁面快速下載保證客戶能以最快地速度進出網站。 我們生活在一個高節奏的時代，沒人樂意等待，互聯網也不例外。 雖然互聯網速度較幾年之前已有了質的飛躍，但事實上技術進步再快，也趕不上人們的要求。 所以千萬別試圖挑戰訪問者的耐性。

一個網頁為什麼需要花費很長時間下載，這是因為必須先下載一些附件，比如Flash、程式、圖片Shockwave或者特殊效果等等。 如果想要「眩」你的網站，建議最多使用一到兩種特殊效果，那些使人眼花繚亂的圖片和圖示往往會分散訪問者對網站內容的注意力，要是這些圖片的下載速度再慢一點，很可能訪問者等不及它們完全打開就失去耐性了。 使用較多上面的內容的網頁一般為視頻類或遊戲類網頁，大多數的網頁不屬於「視頻遊戲」的類別，所以最好縮小你的網頁，尤其是主頁的下載時間。

應該時時提醒自己，網站首頁就像一個看板。 當開車經過一個看板時，沒有時間閱讀上面的詳細說明，也不可能讚賞其複雜的圖案，廣告標誌從眼前一閃而過，必須在一瞬間給人留下印象。 網上訪問者也是「一閃而過」，保證你的首頁簡單而快速，放棄一切顯著減慢主頁速度的資料。

要保持頁面下載速度的主要方法是讓網頁簡單，只把最重要的資訊安排在首頁，儘量避免使用過大的圖片，更應避免自動下載音樂或其他多媒體檔案。 這就要求主頁大小不應超過50 KB。 下面是一些通常減少你網頁下載時間的原則：

（1）儘量少地使用Flash動畫：僅僅在你的網站最重要的部分吸引注意力的時候才使用動畫。 即便要使用動畫，動畫的資料量也要盡可能地小。

（2）遵循簡潔規則：你想要你的顧客注意到你網站上所提供的產品、服務和資訊，而不是你網站的精美設計。

（3）產品照片使用小圖片，被稱為「Thumbnails」：在你的產品網頁中，許多小圖片組成的圖庫下載起來要比整張的圖片快得多。 在你的目標客戶產生興趣以後，再給他們查看大圖的機會。

（4）為了更快地下載，總是從大圖片創建成單獨的、獨特的小圖片：所有的圖片都應該在圖像軟體中重新調整大小，而不是在HTML語言中。

（5）盡可能地在你網站的多個網頁中使用相同的圖片：使用圖片的一致性可以提高你介紹的連續性。 比如說，在你網站的每一個網頁上都放上你的商標，這對流覽和商標品牌都有好處，同時它還能説明你的目標客戶瞭解他們一直在訪問的網站到底是誰的。 商標圖片只需要下載一次，因為它會被儲存在瀏覽器的高速緩衝儲存體中。 當訪問者在你的網站中四處流覽的時候，每個網頁中的新圖片都需要下載。

下載時間不僅僅對於你的目標客戶來說十分重要，而且對搜尋引擎的可視性來說同樣十分重要。 當搜尋引擎蜘蛛向你的伺服器申請一個網頁的時候，如果下載時間太長，或者你的伺服器不能很快地將網頁遞交給蜘蛛，那麼搜尋引擎可能就不會將這個網頁加入到索引中。

瞭解目標使用者中消費者的多樣性即不同的消費者可以容忍的下載時間是不同的。 如果你是一個圖片設計網站或一個線上遊戲網站，你的消費者很可能為了體驗你的創造性資源而等待網頁的下載。 然而，如果你是向忙碌的製造商出售機器零件，訪問有價值資訊的容易程式就應該是你主要關心的問題。

這些準則是相互關聯的，理解這一點非常重要。 比如，假如說你的主頁在某個主要搜尋引擎中關於你的目標關鍵字所排的位置是第一位，同時人們點選連結訪問你的網站。 如果你的網站設計者將大量的圖片、動畫，以及文字放在你的主頁，導致了下載速度放慢，那麼大多數人就都不願意等待網頁的下載。 因此，如果你的網站設計者沒有考慮到下載時間或者其他的設計規則，那麼在搜尋引擎中佔有一個非常好的一號位置就這樣被浪費掉了。

本文摘自《網路行銷-網商成功之道》已出版。