Yahoo首頁(yè)多年以來(lái)沒(méi)有進(jìn)行過(guò)大的變動(dòng)，這次是梅姐上任七個(gè)月以來(lái)的一個(gè)大動(dòng)作，其初衷是為了讓用戶(hù)能夠更沉浸在yahoo網(wǎng)站上（也可能希望新首頁(yè)新氣象，提振Yahoo長(zhǎng)久以來(lái)的頹勢(shì)），主要從兩個(gè)維度進(jìn)行了redesign，視覺(jué)顯示以及信息呈現(xiàn)。

圖1

1. 視覺(jué)扁平化（Flat Design），設(shè)計(jì)風(fēng)格簡(jiǎn)約，這也符合現(xiàn)在的潮流，調(diào)整了整體配色，主logo顏色調(diào)整，去掉了黃色輔助色，字體配色更趨于一致，加強(qiáng)Yahoo色的概念。設(shè)計(jì)上去除干擾，盡可能保證頁(yè)面的簡(jiǎn)潔，可對(duì)比圖1。

2. 搜索框的改進(jìn)，將自06年起沿用的黃色Search按鍵設(shè)計(jì)為與Yahoo logo顏色相似的按鍵（圖2），將搜索分類(lèi)放置入搜索框內(nèi)部做為一個(gè)下拉選項(xiàng)（下拉后，里面的選項(xiàng)也較老版要少），減少了信息干擾，一定程度上增加了信息層級(jí)，可能Yahoo主要發(fā)力點(diǎn)并不在搜索上進(jìn)行考量的吧（bing提供搜索）。得益于新改設(shè)計(jì)令頁(yè)面寬度增加，原來(lái)在搜索框下方的用戶(hù)登錄及用戶(hù)信息放置于搜索框的右側(cè)，這樣有效的形成了一個(gè)通欄，在看到這個(gè)設(shè)計(jì)的時(shí)候，已經(jīng)想到其用意 — 頂部固定通欄（2013 年，有哪些界面設(shè)計(jì)風(fēng)格趨勢(shì)？）。

圖2

細(xì)心的用戶(hù)應(yīng)該已經(jīng)發(fā)現(xiàn)Yahoo! logo被適當(dāng)縮小（圖3），其用意義是為了與下方的Yahoo?sites在視覺(jué)上保持在一個(gè)寬度內(nèi)，也為搜索框騰出地方，在向下滾動(dòng)時(shí)，固定通欄上的搜索框的寬度也與下方的Story Stream寬度保持一致。另，logo的顏色進(jìn)行了調(diào)整，色相發(fā)生了變化，并降低了飽和度，據(jù)@JJ Ying?的理解應(yīng)該是拿掉了黃色輔助色后，需要平衡色彩，現(xiàn)在就留下Yahoo紫主打了。

3. 左邊欄Yahoo sites區(qū)域得到了精剪（剪刀的剪哦），這次魄力很大，一下快剪掉接近半數(shù)的產(chǎn)品（多少Yahoo產(chǎn)品人要失神了，圖3），著名的Flickr木了、Messenger、Music等均從默認(rèn)列表中陣亡，同時(shí)部分產(chǎn)品也得到了提升，如：Mail、News、Finance等。為了令界面更簡(jiǎn)潔和清爽，Yahoo是狠下去了。另外，發(fā)現(xiàn)了Site的字體有了相應(yīng)變化，更為纖細(xì) “font-family:?’Helvetica Neue’, Helvetica, Arial;”，晚上@JJ Ying?又給我海補(bǔ)了一下 Helvetica Neue 的歷史，只能說(shuō)設(shè)計(jì)感因梅姐的品味而提升！精剪產(chǎn)品除了要強(qiáng)化主推產(chǎn)品、提升視覺(jué)體驗(yàn)外，還有一個(gè)原因，將在下面介紹。

圖3

