原文：点击查看

从中国雅虎的改版看如何向Yahoo！主页学习

2006年5月，Yahoo!主页（英文）进行了自1994年雅虎诞生以来最具有变革意义的一次改版，全新的有利于用户使用的页面布局，干净、现代和简洁的设计风格，以及Tab、Ajax的适当应用，一下子影响了全世界。在中国，2006年8月，中国雅虎改版和英文版页面布局基本一样，只是头部和视觉元素有些不同。2007年初再次对网页的头部和导航等进行了改动，就在上周，中国雅虎又推出了新的首页的测试版，当然目前这个版本只有很少的随机用户看到。从这些变化中，或许能看出一些可以学习、借鉴和探讨的东西

Yahoo!英文版页面和中国雅虎三次改版的截图

1. Yahoo!英文版2007年5月首页

Yahoo!英文版2007年5月首页窄版

使用你已有的内容来创建personas

有的时候你有一大堆研究结果，有时候你手头什么资料也没有，不管怎样，persona都是有用的。当然，你知道的越多越好，然而就算是一个简单的口头描述也非常有用。

不久之前，我在一个设计小组中用了下面的persona：

‘Betty是退休人员,住在近郊的纽卡斯尔是负责当地的邻里守望章’

这就是个persona了。但有它没它相当不同，因为它为一个网站创造了一个边缘的persona，而这个网站原本的目标用户是统计学家。创建Betty 使小组能够看到设计的网站尽管能够很好的帮助那些理解统计语言的人但对Betty是完全没用的。同时我们也发现了那些为Betty设计而事实上并不一定适合她的网站。有的时候，一幅铅笔勾画的persona能够带来更多的意义。

你应该关心你的persona开什么车

Persona常常被批评的地方在于有的时候创建persona像是在完成写作练习。

“Clare 28岁，住在Primrose山。她有辆Prius，然而仅仅在周末开，她有一只小狗，每周她遛两次。Clare是单身但不时的约会，她喜欢旅游。”
只要persona是与设计有关的，这就对了——但是这些到底和设计有什么关系？当你将persona基本作为交流工具，这些小的细节都变得很重要了。毕竟——你努力要作的是要人性化“目标听众”。作为人，当然要关心这些小细节，正是这些细节帮助personas与别人联系起来，也让他们变得真实。Clare到底开什么车真的重要吗？从某种程度上，是的。人们所选择开的车或者住的地方告诉我们这些人们是什么样的。Clare开什么车为Clare的个性增加了深度。然而，我从未赞成去实际的调查这些细节。他们是交流工具，如果人们不知道Prius是什么意思，就没有用它的意义了。明白？

不要为persona设计

就像我开始提到的——包含了边缘的行为和需求的persona。从你的persona中，你能够确定什么功能需要包括，核心功能是什么。一旦你得到了这些信息——你已经让自己通过创建persona而开始了解用户——这时可以把persona放在一边了，用你作为设计师的技巧来设计吧。

如果你用persona来紧密的知道你的设计，你最终支持的是一系列的边缘情况。这总是会危机到你的核心功能的。这不是好的设计。

一旦你设计产品，你就可以用persona来评价设计，并且以它来帮助你作与利益相关人之间的沟通，来解释你的设计为什么以及怎样支持persona的目标和任务。

不要忍不住参考你为personas创造的目标和任务列表，像拼七巧板一样的设计页面的布局。会失败的。

所以，对于Personas，我非常着迷。但是你需要明白persona的用处在哪儿并适当的使用，并且不要太被他们的创建过程吸引——用你手头的资料来创建，带着你的利益相关人一起，并且告诉他们如何做到用户中心，继续做设计伟大的用户体验的重要的事业。

 Leisa Reichelt是伦敦地区的用户体验顾问，现在在澳大利亚的悉尼

2. 2006年8月中国雅虎首页

3. 2007年初，第二次改版,也就是现在大家看到的中国雅虎首页
中国雅虎2007年5月首页

中国雅虎2007年5月首页窄版

4. 中国雅虎2007年5月底首页测试版

总结

1. 越重要的内容出现在越上面，这是符合了人们从上到下阅读浏览习惯的，所以Logo和搜索被放在在最上面，紧接着就是导航、图片新闻和邮箱等入口。

2. 视觉重点在左边，鼠标的操作重点在右边，这是基于人从左到右阅读习惯，用右手翻书右手使用鼠标（绝大部分人）的使用习惯，所以Logo、导航这些需要关注视觉重点都在左边，搜索框、邮箱登录等等都在右边。这点我在《向Yahoo Mail的主页学习》中提到过，同样的结论在MSN上也可以得到明显的验证。

