小程序不得不知道的设计规范

哈喽大家好

今天我来分享一下小程序的设计小规范，我相信很多小伙伴在去搜索小程序设计规范的时候，搜索到的基本都是类似图片中微信官方给出的一些基本规范，这些看起来更像是ios或者是安卓的视觉规范指导。

那么今天我们就来看一下除了这些，在做小程序设计的时候还应该注意哪些问题。

1、设计稿

首先就是视觉搞的设计。

我们在做设计稿的时候，有同学习惯用1倍图做设计，也有用二倍图的，各有所长，我们要知道开程序在开发app的时候是使用1倍图进行开发的，但是小程序只支持二倍图的开发，小程序中有自己的尺寸单位，叫rpx，是可以根据屏幕宽度来自适应调整的，在二倍图中也就是750*1334的尺寸中，1px=1rpx。

用2倍图做设计的时候，切图只需要给1倍的切片就够了。

所以我们在设计小程序的时候只需要使用2倍图做设计就完全可以满足了。

2、导航栏

小程序与app第二个不同的点就是导航栏；

标准高度：128px，这个跟app是相同的。

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

导航栏的默认按钮也只有两种样式可以选择，在除了白色之外的颜色，一般会选用上方，黑色不透明度在20%的样式。

为什么小游戏中可以做到透明呢？

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

小程序就像是web前端的开发，而小游戏就像是原生h5的开发。所以还是有些区别的。这里就不展开讲了。

3、标签栏

小程序的标签栏有个标准名称叫：标签分页导航，那么我们简称标签栏就可以了。这里只需要大家了解一下就好了。

有些产品在做tab栏 图标 的时候会将比较重要的功能，做放大的处理，就比如说咸鱼之类的，将发布按钮，放大来突显功能，但是在小程序中呢这些是不允许出现的。

再一个，标签栏是不能使用投影的。

这些也不是不可以实现，而是在开发的时候会变得非常复杂，效果也会大打折扣，而且后期维护也会变得有些麻烦，既然这样，还是不要难为人家了。

在设计小程序的时候，这些都要做的规矩一些了，图标可以使用渐变或者线面结合的方式，但是尽量保持选中状态下，大小不发生变动。

图标呢也是不可以加小动效的。很多大厂会在tab图标中加入小动效，但是到了小程序中一样要抛弃掉，没办法，组件不允许。

标签数量呢也要保持在2到5个。

4、关于切图

关于tab栏的切图，组件只能放置81*81px的图标，大了小了都会变形，这里的81px并不是让你直接切出这个尺寸的图标，而是54*54px的1.5倍切图。

页面中的小图标也只需要在2倍图下导出一个1倍的切片就够了。

5、弹窗

弹窗是不能覆盖导航栏跟标签栏的，小程序中导航栏跟标签栏的层级最高，目前还没有组件可以改变，在app中 弹窗的高待遇在这里也只能向他们低头了。

6.视频限制

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

原则上在滚动控件里是不能放视频的，而且微信官方文档里也是这样要求的。所以有产品中要加入视频的小伙伴这里要注意了，视频窗口只能去做固定。

就连优酷、爱奇艺这样大厂的开发都无法解决这个问题，就不要难为你们公司的开发小伙伴了。

7、一稿适配

有些小伙伴会在担心iPhone X 怎么办？安卓手机怎么办？要不要做适配呢，在这里你完全不用担心，只要你做好二倍图的设计，开发都能搞定的，相信他们。

到目前为止，小程序官方给出的插件呢还停留在2016年，这里我会给大家分享出最新的组件供大家使用。

如果帮助到了你，就帮我点个赞吧~