最近在做小程序项目，在进一步研究小程序设计的时候发现，关于小程序的文章非常少，而且不全面。

目前大部分问题都是通过微信开放社区来解决的，所以我结合官方的指南和文章资料，结合工作设计中遇到的问题，总结出了一份相对全面的小程序设计指南，希望可以帮助到大家。

1. 小程序浅谈 1. 小程序的定义

小程序是可以随时随地使用、无需下载的移动应用程序。与APP不同，用户不必担心它占用手机内存。用户可以通过扫描或附近搜索直接使用。

小程序免去了一切繁琐的流程，让用户操作更加灵活、快捷，大大提升了用户体验，使用率也大幅提升。

2. 小程序开发

2016年1月11日，2016微信公开课PRO版在广州举行，“微信之父”张小龙首次公开演讲，宣布微信公众号将推出“应用号”，通过公众号完成一些APP的部分功能。

2016年11月3日晚，微信团队宣布微信小程序正式开启公测。

2017年9月20日，支付宝小程序开放给用户公测。

2018年7月，百度AI开发者大会上，百度宣布正式推出百度智能小程序。

2019年6月1日，QQ小程序在QQ安卓新版上如期上线，五天后又在手机iOS版上正式上线，至此，QQ小程序全面上线。

3. 小程序现状

从最早的微信，到现在的支付宝小程序、百度小程序、抖音小程序，几大巨头均已布局小程序。

对比用户感知，微信小程序表现为分享链接，百度小程序为抢红包平台，支付宝小程序为优惠、抽奖平台等，小程序平台在线关注度的差异体现了用户对小程序平台生态的感知。

1）微信小程序

微信作为国民级社交软件，拥有3亿日活跃用户，这无疑是一个巨大的用户流量聚集地，可想而知对商家的吸引力有多大，接下来我们以微信小程序为例，逐步讲解。

开源文档

微信官方文档：

特点：依托微信强社交模型，引流能力强，流失率低，推广迅速。

规模：月活跃用户10亿。

2）百度智能小程序

百度作为中国最大的搜索引擎，有天然的数据支撑，百度日搜索量可达数亿，也是巨大的流量来源。此外，基于产品的搜索特性，百度小程序可以精准覆盖目标用户；通过小程序为用户提供资讯和服务，通过提升整体服务效率实现用户留存。

开源文档：

百度-智能小程序设计规范：

特点：基于百度搜索引擎优势，增加产品词的优化曝光度。

规模：月活跃用户5亿。

3）抖音小程序

抖音小程序的开发立足于字节跳动客户，面向字节跳动全产品线（​​包括抖音、今日头条等）用户，不同小程序/小游戏满足不同类型用户的需求。

支持小游戏、小程序作为产品形态，支持个人和企业开发者，只要有优质内容或者优质服务；产品形态和接口形态均贴合行业标准，最大限度降低开发者开发成本。

开源文档：

字节小程序：

特点：旨在利用优质内容带来的使用场景为小程序引流，解决开发者的流量和转化问题。

规模：月活跃用户9亿。

4）支付宝小程序

支付宝小程序依托支付宝商业及生活服务基因，细分行业小程序分布主要为生活服务、金融保险、电商等小程序；同时，支付宝成熟的信用体系也为商家提供免押金租赁等类似玩法，并借助芝麻信用、蚂蚁花呗等功能为流量变现创造更多想象空间。

开源文档：

支付宝小程序设计规范：

特点：组件采用成熟的Ant设计，针对自身特有能力封装开放API，框架基于开源/开源等技术，结合支付宝自身多年的技术积累。

规模：月活跃用户7亿。

4. 小程序类型

裂变类型：

裂变型小程序在短时间内为我们其他小程序提供大量流量；比如娱乐游戏类小程序“跳一跳”，拼多多就是电商裂变的成功例子。

对于裂变型小程序来说，裂变点就是痛点。除了产品主功能之外，小程序的裂变设计为什么需要用户裂变？比如拼多多，用户分享是为了免费获得产品，而帮忙砍价的人也希望免费获得产品。

拼多多：

保留类型：

小程序从来都是用完即走的体验，留存型小程序才是我们用来留住客户的。需要结合自身的产品去挖掘能够留住目标客户的场景，一般需要结合原有APP进行开发，才能开发出对用户有价值，又好用的小程序。

你可以考虑这几个方面：

产品类别：

产品型小程序通常是已经有APP的商家为了相互整合、推广而创建的；这是因为小程序开发成本较低，且有较多的曝光机会；产品型小程序设计通常是整体照搬，或者精简设计，通常会结合商家业务来评判。

针对一些垂直品类产品，马蜂窝、携程旅行等将酒店预订、景点门票预订、周边游、租车包车等功能进行拆分，并生成各个小程序的入口，这样可以更好地将服务垂直化，缩短产品和商家触达用户的渠道，自然带来更高的转化率。

对于想要借助微信这个大流量平台发展的APP，可以复制APP的做法。

工具类型：

在小程序中，工具类是最符合“用完即走”理念的，就像家里的工具，需要的时候就可以拿出来用；比如地图识别、公交线路查、快递配送、抽奖等小程序，只需要打开对应的小程序即可，不使用的时候也不占内存；还有本地服务小程序，利用“附近的小程序”功能，为周边提供便民服务，比如上门维修、家电回购、本地商圈等小程序。

