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 西域轮播页面展示商品截图