B2C網站天貓和京東商城的用戶體驗對比

　　之前我在《轉戰B2C網站開發與建設》一文中提到過用戶體驗，本文主要闡述一下我對用戶體驗的理解，和在開發網站的同時應該注意到用戶體驗的哪些方面。

　　用戶體驗，那到底什麼是用戶體驗呢?不同的人對此有不同的理解，簡單的說用戶體驗是用戶使用某網站購物的全部感受，對於B2C來說，用戶體驗應該是貫穿用戶購物的全部過程，從我們產生購物欲望到發現網站去購買，一直到付款結束，這一整個過程給我們留下的一種印象。

　　在舉例：我們經常去網店買東西，比如買電器去京東，買書去當當，買服裝去凡客，買亂七八糟去淘寶等等，為什麼我們分的這麼細致，難道就是因為他們比較專業?我覺得不全是，因為這些網站給我們的用戶體驗不同，從“響應時間①”、“可用性②”和“穩定性③”三方面進行衡量一個網站的用戶體驗標准型。

　　但是B2C網站的整體架構大致都是相同的，正常浏覽者也看不出來好與壞，只能靠視覺上來判斷一個網站的可行性，然而我們也習慣了現在B2C網站的傳統風格，當我們打開B2C網站，立刻讓人產生和別的網站不同的感覺，這就是所謂的用戶體驗。

　　①響應時間：網站一個網頁能夠完全打開所需要的時間。能夠最直觀的反映網站質量的重要標志-速度，這也是網站的用戶能夠最直接感受到的。

　　②可用性：在一段時間內網站的網頁能夠被成功打開並浏覽的比率。這反映了網站用戶能夠成功完成網站應用的可能性。

　　③穩定性：一段時間內響應時間的標准偏差。這一指標表明了用戶訪問網站時在不同時段，不同地理位置，通過不同網絡接入所感受到的網站的速度穩定情況。

　　(以上三個性能指標釋義來自Gomez Benchmarks)

　　角度和其他類型網站對比

　　一、B2C網站與企業網站

　　企業網站展示的是一個公司的形象，一個好的企業網站能代表整個公司的臉面，雖然企業網站也有商品和產品展示的功能，但它突出的並不是單一的商品，而是整體的形象。企業網站注重的是頁面的視覺效果，很多企業網站都選用flash作為形象頁，這足以說明企業網站對整體要求的嚴格性，企業網站給用戶的體驗是一種整體的感覺，也是一種符合企業文化的風格與氛圍。

　　對比企業網站，B2C網站在用戶體驗上更需要的是商品的突出性，圍繞商品做周邊化的拓展，這是關鍵性的。

　　二、B2C網站與門戶網站

　　門戶網站通常認為是“百貨市場”，它是綜合性互聯網信息資源系統，這種網站的主要是以文字為核心的展示方式，門戶網站頁面是最長的，10多屏的都有，垃圾堆一樣的感覺，但門戶網站追求的是信息量，這我們也說不出來什麼，中國的門戶網站就是如此了。

　　對比門戶網站，都有龐大的用戶群體，都有強大的服務器支持，界面要比門戶網站清晰挑理，一個是以商品為主，一個是以信息為主，截然不同的方向。

　　三、B2C網站與行業網站

　　行業網站顧名思義，是以行業為區分的網站，也屬於行業門戶，“門+戶+路”三者的集合體，主要信息是本行業有關的資訊、商機、商品等。行業網站在用戶體驗方面，追求的是一種行業精神，不管是頁面結構還是設計理念，他們都有很大的相同之處，區別在於風格和內容。行業網站給人的感覺就是進了某種商品的批發市場一樣，可以了解到該行業的任何資訊，這是很不錯的商機來源。

　　對比行業網站，B2C網站也有行業的概念，很多B2C網站就是以本行業為核心進行拓展，舉兩個例子：“京東商城”和“當當網”，之前“京東商城”一直走數碼家電路線，當當網也只是賣書的，後來都拓展的全方面攻勢，這就是行業外的擴展，不過B2C網站很多還是行業化的，比如樂淘目前還是賣鞋，麥包包目前還是賣包，等等，個人認為行業化的B2C網站對用戶體驗來說，是一種專一和專業，在浏覽角度和購買商品的意識上都有很唯一的選擇，我覺得大多數人還是喜歡專業一點的東西。有一句話說的好：“簡單的事情重復做是專家，重復的事情用心做事贏家!”

　　從UE角度和同類網站對比

　　大家先看一組統計：

　　以上統計是2011年中國B2C網站用戶量前10排名，淘寶商城和京東商城位居一二名，所以我選擇用他們進行對比，這兩家都是綜合性的大型購物網站，幾乎涵蓋了市面上的所有商品，比較有對比性。

　　下面是我對兩個網站的首頁對比，首頁是用戶對網站的第一感覺，也是取決於用戶所停留的時間，我用頁面第一屏進行兩個網站的分析。

　　PS：我的電腦屏幕分辨率是1440*900像素，浏覽器為Firefox10.0。

　　天貓首頁：

