大家好

今天给大家分享一下小程序的设计规范。相信很多小伙伴在搜索小程序的设计规范时，基本和图中微信官方给出的基本规范差不多。这些看起来更像是 ios 或 的视觉规范指南。

那么今天，我们就来看看小程序设计时应该注意哪些问题。

1、设计稿

首先是视觉设计。

我们在做设计稿的时候，有的同学习惯用1x地图设计，也用双地图，各有千秋，开发app的时候要知道程序是用1x地图开发的，但是小程序只支持双像的开发。小程序有自己的尺寸单位，称为rpx，可以根据屏幕宽度自适应调整。双图中，即750*1334的大小，1px=1rpx。

使用 2x 地图进行设计时，仅 1x 切片就足以切割地图。

所以我们在设计小程序的时候，只需要使用2x图进行设计，就完全满意了。

2、导航栏

小程序和应用程序的第二个区别是导航栏；

标准高度：这与应用程序相同。

但是小程序的导航栏只能改变颜色，不能设置渐变或透明度。

导航栏的默认按钮只有两种样式可供选择。对于白色以外的颜色，一般选择上面的样式，黑色不透明度为20%。

为什么小游戏可以透明化？

大家要注意的是，小游戏虽然也是小程序的一种，但是和我们做的小程序是不一样的。

小程序好比web前端开发，小游戏好比原生h5开发。所以还是有一些区别的。这里不会讨论。

3、标签栏

小程序的标签栏有一个标准的名字叫做：标签页导航，所以我们可以简称为标签栏。在这里，我们只需要了解它。

有些产品在制作标签栏图标时，会放大比较重要的功能，比如咸鱼等，释放按钮会放大以突出功能，但这些在小程序中是不允许的。

同样，标签栏不能使用阴影。

这些都不是不可能实现的，但是在开发的时候会变得很复杂小程序开发分页功能，效果会大打折扣，后期维护也会变得有点麻烦。在这种情况下，不要尴尬。

在设计小程序的时候，这些都得有一些规则。图标可以使用渐变或线面的组合，但尽量保持选中状态，大小不变。

也不可能给图标添加小的动画效果。很多大厂都会在标签图标上加入小动效，但在小程序中必须舍弃。没办法，组件是不允许的。

标签的数量也应保持在 2 到 5 个。

4、关于剪辑

关于tab bar的，组件只能放置一个81*81px的icon，太大或者太小都会变形。这里的 81px 并不是让你直接切出这个大小的图标，而是一个 54*54px 1. 5x 的切图。

页面中的小图标也只需要在2x图下导出一个1x切片即可。

5、弹出窗口

弹窗不能覆盖导航栏和标签栏。小程序中的导航栏和标签栏具有最高级别。目前，没有可以更改的组件。应用中弹窗的高待遇只能在这里向他们低头。

6.视频限制

小程序对视频的支持不是特别好。

原则上，视频不能放在滚动控件中，这也是微信官方文档中的要求。所以想给产品加视频的朋友这里要注意了，视频窗口只能是固定的。

即使像优酷、爱奇艺这样的大公司的开发也解决不了这个问题，所以不要为难你公司的开发伙伴。

7、一稿改编

有的朋友会担心X怎么办？那么安卓手机呢？是否做适配，这里不用你操心，只要做双图的设计，开发就可以了，相信他们。

到目前为止，小程序官方给出的插件都还是2016年的，这里给大家分享一下最新的组件，供大家使用。

如果对你有帮助，请给我点个赞~