站长之家 - 网站运营 - 网站策划 - 电子商务网站设计分析之四:面包屑导航

电子商务网站设计分析之四:面包屑导航

2016-05-18   来源:站长之家网友   网络编辑:站长之家   查看评论
网站中的面包屑导航(Breadcrumb Navigation)导航是一种作为辅助和补充的导航方式,它能帮助用户明确当下所在的网站内位置,并快捷返回之前的路径。 面包屑的由来出自一个童话,两个孩

网站中的面包屑导航(Breadcrumb Navigation)导航是一种作为辅助和补充的导航方式,它能帮助用户明确当下所在的网站内位置,并快捷返回之前的路径。

面包屑的由来出自一个童话,两个孩子为了不在森林里迷路,于是沿途洒下了面包屑作为标记,帮助自己能够原路返回。通过这个故事我们可以看出,之所以被称为面包屑导航,正是因为它在网站中也起了相同的作用,让用户既能看清自己在网站中所处的位置,也能快速的找到其他同类型产品。

一个小小的面包屑是最能体现网站用户体验的部分之一。电商网站的子页面数不胜数,而面包屑是指引用户的一盏明灯,由此可见面包屑导航对于用户浏览的重要性。

一级分类和二级分类分别为/ldquo;家用电器/rdquo;和/ldquo;生活电器/rdquo;,这两个含义相近的词汇增加了用户的思考时间。因此,近义词和平级词汇应该在面包屑中尽量避免。

网站设计,电子商务网站,电子商务,面包屑导航

淘宝网中的面包屑就相对直观。从/ldquo;所有分类/rdquo;到/ldquo;女装/rdquo;再到/ldquo;羽绒服/rdquo;,每一个大分类都没有重复性,让用户能在第一时间做出反应。

2.

用户使用面包屑的目的主要有两种,一种是想要返回上级,第二种就是查看页面中展示产品的类型。在用户的实际操作中,这两种需求的重要程度不分上下,但是大多数电商网站都忽略了后者。其实,这方面的改善并不困难,只要在层级页面的分类中展现出商品的数量,用户就能很清晰的看到所需商品的种类数量,便于用户挑选。

网站设计,电子商务网站,电子商务,面包屑导航

优购时尚商城的面包屑导航就注意到了这方面的小细节。系统会根据用户对条件的筛选自动抓取商品种类的数量,让用户根据商品的实际情况进行选择。

3.

传统意义上都建议当网站的层级分类很多的时候可以使用面包屑,如果网站分类较少就可以省去这个部分。但笔者认为,面包屑还能有助于用户明确产品定位。当用户对产品没有目标性时,定位式面包屑就能让用户拥有更加顺畅的购物体验。

网站设计,电子商务网站,电子商务,面包屑导航

聚美优品的商品分类其实并不算少,但他们仍然选择使用定位式的面包屑设计。设计师将产品大分类和用户容易更改的部分做了一些小间隔,便于用户对条件进行修改。

4.

面包屑的从用户体验上来说是一个/ldquo;重要的小角色/rdquo;,既要让用户看得清楚,又不能太醒目,因此,在色彩上主要以黑、灰为主,形状上可以采用单独连接符号,多考虑关键字之间的包含关系,并且具有指示性。

网站设计,电子商务网站,电子商务,面包屑导航

亚马逊网站的面包屑在符号上用户体验很不令人满意,/ldquo;:/rdquo;既不能明确的显示出字词之间的概括性,指示性也远不如箭头那么直接。

网站设计,电子商务网站,电子商务,面包屑导航

而魅力惠的面包屑符号就满足了所有的标准,符号颜色和字词相同,大小也很适中,让用户在有需要的时候能马上找到它,但又毫不耀眼。

热门搜索