tdlisheng

各大网站改版（DIV+CSS布局进行网站重构）评析专贴

[ 本帖最后由 tdlisheng 于 2006-10-8 12:40 编辑 ]

tdlisheng

（China.Com.Cn）六周年全新改版
以前的中国网（China.Com.Cn）网站页面设计还记得吗？不记得了？一起来看看：



我们看整体页面布局非常清晰，层次感不错，主次分明；但是页面表现力度不够，太过平淡！用户除了从第一屏页面中可以关注重要新闻资讯之外，其他版面内的新闻条目只是机械的罗列出来，不够吸引人，难找到想要关注的资讯信息；页面设计的细节不够到位，不够时尚。

今年中国网（China.Com.Cn）六岁了，现在已经全新改版，欣赏一下：



之前说到的不足之处感觉都有了很大改进，此外：
- 由于信息量和资讯频道的增加，新版中国网（China.Com.Cn）网站页面设计基于1024*768尺寸进行设计布局；
- 用户自助信息查询和定制功能得到一定增强，使用户可以更容易的找到个人喜爱的资讯信息；
- 三栏式平衡布局，有利于信息的全面展现；
- 配色改进，基本继承了旧版网站设计的配色方案，但色彩明亮度上提升了一个档次，并在局部适当采用了淡色背景，突出表现资讯；
- 几乎看不到什么商业广告，让用户可以安安心心地浏览资讯大餐，视觉上得到放松；
- 资讯链接和入口采用了不同颜色的文字加以区分，有效的引导用户访问；
- 新版网站采用DIV+CSS布局进行网站重构，对于新闻门户来说其实这样做是很有效、很有利的。

看过以前中国网（China.Com.Cn）的用户可以很真切的体会到本次网站改版所带来的改变，你也想去体验一番了？

进入新版网站

[ 本帖最后由 tdlisheng 于 2006-10-8 17:16 编辑 ]

tdlisheng

帖易（Teein.Com）改版，清晰、简洁、个性化
Favorites帖易（Teein.Com），一个中文聚合门户，各类及时、新鲜资讯是网站吸引网民的资本，当然良好的用户体验也必不可少，来看看改版前的帖易（Teein.Com）网站页面设计截图：



对于资讯类网站来说，感觉还可以吧，我觉得挺不错的，唯一不足的可能是太过于突出表现版块色彩，原意应该是为了达到区分类别，吸引用户的，可最后过于注重导致有些适得其反，个人感觉如此
而现在改版后的帖易（Teein.Com）意识到这一点，也有意识的跟随了目前资讯类网站的设计方向——清新、简洁，如下：



感觉很熟悉，是吧？没错，配色上借鉴了Yahoo国际网站的配色方案，运用得还不错，没有生搬硬套，将其融入到了自己的配色风格中，而新版网站也采用了DIV+CSS布局进行网站重构，能够更好的结合新技术来达到不同于一般的网页效果呈现，对今后的版面更新和优化也有很大好处。

本次帖易（Teein.Com）的改版很注重用户体验，自定义化、个性化被突出体现在网站中：--
- 用户对色彩的喜好可能会影响他的去留，帖易（Teein.Com）提供了多个个性化颜色配色方案，用户可以根据自己的喜好进行选择；
- 用户决定网站内容，个性化内容功能能够让用户决定内容的显示和隐藏，不想看的不要
- 个性化首页功能定制性相当强，用户可以随意选择一种适合自己的版式，或者完全自主定义内容模块的显示，相当不错的功能。
- 广告没有和内容争艳，用户浏览资讯视觉上应该会感到很舒服。

新版上线，为了让用户使用上能够更好、更快的过渡，没有不习惯的感觉产生，帖易（Teein.Com）提供了简单明了的首页向导，用户可以很容易的全面了解改版后的帖易（Teein.Com）的方方面面，不错哦，现在国内很多网站都开始使用向导来引导用户体验和熟悉新版网站。

进入新版网站

[ 本帖最后由 tdlisheng 于 2006-10-8 17:17 编辑 ]

tdlisheng

