前段时间,翻出公司做的几个网站案例,给一个在芬兰做网站的朋友看了看。那人一看就说:呵呵,很中国的网站,首页上那么多字。我只好说:是哦,不过设计得迎合客户需要,客户要那个样子,我们也没有办法。
由此思考网站首页设计的问题。
国内的首页设计似乎一直有个套路,这个套路从何而来? 我认为sina,163,sohu这些门户网站的设计套路一直在影响其他小型垂直性的网站。而这些门户网站的设计套路似乎是来源于报纸杂志这些平面媒体的设计,也许是因为中国的网页设计师大多从平面设计转行而来。
现有门户网站的套路设计,其特色就是在首页堆砌庞杂的内容,似乎要以此彰显网站内容的丰富。这种设计对门户网站是利是弊,不是我在这里要探讨的,我所要说的是,门户网站的这种设计套路对企业、学校等小单位的网站或者某个行业的垂直性网站是不合适的。
就网站首页的功能来说,我认为有两大功能,一是导航功能,二是橱窗功能。而能够凸显这两大功能的设计,才是好设计。
所谓导航功能,就是网站所有的次级栏目能通过首页链接得到,换言之,浏览者能在首页上获知这个网站的所有栏目设置,并且能够由此到达所有栏目。(这一点,第5版的5D网站的版头做得非常棒。)
导航有多重要?一个很好的例子就是那个很简单但是很成功的hao123。网络经济时代,很多人靠投机取巧而成功。关键是怎么取巧。hao123的巧思在于,它本身相当于一个网站首页,而那些跟它毫无关系的网站被它当作了次级页面。对于浏览者来说,一个导航功能出色的首页是访问次级页面的必经之地。因此hao123这个仅有导航功能的网站可以赢得巨大的访问量。而这个“首页”访问量根本是建立于“次级页面”的存在,几乎是不劳而获得来。当然,hao123对“次级页面”链接的收集整理也算是一种劳动,但是比起辛苦制作内容的那些网站来说,hao123的劳动量根本微不足道。hao123得以成功,其运营当然也功不可没,因为谁都可以做这种没有技术含量的网址收集,但成功的只有它一个。但是归根到底,hao123的成功之道,还是做了一个导航功能很强的页面。可见导航对于浏览者来说有多么重要。
相对于整个互联网,网站是一个具体而微的信息源,前者宏观,后者微观,两者的本质是相同的,因此导航对于互联网信息的意义也适用于个体网站。英语说在Internet上瞎逛是冲浪,网景公司出的最早的标准浏览器就叫导航(navigator)。对于一个浏览者来说,面对纷繁复杂的互联网内容,需要依赖导航来找到要去的方向,而对于网站制作者来说,必须提供导航才能使网站内容被浏览者获取。
现在的问题是,什么样的设计能凸显首页的导航功能,我的观点是,越简明扼要的设计对导航越有利。而在首页堆砌内容的设计,会削弱导航功能。对此,也许会有质疑,认为没有内容样本放在首页,怎么会吸引人进一步去浏览次级页面呢?我的观点是,首页的页面有限,在有限的空间里,越简明越能突出重点。如果某些时候次级页面有精彩内容,可以在首页重点宣传来吸引浏览,但是没有必要在首页划分过多的空间给各个次级栏目来呈现内容。虽然在首页呈现各栏目的新鲜内容对吸引浏览有一定好处,但是弊端更大。其弊端就是使得首页一片庞杂,反使得导航不明确。
说到吸引浏览者进入次级页面,就该谈谈首页的第二个功能,也就是橱窗功能。这个功能在5D第5版有所体现,但是对于一个展现原创多媒体设计的网站来说,我认为首页的橱窗功能应该再加强一些才好。
所谓橱窗功能,就是上面提及的重点展示网站精彩内容和吸引浏览者进一步浏览的功能。简而言之,橱窗兼具展示和导航的功能,但以展示功能为主。
橱窗功能有多重要?可以提供的例子就是digg.com 和奇虎(5D资讯也用了同样的模式)。这又是一个投机取巧的应用。好比人去逛街,很多人是window shopping,看看橱窗而已,看到好的,也许会进去买。digg的模式,妙就妙在,自己不做内容,只提供橱窗展示,和hao123一样,它的流量也是建立在其他内容网站的基础上,但是其他网站却没有怨言,因为它在某种程度上是对其他网站的展示,或者说广告,同时提供了导航,所谓双赢。这种模式的成功,说明了橱窗功能对Internet的意义。
那么,再一次回到网站首页设计的问题。什么设计能凸显橱窗功能?对此,门户网站式的套路设计是在首页堆砌次级内容,这种方法除了上文提到的有削弱导航的弊端之外,也未必能实现多大的橱窗功能。橱窗设计要如何吸引眼球?多媒体视觉的展示要远比文字的展示强而有力。正因为互联网内容过于丰富,浏览者在快速浏览的时候,根本没有耐心读文字,网站必须靠视觉展示才能吸引注意。
5D是多媒体网站,有多种技术手段可以加强视觉展示,在首页做一个漂亮的橱窗设计应该不是问题。
说到最后,在实践中,有没有把导航和橱窗这两大功能结合得较好的首页设计?我可以说两个,一是5D最喜欢的deviantart.com,另一个是我自己很佩服的,myspace.com。
一点浅见,欢迎大家一起探讨。
回复Comments
作者:
{commentrecontent}