1、電子商務(wù)網(wǎng)站內(nèi)容設(shè)計(jì)分析一、 前言隨著網(wǎng)上購(gòu)物越來(lái)越普遍和流行，B2B模式，C2c模式在我國(guó)是迅速發(fā)展, 如阿里巴巴，淘寶，拍拍，及百度有啊的推出，電子商務(wù)被大眾越來(lái)越普遍提及, 因此電子商務(wù)也是越來(lái)越受到企業(yè)和人們的關(guān)注，電子商務(wù)網(wǎng)站在我國(guó)是快速發(fā) 展。電子商務(wù)網(wǎng)站主要面向供應(yīng)商、客戶或者企業(yè)產(chǎn)品（服務(wù)）的消費(fèi)群體，以 提供某種直屬于企業(yè)業(yè)務(wù)范圍的服務(wù)或交易、或者為業(yè)務(wù)服務(wù)的服務(wù)或者交易為 主的網(wǎng)站。根據(jù)電子商務(wù)模式 可以分為：B2B C2c B2c等。二、調(diào)查時(shí)間：2010年10月18日2010年10月26日三、調(diào)查對(duì)象：國(guó)內(nèi)著名幾個(gè)電子商務(wù)網(wǎng)站：B2B模式1、阿里巴巴2、中國(guó)制造網(wǎng)3、環(huán)

2、球資源4、數(shù)百億網(wǎng)5、慧聰網(wǎng)C2C奠式1、淘寶 2 、拍拍3、百度有啊4、易趣網(wǎng)B2c模式家電數(shù)碼：京東商城、新蛋網(wǎng)、一點(diǎn)達(dá)、綠森數(shù)碼、世紀(jì)電器城家居擺設(shè)：多樣屋、九洲鹿美容護(hù)膚：致美網(wǎng)、NO.時(shí)尚廣場(chǎng)、果皮網(wǎng)、sasa莎莎服裝配飾：麥考林、凡客、馬薩瑪索、衣服網(wǎng)四、核心結(jié)論網(wǎng)頁(yè)內(nèi)容設(shè)計(jì)需遵循下面五個(gè)規(guī)則：a.頁(yè)面易讀、b.容易瀏覽、c.方便查找、d.風(fēng)格布局保持一致、e.頁(yè)面快速下載五、報(bào)告內(nèi)容(通過(guò)對(duì)國(guó)內(nèi)著名電子商務(wù)網(wǎng)站的分析)總結(jié)網(wǎng)站頁(yè)面建設(shè)經(jīng)驗(yàn)，網(wǎng)頁(yè)內(nèi)容設(shè)計(jì)需遵循下面五個(gè)規(guī)則：頁(yè)面易讀、 容易瀏覽、方便查找、風(fēng)格布局保持一致、頁(yè)面快速下載。規(guī)則一：頁(yè)面易讀可能你的目標(biāo)用戶正在使用完全不

3、同的電腦、顯示器、網(wǎng)絡(luò)連接，以及瀏覽器。事實(shí)上，沒(méi)有人能夠確切知道潛在消費(fèi)者是怎樣查看你的站點(diǎn)的， 他們可能 使用筆記本電腦、可能使用撥號(hào)連接或者高速連接、 可能使用蘋果電腦，故站點(diǎn) 設(shè)計(jì)者需要提供盡可能多的平臺(tái)、瀏覽器，以及網(wǎng)絡(luò)速度。因此，作為一個(gè)通用 的規(guī)則，在你向主要的站點(diǎn)目錄提交你的站點(diǎn)之前，網(wǎng)頁(yè)中的每一項(xiàng)目都需要在主要的瀏覽器和兩種電腦上時(shí)清晰易讀。下面列出了頁(yè)面易讀方面的細(xì)節(jié)：(1)你的站點(diǎn)設(shè)計(jì)者不該將你文本的字體設(shè)置得太小或者太大。如果站點(diǎn)是 專門為視力損傷的客戶設(shè)計(jì)，那么文檔的字體大小應(yīng)該進(jìn)行相應(yīng)地調(diào)整。(2)所有圖片中的文本都應(yīng)該清晰易讀。高對(duì)比度的顏色，以及字體與字樣 的選

