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

這是內部的一個郵件記錄,分享出來聽下業內同行的聲音。

事情是這樣的..

==

先是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 的數據,生成瀏覽器可見區域的熱區圖

==

最後結論如下:

  1. 根據D 的熱點圖,可以看到如果首屏高於600 像素會有很多用戶看不完整。所以請設計師以600 像素高為首屏進行設計。
  2. 根據C 的曲線圖和80/20 原則,首屏設為710 像素可以照顧到80% 的用戶。所以前端開發可考慮把710 像素視為首屏,對首屏的資源進行優先加載。

各位,你們的意見呢?

==

附:

A – 阿福

B – 霸先

C – 雲謙

D – 季札

源地址:http://ued.taobao.com/blo…… sign-fp-line/

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.