在设计微信小程序UI时,常用的尺寸单位是rpx,其设计尺寸规范如下:
视觉稿尺寸
小程序的视觉稿尺寸通常为375px或750px,因为1px等于1rpx,可以根据屏幕宽度进行自适应自动调整。
导航栏和标签栏设计尺寸
导航栏的高度为128rpx,标签栏的高度为98rpx,标签数量在2个和5个之间。
相关素材尺寸
头像的设计尺寸为144px×144px。
图标的设计尺寸为81px×81px。
轮播图的尺寸比例为16:9。
分享图片的尺寸长宽比例为5:4。
iOS系统尺寸
在iOS18中,以iPhone 16 Pro的402×874为设计标准尺寸,对于iPhone 14 Pro,屏幕尺寸为6.1英寸,分辨率为2556×1179像素;iPhone 14 Pro Max屏幕尺寸为6.7英寸,分辨率为2796×1290像素。
App Store中应用图标尺寸为1024×1024像素,设备主屏幕上为180×180像素(@3x);系统图标一般在24×24像素到44×44像素之间。
状态栏、导航栏和标签栏高度分别为47像素、44像素和49像素。
微信小程序和H5小程序
微信官方定义的小程序分辨率是宽375,高≥667,通常可以使用375×812的规格创建画布。
H5可以使用360×640或375×667等小尺寸画布进行放大适配更大的屏幕,高度相对灵活。
建议
使用rpx单位:微信小程序推荐使用rpx作为设计尺寸单位,因为它可以根据屏幕宽度进行自适应,简化了适配不同设备的复杂性。
参考官方文档:设计时,可以参考微信小程序的官方文档和最新组件库中的分辨率,以确保UI在不同设备上都能良好显示。
考虑安全区域:在设计过程中,需要考虑不同设备的屏幕形状和刘海、挖孔等设计,确保导航栏和底部操作栏处于安全区域内,避免内容被遮挡。
通过遵循这些设计规范和标准,可以确保微信小程序的UI在不同设备上都能提供一致且良好的用户体验。