2001年12月Sina首页评析

2001年12月4日 sina.com.cn首页

这里有原始页面 http://web.archive.org/web/20011204213358/http://www.sina.com.cn/

艺术设计部分 作者:quester 2001-12-04
http://www.blueidea.com/bbs/NewsDetail.asp?id=316706

要对新浪这样一个背负着种种名声的著名门户网站作一个评价，着实是不太容易。

我们努力放下对新浪的种种认识上的影响，仅仅从审美和实用角度来谈一下目前的新浪主页吧。

毋庸置疑，新浪是典型的实用主义风格占了主导地位，从页面上的分割上可以很明确地感到这一点。

除了左侧的要目提示和顶端的导航条使用了新浪的标志性黄色以外，其他的板块就没有使用很抢眼的色彩，整体风格明朗化，给人实在的感觉。甚至在图片处理上也尽量简化，以保持浏览速度：除了边角修饰的小图片外，其他点缀的小图片小到仅仅维持你可以看清楚的地步。（除去非网站本身内容图片，图片载入量仅仅14K。唯一可能影响你浏览速度的，可能就是页面中那些面积不俗的广告了。新浪沿用了传统媒体的一个词“通栏广告”）

虽然这个页面是为800*600的分辨率做的，可是实际显示时，在浏览器底端还是出现了左右滚动条，可能和那些浮动的广告动画有关

为了保持刷新，右侧的要点新闻栏目做了一定限制，以致于出现了下面好像归属不明的栏目框。（有些挑剔了）

好了，我们来仔细研究一下色彩方面的问题，这是我觉得目前这个首页唯一值得大推敲的地方。（其它部分受太多功能限制，已经没有多少手脚可动了）

首先看看现在使用的色彩表：

很显然，这个色彩表是精心策划过的：完整的灰度层次，黄色主色调分布，第一辅助色红和第二辅助色兰，还包括中间的一个补色深紫。尤其漂亮的是灰色系列中有一个黄灰色，其实是由灰度条和主色混合出的。个别灰色还在兰色成分上动了手脚。

这么好的一个调色板，自然不会产生出太糟糕的画面。但是，如果我们苛刻一点，整个页面色彩分布还是可以有些改进。

用户界面部分 作者:鱼儿 2001-12-07
http://www.blueidea.com/bbs/NewsDetail.asp?id=316731

点击www.sina.com.cn,你马上会被扑面而来的广告闪花了眼，甚至是有越来越严重的趋势，可这不妨碍我们来的目的，我要看新闻，是的，这就是新浪，一个以经营信息为主的网站，下面我们来分析一下新浪的用户界面吧。

1、清晰的导航栏
这是个信息量巨大的网站，如何使它们有条不紊的摆放在用户面前，显然新浪在这方面下足了功夫。把众多信息通过合理的安排，分门别类，且有侧重点之分，无论浏览网页的是什么人，都能很容易在这页面找到他感兴趣的元素，他们的版面格局非常清晰，一目了然。

2、信息多元化
新浪最成功的信息无疑就是新闻这块，最新消息的版面约占据一个视屏的近三分之一。点进去24小时滚动新闻更把他们的优势体现得淋漓尽致。
整个版面除了信息还是信息，把最新最快最流行的事物摆在你面前，让你有选择性的了解当今社会发生什么事？流行什么？以及商家现在进行什么样的竞争？从每小段的文字背后你都可以点开一片天去。

3、良好的双向交流
一个好的门户网站不仅要耐看实用还要有亲和力，具有人性化的一面。新浪这方面也做了不少尝试，首先论坛和聊天室是少不了的，并为用户提供免费邮箱，当然现在也推出了收费的邮箱，这也是必然的发展趋势。让人充分感到言论自由的是在哪呢？体现在每则新闻下面都有发表评论这设置。你有什么想法及念头都可以一吐为快，想必有不少人乐于此道。

4、快速搜索
搜索引擎也是新浪的重头戏，他们把新浪搜索位置放在用户最佳的视觉角度。让你不能无视它的存在。希望你能多多的使用他找到你所需的资料。我也曾顺手搜索了一些资料，有点不经意的搜索，一般来讲速度还行，但感觉这已不是他们的强项了，也许和网站经营者最初的用意有点背道而弛。

5、网站的连贯性
新浪的的整体把握比较好，一个网页转换到另一个网页，没什么很跳跃式的反差，感觉舒服。统一的标识是必不可少的，版面也很清晰，容易识别。

6、广告
我不知道新浪的广告可不可以算新浪的一种特色。人们对广告有种下意识的拒绝和反感，我也不例外，也无从考证他们的广告收入占赢利的多大比重？但是可以看得出绝对不是小数。他们这方面倒也用心良苦，除了采用固定的广告位，和浮动的广告图标方式甚至采用整屏显示广告然后自动伸缩，略带强制性的，这点我比较反感。不过可以看出现在广告的形式、制作、及创意的水准越来越高。有时看着可爱的小图标我也会忍不住点一两下，不过总的来说我还是讨厌广告。

