打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
几大国内电商的首屏布局和导航设计 - [信息架构]

几大国内电商的首屏布局和导航设计 - [信息架构]

版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://niangaotuantuan.blogbus.com/logs/214553230.html

如果要分析现在国内电子商务网站的首页设计,网站logo、导航、轮转图、促销信息、热卖单品展示、甚至还有站内搜索,应该是几大必不可少的元素。

在大的元素一致甚至大的布局一致下,这些国内电商的首屏布局和导航设计是否有细微的差别?

先来看看几大电商的首屏截图(为了LOGO和首屏的完整,图大,请自行点开看吧)p.s.由于淘宝的特殊性,这里不列入分析范围。

 

 

 

 

 

 

 

 

可以看到,这五大电商基本都采取了左侧分类导航的设计,并且除了亚马逊外,都又有顶部的导航。
顶部的导航又分成了两种,一种是对网站不同产品线的导航(如当当的特色服务、京东和苏宁易购);还有一种是对自己网站的热门产品分类的快速导航(如当当的第一排导航和凡客的两排导航)。
另外这里需要注意的是,凡客的导航略显啰嗦:第一排是热门标签(tag),是不可展开的;第二排是热门分类(category),是可以展开的。

 

 

 

 

下面再来看看这几大电商的左侧分类导航展开后的状态:

 

 

 

 

 

 

应该说,除了亚马逊只采用了大分类下的二级导航外,其他几大电商都采用了多级导航。
并且在多级导航的最右侧还都加入了知名品牌或者促销活动的推广区域。

但是,注意第一张图,也就是当当的导航。当当是唯一一家在导航分类名称左侧还有ICON的国内电商。那这个ICON有什么用呢?继续向下看。

 

 

 

上面两张图分别是当当点击了不同的导航分类后的页面。注意看两张图的右侧,尤其是第二张图的四个紫色ICON。
再对比左侧的导航ICON。

其实如果大家自己点击当当的网站然后自己尝试一下就明白了。
左侧的导航是会随着拉动滚动条向下而消失不见的,对此当当的解决办法是什么呢?
就是加入右侧的这个导航。这个导航是会随着滚动条向下而一直浮动在右侧的,也就是一直在网站访客的视野里。并且就像我们经常看到的招聘网页一样,点击某个职位的名称,可以快速定位到网页对这个职位的描述的位置上,而不用用户自行下拉寻找。这个导航也是类似的作用,点击不同的ICON或者“女性”等分类,可以快速定位到页面的对应分区。

但是很遗憾,就像上面两张图一样,当当在不同的大分类下都采用了不同的设计。初衷是好的,但本身就是一个新颖的改变用户习惯的设计,这样的复杂程度很可能一时会让用户不知所措,难以接受。

 

 

 

最后再来简单看看单个分类页面的布局设计,两个有特色的电商是:

 

上面的凡客的化妆品分类页面。因为不可能没有轮转图,于是为了减弱导航在下拉过程中“消失”的影响,凡客和现在很多的淘宝店家首页设计一样,采用了轮转图下再次出现分类导航的布局设计(如图中“热门分类”)。这样的设计比较清晰也容易融入布局中,是很简便又效果不错的做法。

 

 

上图是京东的化妆品分类页面的布局。这个页面的特别之处在于,每个再低一级的分类都有一张代表图片(如图中的面部护理、彩妆等),这个设计同样也出现在现在手机端的导购类产品设计中(如蘑菇街、美丽说的热门分类或者热门标签)。更值得注意的是,在网页设计中,京东的商品背景色几乎都是白色,且没有边框。这样很好的模糊了导航的代表图片和商品单品展示图片之间的区别,使得整个页面浑然一体。

 

 

 

总结来说,几大国内电商的首屏布局和导航设计基本相似,从而也就建立了固定的用户体验规则。

而很多国内的B2C电商在设计时常常没有注意到这些用户体验规则,也就影响了自身网站的用户体验。


收藏到:Del.icio.us
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
韩国三大门户的页面布局、页面配色、客户端分析
第7章 电商类:仿京东购物微信小程序
京东抢鞋子技巧?
从导航设计看QQ和微信的不同
分享:一个实用的工具类导航网站
网站导航设计的6大分类(2)
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服