导航:首页 > 软件知识 > 小程序尺寸是多少

小程序尺寸是多少

发布时间:2023-03-09 03:53:38

小程序设计稿能用828吗

微信小程序的设计只需要以iPhone6屏幕尺寸750x1334px为视觉稿进行设计即可,因为微信小程序以rpx为css尺寸单位,rpx可以根据屏幕宽度进行自适应,规定屏幕宽度为750rpx,因此在iPhone6设计稿上1px=1rpx,在尺寸换算上就会很简单。

在这里插入图片描述

小程序的所有页面,包括小程序内嵌网页和插件,微信都会在其右上角放置官方小程序菜单,样式尺寸及布局如上图。开发者不可对其内容自定义,但可选择深浅两种基本配色以适应页面设计风格,如下图。

在这里插入图片描述

字体规范

在这里插入图片描述

小程序的字体依然遵循微信原生视觉规范:微信内字体的使用与所运行的系统字体保持一致,常用字号为20, 18, 17, 16,14 13, 11(pt),使用场景具体如上图。

在这里插入图片描述

无彩色——主内容Black黑色,次要内容Grey灰色;时间戳与表单缺省值Light灰色;大段的说明内容而且属于主要内容用Semi黑;

在这里插入图片描述

有彩色——蓝色为链接用色,绿色为完成字样颜色,红色为出错用色,Press与Disable状态分别降低透明度为20%与10%;

顶部导航栏navigationBar

在这里插入图片描述

顶部导航栏一般简称导航栏,标准高度:128rpx,一般只做底色修改,标题区与导航区要进行自定义开发也是可以的,不过要注意设计的自有导航样式与微信官方小程序菜单样式要保持一定差异,以便区分。

标签分页导航tabBar

标签分页导航栏一般简称标签栏,标准高度:98rpx,可固定在页面的顶部或底部,便于用户在不同分页间做切换。标签数量在2-5个,为确保点击区域,建议标签数量不超过4项。一个页面也不应出现一组以上的标签栏,可根据产品需求选择或去掉标签栏。

1.底部标签栏

在这里插入图片描述

顶部标签分页栏颜色可自定义。在自定义颜色选择中,务必注意保持分页栏标签的可用性、可视性和可操作性。

弹窗

在这里插入图片描述

无论是APP还是Web网页,弹窗总是出现在页面的最上层,但是在小程序里导航栏跟标签栏的层级是最高的,以至于优先级较高的弹窗在这里也要有所收敛,因此在设计和开发时,都需要注意避免踩坑。

启动页

在这里插入图片描述

小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志( Logo )展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需开发者开发。

加载样式

无论是APP还是小程序,加载都不可避免,同样长时间的加载等待会引起用户的不良情绪,因此,在不可避免的加载和等待时,给予及时的反馈以舒缓用户等待的不良情绪都是必需的。小程序里除了自定义加载样式,更是依赖微信提供了一系列加载样式:

1.页面下拉刷新加载

在这里插入图片描述

在微信小程序内,微信提供标准的页面下拉刷新加载能力和样式,开发者无需自行开发。

2.页面内加载反馈

在这里插入图片描述

开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载,自定义加载样式都应该尽可能简洁,并使用简单动画告知用户加载过程。

3.模态加载

在这里插入图片描述

模态的加载样式将覆盖整个页面,由于无法明确告知具体加载的位置或内容可能引起用户的焦虑感,因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。

4.局部加载反馈

在这里插入图片描述

局部加载反馈是只在触发加载的页面局部进行反馈,这样的反馈机制更加有针对性,页面跳动小,是微信推荐的反馈方式。

5.全局加载反馈

Ⅱ 小程序码可以生成尺寸

小程序开发尺寸是rpx(responsive pixel),可以实现一稿适配所有屏幕尺寸,小程序编译后,rpx会做一次px换算。换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px。这里了解就行,设计稿尺寸375px或750px都没问题。在不同的设备下,rpx换算成不同的px,意思就是在开发小程序时,只需要按照标准设计设置好尺寸(多少rpx),小程序会根据对应的设备,计算出应该显示的尺寸(多少px),所以开发时只需要按照标准规则写,就可以适配不同的设备。

Ⅲ 求教各位,微信小程序发布产品的图片规格是多少啊

求教各位,微信小程序发布产品的图片规格是多少啊?

1、微信小程序发布商品为了最佳体验效果,注意商品图尺寸,建议详情图尺寸:宽度800,高度不限,输出画质70%,格式:jpg.

1、目前小程序上的轮播图的图片是16:9的宽高比例,所以商家在给小程序商城设计轮播图的时候,尽量按照这个尺寸来选择。如果有多张轮播图,建议几张的轮播图的尺寸大小保持一致,这样整体的视觉上看起来就非常美观、整洁。

3、目前微信小程序分享图片分享卡片的图片尺寸长宽比例是5:4,只要是这样的比例就可以了,比如50px*40px;100px*80px…设置成这样的图片大小,在分享卡片是就不会出现图片变得扭曲或者宽高被隐藏的问题出现了。另外还需要注意的是,图片尽量设置成jpg、png等常见格式.

Ⅳ 小程序商城运营推广所需的设计和详情页是尺寸是多少

一般情况下,一场小程序营销活动,我们会设计相应的专题页,如果是当月的大型促销活动,首页也会同步更新调整架构内容。

如服装类,我们会在架构表备注的要求

商品详情页:750或800的宽度皆可,适应手机阅读,高度则根据商品本身实际情况而定,建议单张图片150-200KB之间比较好,方便用户下拉图片时快速加载图片内容,提升体验感。

商品活动标:500*500,其实只要是1:1的方图即可。

=================

以上就是我的分享

如果对你有用,就点个赞吧!予人玫瑰,手有余香~

阅读全文

与小程序尺寸是多少相关的资料

热点内容
查采购信息哪个网站好 浏览:61
微信小程序登录怎么登 浏览:366
重要信息怎么涂鸦 浏览:703
如何查询快递公司寄件信息 浏览:540
杭州库存市场怎么停车 浏览:963
什么情况需要减少产品 浏览:696
你认为应该要写清楚哪些信息 浏览:358
怎么做好股票的交易系统 浏览:38
华为数码产品质量怎么样 浏览:206
白酒县级代理什么牌子好 浏览:517
直播间多少粉丝才可以看后台数据 浏览:480
如何利用大数据确保人身安全 浏览:36
理性怎么打理信息 浏览:162
驾校代理合同怎么写 浏览:833
cad如何摘取数据 浏览:254
解答为什么肺炎数据增长快了 浏览:706
除了超车还有哪些技术 浏览:511
淘宝二级代理有哪些 浏览:416
怎么证明程序员牛逼 浏览:605
地图市场监管目录清单怎么填 浏览:846