• 关于普雷
  • 网站建设
  • 品牌设计
  • 包装策略
  • 案例展示
  • 服务流程
  • 新闻资讯
  • 客户展示
  • 联系我们
  • 手机网站建设如何设计高定位


    Day 2015-05-30 Click:754 点赞: 0
    上一篇 返 回 下一篇

    . 什么是首屏高?

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

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

    手机网站建设如何设计高定位

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

    .为什么要定位首屏高?

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

    手机网站建设如何设计高定位

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

    . 首屏高的分析

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

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

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

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

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

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

    手机网站建设如何设计高定位

    测试机型不算太多,但是基本涵盖市面主流屏幕尺寸,他们分别是480x800,480x854,640x960,640x1136,720x1280,750x1334,1080x1920,1242x2208

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

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

    手机网站建设如何设计高定位

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

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

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

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

    手机网站建设如何设计高定位

    如何定位首屏高?

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

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

    . 渣渣小神器 - 无线尺码表

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

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

    手机网站建设如何设计高定位


    普雷创艺互动广告(武汉)有限公司 版权所有Copyright © Playarts Interactive Advertisement Co.Ltd. 鄂ICP备10209474号-6

    北京赛车北京赛车