Yahoo! 新首頁亮點一覽
Yahoo首頁多年以來沒有進行過大的變動,這次是梅姐上任七個月以來的一個大動作,其初衷是為了讓用戶能夠更沉浸在yahoo網站上(也可能希望新首頁新氣象,提振Yahoo長久以來的頹勢),主要從兩個維度進行了redesign,視覺顯示以及信息呈現(xiàn)。
圖1
1. 視覺扁平化(Flat Design),設計風格簡約,這也符合現(xiàn)在的潮流,調整了整體配色,主logo顏色調整,去掉了黃色輔助色,字體配色更趨于一致,加強Yahoo色的概念。設計上去除干擾,盡可能保證頁面的簡潔,可對比圖1。
2. 搜索框的改進,將自06年起沿用的黃色Search按鍵設計為與Yahoo logo顏色相似的按鍵(圖2),將搜索分類放置入搜索框內部做為一個下拉選項(下拉后,里面的選項也較老版要少),減少了信息干擾,一定程度上增加了信息層級,可能Yahoo主要發(fā)力點并不在搜索上進行考量的吧(bing提供搜索)。得益于新改設計令頁面寬度增加,原來在搜索框下方的用戶登錄及用戶信息放置于搜索框的右側,這樣有效的形成了一個通欄,在看到這個設計的時候,已經想到其用意 — 頂部固定通欄(2013 年,有哪些界面設計風格趨勢?)。
圖2
細心的用戶應該已經發(fā)現(xiàn)Yahoo! logo被適當縮小(圖3),其用意義是為了與下方的Yahoo?sites在視覺上保持在一個寬度內,也為搜索框騰出地方,在向下滾動時,固定通欄上的搜索框的寬度也與下方的Story Stream寬度保持一致。另,logo的顏色進行了調整,色相發(fā)生了變化,并降低了飽和度,據@JJ Ying?的理解應該是拿掉了黃色輔助色后,需要平衡色彩,現(xiàn)在就留下Yahoo紫主打了。
3. 左邊欄Yahoo sites區(qū)域得到了精剪(剪刀的剪哦),這次魄力很大,一下快剪掉接近半數的產品(多少Yahoo產品人要失神了,圖3),著名的Flickr木了、Messenger、Music等均從默認列表中陣亡,同時部分產品也得到了提升,如:Mail、News、Finance等。為了令界面更簡潔和清爽,Yahoo是狠下去了。另外,發(fā)現(xiàn)了Site的字體有了相應變化,更為纖細 “font-family:?’Helvetica Neue’, Helvetica, Arial;”,晚上@JJ Ying?又給我海補了一下 Helvetica Neue 的歷史,只能說設計感因梅姐的品味而提升!精剪產品除了要強化主推產品、提升視覺體驗外,還有一個原因,將在下面介紹。
圖3
4. 無限流Story Stream,這個是此次更新的主要亮點,為了使用戶能夠更為沉浸在Yahoo首頁,采用無限滾屏的信息流設計。在滾動時,上方通欄及左邊欄均固定(精剪產品也是為向高度妥協(xié),滾動時被固定住了),本次首頁設計有許多是圍繞Story stream這個中心進行考慮的,如:story分類設計、精減sites區(qū)域設計、頂部通欄的設計…… 這樣的設計與現(xiàn)下流行的社交網站風格類似,強化了每條Story的閱讀性,并降低了時間軸的概念(可能是Yahoo有意為之,讓用戶更多關注在內容本身上而忽略時間,不知以后會不會強化時間軸),用戶對自己Stream上的內容可進行定制,鼠標移至每條Story將出現(xiàn)刪除、分享、及分類標簽的選項,通過用戶的行為模式Stream將推送更符合用戶口味的Story。
圖4
5. Story分類方式改變,為了配合無限滾屏的信息流,Story Stream區(qū)域的分類采用橫向的方式列在了分類欄(classified section,位于圖4搜索框下方),在滾動時也采取固定位置,方便用戶切換分類。目前分類欄上有六個選擇,最后一個為「More」鼠標hover時將出現(xiàn)下拉菜單,倒數第二個為臨時分類,用戶可通過點擊單條Story下方的分類標簽而進行切換(這個設計有點像早期百度手機輸入法Cand區(qū)的設計 ^_^)。
6. Story的展現(xiàn)方式也有了變化,老版僅顯示標題,在新的設計里除了顯示標題外,還有兩到三行的Story summaries,在用戶掃視Story stream區(qū)域時,能夠發(fā)現(xiàn)更多感興趣的信息。同時,可針對每條Story進行分享(mail, facebook, twitter),社交屬性較老版有所加強,分類標簽的引入,也使得用戶輕松獲取特定分類下的信息。
7. 訂制化的右邊欄,本地天氣以及星座運程等獨立到右邊欄(圖4),并在右邊欄提供了更多訂制化的信息,如,股票、賽事、Flickr精選等,并允許用戶進行定制,以卡片的形式呈現(xiàn),這與Google Now的概念有點像,梅姐不愧為從Google出來的人。
8. 提供更好的移動端體驗,因無法找到老的移動版,所以就不做過多分析了,基本上符合響應式設計的目標,可參見梅姐的A new welcome to Yahoo!
總體說來,這次改版還是很給力的,符合梅姐所強調的「a new, more modern experience」,有梅姐在設計團隊的地位也提升了,有許多地方體現(xiàn)出以設計為優(yōu)先考慮,光調整左邊欄產品數量及顯示順序就需要莫大的勇氣和決心,其在Yahoo蟄伏了七個月,內部的調整布置估計已做完了,是時候有所動作了,從中國的節(jié)氣來說,快到驚蟄了 –?驚蟄時,桃始花,倉庚鳴,鷹化為鳩,春雷萌動!
來源:http://www.jianjia360.com/?p=382
- 目前還沒評論,等你發(fā)揮!