新浪網(wǎng)首頁(yè)改版小結(jié)
![](http://image.woshipm.com/wp-files/img/98.jpg)
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)化的需求。
![](https://image.woshipm.com/wp-files/2013/07/414708b9c63311724d4ddb5040aa3cf2.png)
![](https://image.woshipm.com/wp-files/2013/07/fdbd8ed8d91dbb77993527b9e8868cb3.png)
個(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)文章。
![](https://image.woshipm.com/wp-files/2013/07/be5aa0a55d52345ad2efcc67d6a1967e.png)
本地化:新浪還通過(guò)對(duì)各地區(qū)用戶的訪問(wèn)IP進(jìn)行精準(zhǔn)定位,并根據(jù)用戶訪問(wèn)習(xí)慣和興趣偏好,提供精準(zhǔn)匹配的本地化內(nèi)容,滿足用戶對(duì)本地化內(nèi)容的閱讀需求。
![](https://image.woshipm.com/wp-files/2013/07/016f41244be87892f35095131676a2f5.png)
二,新浪新版首頁(yè) VS 舊版首頁(yè)
我們從視覺(jué)層面將新浪改版前后兩版頁(yè)面進(jìn)行了對(duì)比,總結(jié)出下表:
![](https://image.woshipm.com/wp-files/2013/07/79039505da008750192f50f5f8ec6371.jpg)
a) 首屏文字鏈廣告
舊版:廣告4幀,每幀38個(gè)。
![](https://image.woshipm.com/wp-files/2013/07/8a9bf1c909cceb0a41787ef0e7506b63.png)
新版: 16個(gè),在二通新增文字鏈廣告14個(gè)
![](https://image.woshipm.com/wp-files/2013/07/4466921c75ede0bcece97ca58b22b179.png)
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)展示。
![](https://image.woshipm.com/wp-files/2013/07/48a20de159738766d4034284c018cc31.png)
新版:基于微博的互動(dòng)廣告,即當(dāng)用戶在瀏覽頁(yè)面所展示出來(lái)的廣告時(shí),會(huì)同時(shí)出現(xiàn)該用戶的微博ID。還有來(lái)自新浪功能廣告平臺(tái)(ADBOX)推送廣告。
![](https://image.woshipm.com/wp-files/2013/07/6824638b59386f84dd61ccfa387ac5fc.png)
2.2內(nèi)容
a) toolbar
舊版:寬度950PX,內(nèi)容排列邏輯性欠缺。
![](https://image.woshipm.com/wp-files/2013/07/bff045b3e87693f3174f12d2d7eeabe4.png)
新版:寬度1000PX,加寬加高。頂部固定通欄,引入我的菜單、手機(jī)新浪網(wǎng)、移動(dòng)客戶端、微博、博客、郵箱等產(chǎn)品的快捷訪問(wèn)入口。
![](https://image.woshipm.com/wp-files/2013/07/b7825bd0b7258b104ab391cc0d64f604.png)
b) 導(dǎo)航
舊版:21個(gè)主分類,63個(gè)入口。
![](https://image.woshipm.com/wp-files/2013/07/73d4c58122a2a4d66b98646b555135b1.png)
新版:導(dǎo)航在數(shù)量上沒(méi)有變化,都是21個(gè)主分類,但由于寬度更寬,看起來(lái)更加清晰舒適。
![](https://image.woshipm.com/wp-files/2013/07/991fde4455def2a7f9549feee8f9c556.png)
c) 頻道版塊
舊版:標(biāo)簽質(zhì)感厚重,內(nèi)容版塊重點(diǎn)不夠突出。
![](https://image.woshipm.com/wp-files/2013/07/b857c1dacb04559251611ddd3cc42d23.png)
新版:頻道板塊在整體位置和條數(shù)上區(qū)別不大,但新版分類更清晰簡(jiǎn)潔,首屏增加了視頻和綜藝的條數(shù)。最為明顯的就是加入了猜你喜歡板塊。
2.3頁(yè)面設(shè)計(jì)
a) 寬度、高度
舊版:寬度950px,高度10.5屏。
新版:寬度1000px,高度12屏。
b) 頁(yè)面顏色、頁(yè)面背景
舊版:黃色值為#FED681,背景色為白色。
![](https://image.woshipm.com/wp-files/2013/07/6a246635348176c04113903041071c0d.gif)
![](https://image.woshipm.com/wp-files/2013/07/d345eeac17d3b465dc0b9b8e47c8cafa.gif)
舊版:三欄結(jié)構(gòu),分別是160px,385px,385px。左右和上下間距均為10px。
![](https://image.woshipm.com/wp-files/2013/07/89a72cbc900959d54e75566fa5af38b3.jpg)
新版:三欄結(jié)構(gòu),分別是240px,360px,360px。左右間距20px,上下間距25px新版本整體版塊留白更多,視覺(jué)更舒適。
![](https://image.woshipm.com/wp-files/2013/07/a3eeb1bdc4091950a810db9203c5478a.jpg)
d) 版塊樣式
舊版:圖片有邊框,標(biāo)簽樣式2個(gè)或3個(gè)。
![](https://image.woshipm.com/wp-files/2013/07/418e9dd9ee7a19b908c51f4d1d56d962.png)
新版:去掉版塊、圖片邊框,精簡(jiǎn)標(biāo)簽樣式與數(shù)量(不超過(guò)3個(gè))。
![](https://image.woshipm.com/wp-files/2013/07/ac0871ef91b7f93e849b3de51a2c6ba6.png)
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。
字色:
舊版:
![](https://image.woshipm.com/wp-files/2013/07/dc33afa814d5f2c2f38f668a1ba41565.jpg)
![](https://image.woshipm.com/wp-files/2013/07/5faf878731f0a491f294a2abd433c014.jpg)
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é)了下表:
![](https://image.woshipm.com/wp-files/2013/07/5655c8bbd48a34ee7867d265bd568c73.jpg)
縱觀國(guó)內(nèi)幾大門戶網(wǎng)站,新浪、網(wǎng)易和騰訊改版后的首頁(yè)表現(xiàn)出極大的相似性:1)對(duì)于搜索的重視;2)對(duì)于視覺(jué)體驗(yàn)的改善(行間距加大了、廣告減少);3)對(duì)于打通自家產(chǎn)品(尤其是微博)的重視。下面我們?cè)倏纯磭?guó)外yahoo改版前后的變化:
![](https://image.woshipm.com/wp-files/2013/07/04e1cc7e685234701e0f7ea387b2beaa.png)
![](https://image.woshipm.com/wp-files/2013/07/13cf664fca1fe9190b5c3e46bcba8347.png)
改版后的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
- 目前還沒(méi)評(píng)論,等你發(fā)揮!