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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

敬请期待下期的分享~

祝大家520快乐~

作者：白树

出处：