新浪網首頁改版小結

0 評論 19507 瀏覽 48 收藏 15 分鐘

2013年4月1日愚人節,新浪緊跟隨網易、騰訊的步伐,將首頁進行了改版。改版后在視覺體驗、流量效率、個性化以及資源互通方面都有了可喜變化。本文主要在視覺體驗層面,用新浪新版首頁與新浪舊版首頁、當前搜狐首頁分別進行對比,總結出若干變化點,希望能給設計師在做改版設計時帶來幫助。

新浪聯席總裁兼COO杜紅表示:“新浪網此次改版,是繼98年成立至今15年以來的一次重大變革,完全基于滿足和貼近用戶不斷涌現出的在個性化、社交化、本地化移動化等方面的需求,同時,也希望通過改版能夠打通新浪網與新浪微博兩大平臺,使兩者之間產生協同效應,從而擴展新浪網的門戶邊界?!?/p>

  一,新浪改版目標

社交化:此次改版最大的亮點就是融入了社交化元素,將新浪微博與新浪網打通,依托新浪微博平臺衍生的社交關系和碎片化信息,同時基于用戶興趣偏好和過往瀏覽記錄的算法,為用戶提供興趣匹配度高的內容,更好的滿足用戶對社交化的需求。本次打通包括微博賬號登錄與狀態信息查看、微博搜索、微博熱點推送等。此外,在新浪網首頁版頭位置的搜索區域,也將“微博搜索”設置為默認選項,用戶通過點擊即可直接進入新浪微博搜索界面。

移動化:改版后,包括新浪新聞HD、新浪財經、新浪娛樂、天氣通等客戶端均可在新版新浪網首頁下載,滿足用戶對移動化的需求。

  (圖2)左側產品版塊-新浪新版首頁

  (圖3)頂部通欄下拉菜單-新浪新版首頁

個性化:通過換一換刷新,進行3組8條內容的推薦,根據用戶在新浪微博上所關注的人群進行了整合,并借此推送來自新浪網各個頻道的相關內容。例如,如果你關注了大量的足球名人,那么,該欄目就會推送大量來自足球界的相關文章。

  (圖4)猜你喜歡版塊-新浪新版首頁

  本地化:新浪還通過對各地區用戶的訪問IP進行精準定位,并根據用戶訪問習慣和興趣偏好,提供精準匹配的本地化內容,滿足用戶對本地化內容的閱讀需求。

  (圖5)本地化內容-新浪新版首頁

  二,新浪新版首頁 VS 舊版首頁

我們從視覺層面將新浪改版前后兩版頁面進行了對比,總結出下表:

  2.1廣告

  a) 首屏文字鏈廣告

舊版:廣告4幀,每幀38個。

  (圖6)文字鏈廣告-新浪舊版首頁

新版: 16個,在二通新增文字鏈廣告14個

  (圖7)文字鏈廣告-新浪新版首頁

  b) 廣告尺寸

新版對圖片廣告尺寸進行了重新整理。廣告尺寸由16種減為8種。

1) 舊版廣告:640x90px;370x125px;140×255;140×120;140X360

2) 新版廣告:1000x90px;240x350px;240×330;240×200;240×170

  c) 廣告類型

舊版:純展示,純曝光,靜態+動態展示。

  (圖8)展示性廣告-新浪舊版首頁

新版:基于微博的互動廣告,即當用戶在瀏覽頁面所展示出來的廣告時,會同時出現該用戶的微博ID。還有來自新浪功能廣告平臺(ADBOX)推送廣告。

  (圖9)交互性廣告-新浪新版首頁

  2.2內容

  a) toolbar

舊版:寬度950PX,內容排列邏輯性欠缺。

  (圖10)toolbar-新浪舊版首頁

新版:寬度1000PX,加寬加高。頂部固定通欄,引入我的菜單、手機新浪網、移動客戶端、微博、博客、郵箱等產品的快捷訪問入口。

  (圖11)toolbar-新浪新版首頁

  b) 導航

舊版:21個主分類,63個入口。

  (圖12)導航-新浪舊版首頁

新版:導航在數量上沒有變化,都是21個主分類,但由于寬度更寬,看起來更加清晰舒適。

  (圖13)導航-新浪新版首頁

  c) 頻道版塊

舊版:標簽質感厚重,內容版塊重點不夠突出。

  (圖14)頻道版塊樣式-新浪舊版首頁

新版:頻道板塊在整體位置和條數上區別不大,但新版分類更清晰簡潔,首屏增加了視頻和綜藝的條數。最為明顯的就是加入了猜你喜歡板塊。

  2.3頁面設計

  a) 寬度、高度

舊版:寬度950px,高度10.5屏。

新版:寬度1000px,高度12屏。

  b) 頁面顏色、頁面背景

