網頁設計技巧:網站首頁設計寬度和高度

來源:互聯網
上載者:User

文章描述:根據使用者可見地區高度統計圖及整體二八比例劃分的原則,如果把首屏高度確定在710像素可以照顧到約80%的使用者群體,小K建議:前端開發在做頁面時可考慮把710 像素視為首屏地區高度,採用技術手段對首屏的表現進行優先載入可獲得良好的使用者體驗度。

一個經驗豐富的網頁設計師在做網頁原型設計或者視覺效果圖時,首先必須要做的是標註清楚網站首屏的高度線,以便直觀的看到網站首屏的高度,首屏可以顯示的元素。那麼,我們該如何來標註一個網頁的首屏線那?筆者結合網上的一些談論特整理如下:

首屏的高度直接跟用戶端的各種客觀的條件有關係,因為我們要確定首屏的高度(標註首屏線)就需要結合一些相對準確的內部統計資料來分析了,根據各個用戶端的作業系統、瀏覽器分布和螢幕解析度等情況,並結合常見瀏覽器狀態列、工作列等高度進行分析如下:

第一步:分析常見解析度及瀏覽器下高度資料

常見瀏覽器解析度表

綜合上面表中各個解析度及瀏覽器下的統計資料,我們很容易畫出兩條首屏線,分別為 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像素的解析度上,有可能會導致很多的使用者看不完整,考慮到良好的使用者體驗度,建議:網頁設計師在設計網頁時以600像素作為首屏高度來設計;

2、根據使用者可見地區高度統計圖及整體二八比例劃分的原則,如果把首屏高度確定在710像素可以照顧到約80%的使用者群體,小K建議:前端開發在做頁面時可考慮把710 像素視為首屏地區高度,採用技術手段對首屏的表現進行優先載入可獲得良好的使用者體驗度。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。