【文章內容簡介】 06) 只是 搜索欄 的位置相對于京東更為靠上，而 網站的導航位于搜索欄下方，頁面的上部，而商品分類則顯示在頁面的左側，這樣的布局 與國人的瀏覽習慣相符合，同樣分類導航也是鼠標移上便自動顯示其詳細分類。而網站的導航欄則是根據商品的類別劃分，而非是網站的功能，感覺這樣更加直觀，更易于用戶使用，用戶可以根據自己的購買目的去點擊相應的導航。 在首頁上，一些著 名品牌的商品、正在進行活動中的商品以及秒殺活動以flash 形式循環(huán)展示在頁 面的顯眼位置。 以第一廣告位為界，首頁分為了上下兩部分，第一部分主要是品牌推薦和促銷活動專區(qū)，在這一部分的頁面左側首先展示的是新進駐的商家，然后是淘品牌。 而在第一廣告位的下面則是仿效現實中的商城，將余下的頁面分為了十一樓，每一樓都是一種類型的商品，而在其左側所顯示的是這類型商品的一些著名品牌，與京東商城相似的，商品的展示是以文字和圖片相結合，但文字并沒有商品的簡介，而只是一些銷售宣傳語，對于折扣的商品則是在圖片上顯示出紅色的圓形符號。 在第十一樓下面則是商品的具體分類和一些知名品牌的店鋪鏈接，最底部則是商城保障、新手上路、支付方式、商家入駐等網站服務。 總的體驗是淘寶商城的層次感和分類比京東更為詳細和清晰，而且由于是采用類似于實體商城的展現方式，使得用戶在瀏覽時更為親切和熟悉，并且左側所陳列的那些品牌鏈接能夠讓用戶迅速的找到自己所喜歡的品牌 ，在商品的展示欄上面有著該類商品的一些熱門關鍵詞，用戶點擊進去之后是與之相關的頁面，如果關鍵詞是某一品牌，則會直接進入該品牌的店鋪，如果不是則是搜索結果的集合。 淘寶商城的廣告位起到一個分割的作用，如商 城的樓層之間，活動專區(qū)與商城之間，其廣告圖片與網站的整體色調相一致，雖然位于頁面正中，但由于與頁面的非廣告內容的區(qū)別較大，所以并不會對用戶的瀏覽造成妨礙，也不會干擾用戶的視線。 網站導航設計 網站的導航機制體現了網站的內容架構，其是否合理是評價網站易用性的重要指標之一。網站的導航一般包括全局導航、輔助導航和站點地圖等，主要起到體現網站結構和引導用戶的作用。 6 網站導航對于用戶形成對網站的正確空間感和方向感起到重要作用，一個正確的網站導航能夠讓用戶無論進入網站的哪一頁，都能對自己所在的位置有 個清楚的認識，因此網站導航應讓用戶易于理解和方便使用。 一、 全局導航 京東商城的全局導航如 圖 3 所示，可以看出其全局導航是一組以一致的外觀出現在網站的所有頁面的通用導航元素，其對用戶的訪問起到最基本的方向性指引，并且包含了搜索欄 與購物工具這兩大元素，這樣用戶在京東商城任何頁面都能對商品進行搜索和與購買相關的行為，比如將商品加入購物車。 圖 3京東商城全局導航 (截圖日期 20xx0406) 當點擊導航跳轉到其他頁面時，點擊網站 logo 也同樣能返回網站首頁，站點 logo 具有返回首頁的作用，同樣在導航條 的左側第一個欄目顯示出首頁的鏈接和提示，而且全局導航有且僅有一級欄目，沒有下級分類，并且高亮用戶當前所在頁面名稱，這樣無論用戶身處網站何處都不會迷路。 淘寶商城的全局導航如 圖 4 所示 ，導航條的整體顏色以黑色為主，字體顏色則是白色，這樣顯得比較醒目，同樣點擊其中一個欄目跳轉到相應頁面后也有返回商城首頁鏈接，只是導航 條已經消失了，只剩下路徑的指引，如圖 5 所示，但點擊淘寶商城四個字依舊能夠返回，與京東商城不同的是淘寶商城在點擊導航條欄目時所打開的頁面是在瀏覽器的新窗口中，而京東則是在原來頁面內打開鏈接，大概是因為這 個原因，所以打開的頁面上導航條并沒有保留。 雖然全局導航并未保留，但由于是在新窗口中打開的，并且在頁面的左上角有路徑提示，所以用戶依舊不會迷路，但是從個人感覺上說，京東的全局導航更為方便，而淘寶商城雖然不會導致迷路，但若要點擊全局導航上的其他欄目時需要返回商城首頁或者切換窗口，給用戶增添了些不必要的步驟。 圖 4淘寶商城全局導航 (截圖日期 20xx0406) 圖 5淘寶商城全局導航路徑指引 (截圖日期 20xx0406) 7 二、 分類導航 對于 B2C 商城而言，為了能滿足用戶的多種需求，讓用戶能 夠快速的找到自己所需的商品，分類導航是不可或缺的，由于每個 B2C 商城的商品不盡相同，所設置的商品分類也肯定會有所區(qū)別，但無論是怎樣的商品分類導航，都必須做到分類清晰明了，而頁面的點擊數應控制在三次以內。 圖 6京東商城分類導航 (截圖日期 20xx0406) 京東商城的商品分類導航如 圖 6 所示，商品是按照種類進行分類的，無需點擊，將鼠標移到相應的項目上便會自動展開子項目，子項目則是詳盡的類別細分。 點擊進入后是類似于搜索結果的頁面，用戶可按照自己喜好對該頁面的搜索結果進行篩選、排序等操作。并且 分類導航也會隨之改變，顯示為當前類別下的更為細致的劃分，原來的導航自動折疊。并且在緊靠分類導航欄的上方顯示出輔助導航條，以“ ”來對層級進行分割，直觀而又形象的從視覺上顯示了瀏覽層次的遞進關系，同時也能讓用戶對自己目前所在的位置一目了然，用戶也可通過輔助導航依 次返回上一頁、首頁，其鏈接形式采用的是文本而非圖片鏈接，頁面如 圖 7 所示 。 8 圖 7京東商城分類導航路徑指引 (截圖日期 20xx0406) 淘寶商城 的分類導航 如圖 8 所示，其結構 與京東商城類似，其樣式相仿，不同的只是商品的分類而已，但是在淘寶的展開 的分類導航的右側有相應的商品推薦，這點對于用戶查找該分類項目下的熱門商品和品牌 而言，在很大程度上簡化了用戶的操作和點擊數，顯得比較人性化。 當點擊其中的任一分類鏈接時，依舊是在瀏覽器的新窗口中打開頁面，同樣也是一個搜索結果的集合頁，用戶依舊可以根據自己的喜好和習慣對搜索結果進行篩選、排序等基本操作。在頁面的左側所顯示的是該大分類下所有的詳細分類，在詳細分類的右側括號內所顯示的是匹配的結果數。 圖 8淘寶商城分類導航 9 在這個搜索結果頁面里，原有的分類導航被替換為了該大類的詳細分類導航，如果要重新選擇商品 大類，即點擊所有商品分類鏈接時會在新窗口打開頁面，這點感覺比較煩人，沒有京東的設計人性化和方便 . 如圖 9 所示，輔助導航顯示在頁面緊靠著分類導航欄的右側， 仍然是以“ ”作為分隔的標志，突顯出分類的層次性和邏輯性，點擊鏈接可以返回上一個分類，但是點擊 “所有商品分類”鏈接時依舊是在新窗口中打開頁面，在這點上京東的分類導航設計在用戶使用體驗上要優(yōu)于淘寶商城，用戶無需進行多次的重復和頻繁的窗口切換便能跳轉到自己需要的信息所在頁面上，而淘寶商城則需要較為繁瑣的點擊才能讓用戶達到操作的目的。 圖 9淘寶商城分類導 航路徑指引 三、 網站地圖 網站地圖（ SiteMap）能將網站內深層次的鏈接關系以一個扁平的頁面呈現出來，能讓用戶對網站的結構和內容進行快速了解和初步認識，使得用戶對網站的各個區(qū)域劃分的具體位置有個大概了解。網站地圖結構的合理，不僅是對搜索引擎的友好表現，同時也能讓用戶對整個網站有個初步的印象。 京東商城沒有設置網站地圖，淘寶商城的網站地圖分為五個部分，分別是我是買家、我是賣家、淘寶社區(qū)、賬號管理以及開放平臺。在每一個部分里面列出了與該分類相關的網站所提供的各項功能，并且以 板塊分類的方式展現，每個功能前配 以圖片和文字說明，顯得更為直觀形象，讓用戶能夠很快的找到自己所需的功能。 四、 瀏覽器兼容性 10 網站的 瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。 由于用戶所用的瀏覽器不盡相同 ，因此對于 B2C 網站而言，應盡可能的保證用戶即使使用不同的瀏覽器也能看到同樣的頁面顯示效果，從而優(yōu)化用戶客戶端方面的體驗，無論是京東商城還是淘寶商城對四大主流瀏覽器“ Safari、 Chrome、 IE、 FireFox 的兼容性都很好，頁面顯示和網站功能都能正常顯示和使用。 網 站內容 網站內容架構與界面布局具有緊密的聯系，用戶的瀏覽習慣和網站的信息規(guī)劃是網站界面布局 的依據，合理的網站布局能夠將內容有序的呈現給用戶，將網站的重要信息放置于頁面的重要位置使之能夠得到重點體現。 京東商城的網站首頁 如圖 10 所示：其第一屏中的重要位置放置的是搶購的商品信息，以 幻燈片形式呈現的是一些折扣商品，而廣告則放置在頁面的兩側。在搶購專區(qū)下面是新品信息和特價專區(qū)，依次形成具有層次感得網站頁面架構 。 對于前來購物的用戶，其所關心的內容一般都是特價、折扣和新上市的商品，因此京東商城將這三個方面的內容依 次放置在首頁的不同位置，這樣對于用戶而言，自己所關心的信息能夠在最短時間內獲得，而不必再去搜索和查找。 圖 10 京東商城網站首頁 京東商城主要是 3C 產品的銷售，因此在網站的顯眼位置所放置的商品幾乎都是 數碼產品，而相對的，服飾、化妝品、食品等則在首頁上很難看到，即便是促銷、搶購、折扣信息也大多是與數碼相關的產品。 11 京東商城在首頁的幾大主要板塊的標簽上采用的是相同的背景樣式和字體顏色，而在這些板塊之下的平行分類的視覺樣式也是一致的，并且具有一定的相關性，這樣方便了用戶的辨認和查找所需信息。 相對的，淘寶商 城同樣是把熱銷品牌和促銷活動放在網站的首要位置，也是采用 flash 幻燈片的形式向用戶展示商品的銷售信息，這種方式的 展現不僅保證了頁面的美觀，并且相對于文字而言，精美的圖片不僅更加直觀形象，而且更能激發(fā)用戶的購買欲望，在一定程度上增加了用戶的轉化率。 在每一層級的分類版塊里，商品信息的呈現方式是一致的，并且具有相關性的分類，在視覺表現方式上也是具有相連性的，這樣用戶能很容易的將不同的分類信息區(qū)分開來，不會視覺上導致混淆，并且給人一種整潔清晰的感覺，整個頁面顯得較有層次性，即使圖片很多的情況下也不會讓用戶感到雜 亂和太過花哨，并且在視覺上的一致性也保證了頁面的整體風格，從而保證了網站頁面的整體的美觀。 網站交互體驗 用戶注冊 對于一個電子商務類網站而言，注冊頁面的功能，是用戶取得網站會員資格的一個基本途徑，因此該頁面的設計應在盡可能簡潔的情況下去實現注冊這個功能，從京東商城 和淘寶商城 的注冊頁面可以看出 （圖 11 和圖 12） ，該頁面只了包含一些必要的元素，如用戶名、密碼、郵箱、驗證碼。 圖 11京東商城用戶 注冊頁面 12 圖 12淘寶商城用戶注冊頁面 采用簡潔的注冊頁面能很好的避免繁雜的頁面給用戶帶來的恐懼和厭惡感，對于一個新來的用戶而言，注冊電子商務網站會員的根本目的是為了更方便快速的進行購物，以及享受網站所提供的其他相關服務，因此注冊過程因盡量做到簡潔和方便，從而節(jié)省用戶在注冊上所耗費的時間和精力。并且能在當用戶對網站產生興趣，并覺得網站對自己有價值后，只需通過簡單的引導，便能讓用戶對自己的個人資料進行相應的修改和完善，這樣既能提升用戶的注冊體驗，又為后續(xù)收集更多有更大價值的用戶信息做好了基本的準備。 并且在注冊過程中對當前注冊所填選項的相關細則或者規(guī)矩進行了相應的提示，提示信息清晰明確但并不喧賓奪主，其主要顏色為灰色，與標簽的顏色有著明顯但并不過于巨大的差別，在視覺上對用戶不會造成較大的干擾 。 如圖 13 所示，這是京東商城的注冊頁面，在用戶 名輸入框下面，以淡灰色的文字對用戶在用戶名的填寫過程中，所應注意的事項進行了言簡意賅的提示，并在輸入完畢后對用戶名進行一個重復性的檢查，如果用戶名有重復，則在輸入框下以紅色文字提醒用戶 （圖 14） ，這樣可以防止用戶在填完所有注冊所需信息后點擊提交后發(fā)生錯誤，從而導致用戶注 冊失敗。 13 圖 13京東商城用戶名輸入框 圖 14京東商城用戶名重復提示 同樣在填寫登陸密碼時，京東商城會對用戶所輸入的密碼進行一個安全程度的檢查，并在輸入框下方給與提示，以方便用戶對自己密碼的強弱性有一個大概的了解 （圖 15） 。 圖 15京東商城密碼強度檢測 與京東 商城 不同的是淘寶 商城 在用戶輸入會員名時，如果該會員名和已有的會員名重復，頁面上不但會顯示會員名已被使用，并且會在輸入框下方給出一些系統(tǒng)推薦的用戶名 ，如圖 16 所示 ，這些用戶名是在用戶輸入的用戶名基礎上進行一些修改而自動生 成的。 圖 16淘寶商城用戶名重復提示 而在密碼的輸入上，淘寶 商城 除了會提醒用戶所使用的密碼的強度外，還不允許使用全為數字所組成的密碼，京東則沒有這方面的要求 （圖 17） 。 圖 17淘寶商城密碼安全性檢測 京東商城的注冊只有一步，當用戶提交成功后，便跳轉到如下頁面，點擊下面按鈕便會自動返回首頁 （圖 18） 。 14 圖 18京東商城注冊成功頁面 而淘寶則會跳轉到驗證賬戶信息的頁面，并提供了兩種驗證方式，分別為手機驗證和郵箱驗證，選擇郵箱驗證后，