舊版:黃色值為#FED681,背景色為白色。

  新版:橘色值為#FC8524,背景色依然為白色。

  c) 頁面結構

舊版:三欄結構,分別是160px,385px,385px。左右和上下間距均為10px。

  (圖16)頁面結構-新浪舊版首頁

新版:三欄結構,分別是240px,360px,360px。左右間距20px,上下間距25px新版本整體版塊留白更多,視覺更舒適。

  (圖17)頁面結構-新浪新版首頁

  d) 版塊樣式

舊版:圖片有邊框,標簽樣式2個或3個。

  (圖18)版塊樣式-新浪舊版首頁

新版:去掉版塊、圖片邊框,精簡標簽樣式與數量(不超過3個)。

  (圖19)頁面結構-新浪新版首頁

  e) 文字

字體:宋體(內容文字),微軟雅黑(toolbar、導航、欄目標題)

字號:12px 14px 16px

行距:舊版14號列表行距為23px ;12號字列表行距為21px;

新版14號列表行距為26px ;12號字列表行距為24px。

字色:

舊版:

  新版:

  總結

1,頁面延展至1000像素。

2,拋棄陳舊的配色;采用明快的色調,以簡約設計為主導。

3,增加置頂導航,讓產品入口更直觀。

4,整合廣告資源,制定廣告規范(位置、色調、品質等)。

5,行間距、板塊間距、字間距都調整。

6,搜索框提高位置,縮短改為菜單下拉,默認為微博搜索。

  三,新浪新版首頁VS搜狐首頁

我們將新浪新版首頁與搜狐首頁在視覺樣式上進行了對比,總結了下表:

  四,國內外門戶網站改版前后對比

縱觀國內幾大門戶網站,新浪、網易和騰訊改版后的首頁表現出極大的相似性:1)對于搜索的重視;2)對于視覺體驗的改善(行間距加大了、廣告減少);3)對于打通自家產品(尤其是微博)的重視。下面我們再看看國外yahoo改版前后的變化:

  (圖20)2013年2月改版前雅虎首頁

  (圖21)雅虎當前首頁

改版后的Yahoo以信息流方式展現首頁,更加簡潔,同時凸顯了:1)對內容的回歸——密密麻麻的標題沒有了,文章的簡短摘要回來了;2)對分享和個性化的重視——鼠標移到文章區域會顯示“分享”和“刪除”按鈕,你可以在不打開正文的情況下對文章進行分享和屏蔽,還可以設置自己的內容偏好;3)對交互體驗的重視——文章的類目和標簽信息在鼠標未移到到該文章時不顯示,或者說只有你對這篇文章感興趣的時候,一些附加的信息才會顯示出來,從而避免頁面信息的過多和雜亂;更多文章按需加載,只在頁面滾動到最下方時才顯示。

  五,寫在最后:

關于門戶已死的言論并不鮮見,但是注意力作為互聯網時代的稀缺資源,很大程度上仍然把握在門戶手中。門戶通過大量的新聞、社區、專業服務聚攏人氣,吸引用戶的注意力,進而通過廣告、游戲、商城等手段把注意力變現,依然有其存在的巨大價值。這次新浪首頁改版并沒有對門戶重新進行革命性定義,只是從視覺體驗層面對信息進行梳理,使之更清晰、高效的被用戶獲取。而雅虎不但在視覺層面做減法,更是在交互便利性和信息智能化展示上作出了積極的嘗試。那么未來的門戶應該朝著什么方向發展呢?個人認為,可以從以下幾個方面考慮:

1)內容個性化:只給用戶看他想看的內容,不能再用“海量”內容轟炸用戶,不要再用密集恐懼癥恐嚇用戶;

2)展示智能化:根據用戶的心理和注意力,在快速瀏覽和深度閱讀方面建立平衡并維持智能化通道,使得二者的需求都能得到充分滿足;

3)服務專業化:減少粗制濫造的一般性內容,弱化大而全,在重點行業和領域打造專業內容,樹立專業形象,增強用戶的依賴感和黏著度;

4)廣告精準化:逐步改變粗放式的廣告投放模式,依靠大數據和信息流實現廣告的精準投放和友好展示,降低用戶對于廣告的反感,實現門戶、廣告商和用戶的三贏;

5)新聞互動化:優化新聞評論與二次生產,讓用戶不再僅僅是新聞的閱讀者,更是評論者和參與者,拉近用戶與內容的距離;

6)互動社會化:利用內容閱讀、評論、廣告點擊等信息,對用戶進行聚合,增強用戶之間的溝通與交流,凸顯門戶的社會化優勢與價值;

7)運營一體化:進行內部資源整合,把各項分立的工具、應用和服務融合在一起,互相貫通,打造各垂直網站無法企及的綜合優勢。

via:搜狐MDC

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!