如何设计小程序？来看这份超全面的指南！

前言

最近正好在做小程序相关的项目，发现现在关于小程序相关的文章还比较少，能吸收的运用到实际工作中的技巧也「比较有限」，所以我想着自己来尝试写一篇「相对全面和实战」的文章，来帮助到越来越多做小程序的设计师们。

小程序的发展史

• 2017 年 1 月 9 日，张小龙在 2017 微信公开课 Pro 上发布的微信小程序正式上线。
• 2017 年 1 月 9 日微信小程序平台正式发布，在业界引起很大的轰动。
• 2018 年 2 月，微信官方发布公告称：已对涉及假货高仿、色情低俗和违规「现金贷」等超过 2000 个微信小程序，进行永久封禁处理。
• 2019 年 8 月 9 日，微信向开发者发布新能力公测与更新公告，微信 PC 版新版本中，支持打开聊天中分享的微信小程序。

为什么叫小程序？和苹果应用程序有什么区别

微信小程序，小程序的一种，英文名 Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。

小程序能够通过一套设计来适配 2 端的，比如 iOS 与 Android 的改版是分别适配了 2 端使用体验来独立设计完成的，而小程序则不同，只需要设计一套设计稿，然后适配，节省了适配的很多复杂工作，比如安卓端（据我所知目前市面上有大概 3000 种安卓手机，可想而知适配比 iOS 相对要复杂很多）。

小程序是一种不需要下载安装即可随时用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或者搜一下即可打开应用，也体现了「用完即走」的理念，用户不关心是否安装太多应用，应用无处不在，随时可用，但无需安装卸载。

小程序的特点及优势

根据小程序轻量且用完即走的平台定位触手可及、用完即走。

1. 小程序的优势

• 出色的用户体验：加载速度快于网页，可达到近乎原生 App 的操作体验和流畅度。
• 更低的开发门槛：一次开发，多端兼容，免除了对各种手机机型的适配。
• 社交分享属性：坐拥微信 10.83 亿用户，基于微信强大的社交关系链，可以在微信内被便捷的传播和获取。
• 更短的服务路径：无需下载，通过线下扫码、社交分享、平台搜索和附近的小程序等能力，缩短了服务路径。

小程序与订阅号和公众号在微信中的定位

• 订阅号：主要偏于为用户传达资讯（类似报纸杂志），认证前后都是每天只可以群发一条消息；
• 服务号：主要偏于服务交互（类似银行，114，提供服务查询），认证前后都是每个月可群发 4 条消息；
• 小程序：是一种新的开放能力，开发者可以快速的开发一个小程序。

小程序可以在微信内被便捷地获取和传播，同时拥有出色的使用体验。应该说承载了一部分 APP 的核心功能于小程序中，比如打车、比如订餐、比如自行车骑行类等产品。

小程序在设计初期也承载了一些数据收集的目的，比如之前我们开发一些小程序是用 H5 网页来写，整个环节不受微信生态的控制，而一些数据上的收集，只能是知道一些相对比较「粗颗粒」的数据，比如用户的流量的数据和一些支付相关的数据，而且 H5 网页嵌入的话，会涉及到一些加载速度问题，体验相对不够流畅，而小程序的诞生则解决了数据全流程收集的问题和解决了之前的用户体验问题。

1. 小程序如何被用户发现

• 任务栏、发现-历史列表
• 群聊、单聊、消息
• 搜索长按识别小程序码，广告等
• 开发链接（公众号、其他小程序、APP）
• 扫码获取

小程序的对设计的影响和趋势，不同行业小程序设计需要考虑的特点

现在各大公司对小程序的设计要求是什么样的？

有很多专门服务小程序的公司比如有赞、比如微盟、比如获客宝等等，你可以看到未来小程序将会是大部分公司所必须要考虑的解决方案之一，那么不同行业的小程序在设计的时候思考点是不同的，我们来分析下。

小程序的设计思考，需要结合小程序设计规范以及对不同行业公司小程序进行调研，进行分析。

1. 出行类-滴滴

滴滴的 APP 与小程序设计时，考虑到了平台的特性，更简单快捷的操作目的地进行叫车服务，在功能选择上更加提供核心功能在小程序露出，一些非必须的入口则没有体现出来，比如消息，扫一扫以及个人中心里的一些功能等，用户在使用小程序叫车时更加专注。

2. 笔记类

印象笔记 APP 和印象笔记小程序的功能体现，也是有很大的不同，在印象笔记小程序中，只体现了最核心的几个入口「由我创建」「来自分享」「微信文件」印象笔记的小程序更多的是通过微信这一流量入口，使得用户能够及时收集来自朋友的分享笔记以及快速创建笔记；

还有一个很「微信」的功能就是导入微信文件，此功能能够一键导入微信聊天记录中的一些文件到印象笔记 APP 中，及时保存防止用户的文件过期无法使用。

3. 新闻类

36Kr 主程序和小程序对比更加明显，在 36 氪小程序精简版，则更加轻量化的体现了主要资讯信息，其他的入口则直接忽略体现出来，把最重要的核心点体现了出来，其他非主要的「干扰」小程序轻量化感受的因素都直接放弃体现。

4. 知识付费类

在主程序与小程序的设计中，更多的是偏向于核心商业化部分内容作为小程序突出主要信息，比如得到小程序，在底部导航栏中保留了 2 个主应用程序中核心的入口「商场」和「课程」。

5. 视频类

在哔哩哔哩小程序中，主要把其核心的两个主导航分类进行了提取，分别是「热门」和「追番」，分区页面对应 APP 提取了部分功能到小程序中，我的页面对应 APP 只提取了历史记录+意见反馈到小程序中；搜索结果页对应 APP 排序方式和筛选部分进行了大量「简化」；在微信小程序中，不能对内容进行点赞和评价。

如何设计小程序？设计小程序，需要避免的问题点

1. 小程序官方设计规则

（我选取了部分内容，更全面的请到官网查看）：https://developers.weixin.qq.com/miniprogram/design

重点突出

流程明确

小程序可设计区域

后面我会讲解一个小程序适配的方法，这也是设计师可以控制的区域。

小程序可设计区域

顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。

2. 设计小程序时需要避免的坑，以及设计方法

在适配 2 端时，标题栏位置的文字保持了各端规范，安卓端保持在左侧，iOS 端在居中位置，且设计时，需注意 APP 中右上角功能与小程序右上角固定入口的冲突 （当然我发现也有一些安卓端小程序进行了定制设计）。

右上角的 icon 是全局性入口，不论你是在哪一级页面，它一直存在。

在做小程序时，遇到一个问题就在于微信要求产品必须直接进入产品，不得在打开小程序时就弹出获取用户信息的浮层，你可以发现大部分的产品在这里都是非前置获取，而是后置获取 (相关建议请查看以下链接)。

https://developers.weixin.qq.com/community/operate/doc

且微信的登录方式和 app 的登录方式及入口的「重量级」不同，因为小程序是基于微信的，所以在登录时，则是调起微信的登录浮层。

Airbnb APP 调用流程：

Airbnb 小程序调用流程：

避免交互过深，为了保持小程序轻量化，扁平化的特点。

发现大部分的产品，在设计中都保持了相对扁平和较浅的层次，比如哈啰出现，我们可以发现，APP 中有很多的服务入口而在小程序中精简了最核心的顺风车业务，在底部 tab 中只体现了 2 个入口，而 app 中有 4 个入口。