分享
 
 
 

设计理论研究:如何向Yahoo!主页学习

王朝other·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

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

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

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

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

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

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!英文版的设计采用了相对大小,这对中文来说可能有更多挑战性(本站的设计就是相对大小来设计的),但是最害怕的是用户不会使用吧?

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有