资讯网站的多信息页面编排

站长空间

不少人认为,从常用的门户网站中得不到视觉设计方面的优点借鉴。但你有没有发现:不管网站上有着多少内容,你总是能够很快找到所需内容;不管页面信息如何丰富,你仍然能够比较轻松地游走其中。其实大型资讯网站对页面空间的占用以及信息的编排都有着十分明确的统筹规划,他们的导航、排版、主打信息等环节,绝对都是不能错过的学习对象。下面我们以太平洋电脑网为例进行说明。

编者按:要想制作出优秀的网站,就要对比分析众多的成功案例,深入了解细节后才能有所收获。我们邀请到研究网络多年的网站专家,品味网络,评论站点,希望能给大家带来更多启示。

网页视觉设计专家:Relen

真名:梁景红,曾出版畅销书籍《网站设计与网页配色实例精讲》、《个性化网页设计与鉴赏》等,作品收录于《设想》一书。

协调多信息的横竖划分法

信息量庞大的网站,需要使用竖分栏结构。如果采用从页头到页尾,一通到底的划分方式,给人的感觉往往是“没完没了,十分烦躁”的视觉心理。这样做不美观、不实用。

面对这种情况,太平洋网站采用了分栏长度大致在一屏幕左右时,横断页面一次。在横断的区域里,多使用图片。可缓解文字信息给访客造成的“干眼”,间接提高阅读质量(图1)。

21-f2-1.jpg
图1

不仅仅是这些用途。特殊信息需要交叉出现在页面上。把“特色专区”“论坛热帖”“某某推荐”等各种各样与竖分栏中从属不同的信息放置在横断的区域里,可有效地协调信息类别之间的排版关系。

突出产品的多导航系统

太平洋网站的导航设计值得学习。在其首页的标志下方,是分站导航(北京、上海、深圳……),背景的橘色可以醒目地使人注意到它们。

主导航在右侧横置。导航背景的灰色是页面顶部最暗的颜色,也起到醒目的作用。其次,作为一个IT电脑类网站,太平洋网站把产品导航(手机、数码相机、笔记本……)放置在主导航之下,其意义是十分明确的。同时,特殊的产品导航采用“图标+文字”的设计形式,对于那些第一次进入太平洋网站的浏览者来说,已经一目了然了。

广告下部增加了一个横置频道导航。它的背景颜色采用灰色与主导航保持一致,可给浏览者留下统一的识别视点。频道导航下面,再有产品的品牌导航(索尼、富士、理光……),它的功能与首页的产品导航是一样的(图2)。

21-f2-3.jpg
图2

文字与图片的协调性

对网站内容而言,图片、文字是两种信息类型。图片比文字直接,它可以起到美观、真实的功效。而对阅读而言,图片是缓解文字阅读疲劳的重要元素。图片多了或少了;缩略图大了或小了,都会对页面整体视觉效果产生各种影响。

太平洋作为一个信息丰富的网站来说,它在图片与文字的协调性问题上,处理得十分得当。你会被图片上的信息吸引,同时又不会忽略了文字信息。图片交叉在其中,阅读文字信息时也不会疲劳。

一木点评:不得不说的是,中国网民对与太平洋类似的层层剥开的导航方式十分适应。如果你能够采用同样的方式便可以使网站变得方便易用。如果你违反常规就会出现两种情况,一种是大胆创新和另类新潮的视觉;另一种是使人反感和降低阅读效率。所以说,视觉设计要在一定的易用范围内,突破重围。