工具型小程序注重功能本身，解决人们的特定需求，让人们的生活更加便捷、高效。

在设计时，应注重视觉、结构、信息布局的简洁性，然后优先考虑功能的理解性和辨识度，以便于理解，将功能产品化，快速提高用户效率，进而引导用户快速完成任务。

5. 小程序与应用程序的区别

1）开发技术的差异

APP开发按照开发方式可以分为原生APP和Web APP，主流的APP开发操作系统有和IOS。

版本原生APP的开发语言为JAVA，IOS版本原生APP的开发语言为C#。

版Web APP的开发语言为JAVA+HTML，IOS版Web APP的开发语言为-C+HTML。

小程序是基于腾讯、今日头条、百度等平台的小程序开发框架开发的，开发技术类似于HTML。

2）用户组

不同运营商的用户群体不同，小程序是基于微信平台的应用，用户群体仅限于微信用户，目前微信用户已经超过10亿；APP则是上架App及应用市场，面向全球智能手机用户，用户规模超过33亿。

3）下载并安装

APP：如果APP一直存在于手机中，会占用空间。APP太多可能会导致内存不足，所以要经常清除缓存。

小程序：由于无需安装，所以占用的内存空间可以忽略不计。

4）开发成本

APP：实际APP开发中，需要开发和iOS两个版本，使用不同的开发语言，还需要适配不同尺寸的手机，因此开发成本相对较高，一个完整的双平台APP平均开发周期在3个月左右。

小程序：开发成本低，一次开发即可适配所有手机；平均开发周期约2周。

5）产品定位

APP：原生App的内存不受控制，可以根据产品定位随意添加内容框架，发展空间很大，一些电商、社区等应用，不管多复杂，都可以一一实现。

小程序：由于内存控制有限，内容框架不同。小程序功能架构比较简单，符合轻量级、用完即走的理念；由于界面功能有限，功能相对有限。

目前的小程序界面是：

如上文所述：豆瓣原生APP包含首页-图书影视音乐-群讨论-商城-我的内容等多个内容板块，而小程序仅保留了豆瓣最核心的部分——电影评分栏目，并砍掉了所有商城、社区模块，让小程序成为一个信息型的浏览窗口。

6）基本框架

其实移动端产品的设计规范和原则大致相同，但由于微信小程序框架的限制，小程序产品和App产品在某些板块的呈现上会存在一定差异：比如顶部导航栏区域。

其实移动端产品的设计规范和原则大致相同，但由于微信小程序框架的约束，小程序产品与App产品在部分板块的呈现上存在一定差异，主要体现在以下几个方面：

顶部导航栏区域：官方小程序导航栏提供深色、浅色两种风格，背景颜色可自定义，遵循“导航清晰，来去自如”的原则。

顶部导航栏区域：底部标签栏是移动端产品的主要导航方式，主要表示用户当前所处的位置，因此有选中、未选中两种切换方式。

拖拽排序：

消息推送：

7）用户体验

如何打开：

页面流畅度：

氛围营造：

流量转化：

8）运营推广

APP：推广新用户需要下载APP，占用手机内存，推广率低。但APP开发自由度高，推广方式不受限制，渠道多，转化率高。

小程序：依托微信平台，通过扫码、搜索、发朋友圈等方式进行推广，推广率较高。虽然推广率高，但是官方的种种限制增加了营销难度，转化率较低。

2. 如何设计小程序

微信小程序的设计规范在微信的官方文档中有详细的说明，这里就不多说了，按照官方的指南来设计一个基本的小程序就完全够了。

1. 遵循微信小程序设计指南

友善礼貌、清晰精准、便捷优雅、统一稳定：

2. 突破设计界限

在最基础的设计上，我想跟大家聊聊如何在微信的设计规范内进行高级设计，这也是我在实际工作中探索的结果，希望能给大家更多的启发。

1）酒吧

官方指南：开发者可以根据自身功能设计需求，在页面中添加自定义导航。并保持不同页面之间的导航一致、清晰，且具有可退可回的路径。

由于手机屏幕尺寸的限制，小程序页面导航应尽量简洁，建议开发者设计的导航样式与微信官方小程序菜单样式有所区别，以方便区分。

我们该如何按照官方的指导进行设计？

正常颜色变化：

导航栏设计边缘探索：

需要注意的是，自定义导航栏之后，如果要添加微信默认的下拉刷新，就会出现一个问题：下拉刷新组件会出现在导航栏上方！所以如果需要自定义导航栏，就需要自定义下拉刷新；下面提供了微信小程序下拉刷新组件。

2）

官方指南：开发者可以在小程序页面添加标签导航，标签栏可以固定在页面顶部或者底部，方便用户在不同页面之间切换。

标签数量不得少于2个，且不得超过5个，为保证点击区域，建议标签数量不超过4个。一页内标签分页条的数量不得超过一组。

底部标签栏：

底部导航栏也可以根据产品需求直接删除。

导航栏设计的其他示例：

顶部标签栏颜色可自定义。选择自定义颜色时，请确保标签栏标签可用、可见且可操作。

3）加载动画

启动页加载样式

下拉页面刷新加载：

下拉页面刷新加载。虽然微信官方文档说开发者不需要自己开发，但可以自己修改。现在小程序已经开发好了，尽量使用小程序标准。定制开发可能会破坏小程序的用户体验。

页内加载反馈，模态加载等加载样式可以根据需求设计，新手可以参考官方指南。