【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快樂~