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

事情是這樣的。

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

“設(shè)計(jì)師們一定要養(yǎng)成一個(gè)習(xí)慣：無論是原型設(shè)計(jì)還是視覺設(shè)計(jì)，一定要標(biāo)注一下首屏線，明確首屏需要、可以顯示到哪里。”

然后，B 覺得這點(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í)際的分辨率和瀏覽器可見區(qū)域：

1. 分辨率

1） 1024x768， 1440x900， 1366x768， 1280x800 仍占了絕大多數(shù)

2） 分辨率總類非常多，除上面列出的之外，other 里包含了幾十種分辨率

3） 800x600，1024x600 等 600 高度系列的已逐漸推出舞臺(tái)

2. 用戶可見區(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ù)，生成瀏覽器可見區(qū)域的熱區(qū)圖

最后結(jié)論如下：

根據(jù) D 的熱點(diǎn)圖，可以看到如果首屏高于 600 像素會(huì)有很多用戶看不完整。所以請(qǐng)?jiān)O(shè)計(jì)師以 600 像素高為首屏進(jìn)行設(shè)計(jì)。

根據(jù) C 的曲線圖和 80/20 原則，首屏設(shè)為 710 像素可以照顧到 80% 的用戶。所以前端開發(fā)可考慮把 710 像素視為首屏，對(duì)首屏的資源進(jìn)行優(yōu)先加載。

各位，你們的意見呢？

附：

A - 阿福

B - 霸先

C - 云謙

D - 季札

文章來源：陳成的博客

標(biāo)簽： 交互設(shè)計(jì) 首屏線 視覺設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。