專題技巧淺析(2)_網頁設計教程

推薦：免費的響應式Bootstrap模板 - Codester
Codester是一個基本的個人作品集Bootstrap模板，幫助設計師，攝影師，圖形藝術工作者搭建高度可定制的網站。擁有自定義包和相關的javascript，css和組件，相信大家肯定喜歡

首先第一個問題首屏高度：

分析一下常見分辨率及瀏覽器下高度數據：

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

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

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

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

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

首屏高度低于等于 580 的有 116786 個人，占 44.64%；

首屏高度低于等于 720 的有 216227 個人，占 82.64%；

首屏高度低于等于 800 的有 241420 個人，占 92.27%；

首屏高度低于等于 900 的有 259174 個人，占 99.06%；

即當首屏高度大于580時有44.64的人看不到；大于720時有82.64%的人看不到；

大于800時有92.27%的人看不到。

我們將這個數據轉化成3條線直觀的顯示在專題頁面上：

總結起來就是注意首屏高度。

建議將最主要的信息顯示在580PX高度的范圍以內 讓用戶打開網頁第一屏就可以直接看到不用向下滾動

分享：“懶人”設計思維
設計師總會說設計是一件很累人的事，但這部分原因可能是你自找的。時間與設計出來的效果也并不一定成正比。平面設計師或許應該培養一種“懶人”設計思維，面對一個設計時，