內容摘要：乙個經驗豐富的網頁設計師在做網頁原型設計或者視覺效果圖時，首先必須要做的是標註清楚**首屏的高度線，以便直觀的看到**首屏的高度，首屏可以顯示的元素。那麼，我們該如何來標註乙個網頁的首屏線那？
乙個經驗豐富的網頁設計師在做網頁原型設計或者視覺效果圖時，首先必須要做的是標註清楚**首屏的高度線，以便直觀的看到**首屏的高度，首屏可以顯示的元素。那麼，我們該如何來標註乙個網頁的首屏線那？
鄭州**建設
公司設計部首席設計師小k
首屏的高度直接跟客戶端的各種客觀的條件有關係，因為我們要確定首屏的高度（標註首屏線）就需要結合一些相對準確的內部統計資料來分析了，根據各個客戶端的作業系統、瀏覽器分布和螢幕解析度等情況，並結合常見瀏覽器狀態列、工作列等高度進行分析如下：
第一步：分析常見解析度及瀏覽器下高度資料
常見瀏覽器解析度表
綜合上面表中各個解析度及瀏覽器下的統計資料，我們很容易畫出兩條首屏線，分別為 580px
和 710px
，對應不同的解析度。
第二步：分析客戶端實際解析度及瀏覽器可見區域
實際解析度比例圖
通過收集的使用者資料我們可以得出如下資料：
1) 1024×
768, 1440
×900, 1366
×768, 1280
×800
解析度是大部分客戶端的設定；
2) 客戶端解析度總類非常多，不常見的解析度比例裡面佔了相當多的種類；
3) 隨著硬體的公升級換代
800×
600，
1024
×600
等600px
高度的解析度在逐步消失。
使用者可見區域高度統計圖
通過對大於30w
臺客戶端使用者進行測試，得到的測試資料如下：
1) viewport 高度低於等於
580
的有 116786
個人，佔
44.64
％2) viewport 高度低於等於
720
的有 216227
個人，佔
82.64
％3) viewport 高度低於等於
800
的有 241420
個人，佔
92.27
％4) viewport 高度低於等於
900
的有 259174
個人，佔
99.06
％第三步：瀏覽器可見區域熱區圖分析
瀏覽器常見熱區分布圖
綜合上面三個步驟，最終我們可以確定：
1、通過分析上面瀏覽器常見熱區分布圖我們可以看出來：在網頁設計時如果把頁面首屏高度定在大於
600畫素的解析度上，有可能會導致很多的使用者看不完整，考慮到良好的使用者體驗度，小
k建議：
網頁設計師在設計網頁時以600
畫素作為首屏高度來設計；
2、根據使用者可見區域高度統計圖及整體二八比例劃分的原則，如果把首屏高度確定在
710畫素可以照顧到約
80%的使用者群體，小
k建議：
前端開發在做頁面時可考慮把 710
畫素視為首屏區域高度，採用技術手段對首屏的表現進行優先載入可獲得良好的使用者體驗度
。
網頁設計技巧之網頁眉屏高度如何確定？
乙個經驗豐富的網頁設計師在做網頁原型設計或者視覺效果圖時，首先必須要做的是標註清楚 首屏的程式設計客棧高度線，以便直觀的看到 首屏的高度，首屏可以顯示的元素。那麼，我們該如何來標註乙個網頁的首屏線那？筆者結合網上的一些談論特整理如下 首屏的高度直接跟客戶端的各種客觀的條件有關係，因為我們要確定首屏的...
網頁設計之css div PK table css
用過div css作個整個 如果是純粹的div的布局是比較麻煩的，尤其是你div裡面巢狀div的，div布局的時候，你有些頁面效果還是要捨棄一點的，比如的圓角，這些如果套div比較麻煩，在乙個div在vs2005設計器裡面可能變形，如果過多的套div，你實現ajax拖動效果的時候比較麻煩，所以我覺得...
網頁設計之css div PK table css
用過div css作個整個 如果是純粹的div的布局是比較麻煩的，尤其是你div裡面巢狀div的，div布局的時候，你有些頁面效果還是要捨棄一點的，比如的圓角，這些如果套div比較麻煩，在乙個div在vs2005設計器裡面可能變形，如果過多的套div，你實現ajax拖動效果的時候比較麻煩，所以我覺得...