小程序的尺寸并不是一个固定的值,而是一个 动态的范围。它需要适应各种屏幕尺寸,包括最小和最大屏幕的尺寸,以及它们之间的所有可能。在设计小程序时,通常以iPhone 6的屏幕尺寸(375×667px)为视觉稿进行设计,因为微信小程序以rpx(responsive pixel)为CSS尺寸单位,而rpx可以根据屏幕宽度进行自适应。
具体设计建议如下:
视觉设计稿尺寸 :视觉设计稿的尺寸通常为375px或750px,这是基于iPhone 6的屏幕尺寸。设计时,元素尺寸以rpx为单位,这样可以在不同屏幕尺寸下自动调整。导航栏和标签栏设计尺寸
导航栏设计高度为128rpx,导航栏不能自定义尺寸,能改变的只有颜色。
标签栏设计高度为98rpx,标签数量在2个和5个之间。
屏幕分辨率:
需要适配多种不同的设备屏幕,如750x1334(iPhone 6/7/8)、1080x1920(很多安卓机型)等。设计时要确保图片和元素在不同分辨率屏幕上呈现出良好的视觉效果,并考虑安全区域,避免被设备的物理特征遮挡。
通过使用rpx单位,小程序可以自动调整其布局和元素大小,以适应不同屏幕尺寸,从而提供一致的用户体验。设计师在设计小程序时,应充分考虑这些尺寸规范,以确保小程序在不同设备上都能正常运行和显示。