4、擇對(duì)于圖片的易讀性是非常重要的。(3)文字的顏色也很重要，不要使背景的顏色沖淡了文字的視覺(jué)效果，一般 來(lái)說(shuō)，以淡色背景下的深色文字為佳。(4)為方便或快速閱讀可將網(wǎng)站的內(nèi)容分欄設(shè)計(jì)，甚至雙欄也要比整整一頁(yè) 的視覺(jué)效果要好很多。(5)使用詞語(yǔ)要正確得體，一個(gè)語(yǔ)法混亂、錯(cuò)別字連篇的網(wǎng)站是不會(huì)受人歡 迎的。對(duì)于電子商務(wù)網(wǎng)站也要考慮到鼓動(dòng)性和吸引性的用語(yǔ)。(6)動(dòng)畫都不應(yīng)該動(dòng)得太快，那樣會(huì)使你的目標(biāo)客戶無(wú)法閱讀。如果你的目 標(biāo)用戶必須循環(huán)地看三遍甚至更多遍才能捕捉全部信息，那么動(dòng)畫就是動(dòng)得太 快。(7)當(dāng)你的站點(diǎn)設(shè)計(jì)或者再設(shè)計(jì)正處于模板階段，試著用不同的瀏覽器、不 同的平臺(tái)、不同的網(wǎng)絡(luò)連接查看。要注意

5、 IE6.0、IE7.0和Firefox對(duì)網(wǎng)頁(yè)顯示 的不同，還要注意寬屏筆記本和窄屏，以及分辨率的差別的自適應(yīng)性。(8)搜索的HTMLt檔必須在圖片開(kāi)啟和圖片關(guān)閉的情況下都能清晰易讀。這就意味著在制作HTMLt檔、背景圖片和圖片中文本的時(shí)候，要使用對(duì)比度高的 顏色。(9) 站點(diǎn)設(shè)計(jì)者不該使用那些使你的文檔變得模糊的背景，或者那些給閱讀造成困難的顏色。規(guī)則二：容易瀏覽“容易瀏覽” 意味著你的目標(biāo)客戶在任何時(shí)候訪問(wèn)站點(diǎn)都能知道他們所處的位置。如果他們迷路了，他們應(yīng)該能去看看站點(diǎn)地圖、幫助部分、站點(diǎn)搜索，或者從任何一個(gè)網(wǎng)頁(yè)到主頁(yè)。這可以讓瀏覽者清楚，他們?cè)谀膬海麄兿肴ツ膬海约八麄冊(cè)?jīng)去過(guò)哪兒。站

6、點(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í)遇到同樣的問(wèn)題。 導(dǎo)航明確、 導(dǎo)向清晰、 使用方便。 由于人們習(xí)慣于從左到右、 從上到下閱讀， 所以主要的導(dǎo)航條應(yīng)放置在頁(yè)面左邊，對(duì)于較長(zhǎng)頁(yè)面來(lái)說(shuō)，在最底部設(shè)置一個(gè)簡(jiǎn)單導(dǎo)航也很有必要( 只要兩項(xiàng)就夠了：主頁(yè)和頁(yè)面頂部) 。確定一種你滿意的模式之后，最好將這種模式應(yīng)用到同一網(wǎng)站的每個(gè)頁(yè)面，這樣，瀏覽者就知道如何尋找信息。你文本鏈接的顏色應(yīng)該被你的目標(biāo)客戶所熟悉。 藍(lán)色加下劃線的文本通常標(biāo)記一個(gè)還未訪問(wèn)的鏈接; 紫色或褐紅色