3. 首屏的完整和足够信息量至关重要。

（1）首屏指的是在浏览器最大化时从顶端看到网页的大小，在1024×738分辨率下一屏的大小是1003×600，在800×600分辨率下的一屏大小是779×432，具体请看《网页一屏有多大？》.
（2）虽然在《页面长度与用户行为的一些数据》提到，页面的长度和用户是否会完整浏览整个页面没有关系，但需要考虑，用户在浏览后面的页面的时候注意力是否会向开始那样集中，同时对于大多数用户（网速不快）特别是新用户，首先看到的是首屏，这会有一个首因效应，毫无疑问，对于世界上任何一个站点来说，新用户（潜在用户）永远多于老用户。
（3）对于Yahoo来说，其最重要的是Logo、搜索框、导航、邮箱登录等功能、和资讯信息。上图中紫色横线以上部分是在其对应分辨率下（如窄版对应800×600分辨率）看到的首屏内容。

• 对比一下Yahoo!英文版就会发现，导航恰到好处的完整出现在一屏，中栏的资讯分为两种，一种是图片资讯（Featured那一行），很吸引人，一种是文字资讯（in the news那一行），容量大。在宽版下文字资讯在图片下面，而在窄屏下两者位置上下对调，这就是为了保证首屏完整和足够信息量。
• 中国雅虎的前两个版本，都在Logo的两侧放置重要的链接，但是实际上重要链接的视觉效果被Logo干扰和弱化，同时也导致了导航链接的混乱，也直接导致了首屏浪费了大量的空间。这个问题在中国雅虎2007年5月首页窄版上表现最为明显。

4. 导航的设计

（1）保留重要导航，隐藏全部导航。综合性站点的分类越来越多，导致导航越来越庞大，直接在页面全面列出，非常的杂乱不仅不会带来很好的效果，反而让人却步，这点在AMAZON已经得到了充分的思考和实践，所以Yahoo！的导航处理是一个非常好的方式。
（2）别让我思考。中国yahoo前两个版本中，在导航的最前面出现“全部”会导致用户需要思考是点击全部呢，还是先看看已经列出的重点导航。
（3）导航还是一个的好。分类的入口应该稳定而不易过多，这点中国yahoo前两个版本中表现的很明显，导致了混乱，相同链接相互干扰，同时因为分类链接数量增多，也干扰了其他的链接。
（4）排序还是分类？英文由于可以明显的看到按照首字母排序，所以很好确定导航的顺序，但是中文就不好办了，绝大部分的中文菜单，一般都是按照重要性来进行排列，所以当菜单很多的时候进行分类是一种很有效的方式，其重点就是归纳分类，对比中国雅虎的前两个版本，现在的第三个版本无疑前进了一大步。

5. 如何用好Tab？

在中国雅虎第三次改版的测试版中Tab页的效果被拿掉，增加了对一个栏目的内容的类似”下一页”的功能，这必将带动挖掘内容的深度。那么Tab呢？

自从Yahoo！英文版用上Tab之后，Tab风靡起来，于是乎就像Ajax一样被到处滥用，比如网易、新浪都采用上Tab页来大量显示内容了。其实在Yahoo!英文版的页面并非仅仅是用Tab在一个区域来显示更多的内容，而是有节制的选择部分重要内容，然后记录用户最后一次点击的Tab，完成用户的定制的，这种定制是需要通过统计且精心安排一行Tab的内容的。

从效率上讲，Yahoo！单击Tab效果肯定没有网易那种触发式的Tab高，但是效率最高的肯定是传统的直接通过滚动页面浏览。所以Tab要物尽其用，而不是到处乱用。

中国雅虎前两个版本中Tab页的视觉效果，通过一个突出的纯色块，是达到了突出被选中的Tab页，但是太突出了，突出的色块夺走了文字的感觉，这个色块的题目是什么，还需要定眼一看。

6. 中国雅虎2007年5月底首页测试版中，登录的处理应该是一个败笔

（1）登录顺序的排列方式，会在用户在登录过程中造成干扰，这一点Yahoo Mail做的很好
（2）“登录雅虎”后面的“个人空间”是一个按钮还是一个链接？如果是链接，则很容易让人当作是一个登录个人空间的按钮；如果是登录个人空间的按钮，但是个人空间却是雅虎的一部分，提供两种登录方式，让人迷惑，人们期望的是一次登录后，选择前往地方，而不是在登录之前就需要选择。
（3）那个显眼的“免费注册”简直是一个怪胎。

ps，Yahoo！英文版的设计采用了相对大小，这对中文来说可能有更多挑战性（本站的设计就是相对大小来设计的），但是最害怕的是用户不会使用吧？