電子商務(wù)網(wǎng)站的網(wǎng)頁設(shè)計(jì)規(guī)則也可以適用于很多非商務(wù)方面的網(wǎng)站?？偨Y(jié)網(wǎng)站頁面建設(shè)經(jīng)驗(yàn)，網(wǎng)頁設(shè)計(jì)需遵循下面五個(gè)規(guī)則：頁面易讀、容易瀏覽、方便查找、風(fēng)格布局保持一致、頁面快速下載。換句話說，你的站點(diǎn)應(yīng)該讓你的目標(biāo)客戶容易使用。為了使你的站點(diǎn)能被你的目標(biāo)客戶欣賞，而且能被站點(diǎn)目錄的編輯者許可，必須遵守所有這些規(guī)則。這些規(guī)則的優(yōu)勢在于：它們不僅可以應(yīng)用到你的站點(diǎn)目錄提交上，還可以應(yīng)用到你的目標(biāo)客戶身上。
  規(guī)則一：頁面易讀
  可能你的目標(biāo)用戶正在使用完全不同的電腦、顯示器、網(wǎng)絡(luò)連接，以及瀏覽器。事實(shí)上，沒有人能夠確切知道潛在消費(fèi)者是怎樣查看你的站點(diǎn)的，他們可能使用筆記本電腦、可能使用撥號(hào)連接或者高速連接、可能使用蘋果電腦，故站點(diǎn)設(shè)計(jì)者需要提供盡可能多的平臺(tái)、瀏覽器，以及網(wǎng)絡(luò)速度。因此，作為一個(gè)通用的規(guī)則，在你向主要的站點(diǎn)目錄提交你的
   站點(diǎn)之前，網(wǎng)頁中的每一項(xiàng)目都需要在主要的瀏覽器和兩種電腦上時(shí)清晰易讀。下面列出了頁面易讀方面的細(xì)節(jié)：
  （1）你的站點(diǎn)設(shè)計(jì)者不該將你文本的字體設(shè)置得太小或者太大。如果站點(diǎn)是專門為視力損傷的客戶設(shè)計(jì)，那么文檔的字體大小應(yīng)該進(jìn)行相應(yīng)地調(diào)整。
  （2）所有圖片中的文本都應(yīng)該清晰易讀。高對(duì)比度的顏色，以及字體與字樣的選擇對(duì)于圖片的易讀性是非常重要的。
  （3）文字的顏色也很重要，不要使背景的顏色沖淡了文字的視覺效果，一般來說，以淡色背景下的深色文字為佳。
  （4）為方便或快速閱讀可將網(wǎng)站的內(nèi)容分欄設(shè)計(jì)，甚至雙欄也要比整整一頁的視覺效果要好很多。
  （5）使用詞語要正確得體，一個(gè)語法混亂、錯(cuò)別字連篇的網(wǎng)站是不會(huì)受人歡迎的。對(duì)于電子商務(wù)網(wǎng)站也要考慮到鼓動(dòng)性和吸引性的用語。
  （6）動(dòng)畫都不應(yīng)該動(dòng)得太快，那樣會(huì)使你的目標(biāo)客戶無法閱讀。如果你的目標(biāo)用戶必須循環(huán)地看三遍甚至更多遍才能捕捉全部信息，那么動(dòng)畫就是動(dòng)得太快。
  （7）當(dāng)你的站點(diǎn)設(shè)計(jì)或者再設(shè)計(jì)正處于模板階段，試著用不同的瀏覽器、不同的平臺(tái)、不同的網(wǎng)絡(luò)連接查看。要注意IE6.0、IE7.0和Firefox對(duì)網(wǎng)頁顯示的不同，還要注意寬屏筆記本和窄屏，以及分辨率的差別的自適應(yīng)性。
  （8）搜索的HTML文檔必須在圖片開啟和圖片關(guān)閉的情況下都能清晰易讀。這就意味著在制作HTML文檔、背景圖片和圖片中文本的時(shí)候，要使用對(duì)比度高的顏色。
  （9）站點(diǎn)設(shè)計(jì)者不該使用那些使你的文檔變得模糊的背景，或者那些給閱讀造成困難的顏色。
   規(guī)則二：容易瀏覽
  “容易瀏覽”意味著你的目標(biāo)客戶在任何時(shí)候訪問站點(diǎn)都能知道他們所處的位置。如果他們迷路了，他們應(yīng)該能去看看站點(diǎn)地圖、幫助部分、站點(diǎn)搜索，或者從任何一個(gè)網(wǎng)頁到主頁。這可以讓瀏覽者清楚，他們在哪兒，他們想去哪兒，以及他們曾經(jīng)去過哪兒。站點(diǎn)目錄的編輯者通常會(huì)考慮到你的目標(biāo)客戶。如果專業(yè)的站點(diǎn)目錄編輯者，通常是經(jīng)驗(yàn)豐富的網(wǎng)絡(luò)使用者，當(dāng)你在瀏覽你的站點(diǎn)時(shí)遇到了許多困難，你的目標(biāo)客戶就很可能也會(huì)在瀏覽你站點(diǎn)時(shí)遇到同樣的問題。導(dǎo)航明確、導(dǎo)向清晰、使用方便。由于人們習(xí)慣于從左到右、從上到下閱讀，所以主要的導(dǎo)航條應(yīng)放置在頁面左邊，對(duì)于較長頁面來說，在最底部設(shè)置一個(gè)簡單導(dǎo)航也很有必要（只要兩項(xiàng)就夠了：主頁和頁面頂部）。確定一種你滿意的模式之后，最好將這種模式應(yīng)用到同一網(wǎng)站的每個(gè)頁面，這樣，瀏覽者就知道如何尋找信息。
  你文本鏈接的顏色應(yīng)該被你的目標(biāo)客戶所熟悉。藍(lán)色加下劃線的文本通常標(biāo)記一個(gè)還未訪問的鏈接；紫色或褐紅色加下劃線的文本通常標(biāo)記一個(gè)已經(jīng)訪問過的鏈接。使用超文本鏈接或圖片鏈接，使人們能夠在網(wǎng)站上自如地前進(jìn)或后退，而不要讓他們總是使用瀏覽器上的前進(jìn)或后退按鈕。鏈接文本的顏色最好用約定俗成的（未訪問為藍(lán)色，點(diǎn)擊過的用紫色或栗色）；在所有圖片上ALT標(biāo)識(shí)符注明圖片名稱或解釋，以便那些不愿意自動(dòng)加載圖片的用戶能夠了解圖片的含義；在每個(gè)頁面上都應(yīng)提供“上一頁”“下一頁”“首頁”“回子目錄”等超鏈接。
  你所有的超鏈接應(yīng)該對(duì)你的目標(biāo)客戶都很清晰。像瀏覽按鈕或者文件制表符這樣的圖片應(yīng)該明顯地標(biāo)記出來，方便閱讀。正如站點(diǎn)設(shè)計(jì)的第一條規(guī)則中說的那樣，你的站點(diǎn)設(shè)計(jì)者應(yīng)該選擇站點(diǎn)圖片的顏色、背景、紋理和特殊效果，這樣才能對(duì)主要的瀏覽器、電腦屏幕，以及平臺(tái)來說都是清晰易讀的。許多站點(diǎn)設(shè)計(jì)者喜歡不在文本超鏈接上加下劃線。如果你設(shè)計(jì)的站點(diǎn)針對(duì)的用戶是有經(jīng)驗(yàn)的網(wǎng)絡(luò)使用者，那么只要超鏈接文本是獨(dú)特的，這個(gè)設(shè)計(jì)技術(shù)就沒有問題。然而，如果你的目標(biāo)用戶并沒有很多網(wǎng)絡(luò)經(jīng)驗(yàn)，那么最好在超文本鏈接下面加上下劃線。
  規(guī)則三：方便查找
  網(wǎng)站提供的獨(dú)特的產(chǎn)品、服務(wù)，以及信息應(yīng)該很容易地在你的目標(biāo)用戶登錄站點(diǎn)后找到。一般來說，你的目標(biāo)客戶不想在登錄你的主頁后四處尋找信息，人們愿意瀏覽直接包含他們尋找的信息的網(wǎng)頁。如果他們不能直接去那些包含特定信息的網(wǎng)頁，他們往往要非常不情愿地通過七八次的點(diǎn)擊才能找到信息。如果他們必須點(diǎn)擊更多次，可能就會(huì)灰心，然后離開你的站點(diǎn)。
  你的目標(biāo)客戶在找到包含他們尋找的信息的網(wǎng)頁后，需要看到那些信息“在折疊的上方”或者是在屏幕的頂端。即使人們不能馬上在屏幕的頂端看到你的產(chǎn)品或者服務(wù)，他們需要了解的搜索內(nèi)容就在這個(gè)特定的網(wǎng)頁上。因?yàn)槿藗儾灰欢〞?huì)滾動(dòng)網(wǎng)頁，以確認(rèn)他們搜索的信息在這個(gè)網(wǎng)頁上可以獲得。
  一個(gè)經(jīng)常被問到的問題（FAQs）網(wǎng)頁就是一個(gè)那些站點(diǎn)設(shè)計(jì)者沒能很好地利用“在折疊的上方”策略的例子。比如說你將10個(gè)問題放在你的FAQs網(wǎng)頁上，而你的目標(biāo)用戶尋找的信息是問題6的答案。如果你一個(gè)問題一個(gè)答案地進(jìn)行排列，可能問題6就不在上面需要下拉，這容易讓人忽略，如果你將問題列在一起，然后提供超鏈接跳轉(zhuǎn)到答案，這樣就可以讓用戶第一眼就可以找到所需要的內(nèi)容。你所有的FAQs網(wǎng)頁都應(yīng)該按照這樣的格式排列。這個(gè)策略是很有利的，不僅因?yàn)閷?duì)那些最終客戶有益，而且這種格式是搜索引擎友好的布局。
  頂部或者尾部要放上相關(guān)的內(nèi)容，如：“關(guān)于我們”的網(wǎng)頁或區(qū)域、“聯(lián)系我們”的網(wǎng)頁或區(qū)域、“地址”的網(wǎng)頁或區(qū)域等。潛在消費(fèi)者尋找你的聯(lián)系信息和你公司的正確拼寫檢查的最可能的地方就是“關(guān)于我們”網(wǎng)頁，因此，即使你在其他地方提供了聯(lián)系信息，但將這些信息放在“關(guān)于我們”部分也是一個(gè)好主意。尤其是在你把你的聯(lián)系信息放在尾部時(shí)，許多最終用戶是不會(huì)滾動(dòng)到他們所看網(wǎng)頁的底部去查找信息的。
  規(guī)則四：風(fēng)格布局保持一致
  網(wǎng)站的風(fēng)格和布局應(yīng)該保持一致。布局意味著在你的站點(diǎn)上欄目排布、導(dǎo)航、圖片和留白的位置。這是你放置你的文本、圖片以及瀏覽內(nèi)容的地方，是你屏幕中的“真正的財(cái)產(chǎn)”。布局設(shè)計(jì)的一致性能夠幫助你的目標(biāo)客戶在瀏覽你的站點(diǎn)時(shí)，使他感覺和你做生意很舒服。設(shè)計(jì)意味著利用你的圖片、字體和樣式的特殊效果，以及你站點(diǎn)的顏色。在站點(diǎn)的設(shè)計(jì)過程中，有許多方面都是重復(fù)的。站點(diǎn)中的每一個(gè)網(wǎng)頁在主體文本、超鏈接，以及標(biāo)題中使用的字體、樣式，以及顏色應(yīng)該都是一樣的。
  如果站點(diǎn)中顯示你提供的產(chǎn)品的照片，那么照片的尺寸的差別應(yīng)該很小。水平照片的尺寸都應(yīng)該完全一樣，垂直照片的尺寸也應(yīng)該完全一樣。如果你在產(chǎn)品照片中使用陰影效果，則你應(yīng)該在所有的產(chǎn)品照片中都使用陰影效果。圖片和文本不該隨機(jī)地或者隨意地被擺放在網(wǎng)頁上。網(wǎng)頁上的每一個(gè)項(xiàng)目都應(yīng)該和其他項(xiàng)目有視覺上的聯(lián)系。相關(guān)的項(xiàng)目，比如主導(dǎo)航欄和次導(dǎo)航欄應(yīng)該放在一起，這樣它們就會(huì)被看作是聚集成組的而不是不相關(guān)的項(xiàng)目。
  兩個(gè)導(dǎo)航欄在視覺上的不同，在造成視覺上對(duì)比的同時(shí)也顯示了它們是怎樣聯(lián)系的。比如，主導(dǎo)航欄會(huì)用特殊的顏色被顯示在網(wǎng)頁的頂端，同時(shí)次導(dǎo)航欄會(huì)用不同設(shè)置的顏色在屏幕的左邊開啟，這些顏色設(shè)置與主導(dǎo)航欄配合得很好。最終客戶正在訪問的站點(diǎn)的那部分的主導(dǎo)航欄按鈕顏色會(huì)改變。當(dāng)最終用戶點(diǎn)擊主導(dǎo)航欄的鏈接、次導(dǎo)航欄，或者子導(dǎo)航欄就會(huì)打開。子導(dǎo)航欄中的文本重復(fù)主導(dǎo)航欄中的文本，更進(jìn)一步表明左邊的導(dǎo)航按鈕是主導(dǎo)航欄的子集。
  控制小片顯示最終客戶正在訪問的網(wǎng)頁。主標(biāo)題表明最終用戶正在訪問的網(wǎng)頁，副標(biāo)題強(qiáng)調(diào)站點(diǎn)這個(gè)部分的主要特色。副標(biāo)題上的尖頭巧妙地提示它們是超鏈接。
  網(wǎng)頁底端的文本鏈接與主導(dǎo)航欄按鈕對(duì)應(yīng)，這些鏈接表明目標(biāo)客戶已經(jīng)訪問過的網(wǎng)頁。超鏈接的顏色與瀏覽器默認(rèn)的顏色相近，因?yàn)樗徽J(rèn)為目標(biāo)客戶像經(jīng)常在網(wǎng)絡(luò)上工作的人那樣精通網(wǎng)絡(luò)。如果目標(biāo)客戶迷路了，或者需要調(diào)整它們的位置，頁面切換圖片可以鏈接到主頁和站點(diǎn)地圖。導(dǎo)航欄的這個(gè)設(shè)置在每個(gè)網(wǎng)頁上都是一樣的。
  規(guī)則五：頁面快速下載
  我們都知道，頁面下載速度是網(wǎng)站留住訪問者的關(guān)鍵因素。如果5秒還不能打開一個(gè)網(wǎng)頁，一般人就會(huì)沒有耐心。頁面快速下載保證客戶能以最快地速度進(jìn)出網(wǎng)站。我們生活在一個(gè)高節(jié)奏的時(shí)代，沒人樂意等待，互聯(lián)網(wǎng)也不例外。雖然互聯(lián)網(wǎng)速度較幾年之前已有了質(zhì)的飛躍，但事實(shí)上技術(shù)進(jìn)步再快，也趕不上人們的要求。所以千萬別試圖挑戰(zhàn)訪問者的耐性。
  一個(gè)網(wǎng)頁為什么需要花費(fèi)很長時(shí)間下載，這是因?yàn)楸仨毾认螺d一些附件，比如Flash、程序、圖片Shockwave或者特殊效果等等。如果想要“?！蹦愕木W(wǎng)站，建議最多使用一到兩種特殊效果，那些使人眼花繚亂的圖片和圖標(biāo)往往會(huì)分散訪問者對(duì)網(wǎng)站內(nèi)容的注意力，要是這些圖片的下載速度再慢一點(diǎn)，很可能訪問者等不及它們完全打開就失去耐性了。使用較多上面的內(nèi)容的網(wǎng)頁一般為視頻類或游戲類網(wǎng)頁，大多數(shù)的網(wǎng)頁不屬于“視頻游戲”的類別，所以最好縮小你的網(wǎng)頁，尤其是主頁的下載時(shí)間。
  應(yīng)該時(shí)時(shí)提醒自己，網(wǎng)站首頁就像一個(gè)廣告牌。當(dāng)開車經(jīng)過一個(gè)廣告牌時(shí)，沒有時(shí)間閱讀上面的詳細(xì)說明，也不可能贊賞其復(fù)雜的圖案，廣告標(biāo)志從眼前一閃而過，必須在一瞬間給人留下印象。網(wǎng)上訪問者也是“一閃而過”，保證你的首頁簡單而快速，放棄一切顯著減慢主頁速度的資料。
  要保持頁面下載速度的主要方法是讓網(wǎng)頁簡單，只把最重要的信息安排在首頁，盡量避免使用過大的圖片，更應(yīng)避免自動(dòng)下載音樂或其他多媒體文件。這就要求主頁大小不應(yīng)超過50 KB。下面是一些通常減少你網(wǎng)頁下載時(shí)間的原則：
  （1）盡量少地使用Flash動(dòng)畫：僅僅在你的站點(diǎn)最重要的部分吸引注意力的時(shí)候才使用動(dòng)畫。即便要使用動(dòng)畫，動(dòng)畫的數(shù)據(jù)量也要盡可能地小。
  （2）遵循簡潔規(guī)則：你想要你的顧客注意到你站點(diǎn)上所提供的產(chǎn)品、服務(wù)和信息，而不是你站點(diǎn)的精美設(shè)計(jì)。
  （3）產(chǎn)品照片使用小圖片，被稱為“Thumbnails”：在你的產(chǎn)品網(wǎng)頁中，許多小圖片組成的圖庫下載起來要比整張的圖片快得多。在你的目標(biāo)客戶產(chǎn)生興趣以后，再給他們查看大圖的機(jī)會(huì)。
  （4）為了更快地下載，總是從大圖片創(chuàng)建成單獨(dú)的、獨(dú)特的小圖片：所有的圖片都應(yīng)該在圖像軟件中重新調(diào)整大小，而不是在HTML語言中。
  （5）盡可能地在你站點(diǎn)的多個(gè)網(wǎng)頁中使用相同的圖片：使用圖片的一致性可以提高你介紹的連續(xù)性。比如說，在你站點(diǎn)的每一個(gè)網(wǎng)頁上都放上你的商標(biāo)，這對(duì)瀏覽和商標(biāo)品牌都有好處，同時(shí)它還能幫助你的目標(biāo)客戶了解他們一直在訪問的站點(diǎn)到底是誰的。商標(biāo)圖片只需要下載一次，因?yàn)樗鼤?huì)被儲(chǔ)存在瀏覽器的高速緩沖存儲(chǔ)器中。當(dāng)訪問者在你的站點(diǎn)中四處瀏覽的時(shí)候，每個(gè)網(wǎng)頁中的新圖片都需要下載。
  下載時(shí)間不僅僅對(duì)于你的目標(biāo)客戶來說十分重要，而且對(duì)搜索引擎的可視性來說同樣十分重要。當(dāng)搜索引擎蜘蛛向你的服務(wù)器申請一個(gè)網(wǎng)頁的時(shí)候，如果下載時(shí)間太長，或者你的服務(wù)器不能很快地將網(wǎng)頁遞交給蜘蛛，那么搜索引擎可能就不會(huì)將這個(gè)網(wǎng)頁加入到索引中。
  了解目標(biāo)用戶中消費(fèi)者的多樣性即不同的消費(fèi)者可以容忍的下載時(shí)間是不同的。如果你是一個(gè)圖片設(shè)計(jì)站點(diǎn)或一個(gè)在線游戲站點(diǎn)，你的消費(fèi)者很可能為了體驗(yàn)?zāi)愕膭?chuàng)造性資源而等待網(wǎng)頁的下載。然而，如果你是向忙碌的制造商出售機(jī)器零件，訪問有價(jià)值信息的容易程序就應(yīng)該是你主要關(guān)心的問題。
  這些準(zhǔn)則是相互關(guān)聯(lián)的，理解這一點(diǎn)非常重要。比如，假如說你的主頁在某個(gè)主要搜索引擎中關(guān)于你的目標(biāo)關(guān)鍵詞所排的位置是第一位，同時(shí)人們點(diǎn)擊鏈接訪問你的站點(diǎn)。如果你的站點(diǎn)設(shè)計(jì)者將大量的圖片、動(dòng)畫，以及文字放在你的主頁，導(dǎo)致了下載速度放慢，那么大多數(shù)人就都不愿意等待網(wǎng)頁的下載。因此，如果你的站點(diǎn)設(shè)計(jì)者沒有考慮到下載時(shí)間或者其他的設(shè)計(jì)規(guī)則，那么在搜索引擎中占有一個(gè)非常好的一號(hào)位置就這樣被浪費(fèi)掉了。