【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快乐~
作者：白树
出处：http://peunzhang.cnblogs.com/