【原】爲何選擇iPhone5的分辨率做爲H5視覺稿尺寸

【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%，不可忽視的窄屏手機
• 五、六、6+共佔據市場比例61.9%
• 5到6及6+的分辨率基本是等比例增大的，高與寬比約爲178:100

下圖爲android設備的市場佔比：

• 設備高與寬比約爲178:100的佔據市場比例爲64.4%

從以上2則數據能夠看出，不輪是ios仍是android系統，設備高寬比178：100的佔據市場比例超過60%，不難看出這個比例的設備是目前市場的主流，從最多用戶數的設備進行設計，向前向後兼容，那麼iPhone5的高大上及市場佔比能夠做爲目前H5視覺稿的首選。

寫到這裏，文章也算結尾了，再拋出文章開頭一個問題：是否須要視覺設計師設計多套的視覺稿呢？具體要2套仍是3+套？

敬請期待下期的分享~

祝你們520快樂~