新浪網(wǎng)首頁(yè)改版小結(jié)

0 評(píng)論 19610 瀏覽 48 收藏 15 分鐘

2013年4月1日愚人節(jié),新浪緊跟隨網(wǎng)易、騰訊的步伐,將首頁(yè)進(jìn)行了改版。改版后在視覺(jué)體驗(yàn)、流量效率、個(gè)性化以及資源互通方面都有了可喜變化。本文主要在視覺(jué)體驗(yàn)層面,用新浪新版首頁(yè)與新浪舊版首頁(yè)、當(dāng)前搜狐首頁(yè)分別進(jìn)行對(duì)比,總結(jié)出若干變化點(diǎn),希望能給設(shè)計(jì)師在做改版設(shè)計(jì)時(shí)帶來(lái)幫助。

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

  一,新浪改版目標(biāo)

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

移動(dòng)化:改版后,包括新浪新聞HD、新浪財(cái)經(jīng)、新浪娛樂(lè)、天氣通等客戶端均可在新版新浪網(wǎng)首頁(yè)下載,滿足用戶對(duì)移動(dòng)化的需求。

  (圖2)左側(cè)產(chǎn)品版塊-新浪新版首頁(yè)

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

個(gè)性化:通過(guò)換一換刷新,進(jìn)行3組8條內(nèi)容的推薦,根據(jù)用戶在新浪微博上所關(guān)注的人群進(jìn)行了整合,并借此推送來(lái)自新浪網(wǎng)各個(gè)頻道的相關(guān)內(nèi)容。例如,如果你關(guān)注了大量的足球名人,那么,該欄目就會(huì)推送大量來(lái)自足球界的相關(guān)文章。

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

  本地化:新浪還通過(guò)對(duì)各地區(qū)用戶的訪問(wèn)IP進(jìn)行精準(zhǔn)定位,并根據(jù)用戶訪問(wèn)習(xí)慣和興趣偏好,提供精準(zhǔn)匹配的本地化內(nèi)容,滿足用戶對(duì)本地化內(nèi)容的閱讀需求。

  (圖5)本地化內(nèi)容-新浪新版首頁(yè)

  二,新浪新版首頁(yè) VS 舊版首頁(yè)

我們從視覺(jué)層面將新浪改版前后兩版頁(yè)面進(jìn)行了對(duì)比,總結(jié)出下表:

  2.1廣告

  a) 首屏文字鏈廣告

舊版:廣告4幀,每幀38個(gè)。

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

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

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

  b) 廣告尺寸

新版對(duì)圖片廣告尺寸進(jìn)行了重新整理。廣告尺寸由16種減為8種。

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

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

  c) 廣告類型

舊版:純展示,純曝光,靜態(tài)+動(dòng)態(tài)展示。

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

新版:基于微博的互動(dòng)廣告,即當(dāng)用戶在瀏覽頁(yè)面所展示出來(lái)的廣告時(shí),會(huì)同時(shí)出現(xiàn)該用戶的微博ID。還有來(lái)自新浪功能廣告平臺(tái)(ADBOX)推送廣告。

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

  2.2內(nèi)容

  a) toolbar

舊版:寬度950PX,內(nèi)容排列邏輯性欠缺。

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

新版:寬度1000PX,加寬加高。頂部固定通欄,引入我的菜單、手機(jī)新浪網(wǎng)、移動(dòng)客戶端、微博、博客、郵箱等產(chǎn)品的快捷訪問(wèn)入口。

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

  b) 導(dǎo)航

舊版:21個(gè)主分類,63個(gè)入口。

  (圖12)導(dǎo)航-新浪舊版首頁(yè)

新版:導(dǎo)航在數(shù)量上沒(méi)有變化,都是21個(gè)主分類,但由于寬度更寬,看起來(lái)更加清晰舒適。

  (圖13)導(dǎo)航-新浪新版首頁(yè)

  c) 頻道版塊