中华英才网（ChinaHR.Com）全新改版，塑造品牌形象
如今的中国网络招聘市场就是一个鳄鱼潭，除了这个市场中的三巨头（前程无忧、中华英才、智联招聘）以外，各地的地方网络招聘网站不断出现，以自己独特的服务切入市场，细分市场，争夺市场份额。

三巨头感受到从未有过的压力，继前程无忧改版后不久，中华英才网（ChinaHR.Com）也终于毫无悬念地全新改版，这次改版甚至完全抛弃了先前的传统橙色，启用全新的深蓝色，意图当然再明显不过了，就是要统一中华英才在人们心中整体的一个UI形象（大家都知道中华英才那个蓝色的超人吧）。

说了这么多，来对比一下中华英才网改版前后的截图对比，先来看看改版前的中华英才网网站设计截图：



改版后目前的中华英才网（ChinaHR.Com）网站设计截图：



可以看到变化相当大
1.基于1024*768个像素尺寸进行设计布局，对于网络招聘网站来说个人觉得相当必要，好处颇多，信息承载量明显增大，用户观看视野更加宽阔。
2.配色上大胆地抛弃了中华英才网一贯使用的橙色，转而使用深蓝色，统一品牌UI象形，可谓魄力十足。
3.从新版网站版块的布局和信息的突出上可以看出中华英才网面向中小型企业的力度加强。
4.勇于创新，突破传统的招聘网站广告形式单一，采用多种形式呈现招聘信息，特别是采用LOGO图片 + 文字链接 +
重要职位链接，独创的表现方式能够让企业招聘效果更好；另外靠下的紧缺人才招聘版块的表现形式也相当不错。
5.为了在容纳更多信息，某些版块采用了定时滚动的方式显示招聘信息。
6.网页顶部第一屏导航和页面右侧的个人和企业用户操作导航设计也比较到位，一目了然！色彩搭配运用的挺好的，将整个网页的色彩基调都提了起来。
7.让我欣喜的是中华英才网本次改版采用了DIV+CSS布局进行网站重构，对于大型的且流量和访问极大的网站来说好处不言而喻，且后期维护可以模块化，布局调整更方便，与新技术的结合可以更加紧密！
8.和前程无忧一样，中华英才也开通了国际频道。

个人感觉还有有些版块的设置还可以调整一下，比如：右侧的个人和企业导航菜单可以提升一些，并且最好不要和顶部菜单冲突和重复；整个页面设计得比较长，是因为信息量比较多的缘故，但其实调整好版块之间的间距是可以缩短一些整体网站页面长度的。

中华英才网这次改版，个人觉得还是挺不错的，因为看到了些我想看到的网络招聘网站应该去改变的地方，感觉蛮欣喜的。

进入新版网站

[ 本帖最后由 tdlisheng 于 2006-10-8 17:19 编辑 ]

tdlisheng

中国最大的资源聚合门户：迅雷在线（XunLei.Com）改版
先来看看旧版的迅雷在线（XunLei.Com）网站页面设计截图：



新版迅雷在线（XunLei.Com）网站页面设计截图如下：



感觉哪里见过类似这样的设计风格？没错！就是雅虎国际；虽说配色上极其相似，但是迅雷在线（XunLei.Com）没有照搬，而是借鉴其中良好的布局和多信息承载方式，突出搜索功能和网站导航功能，并在设计上尽量做到简化、简洁但丝毫不失美观；所以我们才看到改版之后的这套符合众多用户使用习惯的网站页面；用户使用了、体验了，最终满意了，那才是最重要的，不是吗？

另外我们可以看到一个很有趣的细心设计，大家看看页面上的广告都有一个关闭按钮，这样的功能好像只有在移动广告、浮动广告、对联广告才能看到的吧，现在迅雷在线（XunLei.Com）将其用到了通栏广告上；好了，现在用户如果感觉广告妨碍视线了，只要点击一下关了就行了，世界顿时清静了！呵呵，这倒不错，广告的显示也由用户决定。

由于网站需要体现的信息量较多，新系列表也较多，所以迅雷在线（XunLei.Com）本次改版采用了DIV+CSS布局和Table相结合的方法进行，这样的方式有助于的快速构建，有些特殊的局部布局Table还是比DIV+CSS有很大优势，所以我们应该灵活掌握运用。

