【原】为什么选择iPhone5的分辨率作为H5视觉稿尺寸

【20160105更新:可以用iPhone6分辨率为视觉稿尺寸啦】

又是一年的520网络情人节,深圳这边却下了大雨,这雨只能是单身汉的泪,而对于我来说这一天具有特别的意义,一来怀念父亲,二来对我这种结婚人士来说还可勉强表达对老婆的爱,so,本文的图片宽均以520像素来设计。

回到主题,在微信朋友圈经常看到的H5页面(滑屏页面),除了炫酷的动画效果之外,细心的你会发现有些H5页面在不同的移动设备上适配效果良好,页面的元素适配你的设备屏幕,并且展示完整的信息,如下图,页面在iPhone 6和iPhone 4不同屏幕分辨率下,内容自动适配,在iPhone4窄屏手机中男主角的下半身隐藏在屏幕外,但指引的信息完整展现在页面中。

【原】为什么选择iPhone5的分辨率作为H5视觉稿尺寸

那么,响应式设计是否需要设计师提供多套的设计稿呢?例如宽屏手机(iPhone6)、窄屏手机(iPhone4)各自一套。

【原】为什么选择iPhone5的分辨率作为H5视觉稿尺寸

相信很多人的回答是否定的,因为这会增加设计和前端的工作量,实际工作中设计H5页面,有很多专业的设计师会提供2套甚至是3套的尺寸给前端的同事,以下截图来自suco的《移动端品牌营销要素-快 简 准》。

【原】为什么选择iPhone5的分辨率作为H5视觉稿尺寸

这样的好处很明显,减少了前端的构建成本和沟通成本,在此向设计师们表示敬礼。

视觉稿不管设计1套还是2套以上,总以其中一个尺寸为准开始设计,从转到移动开发以来,听到有不少同事在问:H5视觉稿是以什么尺寸来设计

在2年前,我们拿到的视觉稿大都是iPhone4的分辨率960x640的尺寸,如今iPhone6/6+出来了,一代版本一代王,想想应该选择iPhone6,然而本文的观点偏偏选择iPhone5,为什么呢,简单说明下我的见解。

以下分析数据取自4月份的友盟指数,有很大的参考价值。

ios设备的市场占比,包含了主要型号的分辨率和市场占比,另外对设备高度和宽度简单做了计算,得到以下数据:

【原】为什么选择iPhone5的分辨率作为H5视觉稿尺寸

  • 5占ios市场比例为47.4%,ios中占比最高
  • 4占ios市场比例为23.10%,不可忽视的窄屏手机
  • 5、6、6+共占据市场比例61.9%
  • 5到6及6+的分辨率基本是等比例增大的,高与宽比约为178:100

下图为android设备的市场占比:

【原】为什么选择iPhone5的分辨率作为H5视觉稿尺寸

  • 设备高与宽比约为178:100的占据市场比例为64.4%

从以上2则数据可以看出,不轮是ios还是android系统,设备高宽比178:100的占据市场比例超过60%,不难看出这个比例的设备是目前市场的主流,从最多用户数的设备进行设计,向前向后兼容,那么iPhone5的高大上及市场占比可以作为目前H5视觉稿的首选。

【原】为什么选择iPhone5的分辨率作为H5视觉稿尺寸

写到这里,文章也算结尾了,再抛出文章开头一个问题:是否需要视觉设计师设计多套的视觉稿呢?具体要2套还是3+套?

敬请期待下期的分享~

祝大家520快乐~

上一篇:Android 和iOS 中关于View 的一点知识


下一篇:android ImageView网络图片加载、动态设置尺寸、圆角..