7、加下劃線的文本通常標(biāo)記一個(gè)已經(jīng)訪問(wèn)過(guò)的鏈接。使用超文本鏈接或圖片鏈接，使人們能夠在網(wǎng)站上自如地前進(jìn)或后退，而不要讓他們總是使用瀏覽器上的前進(jìn)或后退按鈕。 鏈接文本的顏色最好用約定俗成的 ( 未訪問(wèn)為藍(lán)色，點(diǎn)擊過(guò)的用紫色或栗色); 在所有圖片上 ALT 標(biāo)識(shí)符注明圖片名稱或解釋，以便那些不愿意自動(dòng)加載圖片的用戶能夠了解圖片的含義; 在每個(gè)頁(yè)面上都應(yīng)提供“上一頁(yè)” “下一頁(yè)” “首頁(yè)” “回子目錄”等超鏈接。你所有的超鏈接應(yīng)該對(duì)你的目標(biāo)客戶都很清晰。 像瀏覽按鈕或者文件制表符這樣的圖片應(yīng)該明顯地標(biāo)記出來(lái)， 方便閱讀。 正如站點(diǎn)設(shè)計(jì)的第一條規(guī)則中說(shuō)的那樣，你的站點(diǎn)設(shè)計(jì)者應(yīng)該選擇站點(diǎn)圖片的顏色、背景、

8、紋理和特殊效果，這樣才能對(duì)主要的瀏覽器、 電腦屏幕， 以及平臺(tái)來(lái)說(shuō)都是清晰易讀的。 許多站點(diǎn)設(shè)計(jì) 者喜歡不在文本超鏈接上加下劃線。 如果你設(shè)計(jì)的站點(diǎn)針對(duì)的用戶是有經(jīng)驗(yàn)的網(wǎng) 絡(luò)使用者，那么只要超鏈接文本是獨(dú)特的，這個(gè)設(shè)計(jì)技術(shù)就沒(méi)有問(wèn)題。然而，如果你的目標(biāo)用戶并沒(méi)有很多網(wǎng)絡(luò)經(jīng)驗(yàn)，那么最好在超文本鏈接下面加上下劃線。規(guī)則三：方便查找網(wǎng)站提供的獨(dú)特的產(chǎn)品、 服務(wù)， 以及信息應(yīng)該很容易地在你的目標(biāo)用戶登錄站點(diǎn)后找到。 一般來(lái)說(shuō)， 你的目標(biāo)客戶不想在登錄你的主頁(yè)后四處尋找信息， 人們?cè)敢鉃g覽直接包含他們尋找的信息的網(wǎng)頁(yè)。 如果他們不能直接去那些包含特定信息的網(wǎng)頁(yè)， 他們往往要非常不情愿地通過(guò)七八次的點(diǎn)擊才

9、能找到信息。 如果他們必須點(diǎn)擊更多次，可能就會(huì)灰心，然后離開(kāi)你的站點(diǎn)。你的目標(biāo)客戶在找到包含他們尋找的信息的網(wǎng)頁(yè)后， 需要看到那些信息 “在折疊的上方” 或者是在屏幕的頂端。 即使人們不能馬上在屏幕的頂端看到你的產(chǎn)品或者服務(wù)， 他們需要了解的搜索內(nèi)容就在這個(gè)特定的網(wǎng)頁(yè)上。 因?yàn)槿藗儾灰欢〞?huì)滾動(dòng)網(wǎng)頁(yè)，以確認(rèn)他們搜索的信息在這個(gè)網(wǎng)頁(yè)上可以獲得。一個(gè)經(jīng)常被問(wèn)到的問(wèn)題網(wǎng)頁(yè)就是一個(gè)那些站點(diǎn)設(shè)計(jì)者沒(méi)能很好地利用 “在折疊的上方”策略的例子。比如說(shuō)你將10 個(gè)問(wèn)題放在你的網(wǎng)頁(yè)上，而你的目標(biāo)用戶尋找的信息是問(wèn)題 6 的答案。 如果你一個(gè)問(wèn)題一個(gè)答案地進(jìn)行排列， 可能問(wèn)題6 就不在上面需要下拉，這容易讓人忽略，