舊版:標(biāo)簽質(zhì)感厚重,內(nèi)容版塊重點(diǎn)不夠突出。

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

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

  2.3頁(yè)面設(shè)計(jì)

  a) 寬度、高度

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

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

  b) 頁(yè)面顏色、頁(yè)面背景

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

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

  c) 頁(yè)面結(jié)構(gòu)

舊版:三欄結(jié)構(gòu),分別是160px,385px,385px。左右和上下間距均為10px。

  (圖16)頁(yè)面結(jié)構(gòu)-新浪舊版首頁(yè)

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

  (圖17)頁(yè)面結(jié)構(gòu)-新浪新版首頁(yè)

  d) 版塊樣式

舊版:圖片有邊框,標(biāo)簽樣式2個(gè)或3個(gè)。

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

新版:去掉版塊、圖片邊框,精簡(jiǎn)標(biāo)簽樣式與數(shù)量(不超過(guò)3個(gè))。

  (圖19)頁(yè)面結(jié)構(gòu)-新浪新版首頁(yè)

  e) 文字

字體:宋體(內(nèi)容文字),微軟雅黑(toolbar、導(dǎo)航、欄目標(biāo)題)

字號(hào):12px 14px 16px

行距:舊版14號(hào)列表行距為23px ;12號(hào)字列表行距為21px;

新版14號(hào)列表行距為26px ;12號(hào)字列表行距為24px。

字色:

舊版:

  新版:

  總結(jié)

1,頁(yè)面延展至1000像素。

2,拋棄陳舊的配色;采用明快的色調(diào),以簡(jiǎn)約設(shè)計(jì)為主導(dǎo)。

3,增加置頂導(dǎo)航,讓產(chǎn)品入口更直觀。

4,整合廣告資源,制定廣告規(guī)范(位置、色調(diào)、品質(zhì)等)。

5,行間距、板塊間距、字間距都調(diào)整。

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

  三,新浪新版首頁(yè)VS搜狐首頁(yè)

我們將新浪新版首頁(yè)與搜狐首頁(yè)在視覺(jué)樣式上進(jìn)行了對(duì)比,總結(jié)了下表:

  四,國(guó)內(nèi)外門戶網(wǎng)站改版前后對(duì)比

縱觀國(guó)內(nèi)幾大門戶網(wǎng)站,新浪、網(wǎng)易和騰訊改版后的首頁(yè)表現(xiàn)出極大的相似性:1)對(duì)于搜索的重視;2)對(duì)于視覺(jué)體驗(yàn)的改善(行間距加大了、廣告減少);3)對(duì)于打通自家產(chǎn)品(尤其是微博)的重視。下面我們?cè)倏纯磭?guó)外yahoo改版前后的變化:

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

  (圖21)雅虎當(dāng)前首頁(yè)

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

  五,寫在最后:

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

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

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

3)服務(wù)專業(yè)化:減少粗制濫造的一般性內(nèi)容,弱化大而全,在重點(diǎn)行業(yè)和領(lǐng)域打造專業(yè)內(nèi)容,樹立專業(yè)形象,增強(qiáng)用戶的依賴感和黏著度;

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

5)新聞互動(dòng)化:優(yōu)化新聞評(píng)論與二次生產(chǎn),讓用戶不再僅僅是新聞的閱讀者,更是評(píng)論者和參與者,拉近用戶與內(nèi)容的距離;

6)互動(dòng)社會(huì)化:利用內(nèi)容閱讀、評(píng)論、廣告點(diǎn)擊等信息,對(duì)用戶進(jìn)行聚合,增強(qiáng)用戶之間的溝通與交流,凸顯門戶的社會(huì)化優(yōu)勢(shì)與價(jià)值;

7)運(yùn)營(yíng)一體化:進(jìn)行內(nèi)部資源整合,把各項(xiàng)分立的工具、應(yīng)用和服務(wù)融合在一起,互相貫通,打造各垂直網(wǎng)站無(wú)法企及的綜合優(yōu)勢(shì)。

via:搜狐MDC

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!