APP下载

单栏或是多栏

2014-12-11郑建鹏

网络传播 2014年9期
关键词:浏览者网页页面

郑建鹏

十七世纪末期,热衷文化改革的法国路易十四国王立志要在当时先进的印刷业中展现法兰西王国的荣耀,他命令成立皇家印刷管理委员会,并设计专门字体,以规范皇家所用的各种印刷材料。在数学家Nicolas Jaugeon的带领下,委员会以罗马字体为基础,采用64×64方格的形式设计每一个字母。这即是平面设计栅格系统的最早缘起。及至二十世纪四十年代,在瑞士平面设计派的大力倡导下,栅格系统及在其基础上形成的网格化平面设计模式风靡全世界,并且直到现在还影响着网页设计的形态。

在网格化的平面设计观念下,整个网页被划分为一个或多个方格,网页设计称之为“栏”,而网页由单栏还是多栏构成也逐渐成为影响网页信息传达的直接要素之一。从单纯数量角度看,单栏似乎比多栏更能体现简洁明快的设计潮流,但实际情况并非如此,随着媒体终端屏幕大小与显示分辨率高低的不断变化,以及现代社会人们对信息获取速度和效率的无限渴求,如何在短时间内获得更多的信息量成为人们考核媒体质量优劣的重要指标。从这一角度看,多栏网页似乎能在某一时段内传达更大的信息容量,呈现更多的信息内涵,多栏也顺理成章地成为比单栏更简洁、更高效的网页创意与设计方式。

多栏网站在信息可读性、内容集中性和视觉吸引力方面具有得天独厚的优势。就内容可读性来看,当我们把网站内容分为两栏、三栏甚至更多栏时,其内容可以很容易地在各种显示器上实现。而且以多个窄条形态出现的内容,从认知的整体性特征来讲,也更容易被浏览者快速认知和阅读。就内容集中性来看,多栏网站使用较短的行或列,成组的内容使得浏览者可以很容易地读完大量相对完整的内容,而不至于被旁边的图片、广告转移注意力。从视觉吸引力角度看,多栏设计能够使文本、图片、横幅广告、Flash、视频等内容各自独立呈现,形成错综多彩的视觉效果。

The Web Showroom是澳大利亚一家网络设计公司,其专长在于综合性的网站设计、制作和运营能力。公司官方网站运用清晰简洁的多栏形态向浏览者展示团队基本情况、所获奖项、媒体报道、业务内容、操作案例等诸多内容。网站没有采用单一的分栏方式,而是根据内容分类和表达需要自上而下综合使用单栏、两栏、四栏等多种形态。这种多栏的交叉运用,使网页避免了单调乏味,更显活泼生动与个性化。

部分多栏网站的分栏方式并不会像上述案例那样自上而下产生多样复杂的变化,它们更喜欢采用栏与栏之间高度、宽度相等或具有固定比例关系的上下贯通式的分栏方法,使页面看起来更加简洁明快,不同内容之间也更加泾渭分明。《SF Arts》是一本反映旧金山艺术领域状态的杂志,其网站被设计为上下贯通的四栏,自左至右,首栏作为展示标题性内容的空间,其宽度是其他三栏的两倍。网站的简洁化分栏设计很好地照顾到了iPad、iPhone等移动设备使用者的浏览体验。

多栏网站的劣势也很明显,首先网站多栏化设计是受报纸版面影响的,但报纸的阅读方式和网页不同。同一个页面,因为显示器尺寸问题,网站浏览者可能会存在自上而下阅读完一栏后,还要滑动鼠标滚轮,回到页面上端开始第二栏阅读的不便。而报纸并不存在这种情况,人们只要摊开报纸就可以一眼看到所有的内容。其次,随着多媒体终端的日益多样化和移动互联技术的飞速进步,人们不再仅仅只在PC上浏览网页,平板电脑、智能手机等各种形式的显示设备越来越普及,相应的,网站可适应性成为衡量网站设计现代化的一大标准。对于多栏网站来说,丰富的文本内容可能无法在平板电脑、智能手机等小屏幕显示器上完整呈现。不过,这倒激发了多栏网站规划与设计的动力,能够在多种显示终端上完美呈现内容,并且更利于这种网站的设计者规划和传达重点内容,而非面面俱到。一些网站甚至已经开始变被动地适应小屏为主动迎合小屏,简洁而醒目的双栏内容设计不再是平板电脑等显示屏的专属,而是成为网站设计的标配。

在网站设计中,单栏还是多栏,优劣势并存。正如从现代主义的“less is more”发展到后现代主义的“less is bore”一样,也许数量从来都不是衡量简洁现代与否的真正标准,更别说是唯一标准。对网页设计来说,“现代”的含义更应该是信息获取、处理与加工的便利,是人们在网页浏览过程中感受到的愉悦的个性化体验。

链接

www.sanga-ryokan.com

日本黑川温泉山河旅店网站。上下贯通式的双栏设计,左右两栏宽度相等,平分整个页面,左栏作为标题栏和导航栏,右栏则作为图片内容展示栏。整个首页简单明了,左栏为白色背景加简单文字,大量留白,右栏则充满图片,一实一虚,对比鲜明。

www.v76.com

男士美发品牌V76官方网站。横栏与竖栏混合的网站设计,首页先被自左而右地分为三个竖栏区域,首栏宽度为其余两个区域的两倍,不过在后两个区域内又划分出多个横栏,展现不同主题内容。所有分栏都以图片作为展示主体,配以简单文字,页面整洁规范,层次清晰。

huaban.com

花瓣网。瀑布流式网站布局的代表,这种多栏网站的设计方式最早源自Pinterest,现在已在国内蔓延开来。瀑布流网站多数为小清新风格的网站。形式上为多个参差不齐的文图配合的竖形分栏,整体上看来像瀑布一样。

sberbank1.ru

俄罗斯联邦储蓄银行网站。首页以大图片为背景,以点状细线将页面划分为六个上下贯通但宽度不等的竖栏。栏内文字内容多少不一,但都以不同色块衬托。随着鼠标滑动,页面内容出现变化时,六个竖栏的宽度还会随着区域内文字的多少而出现相应变化。

outdatedbrowser.com

浏览器对比网站。网站收集了时下人们使用较多的五种浏览器:Chrome、火狐、IE、Safari和欧朋,并提供每种浏览器的最新版本下载。网站为每个浏览器设计了一个上下贯通的分栏,并配以不同背景色彩。无鼠标接触时,各分栏宽度相等;有鼠标接触时,相应分栏宽度变为其他分栏的两倍。endprint

猜你喜欢

浏览者网页页面
刷新生活的页面
浅析网页设计中色彩的运用
新媒体界面设计中视觉传达的效率问题研究
基于CSS的网页导航栏的设计
基于URL和网页类型的网页信息采集研究
网页制作在英语教学中的应用
10个必知的网页设计术语
浅析教学网站中视觉传达设计的体现
Flash动画设计在网站中的应用
网站结构在SEO中的研究与应用