做小程序设计，不得不说的7个坑

一半的时间，我们亲眼见证了小程序从萌芽成长为参天大树，支撑起我们现今的生方式，我们在他的树荫享受着舒适。很多公司自然会错过这次机会，纷纷入到小程序的行列。

这对设计和开发而言算是一次挑战，毕竟要快速上线的步伐没有留给我们太多时间，而面上的相资都太零碎，在实际中会遇到很多的坑，官方档没有说明。我拉着我们开发小哥哥 Yog，帮大规避小程序设计中的坑。

一、设计稿最好用二倍图

UI设计师喜欢用一倍图，但为什么用一倍图，方便适是表面现象，正原因是开用的开工具支持一倍图开，开不用换数值。而小程序的开工具不支持一倍图开，支持二倍图开。小程序里的尺寸单位叫 rpx，以根据屏幕宽度进行自适应。在750*1334的设计稿里，1px = 1rpx。

果你心疼你的开小哥哥，让他少掉点头，设计稿用750*1334的尺寸。但果你的开小哥哥之前老欺负你，你就看着办吧，他能搞定。

二、切图只需切750的尺寸

计稿用二倍图做的（750*1334），只需给一倍的切片；如果是按一倍图计的（375*667），只要给二倍的切图。真的不管其它尺寸吗？不是不想管，而是程序的开发工不支持。

三、导航栏不要自定义

标准高度：128rpx

小程序很轻量，同时也有很。导航栏不能自定义就是其中之一，能改变的只有颜。

是官方的意思，但是，要改也是以的，需要客户端版是6.6.0以上，而且下拉使整个页面下拉，也不护。

你说不有小程序已经使用嘛，是，个小程序叫汪卡，现在，他们已经改回来。所以，你也别难为你的开小哥哥。

四、标签栏爱素颜

这个标准名称叫：标签页导航，标准高度：98rpx，简称标签栏。

1. 偷笑别人花了脸

是一个安静的晚上，一个人窝在公计，承认这真的无奈，和其它程序一。听说你还在搞什创，加个投来点渐变，以为这棒简直无懈可击。结果开发哥哥哭了，相是美美的图，但是开发做不啊，那种表情可以想象。

虽然也可以，做点其它形，那就拜托别让开发见你。如果再能你，一定就是这说，生控件好多多最好能用它。不用担心出问题，不用维护怕麻烦。

2. 图标只要81rpx

还是一个安静的晚上，还是在做计，这次真的按耐不住，和其它程序一。听说你再搞什创，中间图标变大大，破形破形再破形，燃烧开发脑细胞。

但是，要知道，图标只要81rpx，于大于都变形，一定记得规格框。数量只能2至5，多了少了不算数，你只能去改图标，其它组件说了算。

五、弹窗不覆盖导航跟标签

在程序导航栏跟标签栏的层是最高的，以至于享受惯最高待遇的弹窗在这，也要臣服于。

六、视频限时多

小程序视频支持不是特好，原则上在滚动控件里不能放视频，而微信官文档里是这样要求。这我也像我们开发小哥哥求证，确实是这样，优酷和腾讯视频都是将视频固定。

其实吧，这已经被有些公司攻克了，比如开眼跟京东。攻克是攻克了，是体验不怎么好。如公司品需要放视频，议专新开个页，视频部分最好不要有左右滚动。

七、一稿适配

iPhone X 怎么办，安卓怎么办，这些都不用再设计了，开发小哥哥都能搞定，相信他们。

八、关于设计资源

微信官方虽然提供，但新时间停留了2016，新版的小程序样式，的区别就顶部导航栏。

最近我正好在看小程序设计，便动手加上了这些新样，虽然不多，都是很认真跟开发小哥哥过，里也附带了官 UI 控件，提供大家。《资：新版小程序 UI 控件，Sketch 版》

欢迎关注作者微信公众号：「动像」