10、如果你將問(wèn)題列在一起，然后提供超鏈接跳轉(zhuǎn)到答案， 這樣就可以讓用戶第一眼就可以找到所需要的內(nèi)容。 你所有的FAQs 網(wǎng)頁(yè)都應(yīng)該按照這樣的格式排列。這個(gè)策略是很有利的，不僅因?yàn)閷?duì)那些最終客戶有益，而且這種格式是搜索引擎友好的布局。頂部或者尾部要放上相關(guān)的內(nèi)容，如： “關(guān)于我們”的網(wǎng)頁(yè)或區(qū)域、 “聯(lián)系我們”的網(wǎng)頁(yè)或區(qū)域、 “地址”的網(wǎng)頁(yè)或區(qū)域等。潛在消費(fèi)者尋找你的聯(lián)系信息和你公司的正確拼寫檢查的最可能的地方就是“關(guān)于我們”網(wǎng)頁(yè)，因此，即使你在其他地方提供了聯(lián)系信息， 但將這些信息放在 “關(guān)于我們” 部分也是一個(gè)好主意。尤其是在你把你的聯(lián)系信息放在尾部時(shí)， 許多最終用戶是不會(huì)滾動(dòng)到他們所看網(wǎng)頁(yè)的底部

11、去查找信息的。規(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í)， 使他感覺(jué)和你做生意很舒服。 設(shè)計(jì)意味著利用你的圖片、 字體和樣式的特殊效果，以及你站點(diǎn)的顏色。在站點(diǎn)的設(shè)計(jì)過(guò)程中，有許多方面都是重復(fù)的。站點(diǎn)中的每一個(gè)網(wǎng)頁(yè)在主體文本、超鏈接，以及標(biāo)題中使用的字體、樣式，以及顏色應(yīng)該都是一樣的。如果站點(diǎn)中顯示你提供的產(chǎn)品的照片， 那么照片的尺寸的差別應(yīng)該很小。 水平照片的尺寸都應(yīng)該完全一樣， 垂直照片的

12、尺寸也應(yīng)該完全一樣。 如果你在產(chǎn)品照片中使用陰影效果， 則你應(yīng)該在所有的產(chǎn)品照片中都使用陰影效果。 圖片和文本不該隨機(jī)地或者隨意地被擺放在網(wǎng)頁(yè)上。 網(wǎng)頁(yè)上的每一個(gè)項(xiàng)目都應(yīng)該和其他項(xiàng)目有視覺(jué)上的聯(lián)系。 相關(guān)的項(xiàng)目， 比如主導(dǎo)航欄和次導(dǎo)航欄應(yīng)該放在一起， 這樣它們就會(huì)被看作是聚集成組的而不是不相關(guān)的項(xiàng)目。兩個(gè)導(dǎo)航欄在視覺(jué)上的不同， 在造成視覺(jué)上對(duì)比的同時(shí)也顯示了它們是怎樣聯(lián)系的。 比如， 主導(dǎo)航欄會(huì)用特殊的顏色被顯示在網(wǎng)頁(yè)的頂端， 同時(shí)次導(dǎo)航欄會(huì)用不同設(shè)置的顏色在屏幕的左邊開(kāi)啟， 這些顏色設(shè)置與主導(dǎo)航欄配合得很好。 最終客戶正在訪問(wèn)的站點(diǎn)的那部分的主導(dǎo)航欄按鈕顏色會(huì)改變。 當(dāng)最終用戶點(diǎn)擊主導(dǎo)航欄的

