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