DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 網易首頁改版:提高用戶體驗的簡約大氣包容設計
網易首頁改版:提高用戶體驗的簡約大氣包容設計
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:本次改版從整體到細節都有一個質的飛躍,新版繼承了網易一貫簡約、大氣、包容的設計品質,達到以用戶為中心提高用戶體驗、促進頻道發展的改版設計目的。

新版網易首頁,文章頁,手機版網易首頁(手機上網3g.163.com)10月12日同時上線。本次改版從整體到細節都有一個質的飛躍,新版繼承了網易一貫簡約、大氣、包容的設計品質,達到以用戶為中心提高用戶體驗、促進頻道發展的改版設計目的。

相關文章:網頁設計經驗分享:再談網易首頁的改版

1,字號變大

為了適應網友日益增加的顯示器分辨率需要,網易首頁主體內容區的字號,由12號變大為14號。

2,分欄比例的改進:

新版網易首頁欄寬比例調整,用戶更容易從左欄獲取完整信息,提高閱讀感受。資訊板塊更適合高效閱讀體驗,左、中兩欄呈現網易門戶資訊內容,版式設計體現新聞資訊"通透"浏覽原則,更顯大氣舒適,文字標題長度適中,用戶可在"由上到下"高效閱讀新聞標題時,獲得極佳的浏覽體驗,滿足"快而准"獲取信息的需求。

(上圖為新版網易首頁分欄圖例)

3,頁面設計細節的提升


新版頁面用色更加柔和,頁面細節處理更加到位,提高頁面品質感,為用戶提供更舒適的閱讀感受。

頁面頭部按不同功能,字體使用不同顏色,網易產品區使用灰色字體,頻道入口使用深灰色字體,廣告區使用藍色字體,頭部信息區分清晰。


(如圖)

文字鏈顏色方面更由原來的純黑色、藍色改變為不刺眼的深灰色,使用戶駐留頁面長時間不疲憊。

底色運用更加合理,左欄中欄使用白色底色,右欄使用淺藍色底色,從顏色上區分功能區,更方便用戶搜尋頁面信息並形成區域內容認知。

頁面區塊邊框統一采用直角設計,更顯網易門戶氣質,頁面設計統一、專業、高端。

網易產品入口重新設計排版,新的icon設計提供更佳的標識感與用戶體驗;一行三個產品入口,提高使用快感,免除頻繁換行的頓挫感。


(如圖)


4.內容布局的改進:

內容與廣告布局更加明晰,新版網易首頁從分欄布局上對內容和廣告進行了優化,左欄中欄以頻道內容為主導,右欄以廣告為主導,這樣改善後用戶在左欄與中欄可享受閱讀"純粹"內容資訊並有利於內容搜索。


(推薦位置示例)

5,功能的改進:

a.通行證登錄區-新增登錄後產品選擇功能


(登錄前狀態)

(登錄後狀態,點擊用戶id可直接進入各網易產品)該功能的設置,極大方便了用戶進入網易各個熱點產品。)

b.手機網易網入口-3g新體驗

頂部導航新增"手機訪問網易"體驗功能,緊貼移動互聯網技術發展,為用戶介紹更方便的上網體驗,用手機上網易,隨時隨地體驗暢快的信息閱讀。

c.頁面顏色選擇-新增換膚功能

舒適的顏色方案,能使用戶有一個愉快的閱讀體驗,一種"耐看、舒適、穩重"的顏色會符合我們的狀況。新版首頁增加了換膚效果,我們在眾多的色彩中選取"經典藍、桃紅、新綠、咖啡、煙灰"做為換膚顏色方案。

d.關注用戶的意見-用戶體驗提升計劃用戶體驗提升計劃(頁面左下角鏈接)的啟動,架設起用戶和產品之間橋梁,把用戶的聲音傳遞給產品設計者。

6,新版文章頁

在網易首頁新版上線的同時,文章頁的優化也推出。新版文章頁更加流暢、明快,重點區域突出。並且重新調整了右欄推薦區域的規劃,通過層疊的方式,為用戶展示最有價值的內容。

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