Warning: Uninitialized string offset 0 in /www/wwwroot/www.hanlinweb.com/wp-includes/class-wp-widget.php on line 1

Warning: Uninitialized string offset 0 in /www/wwwroot/www.hanlinweb.com/wp-includes/class-wp-widget.php on line 1

Warning: Uninitialized string offset 0 in /www/wwwroot/www.hanlinweb.com/wp-includes/nav-menu-template.php on line 1

Warning: Uninitialized string offset 0 in /www/wwwroot/www.hanlinweb.com/wp-includes/nav-menu-template.php on line 1

Warning: Uninitialized string offset 0 in /www/wwwroot/www.hanlinweb.com/wp-includes/fonts/class-wp-font-face.php on line 1

Warning: Uninitialized string offset 0 in /www/wwwroot/www.hanlinweb.com/wp-includes/fonts/class-wp-font-face.php on line 1
设计稿标注首屏线高度设定 | 汉林设计信息网-翰林院营销顾问
首页 » 建站 » 网站设计 » 正文

设计稿标注首屏线高度设定

发表于: 汉林设计信息网-翰林院营销顾问 · 2011-4-7 ·  1,623 views  ·  0 replies 

在淘宝UED看到篇文章 

事情是这样的..

==

先是 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 – 季札

 总结:

首屏内容高度应控制在650px以内是很早前就有的结论,(710-580)*2=645px

设计时要考虑竖导航的纵向尺寸,以保证在首屏能让用户看完导航,就像你一进商场能看到商场各层的货物分类的指示一样。

控制广告的尺寸和数量,以免影响用户第一眼获得更重要的信息。

本文链接: http://www.hanlinweb.com/first-screen-line.html
0 like+
«上一篇: :下一篇»

相关文章

网站设计页面形式的分析

网站设计页面形式的分析

没有一个好的网站设计基础,就不会取得理想的网站排名效果...

客户说网站要做大气一点

客户说网站要做大气一点

在百度UEO看到篇文章,觉得还满有点意思,分享给大家看看。...

设计中的极简主义

设计中的极简主义

设计中的极简主义已经出现一段时间了,并且现在看起来正在...

网页设计需要选择适当的配色方案

网页设计需要选择适当的配色方案

网页设计吸引人的地方在哪里?是图片还是对内容的布局?或...

为网站寻找完美的配色

为网站寻找完美的配色

大约10岁的时候,我去迪斯尼米高梅影城游玩。突然,我瞥见...

WEB设计中的形状研究

WEB设计中的形状研究

一般来说,在网页设计中没有说哪个元素或原理要比另一个更...

0 thoughts on “设计稿标注首屏线高度设定”

  1. 还没有任何评论,你来说两句吧

Leave a reply