Yahoo! 新首页有哪些亮点?

标签: yahoo 首页 亮点 | 发表时间:2013-02-23 03:20 | 作者:MoonMonster
出处:http://www.zhihu.com/rss
老规矩,短文用户:
  1. 视觉扁平化
  2. 搜索框的改进
  3. 左边栏Yahoo sites区域精剪
  4. 无限流Story Stream
  5. Story分类方式改变
  6. Story展现方式变化
  7. 订制化的右边栏
  8. 提供更好的移动端体验

============  for 长文  ===========

Yahoo首页多年以来没有进行过大的变动,这次是梅姐上任七个月以来的一个大动作,其初衷是为了让用户能够更沉浸在yahoo网站上(也可能希望新首页新气象,提振Yahoo长久以来的颓势),主要从两个维度进行了redesign,视觉显示以及信息呈现。 图1

1. 视觉扁平化(Flat Design ,设计风格简约,这也符合现在的潮流,调整了整体配色,主logo颜色调整,去掉了黄色辅助色,字体配色更趋于一致,加强Yahoo色的概念。设计上去除干扰,尽可能保证页面的简洁,可对比图1。

2. 搜索框的改进,将自06年起沿用的黄色Search按键设计为与Yahoo logo颜色相似的按键(图2),将搜索分类放置入搜索框内部做为一个下拉选项(下拉后,里面的选项也较老版要少),减少了信息干扰,一定程度上增加了信息层级,可能Yahoo主要发力点并不在搜索上进行考量的吧(bing提供搜索)。得益于新改设计令页面宽度增加,原来在搜索框下方的用户登录及用户信息放置于搜索框的右侧,这样有效的形成了一个通栏,在看到这个设计的时候,已经想到其用意 -- 顶部固定通栏( 2013 年,有哪些界面设计风格趋势?)。 图2

细心的用户应该已经发现Yahoo! logo被适当缩小(图3),其用意义是为了与下方的Yahoo sites在视觉上保持在一个宽度内,也为搜索框腾出地方,在向下滚动时,固定通栏上的搜索框的宽度也与下方的Story Stream宽度保持一致。另,logo的颜色进行了调整,色相发生了变化,并降低了饱和度,据 @JJ Ying 的理解应该是拿掉了黄色辅助色后,需要平衡色彩,现在就留下Yahoo紫主打了。

3. 左边栏Yahoo sites区域得到了精剪(剪刀的剪哦),这次魄力很大,一下快剪掉接近半数的产品(多少Yahoo产品人要失神了,图3),著名的Flickr木了、Messenger、Music等均从默认列表中阵亡,同时部分产品也得到了提升,如:Mail、News、Finance等。为了令界面更简洁和清爽,Yahoo是狠下去了。另外,发现了Site的字体有了相应变化,更为纤细 "font-family: 'Helvetica Neue', Helvetica, Arial;",晚上 @JJ Ying 又给我海补了一下 Helvetica Neue 的历史,只能说设计感因梅姐的品味而提升!精剪产品除了要强化主推产品、提升视觉体验外,还有一个原因,将在下面介绍。 图3

4. 无限流Story Stream,这个是此次更新的主要亮点,为了使用户能够更为沉浸在Yahoo首页,采用无限滚屏的信息流设计。在滚动时,上方通栏及左边栏均固定(精剪产品也是为向高度妥协,滚动时被固定住了),本次首页设计有许多是围绕Story stream这个中心进行考虑的,如:story分类设计、精减sites区域设计、顶部通栏的设计...... 这样的设计与现下流行的社交网站风格类似,强化了每条Story的阅读性,并降低了时间轴的概念(可能是Yahoo有意为之,让用户更多关注在内容本身上而忽略时间,不知以后会不会强化时间轴),用户对自己Stream上的内容可进行定制,鼠标移至每条Story将出现删除、分享、及分类标签的选项,通过用户的行为模式Stream将推送更符合用户口味的Story。
图4

5. Story分类方式改变,为了配合无限滚屏的信息流,Story Stream区域的分类采用横向的方式列在了分类栏(classified section,位于图4搜索框下方),在滚动时也采取固定位置,方便用户切换分类。目前分类栏上有六个选择,最后一个为「More」鼠标hover时将出现下拉菜单,倒数第二个为临时分类,用户可通过点击单条Story下方的分类标签而进行切换(这个设计有点像早期百度手机输入法Cand区的设计 ^_^)。

6. Story的展现方式也有了变化,老版仅显示标题,在新的设计里除了显示标题外,还有两到三行的Story summaries,在用户扫视Story stream区域时,能够发现更多感兴趣的信息。同时,可针对每条Story进行分享(mail, facebook, twitter),社交属性较老版有所加强,分类标签的引入,也使得用户轻松获取特定分类下的信息。

7. 订制化的右边栏,本地天气以及星座运程等独立到右边栏(图4),并在右边栏提供了更多订制化的信息,如,股票、赛事、Flickr精选等,并允许用户进行定制,以卡片的形式呈现,这与Google Now的概念有点像,梅姐不愧为从Google出来的人。

8. 提供更好的移动端体验,因无法找到老的移动版,所以就不做过多分析了,基本上符合响应式设计的目标,可参见梅姐的 A new welcome to Yahoo!

总体说来,这次改版还是很给力的,符合梅姐所强调的「a new, more modern experience」,有梅姐在设计团队的地位也提升了,有许多地方体现出以设计为优先考虑,光调整左边栏产品数量及显示顺序就需要莫大的勇气和决心,其在Yahoo蛰伏了七个月,内部的调整布置估计已做完了,是时候有所动作了,从中国的节气来说,快到惊蛰了 -- 惊蛰时,桃始花,仓庚鸣,鹰化为鸠,春雷萌动!

「春雷响,万物长!」愿这声春雷也震醒Yahoo这条蛰虫吧,愿...

ps.写得匆忙,今天才看到的新首页,晚上在家分析并与老版进行对比,如有不足,请各位补充了。


    — 完 —
    本文作者: MoonMonster

    知乎是一个真实网络问答社区,在这里可以寻找答案、分享知识,发现一个更大的世界。
    下载知乎 iPhone 客户端: http://zhi.hu/ios
    此问题还有 8 个回答,查看全部。
    延伸阅读:
    卫哲对阿里巴巴做出的最大贡献是什么?
    腾讯、阿里、新浪、搜狐、网易的离职员工创办的群叫什么名字?

    相关 [yahoo 首页 亮点] 推荐:

    Yahoo! 新首页有哪些亮点?

    - - 知乎每日精选
    老规矩,短文用户: 视觉扁平化. 左边栏Yahoo sites区域精剪. 无限流Story Stream. Story分类方式改变. Story展现方式变化. 提供更好的移动端体验. ============  for 长文  ===========. Yahoo首页多年以来没有进行过大的变动,这次是梅姐上任七个月以来的一个大动作,其初衷是为了让用户能够更沉浸在yahoo网站上(也可能希望新首页新气象,提振Yahoo长久以来的颓势),主要从两个维度进行了redesign,视觉显示以及信息呈现.

    Delicious被Yahoo卖了

    - Ryan - 月光博客
      据Delicious官方博客报道,YouTube联合创始人Chad Hurley和Steve Chen已经从Yahoo手中收购了知名社交书签服务Delicious,Yahoo未透露具体的收购金额.   Delicious创立于2003年,目前拥有数百万用户. Yahoo于2005年收购Delicious,但之后Delicious的发展陷于长时间的停滞状态,而Yahoo的首席执行官开始考虑精简业务并表示,Delicious并非其未来发展计划的一部分.

    Yahoo还剩下的选择

    - skymare - 36氪
    昨天Yahoo CEO Carol Bartz被电话解雇,那么Yahoo还剩下几条路可以走呢. 与Amazon和Google竞争收购Hulu,然后由具有广泛影视资源的Hulu CEO Jason Kilar出任Yahoo新CEO或者由Yahoo美洲业务总裁Ross Levionsohn出任新CEO,而Kilar负责媒体业务.

    Google 欲插手 Yahoo 收购

    - Felix - 谷奥——探寻谷歌的奥秘
    据 WSJ 的 Amir Efrati 报道,Google 正在寻求一些私募的资金帮助用以收购 Yahoo. 如果收购成功,那么 Google 就可以通过 Yahoo 旗下的大量网站来投放广告了. 但是收购前景仍不明朗,还有其他一票公司也瞅着收购 Yahoo,包括马云. 不过 Google 真要收购 Yahoo 的话反垄断是一条巨大的鸿沟,所以这件事基本上还是不太可能发生的,众看官稍微留心一下就行.

    Yahoo 也要推 Android 手機,Yahoo Phone 將在日本上市

    - 饭团 - T客邦
    Yahoo 也要在手機市場參一腳. 日本 Yahoo 聯手 Softbank (軟體銀行),將在9月推出 Yahoo Phone,手機裡預先安裝了幾個 Yahoo 的服務,包括首頁、拍賣、行事曆、字典,讓使用者隨時都在 Yahoo 的圈圈裡活動. 有趣的是,這是一隻 Android 手機. Yahoo Phone 其實就是 Sharp 生產的「AQUOS PHONE THE PREMIUM SoftBank 009SH」,是 SoftBank 提供給用戶的機型之一,SoftBank 是日本第3大電信商,同時也是日本 Yahoo 最大的股東,拿手上的產品印上 Yahoo 的品牌來賣,實在很合情合理.

    yahoo网站性能优化的建议:Yahoo军规再度挖掘

    - - Web前端 - ITeye博客
    本来这是个老生常谈的问题,上周自成又分享了一些性能优化的建议,我这里再做一个全面的Tips整理,谨作为查阅型的文档,不妥之处,还请指正;. 如果你已经对yahoo这些优化建议烂熟于心,果断点这里. 一、 Yahoo的军规条例:. 谨记:80%-90%的终端响应时间是花费在下载页面中的图片,样式表,脚本,flash等;.

    Google Bookmarks 官方提供 Delicious 书签导入工具,挖角 Yahoo

    - GAO Ming - 谷奥——探寻谷歌的奥秘
    之前我们介绍过第三方的应用可以将不知道哪天就死翘翘的Delicious书签导出到Google Bookmarks里,今天Google官方也推出了同样作用的应用,只要登录自己的Yahoo或Delicious帐户,即可快速将书签导出来,摆脱Yahoo的梦魇. 我一直在Firefox里使用Delicious扩展,除了Yahoo不靠谱的态度以外其它一切还都不错.

    再谈Yahoo关于性能优化的N条军规

    - RobinsonNie - 互联网的那点事
    本来这是个老生常谈的问题,上周自成又分享了一些性能优化的建议,我这里再做一个全面的Tips整理,谨作为查阅型的文档,不妥之处,还请指正;. 如果你已经对yahoo这些优化建议烂熟于心,果断点这里. 谨记:80%-90%的终端响应时间是花费在下载页面中的图片,样式表,脚本,flash等;. 详细的解释来这里查:http://developer.yahoo.com/performance/rules.html.