微信小程序的设计尺寸主要遵循以下规范:
视觉稿尺寸
微信小程序的视觉设计稿尺寸可以是375px或750px宽。在设计中,尺寸单位称为rpx,1px=1rpx,可以根据屏幕宽度进行自适应调整。
导航栏和标签栏设计尺寸
导航栏的高度为128rpx,导航栏不能自定义尺寸,只能改变颜色。
标签栏的高度为98rpx,标签数量通常在2个和5个之间。
相关素材尺寸
头像的设计尺寸为144px×144px。
图标的设计尺寸为81px×81px。
轮播图的尺寸比例为16:9。
分享图片的尺寸长宽比例为5:4。
屏幕尺寸和图标尺寸
微信小程序通常以iPhone 6的屏幕尺寸750×1334px为视觉稿进行设计,因为微信小程序以rpx为css尺寸单位,而rpx可以根据屏幕宽度进行自适应。
在iOS18中,以iPhone 16 Pro的402×874为新的标准尺寸,对于iPhone 14 Pro,屏幕尺寸为6.1英寸,分辨率为2556×1179像素;iPhone 14 Pro Max屏幕尺寸为6.7英寸,分辨率为2796×1290像素。
建议
使用rpx单位:由于微信小程序使用rpx作为单位,设计时应以750rpx宽为基准,确保在不同设备上都能自适应显示。
考虑设备兼容性:虽然750rpx是标准尺寸,但设计时也应考虑其他设备的屏幕尺寸和分辨率,以确保良好的用户体验。
关注安全区域:在设计导航栏和底部操作栏时,要确保它们处于安全区域内,避免内容被设备的物理特征遮挡。
通过遵循这些设计规范,可以确保微信小程序在不同设备上都能呈现出良好的视觉效果和一致的用户体验。