amazon和京东商城网站导航条使用体验

京东商城的左侧导航条是完全模仿amazon的效果，虽然两者的功能看似相同，不过使用上京东的导航条会让人感觉很别扭，那么为什么两个相同功能的导航条使用体验却不同呢？

就上面的图片来看，两个导航有三点差别，这也导致了他们的用户体验的差距：

1、导航条的宽度

首先来看京东的导航条的宽度明显比amazon要宽处许多，经过计算为211px，而amaxon只有161px，两者相差50px。那么宽度的差别会产生怎样的影响呢？经过使用后会发现，每次当用户想选择其他分类的时候，当鼠标移动到导航条上，amazon很容易就能显示二级菜单，随后再次往右移动选择分类即可。而东京则要多移动50px，往返就多出了100px的距离。至于这点距离到底会产生什么影响，相信只要各位分别体验下两者的导航条就会知道。

2、导航条的触发未知

其次来说两者的层次结构都是两级，不过amazon每行按钮都可以触发下一层分类，用户之需要碰触到每行按钮边上即可。而京东就要差很多了，只有移动到按钮上的文字才能触发下一层分类。另外一点每行按钮都放了多个单词，第一眼看上去完全不明白这是一个二级分类按钮，很多人可能会误以为是直接的文字链接。因此用户在使用上会有很大的挫败感。

3、导航条的文字

由于京东导航条的设计是每行多个文字，而其中一级分类是黑色文字，二级分类是灰色的。因此鼠标移动到一级分类上时原本的二级分类的灰色文字就消失，这个效果感觉很莫名。

以上三点看出京东的导航条在初始设计上可能考虑将部分二级分类直接放在导航按钮旁边，就因为这样一个改动，使得原本简单好用的导航条变得十分得繁琐，另外用户使用上也很不习惯。对于导航条设计来说，因该将主要功能放在首位，次要功能隐藏。特别是对于电子商务网站，因该给予用户更方便的使用操作，因为用户上网站的根本是查看和浏览商品的，即便出色的功能如果对用户基本的浏览产生了影响，那宁愿删去不用。

下面看下对于京东导航条的解决方案

通过上图我们来看，左边是京东，右边是amazon，针对上面的三点，我们可以通过以下方法进行改进：通过整体性，减少鼠标移动距离，改善整体体验。

根据认知心理学的原理，一个直觉呈现中的元素主要依据接近律进行组合或聚合同域律：观察者倾向于把属于同一区域或范围的元素直觉为一个整体

也就是说从直觉角度来增加用户的可浮动区域，这样的话用户就会把一行看成一个整体，虽然整个导航的宽度不变，但是因为把一行看成一个整体，这样用户在鼠标浮动选择的时候，就会偏向于中心，这样就达到减少鼠标左右移动的效果了。