创意电子

标题: 微信小程序设计经验分享（上） [打印本页]

作者: vito 时间: 2020-11-30 02:42
标题: 微信小程序设计经验分享（上）

1. 小程序演化史
“小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。这体现了“用完即走”的理念，用户不用担心是否安装了太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。”——这是张小龙最初对小程序的介绍。
2017年1月9日，小程序正式上线（这时的小程序只能由企业来开发），用户可以体验到各种各样小程序提供的服务。
2017年3月，小程序开放了对个人开发者的支持。同时微信也为小程序定制了专门的“菊花码”
2018年9月，上线“云开发”能力，进一步降低小程序开发门槛。
2019年7月，开放“一物一码”能力，使每一个商品都成为一个小程序入口。
2019年8月，全面支持pc版微信打开和分享微信小程序。同时期，已有微信小程序、QQ小程序、快应用、百度小程序、支付宝小程序、头条小程序、抖音小程序等等应用开发平台上线。
2020年6月，《2020小程序年中报告》显示，截止至6月底，全网小程序数量相比2019年增长约56.7%，攀升至550万；DAU（日活跃用户数）为4.4亿。

２.小程序与APP有什么区别
1、主要用户群体不一样APP理论上面对的是全球30亿的手机用户，只要有手机就可以下载并使用app小程序是基于微信生态圈，理论上是坐拥微信10亿用户
2、开发成本不一样
APP需要配对ios、android双平台，并适配各种主流手机，开发流程比较复杂，一款完善的双平台app平均开发周期大约需要3个月，同时维护起来也相对更加麻烦。同时，受制于各大应用商店的规范中，两端产品上架后用户需重新更新安装。小程序是以H5为基础，基于微信平台提供丰富系统与平台接口的应用，开发环境简单、代码复用性强，只需要一次开发，并且不需要适配多平台的手机操作系统，平均开发周期只需要2-3周。
3、体积大小不一样
APP基本是几十M的体积，下载和安装需要耗费一定时间成本。早期手机内存小，用户可能对容量比较在意，现在手机容量越来越大，用户可能对小程序节省的空间并不敏感，更多考虑的应该是产品的使用场景了。小程序不用安装和卸载，体积比较小，控制在2m内，还没有平时我们用手机咔嚓一声拍的相片大。也正是因为内存的限制，所以很多小程序在功能的设计上都会比较简单、轻量，符合它“用完即走”的定位。

4、引流推广
APP需要用户主动下载，对网络环境依耐性强。同时获客成本高，让用户去主动下载一个没有知名度的app的成本比较高昂。但app可以分享到各个平台，追踪能力和留存能力好。
小程序可以通过二维码、微信搜索等方式打开。只能在微信体系内运作，能分享到群，但目前还不能分享到朋友圈，背靠微信十亿流量，让其更容易获客，更容易引起爆发性传播，比如之前火到连我妈都知道的跳一跳游戏。但小程序最大的问题就是容易被用户遗忘，留存困难。而且受制于微信管控，部分敏感内容还容易遭受到微信的封杀。

5、用户体验
APP采用的是原生开发，运行速度快。能加载各种动画效果，在页面流畅度、视觉效果以及内部功能自主性等方便能做的更好。用户粘性强，用户一旦下载，相对于小程序，留存性会更高。
小程序最大的特点是触手可及，不用安装。加载速度接近原生（但当它层级很深或者动效比较多的时候也会出现卡顿，所以我们会看到很多小程序层级会做的比较浅，也会摈弃很多不必要的动效）。同时它入口较深，用户至少也需要3步才能到达自己想去的小程序，平台的限制也会比较多。
6、功能实现
APP基本上可以实现你所有想要的功能，灵活性很强，但小程序局限于微信平台所能提供的功能。
３.小程序设计规范详解其实小程序的设计规范大致上跟app的差不多，只是小程序存在于微信框架，所以有些地方需要遵循微信的设计规范。建议大家可以先去看看小程序设计规范的官方文件。个人觉得官方文件的参考价值还是蛮大的。以下就微信官方设计指南提到的相关内容以及个人工作中遇到的问题并结合自己日常收集的相关案例来聊一下个人见解。
1、小程序设计稿尺寸
小程序开发尺寸是rpx，可以实现一稿适配所有屏幕尺寸。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx= 375px = 750物理像素，1rpx = 0.5px = 1物理像素。设计师可以不用管这些，直接按iphone6（750*1334）的尺寸来设计即可。

2、小程序组件设计规范
1）小程序导航栏小程序的所有页面，包括小程序内嵌网页和插件，微信都会在其右上角放置官方小程序菜单。开发者不可对其内容自定义，但可选择深浅两种基本配色以适应页面设计风格。——来自小程序设计指南不过，除了右上角的小程序菜单是固定的、全局性的外，小程序导航栏的其它内容大家都可以根据自己的需求进行自定义。比如以下：

2）小程序标签分页栏
这个与app设计几乎一样，对于标签分页栏，小程序同样支持手指点击切换或者滑动切换，比如腾讯视频小程序顶部tab栏支持手指滑动切换：

3）小程序弹窗不遮挡标题栏
这是我第一次做小程序遇到的问题，它并不是像app那样弹窗保持在界面的顶层。小程序会保持标题栏的层级是最高的，或许是为了避免遮挡导航栏右侧关闭小程序的那个模块吧。

4）小程序的返回键
小程序每个页面都需要有返回键，但分享的链接除外，返回键可以用首页键代替。

5）小程序底部导航栏建议数量在2-4个，也可以根据产品需求去掉底部标签栏。同时受制于体积大小，小程序底部导航栏的切换样式相比于app会更加的简单。

欢迎光临创意电子 (https://wxcydz.cc/)