DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 從騰訊網站首頁改版學到的幾點體會心得
從騰訊網站首頁改版學到的幾點體會心得
編輯:CSS詳解     

騰訊首頁近日改版了,現在將自己從其中學到和感悟到的幾點總結出來分享:

1、寬屏設計:
1)不管騰訊處於什麼考慮,寬屏總是讓人看的很舒服,而且頁面整體縮短了近1半,這讓浏覽信息的用戶會方便很多。
2)同時大家注意到了,騰訊的寬屏不是完全的寬屏,而是兩側都流出較大的空白空間,讓人感覺雖是滿屏但是感覺不會很擁擠;
3)三列布局,左側兩列是主體內容,右側的一個窄一點的列是特殊功能和廣告等。從主體內容和功能列的比例和從左至右的順序來看,這更符合閱讀習慣(而雅虎的首頁正好與之相反),當然需要聲明的是喜好不能代表所有人;

2、網頁完全div+CSS重構;
1)這個本來不必多說什麼,很多網站都用這項技術重構了網站,門戶網站網易那麼早就這麼做了,如今騰訊那麼做了,div+CSS是一個大趨勢。
2)網頁全部下載我只用了6秒鐘,這個速度是很優秀的了,我打開新浪的要8秒以上,搜狐的就要更慢一些(我的環境是adsl1兆、Firefox3.0b4浏覽器);

3、顏色隨需定制;
這個功能也是拜div+css所賜,十種顏色開關增強了用戶體驗,各種顏色的喜好更能貼近用戶,以前看了不少網站用div+CSS重構網站,但能給出10中顏色的不多,而且很多地方都會同時替換漂亮的背景圖片更是干得漂亮!
我比較喜歡綠色的那一款,搜索框旁邊還有野花點綴。。。

4、字號的變化讓浏覽更加舒服;
門戶網站裡吧字號用到14px的還不多(大多都是12px的),騰訊這麼做了,我想他們意圖非常明確,那就是讓浏覽的用戶更加舒服,進一步提高客戶滿意度。
一方面寬屏提供了足夠的空間,再者現在高分辨率越來越多(相對字就顯得越來越小了,看信息就顯得更加費力),此舉我認為騰訊做得好!
不過字號是增大了,騰訊內部的編輯團隊似乎還沒完全適應首頁大字號的新聞更新,在主體內容的部分經常出現折行的情況。不過隨著時間的推移會好起來的;

5、再說顏色:
此次更讓人感覺舒服的地方在於其字體的顏色,細心的人可能會發現,騰訊首頁的大部分新聞字體的顏色不是純黑色“#000000”的,而是深灰色“#2f3a30”的(rgb分別大約占有50),這個改變用一句詩詞就是“隨風潛入夜、潤物細無聲”,騰訊考慮用戶的感受都考慮到字體顏色上了,這個不得不贊一個!
這裡提及其他幾個門戶對比一下,網易的字體是純黑色的,新浪的是深藍色而且還有下劃線,搜狐的也是;

6、最後說說排版:
騰訊的大致主體內容排版如下:

第一部分:新聞中心、博客
新聞中心自然不用多說,門戶網站的必備(騰訊新增的地區新聞很有特色,值得學習);
博客的上提似乎能說明騰訊也要加入博客用戶大戰來了!

下面幾個部分主要是根據當前國內熱點和人們關注的輕重決定出來:

第二部分:體育|奧運、娛樂|音樂
2008年是中國的奧運年,體育自然首當其沖,而娛樂一直是兵家重地;

第三部分:財經|證券、讀書|文化
股市、基金、人民幣、匯率。。。財經信息熱的發燙,自然不能疏遠,讀書頻道好像一直是騰訊的首推,因為其用戶群所決定;

在往下是的幾個部分不必多言,排版也很清爽合理;

第四部分:科技|數碼、游戲
第五部分:汽車|房產、女性|時尚
最後是:教育和動漫

總之,在排版方面騰訊下足了功夫,而且通過各種渠道肯定收集了大量的用戶反饋和體驗信息,排版條理清晰,而且每個板塊清晰清爽,讓人能很容易找到自己感興趣的內容同時記住它的位置。

我自己是做行業門戶的,所以寫這篇 博客對我自己也是一個認識和學習的過程。
文中不免出現某些錯誤,歡迎批評指正,共同學習提高!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved