Amazon、京东与淘宝的首屏之我见

Author : lovecicy

amazon box

以前一直觉得Amazon的页面很简陋,页面也不丰满,相比淘宝首页中部密密麻麻的商品分类文字,或者京东首页琳琅满目的商品图片,Amazon的首页简直太没有视觉冲击力了,丝毫不能勾起用户购买的冲动。

今天本来想买一本书,上了Amazon看看,突然觉得Amazon的页面看着怎么舒服了。可是往下一翻,看着最底下最近浏览商品那一栏,发现顶部那淡蓝色的渐变和下面翻页的按钮,依然觉得不堪入目。最下面的footer这大胆的留白,也显得太苍白了吧。

仔细想了想,发现只是打开网页的时候,映入眼帘的首页顶部让人觉得赏心悦目。简单浏览了下淘宝和京东,发现首页顶部都是相同的3栏布局,刚好占满整个屏幕。左侧导航,中间是大面积的图片,右边侧栏则不尽相同。再对比一下,感觉Amazon的页面最清爽,干净,淘宝左右两侧的留白则让人觉得不是那么刺眼,而京东满屏艳丽的色彩却让我觉得很刺眼。

中间栏

首先说说中间栏,都是广告,大同小异,但是还是觉得Amazon的最清爽。Amazon的中间栏分为两栏,上面是推广栏,下面则是根据浏览记录对个人的推荐;而京东也是两栏,只是上下两栏是关联的;淘宝则是三栏广告。广告图片的风格,感觉Amazon是小清新,淘宝是俏皮,京东则是大字报。

Amazon center column

Amazon center column

 

右边栏

再说右边栏,区别就挺大的,Amazon是整齐的一排广告,而淘宝和京东则都是密集的文字和Tab。给我的感觉是Amazon很干净,但是不够方便,淘宝和京东虽然布局复杂却功能强大,很方便。

Amazon right column

Amazon right column

左边栏——重头戏

最后说说给我印象最深刻的左边栏,导航栏,却尽显功力。淘宝的左边栏就是一些静态的链接,没有二级菜单,很直观,没什么好说的,反正我是从来没有用过这个菜单,所以下面的对比都是Amazon和京东之间的比较。Amazon和京东则都是商品分类。网上都说京东是抄袭Amazon的,从布局就能看出来,特别是连菜单上面的文字都是相同的——“全部商品分类”。尽管结构大体相同,但是呈现出来的效果确实一个天,一个地啊。

左边栏的外观对比

首先说外观吧,Amazon的菜单白底黑字,菜单的三面边界用阴影效果和其他部分分隔出来,顶部为黑色的边框,很美观,也很有立体感;反观京东的菜单,红色边框,淡红色背景,再用偏白色的线分割菜单项,看着挺别扭的。

除此之外,在Amazon中,当鼠标放到菜单区域时,对应的菜单项文字会被高亮并加粗,同时二级菜单会以动画的方式从左到右展开,整个菜单边界的阴影加深,效果让人印象深刻。相比之下,京东的菜单却很单调,鼠标所在的菜单项背景变白,二级菜单的显示没有任何动画过度,选中的菜单项和整个二级菜单用红色的线框包围,给我的感觉是割裂了一级菜单。而Amazon的呈现方式则给人优雅的感觉,通过高亮、加粗以及右侧的箭头,明确的显示选中项,二级菜单的显示也和整个一级菜单融合,视觉效果很赞。

而真正拉开距离的,其实在二级菜单。

看下面的图,你会觉得Amazon的分类也太业余了吧,看看人家京东的分来,多详细,多专业,有两级分类,还有促销信息。确实,单看分类,真心觉得Amazon也太不靠谱了,这不等于没分嘛。

Amazon menu

Amazon menu

360buy menu

360buy menu

但是,我要说的是下面这张图。富有冲击力的视觉效果,相对那完善的分类,我还是愿意看这赏心悦目的图片,只是觉得这图片有点功高震主,我都没看分类的文字了,故意将图片超出菜单部分,给人很强烈的空间感。再看看京东的二级菜单里的图片,简直弱爆了。

3月21日更新:今天再看,Amazon的菜单已经变了,原本的单薄的二级菜单分类变得丰富了,但是图片变小了,难道下面这图只是仓促上线的临时方案?

amazon second menu

amazon second menu

当然,京东的设计有一个地方还是很好的,二级菜单的右上角有个关闭按钮,点击可以关闭二级菜单,起初我想不通搞这个东西有什么用,后来想想觉得,这可能是为移动设备做的优化,而Amazon则则更彻底,直接变为两栏设计,默认收起分类菜单,而如果要关闭二级菜单,则必须点击最上面的“全部商品分来”按钮来收起菜单。

左边栏的“性能”

除了视觉上的差异外,性能的差异更是明显。当鼠标在Amazon的一级菜单间滑动时,二级菜单的响应是实时的,给我的感觉就像是指尖在屏幕上流畅的滑动;反观京东,当鼠标在一级菜单间切换时,只有当鼠标在某个菜单项上停留住一段时间后,才会切换二级菜单,给人感觉很滞后、卡顿,丝毫没有畅快感。

结语

当然,拿京东和国际一流的Amazon比,或许有点不公平,因为技术实力本身就不在同一个级别上,但是在对比之后,向一流的公司学习对产品用户体验的追求,这才是目的。联想到玉伯的《我眼中的技术高手》,作为一个不太靠谱的IT人,在这里与国内的IT人共勉。

 

题图与本文无关,来自:Tumblr

standard
  1. luckyGirl - 2013 年 3 月 21 日 9:47 上午

    分类的不同可能与用户的习惯有关,不过说实话我从来没有用过首页左栏的分类,简洁清爽整体提高了商品档次,技术方面也运用了HTML5/AIRA等提高web可及性,距离还不是一点点呀 (10秒前)

    回复

Have your say