从网站设计的角度看,导航对一个网站有三大作用。
其一,理顺网站的构架。导航设计清楚,基本就能够大致勾画出网站个轮廓,例如多少个着陆页、什么风格等等。
其二,成为网站点睛之笔。导航栏目可以吸引用户的第一注意力,好的导航设计,会让用户更容易进入。
其三,奠定网站风格。导航的颜色、动效,基本上可以为网站其它页面的设计提供一个参考。
所以,导航设计,非常重要。
对企业网站来说,因为栏目的数量有限,导航设计相对来说,简单一些。但是企业商城的着陆页远比企业网站要多得多,栏目也多,导航设计相对复杂;再者,企业商城不同栏目之间的主题交叉,进一步增加了导航的设计难度。
为了帮助设计师更好设计出企业商城的导航,我们需要对主流电商的导航设计进行了分析。
我们分析了淘宝、天猫、京东、唯品会、亚马逊等主流电商的导航设计,发现电商平台在导航设计上是存在一些共性的。
热力图+导航栏。我们知道,从网站热力图上看,高热地区往往是在左上方,因为这符合人体的浏览习惯。所以,电商商城的导航几乎都是安排在左上位置。
搜索框+销售模式。先说搜索框,电商网站基本都将搜索框放在显著的位置,并且予以放大处理。这是为了让网购用户能够快速通过搜索框找到相关的商品。再说销售模式,一些销售模式会吸引到大量的用户,例如闪购、一元购等等,多家电商平台将搜索框与新锐销售模式捆绑,或是在搜索框下方、或是在搜索框中“灰置”销售模式文字。如下图所示:
产品导航+分电商品牌导航。大型电商平台,往往孵化出了很多“细分电商品牌”。这些细分电商品牌有特定的商品、特定的销售模式、特定的人群、特定的内容,甚至与电商平台存在很大不同。例如天猫、聚划算、红孩儿都属于“分电商平台”。
既有大量的商品导航需要安排,也有一种分电商品牌需要放置,电商平台是怎么做的呢?
普遍做法是设立“双导航”。左侧设计“产品导航”,上方设计“分电商品牌导航”(例如淘宝和苏宁)。或者是采取隐藏式导航设计,需要导航的时候会出现,不需要的时候隐藏。(例如唯品会)
导航+banner。电商平台均将导航与banner进行捆绑,banner往往与导航距离很近。还有一个需要指出的是——如亚马逊网站已经可以根据用户的浏览记录,主动推荐相应的banner。但是国内电商平台,貌似只有淘宝在进行这样的尝试,其它电商平台并未跟进。
还有一点需要指出,虽然电商平台的栏目多、内容杂、落地页更是不可计数,但是导航也仅限于两级导航。也就是说,用户最多只需两部就可抵达落地页。可见,过多层级的导航不仅会让用户失去耐心。
如上,我们对主要电商平台导航设计共性的分析和考察,希望能够为企业商城导航设计提供参考。