说明:本文讨论的浏览器窗口大小是指在微信 App 里的浏览器大小,首先要减去标题栏的高度。

减去标题栏后的窗口大小

机型宽度高度宽高比例
iPhone 53205041 : 1.575
iPhone 6/7/83756031 : 1.608
iPhone 6/7/8 Plus4146721 : 1.623
iPhone X3757241 : 1.930
iPhone XR4148081 : 1.952
iPhone XS Max4148081 : 1.952

设计稿的大小讨论

考虑到 DPR(iPhone 一般为 2 或 3),为了保证图片足够清晰且压缩率(大小)合理,设计稿建议采用 320px * 2 = 640px 的宽度,高度建议为 640px * 1.952 = 1250px,不过需要注意的是,重要内容应该都放在 640px * 1.575 = 1008px 地方以上,否则在小屏手机上看不到。

按 320px 的宽度来转化:

机型宽度比例高度
iPhone 53201.575504
iPhone 6/7/83201.608514.56
iPhone 6/7/8 Plus3201.623519.36
iPhone X3201.93617.6
iPhone XR/XS Max3201.952624.64

转成 640px,可以看到高度:

机型宽度比例高度
iPhone 56401.5751008
iPhone 6/7/86401.6081029.12
iPhone 6/7/8 Plus6401.6231038.72
iPhone X6401.931235.2
iPhone XR/XS Max6401.9521249.28

72111-vgfgdirkiu.png

关于业界推荐设计稿尺寸的问题

业界推荐的设计稿尺寸一般为 640 x 1136,其中,在 812 处设置一条安全线(参考线),将重要的内容布局在这条安全线之上。

iPhone 5 的屏幕像素是 320 x 568,也是高宽比最低的,所以用这个比例去设计肯定可以全部呈现,这就是所谓业界推荐的设计稿尺寸的由来。

但根据笔者的亲自实践来看,上面这个说法并不适用于微信的浏览器设计(因为这里的 1136 包含了浏览器顶部和系统状态栏),或者说 1136 这个高度并不适用于设计师。

对于设计师来说,并不关注微信浏览器顶部和系统状态栏,只关心内容本身,所以这个数据就没有参考价值了。

如果设计师按照这个比例去做图,仅针对 iPhone 设备而言,812 固然安全了,但放在 iPhone X 及之后的屏幕宽高比在 1:2 左右的机型上来看,底部将会有 1/3 的空余空间。

总结

综上,如果要追求完美,设计稿还是要出两份:

  • 适配老机型 640 x 1040,安全高度为 1000
  • 适配新机型 640 x 1250,安全高度为 1200

如果只出一份,我的建议是 640 x 1250,然后安全高度为 1000,也就是说底部有 250 的空间需要设计师去发挥了~

标签: none

添加新评论