Yahoo! 新版首页前端代码浅析网页设计

Yahoo! 新版首页前端代码浅析网页设计（精选2篇）

篇1：Yahoo! 新版首页前端代码浅析网页设计

写得有点晚，直奔主题，

 

YUI 3 神功初显

 

去年 11 份开始，已经有新闻：The New Yahoo! Front Page and YUI 3.0. 更小、更快、更灵活、更独立、向前兼容等等优点，不多说。从 Yahoo! 新版首页的性能来看，YUI 3 起到了不小作用。

 

附加 UA 信息

 

 

后台生成页面时，直接将 UA 信息添加在 html 标签上。其中 jsenabled, flash-10 等信息，是通过 js 添加的。

具体好处请参阅博文：Goodbye to CSS Hack.

 

960 不是神话

 

Yahoo! 新版首页的页面宽度为 972px. 页面结构如下：

其中 y-cols 下三栏的宽度为：192 + 8 | 400 + 10 | 350. 总宽度为 960. 加上最右边的 10px 和左右边框 2px, 总宽度为 972px.

栅格带来的是一种布局思想，具体宽度比例可以根据实际情况调整到视觉最佳。960 并不是神话。

主体部分，简单三栏，底部和各个模块的底边并没有对齐，体现了“栅格决定宽度，内容决定高度”的布局思想。（为何国内站点老追求水平方向的对齐的呢？不对齐，能降低开发和维护成本，

视觉上，也能带来简洁和错落之美。想不通ing……）

 

快乐的 Loading

 

无论是左边的站点入口，还是内容区域的标签页和轮播新闻，所有触发后才显示的内容，都是通过 Ajax 动态加载的。交互简单舒服，赞。

 

ARIA 支持

 

忘了 Yahoo! 的老版首页是否支持，这次明显加入了对 ARIA 的支持，例如：

 

国外对网站可访问性的关注，什么时候才能影响国内呢？

 

也许是缺点

 

1. 有点混乱的 class 命名。有些辅以 y- 前缀，这能尽量减少重名和相互影响。但同时能看到 mod, my, small 等常见单词的命名，感觉缺乏统一管理。

2. html 结构嵌套比较深。不少细节，感觉有更简洁的写法。这次 Yahoo! 首页的源码，让我感觉越来越像 Google 的风格。也许是 Yahoo! 前端团队成员的水平降低了（老员工的离职等）？或许是观念上的转变（实用主义）？最近也在思考这方面的问题。毕竟，大部分情况下，多两三个标签，相对而言最廉价。如果多些嵌套能带来可维护性的提高和操作上的方便，那是非常值得的。

3. 未删除的注释、未压缩的 css 和 js. 考虑到页面内容很可能是由多个系统协同产出，这些小细节，算不得是缺点，瑕疵吧。

写之前，感觉有很多想说的。写起来，却发现没啥。除了 YUI 3 的应用，Yahoo! 新版首页在前端代码上给我们的喜悦有点少，或许是因为我的期望太高。

本文来自：lifesinger.org/blog/2009/08/yahoo-fp-code-study/

篇2：浅析新闻网站首页设计与编排艺术

新闻网站首页版面的设计与编排艺术是影响新闻网站宣传效果的关键因素之一。网站首页的设计应准确把握网民的新闻信息需求心理、阅读习惯和行为模式等，在此基础上结合网站自身的特点与优势进行目标定位和特色服务，有针对性地开展设计工作，因此新闻网站首页的设计理念和设计原则必须铭记在心。

新闻网站首页设计与编排理念

新闻网站的首页设计理念最主要的是要需要考虑两个“冲击力”。即色彩和布局的冲击力。

（一）色彩冲击力

由于网站本身具有视觉元素主导的地位，因此色彩是新闻网站首页必须要考虑的问题，而这一问题，也是当今新闻网站最易被忽略的问题之一。通常来讲政府网站是较为正规的门户网站，首页整体风格应该以沉稳、大方、厚重为主。那么在色彩上就要求颜色种类尽量单一，以单色调为主。而一些商业性网站，相对来讲色彩可以多彩斑澜，以亮色为主。此外个人网站一般要求设计较为简洁、淡雅、随和，而新闻网站，由于其新闻本身的特点应采用对比鲜明、冲击较强烈的色彩作为首页的主色调。另外由于主色的构成相对单一，类型较为简单，所以应该尽量选用较为浓烈的色彩来强化对人们视觉的冲击力，以此达到给网民留下深刻印象的效果。