13、鏈接、 次導(dǎo)航欄， 或者子導(dǎo)航欄就會(huì)打開(kāi)。 子導(dǎo)航欄中的文本重復(fù)主導(dǎo)航欄中的文本，更進(jìn)一步表明左邊的導(dǎo)航按鈕是主導(dǎo)航欄的子集。控制小片顯示最終客戶正在訪問(wèn)的網(wǎng)頁(yè)。 主標(biāo)題表明最終用戶正在訪問(wèn)的網(wǎng)頁(yè)， 副標(biāo)題強(qiáng)調(diào)站點(diǎn)這個(gè)部分的主要特色。 副標(biāo)題上的尖頭巧妙地提示它們是超鏈接。網(wǎng)頁(yè)底端的文本鏈接與主導(dǎo)航欄按鈕對(duì)應(yīng)， 這些鏈接表明目標(biāo)客戶已經(jīng)訪問(wèn)過(guò)的網(wǎng)頁(yè)。 超鏈接的顏色與瀏覽器默認(rèn)的顏色相近， 因?yàn)樗徽J(rèn)為目標(biāo)客戶像經(jīng)常在網(wǎng)絡(luò)上工作的人那樣精通網(wǎng)絡(luò)。 如果目標(biāo)客戶迷路了， 或者需要調(diào)整它們的位置， 頁(yè)面切換圖片可以鏈接到主頁(yè)和站點(diǎn)地圖。 導(dǎo)航欄的這個(gè)設(shè)置在每個(gè)網(wǎng)頁(yè)上都是一樣的。規(guī)則五：頁(yè)面快速下載我

14、們都知道， 頁(yè)面下載速度是網(wǎng)站留住訪問(wèn)者的關(guān)鍵因素。 如果 5 秒還不能打開(kāi)一個(gè)網(wǎng)頁(yè)， 一般人就會(huì)沒(méi)有耐心。 頁(yè)面快速下載保證客戶能以最快地速度進(jìn)出網(wǎng)站。我們生活在一個(gè)高節(jié)奏的時(shí)代，沒(méi)人樂(lè)意等待，互聯(lián)網(wǎng)也不例外。雖然互聯(lián)網(wǎng)速度較幾年之前已有了質(zhì)的飛躍， 但事實(shí)上技術(shù)進(jìn)步再快， 也趕不上人們 的要求。所以千萬(wàn)別試圖挑戰(zhàn)訪問(wèn)者的耐性。一個(gè)網(wǎng)頁(yè)為什么需要花費(fèi)很長(zhǎng)時(shí)間下載， 這是因?yàn)楸仨毾认螺d一些附件， 比 如Flash、程序、圖片Shockwave或者特殊效果等等。如果想要“眩”你的網(wǎng)站， 建議最多使用一到兩種特殊效果，那些使人眼花繚亂的圖片和圖標(biāo)往往會(huì)分散訪問(wèn)者對(duì)網(wǎng)站內(nèi)容的注意力， 要是這些圖片的

15、下載速度再慢一點(diǎn)， 很可能訪問(wèn)者等不及它們完全打開(kāi)就失去耐性了。使用較多上面的內(nèi)容的網(wǎng)頁(yè)一般為視頻類或游戲類網(wǎng)頁(yè)，大多數(shù)的網(wǎng)頁(yè)不屬于“視頻游戲”的類別，所以最好縮小你的網(wǎng)頁(yè)，尤其是主頁(yè)的下載時(shí)間。應(yīng)該時(shí)時(shí)提醒自己，網(wǎng)站首頁(yè)就像一個(gè)廣告牌。當(dāng)開(kāi)車經(jīng)過(guò)一個(gè)廣告牌時(shí)，沒(méi)有時(shí)間閱讀上面的詳細(xì)說(shuō)明， 也不可能贊賞其復(fù)雜的圖案， 廣告標(biāo)志從眼前一閃而過(guò)，必須在一瞬間給人留下印象。網(wǎng)上訪問(wèn)者也是“一閃而過(guò)” ，保證你的首頁(yè)簡(jiǎn)單而快速，放棄一切顯著減慢主頁(yè)速度的資料。要保持頁(yè)面下載速度的主要方法是讓網(wǎng)頁(yè)簡(jiǎn)單， 只把最重要的信息安排在首頁(yè)， 盡量避免使用過(guò)大的圖片， 更應(yīng)避免自動(dòng)下載音樂(lè)或其他多媒體文件。 這就

