Spek 商城使用體驗報告

昨天， Steven成功入職Spek公司，負責公司的商城系統開發，上班第一天老大讓我們分析一下自家的商城系統並且和幾家競爭對手的商城系統做一下對比。給出一份體驗報告。
接到這個任務之後，我動起了腦筋。思考哪些地方可以改進，思考體驗之後，發現如下可以進行改進。
一、頁面佈局：
I、Banner層的寬度大小：
Spek:654*430

圖1 . Spek banner

Xiyu:743*403

圖2.西域Banner
1688:760*300

圖3.1688Banner
由於日常我們眼睛對於圖片的喜好受電視和電影的影響，圖片的長寬比例控制在16:9或者附近的時候會更具有欣賞性，所以我們的圖片顯得比較“胖”，缺乏美感！
優化建議：調整banner層的寬度，使之儘可能接近16：9的比例，更符合大衆用戶的審美習慣。

II、二級菜單頁面的排版

圖4.Spek二級菜單排版
Banner層左邊的一級菜單，鼠標點擊上去滑出的二級菜單顯得非常凌亂，而且各個菜單切換的時候有一種明顯的閃動感。而西域、米思米以及1688都沒有這樣的問題。另一方面，子菜單的下拉高度太長：以左邊的“防護安全”菜單爲例（如圖5），當我把鼠標放上去的時候，下拉頁面甚至超過了一個顯示器的寬度，這就需要我往下滑動鼠標才能看到所有的商品分類。

圖5.Spek二級菜單截圖

而反觀西域和1688的頁面佈局，都沒有超出左邊一級菜單的寬度。所以在二級菜單的處理上，顯然西域和1688處理的更好。雖然西域的做了下拉條的處理，犧牲了部分交互體驗。

圖6.西域二級菜單截圖

圖7.1688二級菜單截圖

優化建議：優化二級菜單的佈局，可以參考京東或者1688的佈局排版，使之看起來整齊。同時儘量使二級菜單的寬度不要超出一級菜單太多

二、顏色處理
(a).二級菜單頁面的背景色並未與主界面的背景色有明顯的區別，看上去缺少“層次感”。
(b).二級菜單的邊框的邊框線顏色太淺，容易和右邊的界面連在一起看着比較混亂。西域採用的純綠色邊框，米思米採用的純藍色邊框。
(c).二級菜單裏面的分割線直接採用了黑色，顯得比較”硬”，看着割裂感很強，視覺感差。
(d).左邊的一級菜單，鼠標點擊上去的時候沒有變色，沒有提示到用戶正在瀏覽哪個大類。圖7中1688的就很好的處理了這一點。

圖 8 Spek二級菜單截圖說明

**優化建議：
(a).修改二級菜單頁面的背景色，使之和主界面的背景色有區別，建議用色#F7F7F7
(b).修改二級菜單的邊框顏色，使之和主頁面的邊框色有區別。
(c).修改二級菜單的分割線的顏色，不要採用黑色。
(d).一級菜單在鼠標放上去的時候整體加一個背景色，可以參考JD或者西域。**

三、購買的流程：
當在思貝克商城購買的時候，在未註冊的情況下，在商品詳情頁點擊加入購物車，彈出的界面裏面沒有註冊選項，用戶需要在退出後再次點擊註冊，這樣就中斷了用戶的購買行爲。在購買成功之後，也沒有相應的提示信息可以返回到之前的瀏覽界面。反觀西域商城是類似於現在絕大多數商城（JD、淘寶）先讓用戶把商品加入購物車再登錄或註冊（如圖9）。
在加入購物車之後，JD採用的是彈出界面的形式，西域採用的是頁面跳轉到登錄界面的方式，這一點體驗京東要更好一些。

圖9 用戶的加入購物車時候的彈窗截圖

圖10 京東結算時候頁面截圖
西域在購買便捷性上做的很好的一點在於，首頁瀏覽的時候，鼠標放上去就可以看到一個購物車圖標（如圖11），點擊這個圖標就可以直接把商品加入購物車，很方便實現購買，不用跳轉到詳情頁面。

圖11 西域首頁購物車圖標效果截圖
優化建議：在用戶點擊購買的時候不做限制，讓用戶加入購物車，在付款結算的時候再讓用戶登錄/註冊，登錄建議做成彈框的形式。

四、用戶的瀏覽習慣和購買決策：
在首頁展示商品的時候，很明顯可以看到兩個客單價比較高的商品，經濟學規律表明：客單價高的商品用戶購買起來會更加謹慎，相應的決策成本也更高，而我們把兩個客單價如此高的商品放在這裏可能會給用戶一種商城的商品並不便宜的感覺，可能導致用戶購買的慾望下降等。而反觀西域，則設置的比較合理，通過幾個輪播頁面顯示，把客單價高的商品分散到幾個客單價比較低的分頁面去。讓客戶更容易接受，也不會一下子產生“商品並不便宜”的感覺。

圖12 Spek首頁的商品展示

圖13 西域首頁輪播頁面展示商品截圖

圖14 西域輪播頁面展示商品截圖