这次迅雷改版可谓比较彻底，信息量可以说是门户级的了，用户可有服了，信息包罗万象，想找什么搜一下！

进入新版网站

[ 本帖最后由 tdlisheng 于 2006-10-8 17:20 编辑 ]

tdlisheng

网易新版博客盛装登场，用户展现个性自我
之前体验过一番，感觉网易新版博客的特点还是很明显的：

1.采用Ajax，速度快
2.相片、日志，存储无限量
3.分布存储、处理和检索，稳定高效
4.简单易用，用户体验良好

正式上线网站页面设计当然得换，之前的邀请测试和向导体验网站页面设计截图如下：



正式上线后网站页面设计截图如下：



沿袭了早已提前让用户体验到的简洁、时尚的设计风格，简洁明快的线条、极具个性的底纹、寓意鲜明的图标、高含量技术的运用，都全面提升了整个页面的亲和度和体验度，感觉不错；如果整体页面配色稍稍加深也许会更好。

另：根据官方的消息，网易部落也即将移入网易新版博客，网易部落网站页面设计截图如下：



一直以来，网易都很提倡采用DIV+CSS布局进行网站重构，网易新版博客的网站页面设计布局以及用户博客页面设计布局也毫无例外地进行网站重构，各种新技术与DIV+CSS布局结合运用有着多方面好处，更有利用提升用户使用操作体验，有多棒？试过才知道！

[ 本帖最后由 tdlisheng 于 2006-10-8 12:27 编辑 ]

tdlisheng

腾讯旗下搜索网站Soso.Com第二次换装，清新上线
先来看看前段时间腾讯旗下搜索网站Soso.Com放出的新版首页，截图如下：



看出些什么？呵呵

感觉有些敷衍了事，没有新意；用户当然不买账，反映强烈，而Soso也及时了解了用户体验后的感受，迅速做出反应，这是对的，要是到了做任何决定和改变，用户都毫无反应的时候，嘿嘿，急吧你就！用户第一永远没错，任何做互联网服务的都应该了解并真正做到。

腾讯旗下搜索网站Soso.Com迅速推出搜索新首页第二版，截图如下：



哇，完全变了样，下决心改了一下，呵呵，第一感觉很不错，配色很清新、淡雅的说。独具新意的渐变处理让整个页面不显得很平淡，恰到好处的突出了整体页面视觉效果，有一定的立体感，眼睛喜欢
如果其他页面能够配色本次改版都来个彻底的改头换面，效果一定不错，哈哈，工程比较大哦。

不过另有一处，怎么看都和整体网站页面设计不协调，是什么？大家应该都猜到了吧，对，就是LOGO！Soso.Com的LOGO设计实在让人觉得和整体很不协调，希望可以改改，用户的心声啊。除此之外，个人还是很喜欢这一次Soso.Com对搜索首页做的最新设计和调整的，希望继续有网站页面设计上的惊喜带给大家


2006.09.07：腾讯旗下搜索网站Soso.Com第二版所有搜索频道已经完全统一风格（清新、淡雅），正式上线！

[ 本帖最后由 tdlisheng 于 2006-10-8 12:28 编辑 ]

tdlisheng

提升用户视觉体验，奇虎（Qihoo.Com）首页再改版
用户至上，用户永远是第一位的。奇虎（Qihoo.Com）前不久全面改版，并同时进行网站改版体验调查，反馈了大量用户使用后的信息，当然就有叫好的、也有说不好的；汇总、分析、统计肯定少不了，奇虎（Qihoo.Com）反映还挺快的，这不，再次改进后的首页新版又上线了。

之前的一版网站页面设计，用户反馈较多的集中在某些地方文字过小，找不到信息重点等一些细节上，用户有些不满，用户视觉体验有所不足，找信息看着累；针对这些问题比较集中之处，奇虎（Qihoo.Com）做了改进。

最新改版后的奇虎（Qihoo.Com）网站首页页面设计截图：



对比前后两版可以看到：

