專題技巧淺析

作者:星舊 來源:ecd.tencent.com 時間:2012-11-03 類別:網頁理論

專題技巧淺析

先以CP設計的的這個奧運專題為例分析專題設計中常遇到的一些問題。

專題技巧淺析
這個頁面存在的問題很多,我們來一個個分析。
首先第一個問題首屏高度:
分析一下常見分辨率及瀏覽器下高度數據:

專題技巧淺析
在window XP常見分辨率1024×768下我們除掉任務欄,瀏覽器菜單欄以及狀態欄后剩下的網頁首屏高度平均值是584。

Win7下是574。在window XP常見分辨率1440×900下我們除掉任務欄,瀏覽器菜單欄以及狀態欄后剩下的網頁首屏高度平均值是716。Win7下是706。

綜合上面表中個分辨率及瀏覽器下的統計數據,我們很容易畫出兩條首屏線,分別是580PX和710PX,對應不同的分辨率。

再來看下不同分辨率用戶的占比情況:

專題技巧淺析

通過對大于30W臺客戶端用戶進行測試,得到的測試數據如下:

  1. 首屏高度低于等于 580 的有 116786 個人,占 44.64%;
  2. 首屏高度低于等于 720 的有 216227 個人,占 82.64%;
  3. 首屏高度低于等于 800 的有 241420 個人,占 92.27%;
  4. 首屏高度低于等于 900 的有 259174 個人,占 99.06%;

即當首屏高度大于580時有44.64的人看不到;大于720時有82.64%的人看不到;
大于800時有92.27%的人看不到。
我們將這個數據轉化成3條線直觀的顯示在專題頁面上:

專題技巧淺析

總結起來就是注意首屏高度。
建議將最主要的信息顯示在580PX高度的范圍以內 讓用戶打開網頁第一屏就可以直接看到不用向下滾動
這個第二個專題的第二個問題:標題夠顯眼么?

專題技巧淺析

檢驗一個專題頭圖標題是否夠顯眼其中的一個方法就是將網頁去色,站在遠處看看標題是否還看得清。
我們有這個方法來檢驗一下這個專題:

專題技巧淺析

是不是就可以看出頭圖文字跟背景混在一起不夠清晰。

标签: 專題技巧

相關文章:

推薦設計

最新文章