4. 無(wú)限流Story Stream，這個(gè)是此次更新的主要亮點(diǎn)，為了使用戶(hù)能夠更為沉浸在Yahoo首頁(yè)，采用無(wú)限滾屏的信息流設(shè)計(jì)。在滾動(dòng)時(shí)，上方通欄及左邊欄均固定（精剪產(chǎn)品也是為向高度妥協(xié)，滾動(dòng)時(shí)被固定住了），本次首頁(yè)設(shè)計(jì)有許多是圍繞Story stream這個(gè)中心進(jìn)行考慮的，如：story分類(lèi)設(shè)計(jì)、精減sites區(qū)域設(shè)計(jì)、頂部通欄的設(shè)計(jì)…… 這樣的設(shè)計(jì)與現(xiàn)下流行的社交網(wǎng)站風(fēng)格類(lèi)似，強(qiáng)化了每條Story的閱讀性，并降低了時(shí)間軸的概念（可能是Yahoo有意為之，讓用戶(hù)更多關(guān)注在內(nèi)容本身上而忽略時(shí)間，不知以后會(huì)不會(huì)強(qiáng)化時(shí)間軸），用戶(hù)對(duì)自己Stream上的內(nèi)容可進(jìn)行定制，鼠標(biāo)移至每條Story將出現(xiàn)刪除、分享、及分類(lèi)標(biāo)簽的選項(xiàng)，通過(guò)用戶(hù)的行為模式Stream將推送更符合用戶(hù)口味的Story。

圖4

5. Story分類(lèi)方式改變，為了配合無(wú)限滾屏的信息流，Story Stream區(qū)域的分類(lèi)采用橫向的方式列在了分類(lèi)欄（classified section，位于圖4搜索框下方），在滾動(dòng)時(shí)也采取固定位置，方便用戶(hù)切換分類(lèi)。目前分類(lèi)欄上有六個(gè)選擇，最后一個(gè)為「More」鼠標(biāo)hover時(shí)將出現(xiàn)下拉菜單，倒數(shù)第二個(gè)為臨時(shí)分類(lèi)，用戶(hù)可通過(guò)點(diǎn)擊單條Story下方的分類(lèi)標(biāo)簽而進(jìn)行切換（這個(gè)設(shè)計(jì)有點(diǎn)像早期百度手機(jī)輸入法Cand區(qū)的設(shè)計(jì) ^_^）。

6. Story的展現(xiàn)方式也有了變化，老版僅顯示標(biāo)題，在新的設(shè)計(jì)里除了顯示標(biāo)題外，還有兩到三行的Story summaries，在用戶(hù)掃視Story stream區(qū)域時(shí)，能夠發(fā)現(xiàn)更多感興趣的信息。同時(shí)，可針對(duì)每條Story進(jìn)行分享（mail, facebook, twitter）,社交屬性較老版有所加強(qiáng)，分類(lèi)標(biāo)簽的引入，也使得用戶(hù)輕松獲取特定分類(lèi)下的信息。

7. 訂制化的右邊欄，本地天氣以及星座運(yùn)程等獨(dú)立到右邊欄（圖4），并在右邊欄提供了更多訂制化的信息，如，股票、賽事、Flickr精選等，并允許用戶(hù)進(jìn)行定制，以卡片的形式呈現(xiàn)，這與Google Now的概念有點(diǎn)像，梅姐不愧為從Google出來(lái)的人。

8. 提供更好的移動(dòng)端體驗(yàn)，因無(wú)法找到老的移動(dòng)版，所以就不做過(guò)多分析了，基本上符合響應(yīng)式設(shè)計(jì)的目標(biāo)，可參見(jiàn)梅姐的A new welcome to Yahoo!

總體說(shuō)來(lái)，這次改版還是很給力的，符合梅姐所強(qiáng)調(diào)的「a new, more modern experience」,有梅姐在設(shè)計(jì)團(tuán)隊(duì)的地位也提升了，有許多地方體現(xiàn)出以設(shè)計(jì)為優(yōu)先考慮，光調(diào)整左邊欄產(chǎn)品數(shù)量及顯示順序就需要莫大的勇氣和決心，其在Yahoo蟄伏了七個(gè)月，內(nèi)部的調(diào)整布置估計(jì)已做完了，是時(shí)候有所動(dòng)作了，從中國(guó)的節(jié)氣來(lái)說(shuō)，快到驚蟄了 –?驚蟄時(shí)，桃始花，倉(cāng)庚鳴，鷹化為鳩，春雷萌動(dòng)！

來(lái)源：http://www.jianjia360.com/?p=382