学习MTV网站——做个能“听”的网站
站长空间
网页视觉设计专家:Relen
真名:梁景红,长期研究网页视觉设计。曾出版畅销书籍《网站设计与网页配色实例精讲》、《个性化网页设计与鉴赏》等,作品曾收录于《设想》一书。
时下正值Live8(世界巨星慈善义演全球音乐会)风风火火“燃烧”起来的时候,音乐网站应该是非常热门的话题了。如果你现在想设计一个与时尚、音乐、年轻、快节奏相关的网站,一定要浏览一下http://www.mtv.com。如今,风靡全球的MTV网与去年相比,有了不少变动,拥有不少值得我们学习和探讨的环节。
半自由的版面划分方式
MTV网站属于信息量较为丰富的网站类型,但与门户网站的高信息含量比还有一定距离。在页面格局设计的处理上,它虽然使用了大气的分栏式结构,但又比较自由地根据不同的页面信息情况进行了局部调整,使得栏目与栏目之间呈现出一种似有规律和似无规律的版面划分状态,这样的页面可给浏览者提供更多的新鲜感,并在统一的形象中制造出更多的变化,每个栏目都具有自己的特点(图1)。

简洁而又引人注目
既然开头都提过了Live8音乐会,现在就拿Live8官方网站来作一下对比。作为一个重大的、全球性的扶贫义演官方网站,Live8设计显得十分简洁。既没有全球音乐人的照片和花边新闻,也没有复杂的形式设计。清新的蓝色作为背景色,引人注目的橘黄作为主要修饰色,表现出一种直接的、高效性、端正的态度。过目不忘的标志放在一旁,给网站带来了一种特殊的魅力,十分吸引人。大量的留白不但未使画面显得空洞,反而体现出一种宽大的美感,这就是没有多余的装饰所引发出的内涵。与MTV网的“喧闹”不同,我们在Live8网站上能感受到一种庄重的美。
体现节奏感页面元素
娱乐感和轻快的节奏感在MTV网中有多种表达方式。例如Movie频道,在导航下方的动画背景中使用了放射线方式的视觉元素,给人一种发射、闪耀的星光感觉。而Community频道采用了天蓝、浅蓝、草绿的色彩组合,鲜亮的颜色能够带来轻快、愉悦的感觉,同时颇有一种时尚感。而Game频道把关于游戏介绍的图片堆放在一起(图2),能够带给喜爱游戏的朋友一种冲击力的享受。

变换的广告和图层
我们知道,在同级别的信息足够多、而页面空间不足够的情况下,页面较难进行排版。因为页面排版要求我们对信息的重要性进行排序,可同级别的信息又无法进行排序,此时我们必须想办法在一个页面占用空间(信息区域)里表达多条信息。
MTV网所采用的方式值得我们借鉴,它的广告区在不停地轮换三条广告,当一个广告播放完毕后,紧接着播放第二条广告,一直循环播放。在这个过程中,你也可以任意选择你想看的那条广告。这个方式相当于把三个广告放置在一个信息区中,不仅有效地利用了页面空间,同时还给浏览者一种电视媒体所形成的视频回放的感觉,创意相当好。这个想法在新浪网以及CCTV网等国内的不少网站上也能看到实例,但视觉效果都逊于MTV网。必定MTV网页上的信息比较少,同时英文的页面比中文的页面更容易让人接受(图3)。

在广告区的下方是Hot 5的排名表,其中包括四个方面:Video、Radio、Download、Photos。如果把四个排名分别列在页面上,可能需要很大一块面积。而MTV网的做法是通过隐藏和显示图层,在一个区域内变换四个图层,每个图层是一个排名表。节省空间占用,还可使视线集中,形式上也突出了做工精细的设计态度,值得我们效仿与学习。