网易首页分析解析.docVIP

网易网页分析 页眉、导航栏、页脚 一、页面布局与导航 页面多采用较长框架，布局为简单的分栏结构，便于在短时间内让访问者浏览尽可能多的信息量。 由于门户类网站的包含大量图文信息内容，访问者在面对繁杂的信息如何最有效的找到所需信息是页面设计首要考虑的问题，因此页面导航在资讯网站中非常重要。很多大型资讯网站多采用导航位于页面的顶部，清晰明了，由于页面内容较长，所以把导航放在第一屏有利于访问者更有效的查阅信息。网易将频道作为一个个导航位于主体的首部-----频道导航栏 二、框架设计于风格 资讯门户类网站的设计风格相对来说较为统一，为了顾及到信息查阅和大量的图文内容，在框架设计上基本采用超长页面；为了尽可能多的展现信息内容，通常都会设计成3栏甚至4栏的纵向布局。 三、图文信息的合理布局 图片和文字在页面中所占比例均等，这样能在阅读浏览时不会感到单调和压抑。 图片信息作为吸引访问者的主要因素，需要在页面中合理利用，使网站对访问者更为有效。 色调 网易页面的主色调不明显，由于上面放了图片的缘故，才使得页面有了色彩感。 字体 标题类字体为14px，正文采用12px 链接颜色 #252525灰黑色 #206F96青色 #ba2636红色 #666灰色 头部导航（页眉）--应用 内容--频道导航、新闻资讯、广告、热门推荐 全局导航--方便用户查看页面 页脚---版本信息、页脚导航 1.头部导航（页眉） 2.内容 2.1内容头部 第一个div：logo+广告横幅 第二个div：频道导航栏 第三个div：广告展示 2.2内容主体 新闻资讯 广告 内容循环展示（slider） 有12个相同的div构成 在一个div中又由2个div构成，这个是主，一个是次。Class=area，一般都是有左右两个div构成。 新闻资讯 广告 内容循环展示（slider） 标签页（tab）：使信息量变大 JS代码实现思路很简单，首先给每个标签项注册一个mouseover函数，当鼠标移到任何一个标签上的时候都会执行moveover函数体内的代码。函数体代码首先获取当前节点，将原来显示的内容进行隐藏，然后根据传入的节点index把对应于相应标签下的内容显示出来。 推荐区提供网易特色产品入口以及广告 在一个div中又由2个div构成，这个是主，一个是次。Class=area，一般都是有左右两个div构成。特殊的会在顶部放置一个广告区，或是直接是一个照片墙 左右： 上左右： 一个箱子： 3.全局导航 4.页脚 风格 简洁。页面设计如果使用过多装饰元素，会造成页面庞大下载速度缓慢，不要高估网民的耐性，大部分网民都是没有耐性的。浏览大量信息的时候需要一个简洁无阻碍的界面，过多的色彩和装饰反而会分散用户的注意力，影响到用户浏览效果和减少对资讯的点击。网站需要用户看到的是网站提供的信息内容和服务而不是花俏的装饰。这也是网易门户一直沿用简洁风格原因之一。 信息排布 门户网站首页一般都会承载大量的资讯信息，密密麻麻的信息会让用户浏览网页的时候会产生压迫感，信息排布的时候到达一定行数时需要用一些留空做到视觉隔离，让视觉上有透气的感觉。 视觉顺序 在一个信息版块里，会有第一视觉区、第二视觉区、第三视觉区，就是说当用户看到这一信息版块时第一眼会落到图片的位置，第2眼会落到大标题上，第3 眼会落到其他地方。这样有顺序的引导用户浏览，可减少用户的浏览成本，增加页面的视觉效果。 历年网易 2000年 2009年 2015 时尚简单的外观设计和界面设计、层次结构比较清晰、简洁 扁平化设计 去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素。让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化。