新浪、雅虎、Google,什么地方值得学?

站长空间

不少人是从新浪、雅虎、Google等大型门户网站或搜索网站逐渐打开了进入互联网畅游的大门。门户网站是我们接触互联网的第一道门,不可否认,我们对网页视觉设计的认识也是从它们开始的。

常听到一些人谈论说,门户网站没有设计。真的是这样吗?

门户网站对视觉设计的要求是复杂的、混浊的,它的受众群体过于庞大和复杂同时也是直接的、概括的,每个门户网站都需要树立自己的审美标准以帮助浏览者便捷地查阅信息。为他们做视觉设计,设计师可是要死很多脑细胞的!

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

网页视觉设计专家:Relen

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

信息爆炸与分栏结构

在Google没有诞生之前,新浪、雅虎、网易都是常用的搜索引擎。随着网络局势和各大门户的战略发展,新浪逐渐变成了我们查阅新闻的中心。信息覆盖了整个网站大大小小的空隙。信息爆炸,不仅仅要求设计师思考如何安放它们,更重要的是如何使浏览者阅读更舒适。

首先竖三分栏作为网站设计的传统结构,最大优点就是便于信息排版,信息量越大,越需要使用三栏式。三栏式有效分割了页面的宽度,一行文字从左到右阅读,不会使视线过分晃动,可以提高阅读的效率。三栏当中最宽的一栏还可以根据信息的摘要的需求,再次划分成多个小的信息块,使信息可以向插入书架一样放入信息分区之中,可以灵活地占用页面空间。

有人说,新浪不是二分栏么?如果单看新浪的首页,从铺色的角度看,是二分了页面,但从分析信息的排版看,新浪的首页的确采用了三分栏结构。新浪的子频道也多数使用了三栏结构,如果想要研究信息与格局的关系,笔者建议你仔细观察一下新浪的信息分布与排列。

如果页面很长,浏览者停留在页面上时,是在不同的信息格子里寻找他们感兴趣的内容,标题标注是引流视线的重要标志物。在新浪首页下部的信息分区里,左上标注着:校园、旅游、数码、F1、热线、文化、女性……等文字,并用不同的背景色跳跃出来,即便是十分小巧的设计,也非常实用,能够帮助我们阅读信息(图1)。

20-f7-1.jpg
图1

灵活的小环节

英文雅虎给人印象最深的并不是它的信息也不是它的搜索功能,而是他的整洁。国外的大多数门户网站,在用色上都十分整洁。白色的面积最大,其次是那些分割线上的颜色。不铺底色的方式,简单的色彩点缀就可以给浏览者留下整洁、明亮的印象。明亮的环境会使人感觉到阅读的舒适,以及查找信息时的轻松。

值得学习的是在Yahoo首页顶端有一个搜索的信息域,分别是不同的搜索 web\Image\video…类别,搜索框的背景将变换颜色。尽管色彩面积不大,却因为它的特殊位置(页面顶部的色彩给浏览者的印象最深,容易左右浏览者的情感)给页面带来多种变化。即便是十分小巧的设计,却能给浏览者留下深刻的印象(图2)。

20-f7-2.jpg
图2

变换的标志设计

Google,一个不包含其他信息的专用搜索引擎网站,它看起来十分单薄,页面上留白非常多。在Google刚刚推出的那段时间,被当作热点话题的主要就是它的使用是多么令人兴奋,其次就是它的页面为何如此“难看”。而在稳定发展的几年里,Google对其首页上唯一的“图形图像”:标志,进行了各种改变,这些变换的标志引起了广大网友的喜爱。甚至在网页设计圈内引起了很多讨论,当然,几乎都是正面的评价。所以也打破了传统概念中的网站标志不易更换的惯例。也有少许网站在效仿Google跟追特大节日变换标志。

提醒注意一点,正是因为Google无其他信息,标志的优势才能体现出来,如果新浪也如此效仿Google,可能无法达到这样的效果。必定登录新浪的人不会去关注它的标志,打开页面的同时,你就开始查阅信息了。

Goolge标志一览:http://www.google.com/intl/zh-CN/holidaylogos.html

一木点评:虽然说个人网站能够成为门户网站的情况少之甚少,但从这些大型网站中,我们可以了解到网站视觉的传统形式和基础形式,如果你的网站是以信息为卖点,学习他们对网站美术和应用有着相当大的意义。