小程序设计尺寸规范 微信小程序开发界面设计稿尺寸介绍

微信小程序开发界面设计指南:

 

微信小程序界面应该友好礼貌,重点突出,流程明确,清晰明确,导航明确,来去自如m,减少等待,反馈及时,异常可控,有路可退,便捷优雅,减少输入,避免误操作,利用接口提升性能,统一稳定,视觉规范。

 

尺寸如下:微信小程序中css的尺寸单位是rpx,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)例如:iPhone6 1rpx = 0.5px 1px = 2rpxiPhone6s 1rpx = 0.552px 1px = 1.81rpx微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx

 

小程序开发尺寸是rpx(responsive pixel),可以实现一稿适配所有屏幕尺寸,小程序编译后,rpx会做一次px换算。换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px。这里了解就行,设计稿尺寸375px或750px都没问题。

 

如果你心疼你的开发小哥哥,让他少掉点头发,设计稿用750*1334的尺寸。但如果你的开发小哥哥之前老欺负你,那你就看着办吧,他都能搞定。

小程序设计尺寸规范 微信小程序开发界面设计稿尺寸介绍

另外需要注意

微信小程序一般以iPhone6屏慕尺寸750x1334px为视觉稿进行设计,因为微信小程序以px为css尺寸单位,

而rpx可以根据屏幕宽度进行自适应,因此大部分小程序都是根据移动端的尺寸进行自适应更换的。

图片的宽度不能超过750px,高度不能超过1334px,图片的大小不能超过200KB。这些要求是微信官方规定的,

如果图片尺寸超出了这些要求,小程序可能会出现性能问题,甚无法正常运行。

给TA打赏
共{{data.count}}人
人已打赏
技术教程

H5跳转微信小程序的三种方式解决

2023-12-20 11:31:37

技术教程

PHP str_shuffle()用法

2024-2-26 14:33:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索