设计微信小程序的尺寸时,主要需要考虑以下几个方面的规范:
视觉稿尺寸
微信小程序的视觉设计稿尺寸通常为375px或750px,尺寸单位是rpx,1px=1rpx,可以根据屏幕宽度进行自适应自动调整。
导航栏和标签栏设计尺寸
导航栏的高度为128rpx,导航栏不能自定义尺寸,只能改变颜色。
标签栏的高度为98rpx,标签数量在2个和5个之间。
相关素材尺寸
头像的设计尺寸为144px×144px。
图标的设计尺寸为81px×81px。
轮播图的尺寸比例为16:9。
分享图片的尺寸长宽比例为5:4。
屏幕尺寸和图标尺寸
需要适配多种不同的设备屏幕,如750x1334(iPhone 6/7/8)、1080x1920(很多安卓机型)等。
考虑安全区域尺寸,避免内容被设备的物理特征(如摄像头、传感器等)遮挡。
单位使用
微信小程序的设计尺寸规范主要基于rpx单位,规定屏幕宽度为750rpx。设计师通常以iPhone 6的屏幕尺寸(375px)作为基准,1rpx等于0.5px,即1rpx等于1物理像素。
小程序也支持rem单位,规定屏幕宽度为20rem,即1rem等于(750/20)rpx,即37.5rpx。
其他注意事项
标签栏和导航栏的层级是最高的,弹窗不能喧宾夺主。
启动页除了产品logo,页面的其他元素都要使用微信提供的素材。
设计稿最好用二倍图,方便适配和开发。
这些规范可以帮助设计师和开发者在设计微信小程序时,确保在不同设备上都能呈现出良好的视觉效果和用户体验。