設(shè)計(jì)稿標(biāo)注首屏線的確定始末

0 評(píng)論 2348 瀏覽 4 收藏 3 分鐘

這是內(nèi)部的一個(gè)郵件記錄,分享出來(lái)聽(tīng)下業(yè)內(nèi)同行的聲音。

事情是這樣的..

==

先是 A 推薦了白鴉的推到內(nèi)部群:

“設(shè)計(jì)師們一定要養(yǎng)成一個(gè)習(xí)慣:無(wú)論是原型設(shè)計(jì)還是視覺(jué)設(shè)計(jì),一定要標(biāo)注一下首屏線,明確首屏需要、可以顯示到哪里?!?/p>

==

然后,B 覺(jué)得這點(diǎn)子不錯(cuò),根據(jù)內(nèi)部統(tǒng)計(jì)系統(tǒng)中的操作系統(tǒng)、瀏覽器分布和屏幕分辨率等數(shù)據(jù),結(jié)合瀏覽器狀態(tài)欄、任務(wù)欄等高度進(jìn)行分析:

得出兩條首屏線,分別為 580 和 710,對(duì)應(yīng)不同的分辨率。

==

C 再?gòu)膶?shí)際用戶的角度出發(fā),在某應(yīng)用布點(diǎn)進(jìn)行用戶數(shù)據(jù)的收集,分析用戶實(shí)際的分辨率和瀏覽器可見(jiàn)區(qū)域:

1. 分辨率

1) 1024×768, 1440×900, 1366×768, 1280×800 仍占了絕大多數(shù)
2) 分辨率總類非常多,除上面列出的之外,other 里包含了幾十種分辨率
3) 800×600,1024×600 等 600 高度系列的已逐漸推出舞臺(tái)

2. 用戶可見(jiàn)區(qū)域高度

具體數(shù)據(jù)舉例:

測(cè)試用戶總數(shù)量為 261645)

1) viewport 高度低于等于 580 的有 116786 個(gè)人,占 44.64%
2) viewport 高度低于等于 720 的有 216227 個(gè)人,占 82.64%
3) viewport 高度低于等于 800 的有 241420 個(gè)人,占 92.27%
4) viewport 高度低于等于 900 的有 259174 個(gè)人,占 99.06%

==

接著,D 根據(jù) C 的數(shù)據(jù),生成瀏覽器可見(jiàn)區(qū)域的熱區(qū)圖

==

最后結(jié)論如下:

  1. 根據(jù) D 的熱點(diǎn)圖,可以看到如果首屏高于 600 像素會(huì)有很多用戶看不完整。所以請(qǐng)?jiān)O(shè)計(jì)師以 600 像素高為首屏進(jìn)行設(shè)計(jì)。
  2. 根據(jù) C 的曲線圖和 80/20 原則,首屏設(shè)為 710 像素可以照顧到 80% 的用戶。所以前端開(kāi)發(fā)可考慮把 710 像素視為首屏,對(duì)首屏的資源進(jìn)行優(yōu)先加載。

各位,你們的意見(jiàn)呢?

==

附:
A –?阿福
B – 霸先
C –?云謙
D –?季札

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!