1.三栏布局没有变化，但是对于每一栏的宽度都做了些许调整。
2.信息板块的排列位置也做了较大变动。
3.配色上基本没有变化，但修饰信息板块标题的小图标消失了，应该是为了达到不扰乱视觉感受。
4.利用有效的色块搭配，无形中突出了信息条的显示，用户浏览起来应该像对好些。
5.为了集合更多的信息量，页面部分板块采用了计时制信息转换。
6.更进一步凸现自己的优势板块和主推的特色服务，这些可以从网站页面第一屏看到。

奇虎（Qihoo.Com）这一版也毫无疑问地采用了DIV+CSS布局进行网站重构，对于信息量、流量、访问量大的网站这样的布局方式是很有好处的。

奇虎（Qihoo.Com）此次针对用户反馈对网站页面设计进行及时改进，用户应该比较满意，可以相信奇虎（Qihoo.Com）能做得更好。

[ 本帖最后由 tdlisheng 于 2006-10-8 12:28 编辑 ]

tdlisheng

中文博客搜索引擎Souyo.Com全新定位，全面改版
搜索游戏相关资讯的时候我发现了Souyo.Com，其极具特色的游戏搜索功能让我记住了Souyo这个网站，并一直关注。现在游戏搜索已经成为Souyo的一个分支，而Neso将更多的精力放在了BLOG搜索上；在Souyo，你可以使用到搜日志、搜博客、搜标签、自动摘录、评价搜索等诸多实用、特色而又有别于其他网站的功能，有很好的创新。

想了解更多Souyo的信息，自己去看官方的介绍：了解Souyo。

不管是游戏搜索还是旧版的Souyo，或是最新改版后的Souyo，网站UI有着很独特清新的感觉，亲近用户，视觉感受很好，长时间使用没有任何视觉疲劳感，能做到这些实属不易，可见开发者对于用户的感受、用户的体验考虑的还是比较到位的。

旧版Souyo网站页面设计截图：



新版Souyo网站页面设计截图：



可以看到由于改版后的Souyo在功能上和整体定位上都有很大改变，所以新版Souyo的整体网站页面设计布局上做了较大调整，搜索功能还是第一位的，用户之间的交流、交互被重视和强调起来，让用户能够彼此分享搜索体验。

Souyo.Com全站采用DIV+CSS布局进行网站重构，不过某些地方处理得还不够到位，对于FireFox的支持稍有一点点不足，就一点点

[ 本帖最后由 tdlisheng 于 2006-10-8 12:29 编辑 ]

tdlisheng

网易要改版，注重用户的视觉情绪体验
网易是个大门户中网站页面设计最简洁朴实的了（个人意见），也是使用鼠标翻屏最少的，看着不累，呵呵。

并且网易一直在不断改进网站页面设计，不断收集用户感受，提高用户体验，网站整体构架和布局越来越好，感觉其他网站目前是比不了的。

网易的所有栏目和单页已经改版的差不多了，只是对某些局部还在进行不断改进和优化，唯一长时间没有变化的就是首页了，果然现在网易要对首页“动手术”了，意图很明确：与网站整体风格协调统一，进一步提升用户使用感受和视觉情绪体验。

网易旧版首页截图：



从网易新版首页测试页面可以看出，“尊重用户体验”的设计原则得到鲜明的体现（以下五点摘自Cnbeta.Com用户评论）：

1.色彩和版面布局（页长短，字体，大小，密集度，甚至版面文字的字数控制...）视觉效果简洁舒适。
2.内容和板块的布局，突出网站的主题，个性和功能。
3.做减法，删除垃圾新闻和无关信息，聚焦核心。
4.没有弹出的垃圾广告。
5.浏览时，没有不良的情绪（如逼迫，愤怒和混乱）产生。

目前放出的网易新版首页截图：



可以看到新版网易首页设计的翻屏数如此少，对于一个门户网站来说，能有这样好的布局和信息突出整合体现实属不易-_-!!!，终于看到中国的门户开始新的尝试了，为用户想得更多了
相信以后一定会越来越好。
（新版现在还没放上来呢）

[ 本帖最后由 tdlisheng 于 2006-10-8 12:30 编辑 ]