2.1.2 两栏式布局

两栏式的排版是最常见的布局方式之一,它中和了一栏式和三栏式布局的优缺点:相对一栏式布局,它可以容纳更多内容,相对三栏式布局来讲,信息不至于过度拥挤和零乱,但它不具备一栏式布局的视觉冲击力和三栏式的超大内容量的优点。根据电子商务管理咨询公司Groove Commerce对全球100家电子商务网站的统计数据(以国外的电子商务网站为主),采用两栏式布局的电子商务网站占到79%,可见两栏式布局的流行。

两栏式布局根据其所占面积比例的不同,将其分为左窄右宽、左宽右窄、左右均等这3种类型。虽然从表面上看只是比例或者位置的不同,但实际上它影响到的是用户浏览的视线流以及页面的整体重点。

1.左窄右宽式

这种形式的布局通常采用左边是导航(以树状导航或者一系列文字链接的形式出现),右边是内容的设置。此时左边不适宜放次要信息或者广告,否则会过度干扰用户浏览主要内容。用户的浏览习惯通常是从左到右、从上到下,因此这类布局的页面更符合理性的操作流程,能够引导用户通过导航查找内容,使操作更具有可控性,适用于内容丰富、导航分类清晰的网站(见图2-5)。

figure_0017_0007

图 2-5

注:至于左右区域的具体比例可根据内容和导航的重要性以及信息量来权衡。

2.左宽右窄型

和前面一种方式相对应的,左宽右窄型的页面通常内容在左,导航在右。

这种结构明显突出了内容的主导地位,引导用户将视觉焦点放在内容上。在用户阅读内容的同时或者之后,才引导其去关注更多相关信息。如UCD China(ucdchina.com)博客就采用了这种方式,突出当前内容,视线流非常清晰合理(见图2-6)。

figure_0018_0008

图 2-6

当然,这种方式的右侧也可以放置次要信息或者广告,体现出信息的主次。

3.左右均等型

左右均等指的是左右侧的比例相差较小,甚至完全一致。这种类型采用的较少,适用于两边信息的重要程度相对比较均等的情况,不体现出内容的主次。同时也存在一些论坛,左边为帖子列表,右边为内容。如猫扑网论坛(见图2-7)采用的就是类似这种形式,其优点在于浏览内容时不需要页面跳转或者弹出新窗口;但缺点在于浏览内容时,列表仍然占据过多页面,从而导致用户注意力分散,并需要更多拖动操作。

figure_0018_0009

图 2-7

对比这3种方式,我们可以看到每种方式的内容重点和视线流的方向都是不一样的。左窄右宽型的导航位置相对突出,引导用户从左至右地浏览网站,即从导航寻找信息内容;而左宽右窄型的左侧往往放置信息内容,可以让用户聚焦在当前内容上,浏览完之后才会通过导航引导用户浏览更多相关内容;对于左右均等型,如果两侧放置的均为内容,那么用户的视线流主要从上到下,两侧间存在一定的交叉性,如果左侧或者右侧放置了导航,那么左、右侧的视线会出现很多的交叉性,从一定程度上增加了用户的视觉负担(见图2-8)。

figure_0019_0010

图 2-8