微信小程序发展至2020年,大约走过一个三年小轮回,小程序贯穿了我们在万物互联的生活方式,我们也见证了小程序从0-1、1-∞的蜕变,神节拍在数字时代,大步迈进,顺势生长。
微信小程序的优势在于,资金投入小,底价低至千元级别,就可以获得神节拍专属技术解决方案,相比于制作开发app的投入,可以忽略不计;运营难度降低,小程序无需下载,从微信直达客户链条线短,进一步节约推广成本;时间投入少,公众号成都神节拍有成熟的方案,在确定需求后,短时间内即可出稿;用户体验好,流畅的体验,一直是一个程序从研发到落地的硬性条件,小程序内嵌于微信接近原生appp;流量入口多,借力微信超12.1亿的超级流量,深挖社交领域流量红利。
快速上线的步伐,在之前对神节拍设计而言算是一种挑战。而市面上的相关资料零零碎碎,在实际中会遇到很多的坑,官方文档也没有特殊注明。所以公众号:成都神节拍,帮大家规避一下小程序设计中的那些坑。
一、小程序尺寸
小程序开发尺寸是rpx(responsive pixel),可以实现一稿适配所有屏幕尺寸,小程序编译后,rpx会做一次px换算。换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px。这里了解就行,设计稿尺寸375px或750px都没问题。
二、官方小程序菜单
a.全局性的,不可自定义,位置固定
官方小程序菜单位于所有界面(包括小程序内嵌的网页和插件),且位置固定,开发者不可对其内容进行自定义,只能选择深浅两种配色方案,设计时要预留出该位置区域,若要在小程序菜单附近放置可交互元素,要注意与小程序菜单不冲突,可识别,易操作。
b.常见的三种状态
小程序菜单常见的三种状态:全局菜单、调用录音、获取地理位置。
三、标题导航栏设计(Title bar)
标题导航样式设计时要与微信小程序菜单样式保持一定差异性,便于区分。另外标题导航的背景可以自定义背景颜色或图片(这里注意给开发小哥时需要把图切出来),还可以设置不透明度,是不是很帅。
二级页面要设计有返回键,要让用户知道自己在哪,怎么回去。如果页面层级太多有个一键返回首页按钮在体验上会友好很多,如知乎二级页面。
四、标签分页导航设计(Tab bar)
标签分页导航分为:顶部标签导航和底部标签导航,官方建议标签数量为2-5个。不过对顶部导航来说关系不大可以根据具体项目需要来设计,底部导航最好还是按照规范来。
a.顶部标签导航
顶部标签导航可以自定义颜色和样式,可以点击也支持沿X轴滑动,也就是说点击不是顶部标签栏唯一的交互方式。
b.底部标签导航
底部标签导航提供了四种不同图形的设计规范,满足了圆形、方形、高矩形和宽矩形四种形状类型。根据规范设计可以更方便进行视觉修正,保持图标的统一性。数量上3-4个最常见。或者直接去掉底部标签导航,如微信读书、36氪。
五、内容设计
内容部分和app设计差不多,app设计规范在这里也适用。
要点:
a.小程序弹窗优先级并不是最高的
官方小程序菜单的层级优先级是最高的。即使在app中优先级最高的弹窗到这里层级也得在小程序菜单之下,即便沉浸式体验也不例外。而且标题栏和底部标签栏优先级也是在弹窗之上的。
b.视频位置
小程序内视频是固定位置浮动的,滑动页面视频不会沿Y轴移动,如优酷视频。不过也有技术比较厉害的突破了这一限制支持视频Y轴滑动,如腾讯视频、爱奇艺。测试了六款主流视频app,全都是固定位置。所以,实在不好搞就不要难为程序小哥了。
熟悉了这些设计规范,相信你对小程序设计已经胸有成竹了。神节拍为解决大众品牌解决设计运营问题,为企业、商户提供优质的设计运营服务,如果觉得有所收获关注公众号「成都神节拍」吧～