當前位置: 首頁 | 新聞動態 | 建站知識
  • 松江溢尚網頁設計之網頁首屏高度如何確定?
  • 添加時間:2016/1/22 13:55:02  瀏覽次數:9300
  •   一個經驗豐富的網頁設計師在做網頁原型設計或者視覺效果圖時,首先必須要做的是標注清楚網站首屏的高度線,以便直觀的看到網站首屏的高度,首屏可以顯示的元素。那么,我們該如何來標注一個網頁的首屏線呢?松江溢尚網站建設公司設計部首席設計師結合網上的一些談論特整理如下:

      首屏的高度直接跟客戶端的各種客觀的條件有關系,因為我們要確定首屏的高度(標注首屏線)就需要結合一些相對準確的內部統計數據來分析了,根據各個客戶端的操作系統、瀏覽器分布和屏幕分辨率等情況,并結合常見瀏覽器狀態欄、任務欄等高度進行分析如下:

     

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

     

    常見瀏覽器分辨率表


    綜合上面表中各個分辨率及瀏覽器下的統計數據,我們很容易畫出兩條首屏線,分別為 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 像素視為首屏區域高度,采用技術手段對首屏的表現進行優先加載可獲得良好的用戶體驗度。

  1. 上一條:松江溢尚網絡針對如何設計對用戶體驗度及搜索引擎友好度都好的網站 下一條:松江網站建設之網站優化中網站跳出率過高怎么解決

滬公網安備 31011702000576號

主站蜘蛛池模板: 久久免费视频精品| 亚洲中文字幕日产乱码高清app| 国产精华av午夜在线观看| 强开小婷嫩苞又嫩又紧韩国视频| 香蕉久久精品国产| 91精品久久久久久久久久| 中文字幕天天躁日日躁狠狠躁免费| 亚洲午夜无码久久久久| 人妻少妇久久中文字幕| 哪里可以看黄色播放免费| 国产男女猛烈无遮挡免费网站| 天天操2018| 好男人社区www在线视频| 日韩精品欧美一区二区三区| 狠狠色综合色区| 精品无码国产一区二区三区麻豆| 韩国毛片在线观看| 鲁大师成人一区二区三区| 你懂的视频网站| 8050午夜网| 91传媒蜜桃香蕉在线观看| a级毛片高清免费视频在线播放| 两个人看的WWW在线观看| 中文日韩字幕一区在线观看| 亚洲六月丁香婷婷综合| 免费**毛片在线播放视| 别揉我的胸~啊~嗯~| 午夜精品久久久久久毛片| 四虎影永久在线观看精品| 四虎成人精品无码永久在线| 国产**a大片毛片| 又硬又粗进去好爽免费| 国产v精品成人免费视频400条| 国产人澡人澡澡澡人碰视频| 国产国产精品人在线视| 国产乱来乱子视频| 国产精品igao视频网网址| 国语自产精品视频在线看| 国产精品美女久久久久av福利 | 内射白浆一区二区在线观看| 免费人成视频x8x8入口|