小程序设计,不得不说的7个坑 (附资源:新版小程序 UI 控件,Sketch 版)

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

这对设计和开发而言算是一次挑战,毕竟要快速上线的步伐没有留给我们太多时间,而市面上的相关资料都太零碎,在实际中会遇到很多的坑,官方文档也没有说明。所以我拉着我们开发小哥哥Yog,帮大家规避小程序设计中的那些坑。

一、设计稿最好用二倍图

UI设计师都喜欢用一倍图,但为什么用一倍图,方便适配是表面现象,真正原因是开发用的开发工具支持一倍图开发,开发不用再换算数值了。而小程序的开发工具不支持一倍图开发,支持二倍图开发。小程序里的尺寸单位叫 rpx,可以根据屏幕宽度进行自适应。在750*1334的设计稿里,1px = 1rpx。

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

二、切图只需切750的尺寸

设计稿用二倍图做的(750*1334),只需给一倍的切片;如果是是按一倍图设计的(375*667),只要给二倍的切图。真的不管其它尺寸吗?不是不想管,而是小程序的开发工具不支持。

三、导航栏不要自定义

标准高度:128rpx

小程序很轻量,同时也有很多限制。导航栏不能自定义就是其中之一,能改变的只有颜色。

这是官方的意思,但是,要改也是可以滴,需要客户端版本是 6.6.0 以上,而且下拉会使整个页面下拉,也不好维护。

你会说这不有小程序已经使用了嘛,是,这个小程序叫汪卡,现在,他们已经改回来了。。。所以,你也别难为你的开发小哥哥了。

四、标签栏爱素颜

这个标准名称叫:标签分页导航,标准高度:98rpx。但这块我写嗨了,就简称标签栏。

4.1 偷笑别人花了脸

又是一个安静的晚上,一个人窝在公司里设计,我承认这样真的很无奈,和其它小程序一样Yeah~ 听说你还在搞什么,加个投影来点渐变,自以为这样很棒棒简直无懈可击。结果开发小哥哥哭了,我相信是很美美的图,但是开发做不到啊,那种表情可以想象。

虽然也可以,做点其它形态,那就拜托别,让开发见到到你。如果再能看到你,一定就是这么说,原生控件好处多多最好能用他。不用担心出问题,不用维护怕麻烦。很怀念,别怀念,现在我就马上改回来。

4.2 图标只要 81rpx

还是一个安静的晚上,还是我再做设计,这次我真的按耐不住,和其它小程序一样Yeah~ 听说你又再搞什么,中间图标变大大,破形破形再破形,燃烧开发脑细胞(实在抱歉,突然被另一首歌洗脑了)

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

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

在小程序里导航栏跟标签栏的层级是最高的,以至于享受惯最高待遇的弹窗在这里,也要臣服于他们。

六、视频限时多

小程序对视频的支持不是特别的好,原则上在滚动控件里不能放视频,而且微信官方文档里是这样要求的。这点我也像我们开发小哥哥求证,确实是这样,优酷和腾讯视频都是将视频固定。

但其实吧,这点已经被有些公司攻克了,比如开眼跟京东(是的,你没看错,京东)。攻克是攻克了,但是体验不怎么好。如果公司产品需要放视频,建议专门新开一个页面,视频部分最好不要有左右滚动。

七、一稿适配

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

八、关于设计资源

微信官方虽然有提供,但是更新时间停留在了2016年。

和现在的区别就在顶部导航栏上。

下面,我给大家提供一版新的控件

这套控件我是在微信官方文件上修改的,但他们的停留在了 2016 年,没有现在新版的小程序样式。最近我正好在看小程序设计,便动手加上了这些新样式,虽然不多,但都是很认真跟开发小哥哥对过的,里面也附带了官方UI控件,提供给大家。

下载前我再说下标签栏图标切图的事,控件里给的空间是54 * 54px,但是,小程序开发需要的是81 * 81px,正好是 1.5 倍。一次给到位,你会发现,开发小哥哥、小姐姐会突然对你特别的好。

每个控件我都创建了复用样式,方便大家修改。类别也都分好了,是不是还挺到位的呀~

看到我的逼格黑了吗?

下载小程序官方设计资源和新版小程序控件

动像(公众号)

作者: 沄海

(0)

相关推荐

  • 小程序设计规范及经验分享(附小程序控件+设计规范)

    近期刚结束几个小程序项目,总结一些,并结合微信小程序的官方设计指南,一起分享给大家.(附件含19年最新样式库!) 最近设计群里经常有人问起小程序设计规范的问题,虽然官方有提供样式库的下载,但是停留在1 ...

  • 微信小程序设计指南 微信小程序ui设计规范汇总

    微信小程序ui设计规范汇总: 微信小程序是一种全新的应用形态,微信小程序平台不需要下载安装即可使用应用的平台,微信小程序实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用. 也体现了“用完 ...

  • 微信小程序设计规范总结(内附资源)

    前不久做了一个微信小程序的项目,总结了一些小程序的设计规范,如果对小程序不够了解就开始设计,设计完程序小哥肯定就要暴走了~,为了挽留程序小哥,我吐血整理了这篇设计规范,还给大家准备了新版小程序控件(一 ...

  • Win xp死亡倒计时工具如何下载安装教程(附xp死亡倒计时小工具下载)

    下文介绍的是xp死亡倒计时工具下载安装教程,xp死亡倒计时小工具能够帮助我们计算距离xp系统停止服务还有多少时间,如果你是用的是xp系统的话,不妨下载使用一下。 下载“xp死亡倒计时小工具”完成后,双 ...

  • 微信小程序怎么样?微信小程序部分软件就是"阉割版App”

    微信小程序上线,不少日常应用的小程序版本快速占领微信用户的小程序页面.但是,用户欢欣鼓舞卸载App拯救手机内存时,却发现这些小程序的功能大打折扣.企业“阉割”功能究竟是出于小程序的规则.技术的局限,还 ...

  • 腾讯小王卡怎么免费升级为大王卡 腾讯小王卡升级大王卡方法教程。

    腾讯小王卡是之前腾讯推出的手机卡,现在有推出腾讯大王卡,小伙伴们是不是不想使用小王卡了,也想拥有大王卡,该怎么进行升级呢,就让小编给大家详细讲讲吧. 腾讯小王卡升级大王卡方法介绍 腾讯小王卡升级大王卡 ...

  • 电脑桌面日历小控件使用教程

    我们习惯在电脑上记录一斜日常工作事项,今天给大家介绍一款电脑上的日历小控件,记录日常琐碎事项既方便又快捷,一起来看看吧.1. 如图,这款日历控件可以管理约会,设置一些待办事件及日常安排等.2. 双击就 ...

  • 【To G设计赋能】重塑政务服务体验设计初探—粤省事小程序设计总结

    导语 粤省事小程序是一个基于移动端的聚合式政务服务平台.作为一个平台型产品,它集成了广东省各地市.各部门的多项民生.政务类服务内容:同时,它也承担着对不同政府部门.合作开发商.公众用户等多个相关主体的 ...

  • 佳作欣赏:SHAVEDOG小程序设计V1.0

    SHAVEDOG是2月中旬做的一个项目,因为甲方要求H5和小程序两个版本,所以是先做的H5版本后套壳为小程序版本. SHAVEDOG是一家生产销售剃须刀的公司,在经济相对低迷的时期主打超高性价比,通过 ...