　　風格：天貓繼承了以往傳統淘寶商城的風格，以深紅色為主色調，灰、黑色為輔，進行搭配，在頁面分辨率上選擇了寬度為970px的固定尺寸，header部分和slides部分的背景顏色是100%的通欄，分別選用深紅色和灰色。

　　導航：主導航為黑褐色背景，白色字體，左側商品分類菜單為三塊大的分類默認為所有商品，三種大分類都使用了不同顏色的菜單背景，對不同分類產品進行視覺上的渲染，比較人性化，頂部導航，設計的也比較精致，深紅色的背景淡黃色的字體。顯現出頁面還是很莊重的。

　　搜索欄：搜索欄靠右，向左側延伸，超過頁面總寬度的一半，比較大氣，有規律設計，很長的表單也方便用戶的搜索商品。

　　幻燈片：使用了五幅大尺寸活動的幻燈片，很顯然是以推薦活動為主，用大尺寸圖片沖擊用戶的視覺，使用戶產生點擊的欲望。

　　優點：總體來說天貓首頁設計的很精致，略有高貴的感覺，但不是很明顯。從顏色上的搭配和布局結構上看都很合理，讓浏覽者能知道如何往下進行。

　　缺點：LOGO的右側header部分略顯有點矮，給人感覺比較壓抑。特別是“贏千元”廣告，上下部分很緊湊，看時間長了，感覺很累;幻燈片上的延遲加載效果，沒有用loading代替圖片，在讀取圖片過程中，圖片是一點點從上往下顯示的，這塊用戶體驗不好，如下圖。

　　京東商城首頁：

　　風格：京東即改版之後頁面給人一種很大氣、眼前一亮的感覺，特別是分辨率的判斷上很人性化，最大寬度為 1210px，最小為990px的兩種尺寸，根據客戶端電腦分辨率進行判斷，我以1210px的寬度來分析，網站整體為白色背景，頁面結構上為三欄，第一屏能看到header部分和slides以及推薦的三款商品，右側有三個模塊，主要的網站元素都可以看見，頁面設計的感覺非常的敞亮，很清晰。

　　導航：新版的主導航和舊版相比是截然不同的感覺，大氣，簡潔，同樣采用紅色的導航背景，體現出了鮮明與穩重，也是網站的重心之處。相比天貓要簡單了許多，用戶看著不那麼累，很容易就可以找到自己想去的入口。在加上導航背景的設計，40多像素的高度搭配14像素的文字，可見設計師著重考慮網站大氣與簡潔化，左側分類菜單的設計沒什麼太大變化，同樣繼承了前身的做法，分類菜單都是大同小異，沒什麼可說的。頂部鏈接導航也很低調簡單，配合了整體的風格。

　　搜索欄：與天貓不同的是京東的搜索欄header的中間，也非常搶眼的位置，京東利用搜索框推廣他其中某一件商品，而且表單下面帶有“熱門搜索”的一些Tag。他們的出發點除了讓用戶搜索其他商品，而且還推薦給用戶自己想推廣的商品，這樣的好處是，用戶可以知道哪些東西賣的最好，哪些東西是最新上架，很好的設計理念，推薦這樣的做法。雖然很多網站都這樣用，但不會讓用戶反感，因為用戶確實真的想買這個東西。

　　幻燈片：幻燈片采用了五組大圖廣告和主推商品組合式的配套切換效果，一副大圖下面跟著三款商品定時的切換。這是比較個性的做法，可以說和是合理的運用了有力位置，既能推廣活動又能促銷新品和折扣商品，但是我觀察了一段時間，並沒發現廣告和商品的關聯性，不知道這樣做和普通推薦商品有什麼不一樣，難道就只是利用一下位置麼?我感覺不如天貓，人家就很專一啦，就是活動廣告，大幅的，讓人看一下就知道是活動，然後廣告下面是推薦的商品，這多清晰，不是嘛?

　　優點：京東給我的感覺就是大氣，除了大氣還是大氣。可能就是因為頁面寬度的原因吧，總體來說設計的還不錯，內容挺多，但是很清晰，不那麼亂，白色的背景和灰色的商品模塊，體現出一個網站的簡潔性，用戶長時間浏覽不會覺得累，大分類使用不同的高亮顏色區分不同行業商品，避免讓用戶長時間查找商品所產生的視覺疲勞，京東這次改版，很多地方還是可以借鑒的，值得電商同行們學習。

　　缺點：上面說過幻燈片地方插入了促銷商品，我不喜歡這樣做，因為我沒看懂有什麼關聯性，這樣做會讓人花費時間去看它們之間的關系，到最後是沒關系的，給人感覺很不好。還有就是右側邊欄，羅列著很多廣告和品牌列表，太密集了，我看了一會，感覺好累。可以嘗試減少幾個廣告，換成較大的圖片，這樣看起來就舒服的很多。

　　結語：以上我就先闡述了這些，主要針對這兩個網站頁面的用戶體驗進行了個人分析，至於他們之間走什麼路線，今後有什麼發展趨勢，我不發表意見，高手之間的競爭我們