設計稿標註首屏線的確定始末

2021-06-22 08:55:23 字數 1029 閱讀 3420

a 推薦了

設計師們一定要養成乙個習慣:無論是原型設計還是視覺設計一定要標註一下首屏線,明確首屏需要顯示到**。

然後,b 覺得這點子不錯,根據內部統計系統中的作業系統、瀏覽器分布和螢幕解析度等資料,結合瀏覽器狀態列、工作列等高度進行分析:

得出兩條首屏線,分別為 580 和 710,對應不同的解析度。

c 再從實際使用者的角度出發,在某應用布點進行使用者資料的收集,分析使用者實際的解析度和瀏覽器可見區域:

1. 解析度

1) 1024×768, 1440×900, 1366×768, 1280×800 仍佔了絕大多數

2) 解析度總類非常多,除上面列出的之外,other 裡包含了幾十種解析度

3) 800×600,1024×600 等 600 高度系列的已逐漸推出舞台

2. 使用者可見區域高度

具體資料舉例:

測試使用者總數量為 261645)

1) viewport 高度低於等於 580 的有 116786 個人,佔 44.64%

2) viewport 高度低於等於 720 的有 216227 個人,佔 82.64%

3) viewport 高度低於等於 800 的有 241420 個人,佔 92.27%

4) viewport 高度低於等於 900 的有 259174 個人,佔 99.06%

接著,d 根據 c 的資料,生成瀏覽器可見區域的熱區圖

最後結論如下:

根據 d 的熱點圖,可以看到如果首屏高於 600 畫素會有很多使用者看不完整。所以請設計師以 600 畫素高為首屏進行設計。

根據 c 的曲線圖和 80/20 原則,首屏設為 710 畫素可以照顧到 80% 的使用者。所以前端開發可考慮把 710 畫素視為首屏,對首屏的資源進行優先載入。

各位,你們的意見呢?

附:a –阿福

b –霸先

c –雲謙

d –季札

rem還原設計稿

使用閉包的方式把window物件傳入,獲取html物件,獲取html元素根物件,把750和100宣告乙個變數 orientationchange監聽手機移動裝置橫屏和豎屏事件 resize監聽瀏覽器大小變化事件 domcontentloaded是網頁載入完之後繫結的事件 事件分為捕獲和冒泡,第三個引...

rem 針對設計稿寬度,設計rem除錯比例

rem是css單位,rem是根據根html元素的字型大小來計算單位的。瀏覽器預設的 html font size 16px,這樣如果我們需要設定字型的大小為12px,通過計算可知 12 16 0.75 因此只需要設定 font size 0.75rem。1 現在頁面上設定使用者禁止縮放 引入meta...

八皇后 二稿(課程設計)

include include 用abs函式 include 用clock 函式進行計時 include 用sleep函式進行顯示 define inf 1 初始化數值 define queen 8 8個皇后 int a queen cas a 陣列,cas 答案個數 bool check int ...