综合阐述：新浪从设计的角度讲，看似直白，但是非常的合理，给用户最直接的信息，开门见山似的表白是他的设计原则，在这原则上潜移默化地灌入了他们的标识和整体的形象加深了用户的印象，黄色的基调和具有亲和力标志深入人心。丰富的信息、强大的交互功能、人性化的设计理念是新浪成为国内顶级门户站点坚实基础。凡上网者极少有不知新浪网的，从这点上看，新浪网在用户角度可以说是个成功的典范。

这就是我眼中的新浪。一个能帮助你找到所需的信息及带给你信息的网站。

代码部分 作者:redidea 2001-12-06
http://www.blueidea.com/bbs/NewsDetail.asp?id=316719

1，HTML部分
这部分比较简单，主要是为了保证下载的速度，sina不是采用一个大的表格嵌套，而是采用大表化小，
在纵向分成了7部分。

1.1，通用圆角

2，CSS部分
可以提一提的是一个常识问题，就是A:link,A:visited,A:active,A:hover，这个定义顺序是正确的。
另外可以定义不同的连接效果，A.a01:link，A.a01:visited ，A.a01:active ，A.a01:hover等等

3，Javascript部分

3.1，层的相对定位

<STYLE>
#chang2down {
LEFT: 0px; POSITION: relative; TOP: 0px
}
#chang2down1 {
HEIGHT: 180px;
LEFT: 100px;
POSITION: absolute;
TOP: 0px;
VISIBILITY: hidden;
WIDTH: 100px;
zindex: 0
}
</STYLE>
...
<DIV id=chang2down>
<DIV id=chang2down1>
<A href="###" onmouseout=chang2out(); onmouseover=chang2over(); target=_blank>
<IMG border=0 height=160 src="mtbig.gif" width=160>
</A>
</DIV>
</DIV>
...
<SCRIPT>
ns4=(document.layers)?true:false;
ie4=(document.all)?true:false;
var chang2time=0;

function chang2out()
{
clearTimeout(chang2time);
if(ns4){
document.chang2down.document.chang2down1.visibility="hide";
}else if(ie4) chang2down1.style.visibility="hidden";
}
</SCRIPT>

3.2，左右定位广告
这种跟随滚动的广告，应用比较普遍，Sina照顾了IE和Netscape两种浏览器，主要的兼容特性分析如下：

检测浏览器类型document.ns = navigator.appName == "Netscape"
取得屏幕分辨率 window.screen.width

Netscape中：

<layer id=xx></layer>

pageX,pageY分别是层的左、上坐标
pageYOffset是浏览器的纵向滚动量
pageXOffset是浏览器的水平方向滚动量
window.innerHeight就是浏览器窗口的高度
window.innerWidth就是浏览器窗口的宽度

IE中：

<div id=xx></div>

style.left,style.top分别是层的左、上坐标
document.body.scrollTop是浏览器的纵向滚动量
document.body.scrollLeft是浏览器的水平方向滚动量
document.body.offsetHeight就是浏览器窗口的高度
document.body.offsetWidth就是浏览器窗口的宽度

3.3，表单分之提交

<script>
function myset(num){
document.login.mynum.value=num;
if(document.login.mynum.value==2){
document.login.u.name="user";
document.login.psw.name="pass";
if(document.login.psw.value!=""){
document.login.action="http://vip.sina.com/cgi-bin/login.cgi";
document.login.submit();
}
if(document.login.psw.value==""){
window.location="http://vip.sina.com/";
}
}
}

function log_submit(){
if(document.login.mynum.value==1){
if(document.login.psw.value!=""){
document.login.action="http://mail.sina.com.cn/cgi-bin/login.cgi";
document.login.submit();
return true;
}
if(document.login.psw.value==""){
window.location="http://mail.sina.com.cn";
return false;
}
}
return false;
}
</script>

3.4，新开窗口，只开一次，表单提交到新窗口

<script>
var newWindow = null
function windowOpener(loadpos)
{
 if (! newWindow || newWindow.closed)
 {
 newWindow = window.open(loadpos,"surveywin","toolbar,resizable,scrollbars,dependent,width=400,height=280");
 }else
 {
 newWindow.focus();
 }
}
</script>

<INPUT name=id type=hidden value=382>
<INPUT name=inv_type type=hidden value=1>
<INPUT type=submit value=提交>
<INPUT onclick="windowOpener('http://survey.sina.com.cn/internal/top/html/382_r.html')" type=button value=查看>
 </FORM>

不足之处：代码都是想到写到，css没有采用外联，还分成了两个部分书写，javascript也是很分散，不便于维护，其实一个很好的代码书写格式也是一个很好的素养。

© 一叶千鸟（转载请留原文链接，更新于2009年08月31日16点）

转载时务必以超链接形式标明文章原始出处和作者信息及版权声明。
您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论 ，或者在您自己的网站中 引用(Trackback) 它。