H5页面在浏览器的首屏高度是?

分享到:更多 ()

一. 什么是首屏高?

首屏高是指不滑动屏幕的情况下,屏幕顶端(含微信,浏览器头)到屏底的可视范围,

如果是微信平台,则没有底部操作导航,如果是浏览器,由于页面内容会被底部导航遮挡,首屏需要减去底部导航所占高度,如图;

1433410500136419

因为微信平台首屏高总是高于这个范围,所以这里主要针对浏览器的首屏高进行定位,结果同样也适用于微信平台。

二.为什么要定位首屏高?

之前每次在做H5页面时,作为渣渣的我不禁疑惑,首屏内的重要信息放置在哪个高度范围才合理? 例如首屏按钮的摆放,放高了大屏手机显示头重脚轻(特别是活动类页),放低了小屏手机看不到,设计稿经常碰到需求的怀(qiang)疑(po)有木有? 设计稿只做640 x 960PX一种尺寸的有木有?只做一种尺寸从不在其他机型上看效果的有木有?除了自己手机,对于其他大中小屏手机显示效果没谱的有木有?如图 ;

1IG54P1-0

如果你对这些渣渣问题有兴趣,请耐心往下看。

三. 首屏高的分析

首先我们来看看限制首屏高的几个条件;

1. 屏幕尺寸:仅仅是指屏幕像素尺寸,如有2款手机物理尺寸分别为3.5和4.2英寸,但是分辨率都为480×800, 那么即使是2款不同品牌的手机,它们的屏幕尺寸都只是1个,即480×800;

2. PS设计稿:在电脑里使用PS设计的效果图,为了方便重构计算,效果图宽度一般设定为640;

3. 自适应缩放:简而言之,是重构根据屏幕宽度,由程序自动对页面进行缩放,适配各种机型,具体参数各家都不太一样,但差异不大;

以上3个条件,既组成了定位首屏高的测试条件;

首先,我们在自适应缩放技术的基础上,将相同的PS设计稿放在不同手机上看效果,得出测试结果,如图;

1IG52007-1

测试机型不算太多,但是基本涵盖市面主流屏幕尺寸,他们分别是480×800,480×854,640×960,640×1136,720×1280,750×1334,1080×1920,1242×2208

从测试结果可以看出,即使是重构采用了自适应缩放技术,但首屏显示效果差异仍然很大。

再把这个结果反馈到效果图上,如图;

1IG54611-2

细心的朋友会发现高1920的机型三星NOTE3,小米4的首屏内容显示比肾6还少,接近小米2S,红米

这是为什么呢? 这里给个小提示,大屏手机测试中发现,当屏幕宽超过960时, 页面将不再适配放大,测试结果显示适配最大值为960px;想知道答案的可以回帖讨论,这里不做展开,啊哈哈。

再加入行业数据与自身数据标注:如图

行业数据:http://www.zhihu.com/question/28841081

自身数据统计:500.com

1IG53527-3

由于技术上的限制,这里统计不到100%,但是可以看到趋势。

1433410500322394

四. 如何定位首屏高?

按上面的结论,1刀切的做法是直接在PS里面用640×960的画布通吃,但是对于有追求的设计渣渣,关于选取哪个数值作为标准的首屏,还是要根据具体情况而定,如果是非常重要的购买行为,例如充值,购买等,那么854可以作为你的首要选择。如果是展示,资讯,强调气氛的活动,那么可能需要更大的头图作为展示空间。956也许更适合。如果只在微信传播,则可以在尺码表中减去浏览器底部导航(96)…. “尺码表? 神码东西?“

(PS:哎呀,这个这个漏掉了,可能写的太快了吧,啊哈哈)

五. 渣渣小神器 – 无线尺码表

将这个图层放到设计稿上,告诉产品经理,这里放按钮,94.8%的用户能看到…56%的大屏是这个效果…

由于制作过于简单,就不放下载了,按上面的方法,根据用户群的不同,相信大家也能做出适合自己团队的尺码表。

1IG55019-4

OVER,第1次写文章,如有遗漏指出欢迎指出,也欢迎讨论,有时间一定回复。谢谢观看,哈哈哈!

作者:piooo    原文链接:站酷ZCOOL

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » H5页面在浏览器的首屏高度是?

0
分享到:更多 ()