16、要求主頁(yè)大小不應(yīng)超過(guò)50 KB。下面是一些通常減少你網(wǎng)頁(yè)下載時(shí)間的原則：(1) 盡量少地使用 Flash 動(dòng)畫：僅僅在你的站點(diǎn)最重要的部分吸引注意力的時(shí)候才使用動(dòng)畫。即便要使用動(dòng)畫，動(dòng)畫的數(shù)據(jù)量也要盡可能地小。(2) 遵循簡(jiǎn)潔規(guī)則：你想要你的顧客注意到你站點(diǎn)上所提供的產(chǎn)品、服務(wù)和信息，而不是你站點(diǎn)的精美設(shè)計(jì)。(3) 產(chǎn)品照片使用小圖片，被稱為“ Thumbnails ”：在你的產(chǎn)品網(wǎng)頁(yè)中，許多小圖片組成的圖庫(kù)下載起來(lái)要比整張的圖片快得多。 在你的目標(biāo)客戶產(chǎn)生興趣以 后，再給他們查看大圖的機(jī)會(huì)。(4) 為了更快地下載，總是從大圖片創(chuàng)建成單獨(dú)的、獨(dú)特的小圖片：所有的圖片都應(yīng)該在圖像軟件中重新調(diào)整大

17、小，而不是在html§言中。(5) 盡可能地在你站點(diǎn)的多個(gè)網(wǎng)頁(yè)中使用相同的圖片：使用圖片的一致性可以提高你介紹的連續(xù)性。 比如說(shuō)， 在你站點(diǎn)的每一個(gè)網(wǎng)頁(yè)上都放上你的商標(biāo)， 這對(duì)瀏覽和商標(biāo)品牌都有好處， 同時(shí)它還能幫助你的目標(biāo)客戶了解他們一直在訪問(wèn)的站點(diǎn)到底是誰(shuí)的。 商標(biāo)圖片只需要下載一次， 因?yàn)樗鼤?huì)被儲(chǔ)存在瀏覽器的高速緩沖存儲(chǔ)器中。 當(dāng)訪問(wèn)者在你的站點(diǎn)中四處瀏覽的時(shí)候， 每個(gè)網(wǎng)頁(yè)中的新圖片都下載時(shí)間不僅僅對(duì)于你的目標(biāo)客戶來(lái)說(shuō)十分重要， 而且對(duì)搜索引擎的可視性 來(lái)說(shuō)同樣十分重要。當(dāng)搜索引擎蜘蛛向你的服務(wù)器中請(qǐng)一個(gè)網(wǎng)頁(yè)的時(shí)候， 如果下 載時(shí)間太長(zhǎng)，或者你的服務(wù)器不能很快地將網(wǎng)頁(yè)遞交給蜘蛛，那么搜索引擎可能 就不會(huì)將這個(gè)網(wǎng)頁(yè)加入到索引中。了解目標(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)頁(yè)的下載。 然而，如果你是向忙碌的制造商出售機(jī) 器零件，訪問(wèn)有價(jià)值信息的容易程序就應(yīng)該是你主要關(guān)心的問(wèn)題。這些準(zhǔn)則是相互關(guān)聯(lián)的，理解這一點(diǎn)非常重要。比如，假如說(shuō)你的主頁(yè)在某 個(gè)主要搜索引擎中關(guān)于你的目標(biāo)關(guān)鍵詞所排的位置是第一位，同時(shí)人們點(diǎn)擊鏈接訪問(wèn)你的站點(diǎn)。如果你的站點(diǎn)設(shè)計(jì)者將大量的圖片、 動(dòng)畫，以及文字放在你的主 頁(yè)，導(dǎo)致了下載速度放慢，那么大多數(shù)人就都不愿意