（二）布局冲击力

局部的设计相对于色调的选择，改动选择余地就小了很多。由于受版面、内容等多种因素的影响，内容布局会受到这样或那样的限制，只能在网页本身所固定的框架内“戴着镣铐跳舞”。但是首页的内容布局并不是一味的翻新，在很多方面还是可以进行改造创新的，正所谓有束缚才会有创造，有创造就会显现出突破原有框架的魅力，进而带来新鲜感。根据历来新闻网站首页在设计、编排和改版过程中的一些规律，可以总结出内容布局方面具有“服务至上”、“一步到位”，“寸土寸金”三个重要特征。

新聞网站首页设计与编排原则

（一）整体设计简洁

新闻网站的核心竞争力就是为网民提供大量并且含金量高的新闻信息。据调查，大部分网民访问新闻网站的主要目的就是获得新闻信息。与传统媒体一样网络新闻信息自然也要以简洁为主，不能太过繁琐，应该使网民一眼就可以找到自己想要阅读的新闻信息。因此，在设计首页时，要力求整体简洁、过渡合理、字间距、行间距适度。

（二）栏目分类清晰

在某种程度上讲首页是对新闻网站整体信息的一个概述，是对所提供的新闻和服务的一个整体再现的载体。它在一定程度上可以显现出网站的精心设计与组合，因此为了方便网民查找访问，有必要对新闻信息及相关服务进行恰当的归类、分类。这样做不仅有利于页面整体上的美观。也可以使首页像菜单一样，可以引导网民轻松、快捷的查找到所需要的“那道菜”。另外，形成清晰、合理的栏目规划，可以对网站整体架构一览无遗，这样也利于网站制作者及时修改和更新。所以，网站首页设计一定要摒弃“首页是个框，新闻全部往里装”的不负责任的行为。如果不进行分类势必会造成网民不知道在哪里寻找自身需要的信息，这不仅会失掉众多的受众，还会影响网的经营和发展。

新闻网站首页设计与编排技巧

新闻网站首页的设计技巧多种多样，但是最难掌握的就是简洁，所以在这里笔者主要谈谈新闻网站的简洁的设计技巧。

（一）文字设计的简洁技巧

文字是互联网设计的最基本单位，要想达到整体简洁的效果就离不开简捷的文字设计。由于汉语本身具有博大精深的特点，我们在进行网络新闻报道时可以尽量选择那些简单易懂又字数较少的文字，要知道文字除了能传递信息，还可以增强视觉传达效果，因此文字在简洁的基础上决不能失掉本身所应具有的审美价值。在这方面做得最好的恐怕要数百度网站，它所其涉及的内容包罗万象，但是首页却极其简洁，因此点击率一直名列前茅，从中我们就可以看出首页简洁的文字设计的重要作用。

（二）图像、声音、动画、视频等元素的简洁技巧

虽然文字是网络设计的主要单位，但图像、声音、视频等合理搭配也是表达网络新闻不可忽略的形式和手段。通常来讲这些手段可以增强网站的特色，但如果过大过长就会使网友丧失兴趣。因此，视频、动画、音乐的使用要考虑多种因素，最主要的原则是“内容决定形式”，首页中图片、视频的运用要考虑到内容需要与否，不可随意增加或删除。另外，要做到不回行。视频、图片、动画的回行不仅会使网民看着不舒服。还可能影响它下面的新闻数量。

总之，要想在新闻网站首页设计方面取得独特的效果，就必须在掌握新闻网站首页的设计原则与设计理念的基础上，结合网络实际和网民阅读新闻的动机、心理等因素进行改革创新。只有将这些细致、协调的编排巧妙的结合起来，制作出既符合整体要求又不失丰富的新闻网站首页，才能取得成功。个性不一定是最好的，但是平庸一定是不好的，如果新闻网站首页的设计与编排过于粗浅或大众化，新闻网站首页的“招牌”作用与审美效果就会消失。

| 作者单位：西安科技大学