Yahoo! 新首頁有哪些亮點？

11-17

老規矩，短文用戶：

視覺扁平化
搜索框的改進
左邊欄Yahoo sites區域精剪
無限流Story Stream
Story分類方式改變
Story展現方式變化
訂製化的右邊欄
提供更好的移動端體驗

============ 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 大叔回答之前整整一天的答案總共不超過 30 個字。放在 07 或者 08 年，這會兒 UCDChina 的首頁應該已經被雅虎這兩個字給刷屏了吧。大家會從網站的信息架構討論到哪怕導航條背景那細緻的漸變，視覺交互分析長文必然數不勝數。我們不得不承認 Yahoo 有在變成 Aol 的趨勢，無論是內容還是設計上，從業人員的關注點已經漸漸轉到 Facebook、Google 之類了。好在最近這幾個月 Yahoo 還是做出了一些積極的改變，大家一起拭目以待吧。

月獸老師回答了不少了，我木有特別想補充的。不過比較欣喜地看到在傳統的 Portal 這麼嚴肅、講究兼容性的地方 Yahoo 還是敢於做出從「Arial, Helvetica, sans-serif」到「"Helvetica Neue", Helvetica, Arial」的變化。

而且在導航和側邊欄某些部分使用了 300 的 font-weight，在 Mac 下也就是直接調用了 Light 粗細的 Helvetia Neue。這些小改動也許只是讓某些字體看起來精緻了一點點，但類似「優雅地降級」的做法無疑體現了 Yahoo 對待設計更高的重視，由上到下確實讓人看到了一點希望。

消息流、模塊和內容定製化、突出了社會化分享。

單單討論一下story stream上的這個remove按鈕，這個按鈕的作用我覺得不是真正意義上從用戶行為來額外推送用戶感興趣的內容。
一般的內容推薦是基於用戶的正向反饋，如facebook的贊或者reddit的up，但是這樣的推薦要基於用戶行為數據的調研和靠譜的演算法，來做內容的匹配衍射，也就是讓對的內容給對的用戶看到，在後台要處理的東西很多，如果做不好反而會弄巧成拙，吃力不討好。

yahoo這裡的做法是減而不是加（在個性化內容定製方面，一般的內容推薦或者社交媒體做的事情是讓你主動follow或者subscribe某主題某分類或者tag），這裡的remove的真正作用是讓用戶主動過濾不感興趣的內容（雖然剩下的也不能代表就是用戶感興趣的），然後留下他不是很討厭的內容

不做附加的動作也不去揣測用戶口味，而從用戶的反向反饋來為用戶推送內容，雖然不能為用戶額外推送「you may also like」這樣的內容，但是可以為用戶凈化內容或者說去噪，也同樣達到了解決信息過載和內容過濾的問題，也提升了用戶體驗，成本也低，這是很值得其他門戶借鑒的做法。

有些辭不達意，輕噴

所有圖標都友好地支持 retina 顯示屏。

Yahoo 現在的設計比以前好太多了，郵箱的體驗也是相當不錯，更符合現代網頁的主流設計。

布局清新明了,沒有那麼緊湊

我非常喜歡左側導航和部分菜單中的英文字體（沒注意過與改版之前相比是否有變化）

Yahoo!的首頁設置一向具有標杆性，繁而不亂，強化了社交性，但門戶的內容一應俱全。

強化了用戶體驗與社交分享

可惜雅虎現在全球市場都在下滑了