iPhone6在微信上的設(shè)計尺寸兼容與微信圖文尺寸

最近很多小伙伴都在問一些關(guān)于微信上的UI界面設(shè)計的問題，比如設(shè)計尺寸、圖標(biāo)、如何兼容等等。還有一些微信單圖文和多圖文的圖片設(shè)計尺寸問題。

今天，25學(xué)堂在此一一跟大家說一下。有興趣的小伙伴可以閱讀一下：

1、移動端H5頁面的設(shè)計稿尺寸大小規(guī)范

2、當(dāng)當(dāng)網(wǎng)的H5觸屏版的UI視覺設(shè)計規(guī)范

 

微信h5設(shè)計

 

首先iPhone6在微信上的設(shè)計尺寸大小與實際展示大小

微信h5設(shè)計尺寸

導(dǎo)航欄+iphone狀態(tài)欄高度： 64px = ?導(dǎo)航欄44+狀態(tài)欄20

 

iphone4

屏幕總寬度: 320px

屏幕總高度: 480px

微信網(wǎng)頁可視高度: 416px

 

iphone 5 / 5c / 5s /se

屏幕總寬度: 320px

屏幕總高度: 568px

微信網(wǎng)頁可視高度: 504px

iphone6 ?/ ?iphone 7

屏幕總寬度: 375px

屏幕總高度: 667px

微信內(nèi)網(wǎng)頁可視高度: 603px

 

iphone6 plus /??iphone 7 plus

屏幕總寬度: 414px

屏幕總高度: 736px

微信網(wǎng)頁可視高度: 672px

slient的APP設(shè)計師作品2

 

當(dāng)我們在設(shè)計微信H5頁面的尺寸當(dāng)中，有2種選擇的尺寸：

第一種是：750 ?* ?1206（1334px-128px）

第二種是：我們一般是按照“寬1080 * ?高1698（1920-132-40）的尺寸進行頁面設(shè)計，寬1080是考慮到做到主流大屏手機的尺寸然后向下兼容。高度方面還要考慮減去手機系統(tǒng)標(biāo)題欄，以及微信app標(biāo)題欄的高度。

微信小程序制作流程3

 

當(dāng)我們h5前端在做兼容性處理的時候，只需要理解上面的這些尺寸，即可快速寫出兼容性代碼：

iPhone4/iPhone4s 的屏幕顯示尺寸為320*480，

iPhone5/iPhone5c/iPhone5s的屏幕顯示尺寸為320*568，

iPhone6 ?/ iphone 7的屏幕尺寸為375*667，

iPhone6 plus ??/ iphone 7 plus?的屏幕顯示尺寸為414*736，用css做iPhone的尺寸兼容就好做了。代碼如下：

/*ip 4 5 5+*/

@media all and (min-width:320px) {

}

/*ip 6*/

@media all and (min-width:375px){

????

}

/*ip 6+*/

@media all and (min-width:414px){

????

}

 

第二個部分是關(guān)于微信圖文消息推送當(dāng)中的圖片尺寸問題：

微信圖文消息推送

微信圖文消息體驗過程中有三類圖片：

1. 公眾號對話框中的圖文消息"封面圖片”（分一級、二級兩種）

2. 圖文消息頁面的“正文圖片”

3. 在對話框或朋友圈中的“縮略圖”

它們的尺寸：

1、封面圖片

微信有推薦尺寸：一級寬900*高500像素，二級200*200

如果寬900的要求不能達到，盡量保持寬高比，因為這會影響到3的效果

2、正文圖片

一級圖文消息的封面可以顯示在正文中，也即微信認(rèn)為寬度為900的圖片顯示質(zhì)量就不錯

所以寬度不要超過900太多至于加載慢，也不要小于太多至于圖模糊了

3.、縮略圖

二級圖文消息的封面（200*200）會直接作為分享的縮略圖

一級圖文消息的縮略圖是從封面900*500的正中央截取500*500的區(qū)域后縮放得到，想要縮略圖顯示效果好，需要將重要的內(nèi)容放在封面圖片的中央部位

每天更新，
全站高品質(zhì)素材免費下載！