微信小程序是一种不用下载就能使用的微应用，也是一项应用创新发明，经过三年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国互联网行业里一个真正能够影响到普通程序员的创新成果，那么，掌握微信小程序设计技能和设计规范也是产品经理的技能树之一，如果没有系统了解或即将学习微信小程序的设计规范的小伙伴，那么笔者这篇文章可能对你有一定的帮助，文章有点长，建议收藏后阅读，如果觉得阅后有益的话，别忘了给笔者来点掌声作为鼓励哈。enjoy吧~
微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。
基于微信小程序轻快的特点，小程序拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。
一、小程序概述
一个小程序页面组成，如下：
为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
1、小程序的工作原理
首先，我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。
2、小程序的本质
所以，小程序的编码方式实际上是使用前端的语言进行编写的。从理解的角度，小程序可以认为是运行在微信的浏览器容器中，遵从了一套从设计到组件的WeUI规范，的Web程序。
我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。
3、WeUI页面元素所属层级、层级顺序及组合规范
WeUI页面元素所属层级、层级顺序及组合规范（低到高）：Content、Navigation、Mask、Popout四层。预览地址
1）、****Content
内容层：承载页面主要内容。
2）、****Navigation
导航层：位于内容层之上，在用户滑动内容层时可保持位置不动，通常用于承载导航栏等需要固定在页面的元素。
3）、****Mask
蒙层：配合Popout层使用，用于锁定内容层和导航层操作，不单独使用。
4）：****Popout
弹出层，作为内容层和导航层的补充，用于承载弹窗通知、操作菜单、菜单、成功或加载中等状态的Toast，表单报错提示等弹出内容。
4、小程序运行机制
1）、小程序启动
小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。
热启动：假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台的小程序切换到前台，这个过程就是热启动；
冷启动：用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，即冷启动。
小程序没有重启的概念。
2）、前台/后台状态
当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有直接销毁，而是进入了后台状态；
当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。
3）、小程序销毁
需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。
- 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）小程序会被微信主动销毁。
- 当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。
在 iOS 上，当微信客户端在一定时间间隔内（目前是 5 秒）连续收到两次及以上系统内存告警时，会主动进行小程序的销毁，并提示用户 「该小程序可能导致微信响应变慢被终止」。建议小程序在必要时使用wx.onMemoryWarning 监听内存告警事件，进行必要的内存清理。
5、小程序更新机制
1）、未启动时更新
开发者在管理后台发布新版本的小程序之后，如果某个用户本地有小程序的历史版本，此时打开的可能还是旧版本。微信客户端会有若干个时机去检查本地缓存的小程序有没有更新版本，如果有则会静默更新到新版本。总的来说，开发者在后台发布新版本之后，无法立刻影响到所有现网用户，但最差情况下，也在发布之后 24 小时之内下发新版本信息到用户。用户下次打开时会先更新最新版本再打开。
2）、启动时更新
小程序每次冷启动时，都会检查是否有更新版本，如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。
如果需要马上应用最新版本，可以使用 wx.getUpdateManager API 进行处理。
6、插件
插件，是可被添加到小程序内直接使用的功能组件。开发者可以像开发小程序一样开发一个插件，供其他小程序使用。同时，小程序开发者可直接在小程序内使用插件，无需重复开发，为用户提供更丰富的服务。
7、小程序成员管理
不同项目成员拥有不同的权限，从而保证小程序开发安全有序。
二、开放接口与设备
三、小程序设计规范
1）重点突出案例:每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下，应尽量避免页面上出现其它与用户的决策和操作无关的干扰因素。
2）流程明确案例:为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。
3）异常状态——表单出错案例：表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。
4）减少输入案例:由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时应尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。
例如下图中，在添加银行卡时，采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 ，充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。
四、小程序基础设计
1、小程序菜单深浅配色方案（iOS和Android）
开发者可在满足可用性的前提下，从微信提供的深浅两套配色的小程序菜单中选择合适的方案，以适应小程序页面设计风格。
2、小程序菜单
小程序的所有页面，包括小程序内嵌网页和插件，微信都会在其右上角放置官方小程序菜单，样式如图。开发者不可对其内容自定义，但可选择深浅两种基本配色以适应页面设计风格。 官方小程序菜单将放置在界面固定位置，开发者在设计界面时请预留出该区域空间，若需要在此区域附近放置可交互元素，要特别注意交互事件是否会冲突，操作是否容易被使用。
3、品牌标志（Logo）设计
小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志（Logo）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。
五、小程序导航与布局设计
1、导航区域与标题区域
开发者可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致，指向清晰，有路可退。受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单。建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异，以便区分。
2、标签分页（Tab）导航
开发者可为小程序页面添加标签分页（Tab）导航。标签分页栏可固定在页面顶部或者底部，便于用户在不同的分页间做切换。标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。
首页****原生底部标签
其中小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等，具体设置项如图标尺寸等参考可参考开发文档和WeUI基础控件库。
顶部标签
顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。
3、页脚（Footer组件）
六、小程序页面加载设计
加载反馈注意事项
若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。
不要在同一个页面同时使用超过1个加载动画。
结果反馈
除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。根据实际情况，可选择不同的结果反馈样式。对于页面局部的操作，可在操作区域予以直接反馈，对于页面级操作结果，可使用弹出式提示、模态对话框或结果页面展示。对于常用控件，微信设计中心将提供控件库，其中的控件都已提供完整操作反馈。
1、启动页加载
小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。页面上的其他所有元素如加载进度指示，均由微信统一提供。
2、页面下拉刷新加载
在微信小程序内，微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。
3、全局加载反馈
1）、****使用标题栏提示加载小程序页面内容的过程
开发者可以参考图中样式，使用标题栏提示加载小程序页面内容的过程。例如：
2）、****模态加载
模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。
3）、****自定义页面内容的加载样式
开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。
4）、Loadmore组件
4、局部加载
局部加载反馈即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。例如：
七、小程序页面Content设计
小程序页面Content设计，实际上就是依据我们的业务设计，将小程序组件和我们自己设计的组件，按照小程序设计规范与视觉规范有序的组合和排版的过程。
1、小程序组件库
组件预览地址：设计组件库
2、小程序视觉规范
1）、****字体大小
微信内字体的使用与所运行的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 11(pt)，使用场景具体如下：
2）、字体颜色
①、主要颜色：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">#09BB07 #353535 #888888 #576b95 #e64340 RGB(9,187,7) RGB(53,53,53) RGB(136,136,136) RGB(87,107,149) RGB(230,67,64)</pre>
②、主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明内容而且属于主要内容用 Semi 黑。
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">Light Gray Semi Black #b2b2b2 #888888 #353535 #000000</pre>
③、蓝色为链接用色，绿色为完成字样色，红色为出错用色 Press 与 Disable 状态分别降低透明度为20%与10%。
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">Naormal Press（20%） Disabled（10%） #576b95 #09BB07 #e64340</pre>
3）、列表
4）、表单
5）、按钮
6）、图标
尺寸：100*100 pX
一般用于结果页面状态提示，根据结果的情况选择对应的 icon。
7）小程序titlebar按钮
八、反馈设计-Popout
1、操作反馈
1）、****图标型弹出提示
图标型弹出提示适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示。
2)、文字型弹出提示
文字型弹出提示适用于需要轻量化地用文字解释当前状态或提醒不严重的错误。1.5秒后自动消失，不打断流程，对用户影响较小。
3）、模态对话框
对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作指引。
4）、结果页（非Popout）
对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。
5）、异常状态——表单出错****（非Popout）
表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。
6）、Dialog（对话框）
7）、ActionSheet（弹出式菜单）
IOS-ActionSheet Android-ActionSheet
8）****Half-screen Dialog（半屏组件）
9）Picker（多列选择器）
10）、Toast（弹窗式提示）
WEUI预览地址：预览地址
九、小程序数据分析
1、功能概述
小程序数据分析，是面向小程序开发者、运营者的数据分析工具，提供关键指标统计、实时访问监控、自定义分析等，帮助小程序产品迭代优化和运营。主要功能包括每日例行统计的标准分析，以及满足用户个性化需求的自定义分析。
1）名词解释
用户：使用过小程序的微信用户，根据openid来判断。
页面：小程序的页面，以页面路径表示，如index, product/list。
受访页：用户访问的所有小程序页面均可称为受访页。
入口页：用户打开小程序时首先进入的页面称为入口页，例如用户从页面A进入小程序，跳转到页面B，A为入口页，B不是。
退出页：用户离开小程序时最后访问的页面称为退出页，例如用户从页面A跳转到页面B，从页面B退出小程序，B为退出页，A不是。
场景：用户打开小程序的方式，如通过扫描二维码打开小程序，场景为二维码。
访问：用户浏览小程序页面的行为。
添加：用户将小程序添加到“我的小程序”的行为。
分享：用户点击小程序内或小程序外菜单，将小程序及其页面分享给好友的行为。
新增：用户首次访问小程序页面，即称为新增。
活跃：用户在一段时间内访问过小程序即称为活跃。
停留：用户从打开小程序内页面，到主动关闭或超时退出小程序的过程。切换到后台、显示到聊天顶部或浮窗，均不算停留在小程序。
留存：某个时间段内新增或活跃的用户，经过一段时间后仍然使用小程序，即称为留存，区分新增留存和活跃留存。
事件：自定义分析中进行用户行为数据收集和分析的模型，表示某个用户行为。
漏斗：自定义分析中由一系列事件组成的数据分析模型，用于分析业务流程中每个步骤的用户转化与流失。
2）指标解释
①、访问
累计访问人数：历史累计访问小程序的用户数，同一用户多次访问不重复计。
新访问人数：首次访问小程序页面的用户数，同一用户多次访问不重复计。
打开次数：打开小程序的总次数。用户从打开小程序到主动关闭或超时退出小程序的过程，计为一次。
访问次数：访问小程序页面的总次数。多个页面之间跳转、同一页面的重复访问计为多次访问。
访问人数：访问小程序页面的总用户数，同一用户多次访问不重复计。
人均停留时长：平均每个用户停留在小程序页面的总时长（单位为秒），即总停留时长/访问人数。
次均停留时长：平均每次打开小程序停留在小程序页面的总时长（单位为秒），即总停留时长/打开次数。
平均访问深度：平均每次打开小程序访问的去重页面数。
月活跃用户：30天内有访问行为，且当天访问的用户。
沉默回流用户：在过去30天内无访问，90天内有访问（流失期在30~90天内），且当天访问的用户。
流失回流用户：在过去90天内无访问，历史上有访问（流失期在90天以上），且当天访问的用户。
②、分享
分享次数：分享小程序页面的总次数。
分享人数：分享小程序页面的总人数，同一用户多次分享不重复计。
③、添加
总添加人数：历史累计将小程序添加为“我的小程序”的总用户数（去除已取消添加人数）。
新添加人数：昨日较前日相比，新增添加到“我的小程序”的用户数 。
④、留存
新增留存：指定时间新增（即首次访问小程序）的用户，在之后的第N天（或周、月），再次访问小程序的用户数占比。
活跃留存：指定时间活跃（即访问小程序）的用户，在之后的第N天（或周、月），再次访问小程序的用户数占比。
⑤支付
累计支付金额：截止至昨日，小程序历史非免密支付总体累计金额。
支付笔数：小程序内非免密支付成功次数。
支付金额：小程序内非免密支付成功总金额。
单均支付金额：小程序内每笔非免密支付的平均金额，即小程序内非免密支付成功总金额/小程序内非免密支付成功次数。
支付人数：小程序内非免密支付成功人数，同一用户多次支付不重复计算。
人均消费次数：小程序内完成非免密支付用户的平均支付次数，即小程序内非免密支付成功次数/小程序内非免密支付成功人数。
首次支付人数：当日首次在小程序内完成支付的用户数，同一用户多次支付不重复计算。
复购人数：非当日首次在小程序内完成支付的用户数，同一用户多次支付不重复计算。
支付次数转化率：在小程序内，完成非免密支付转化的小程序打开次数占比，即小程序内非免密支付成功次数/小程序打开次数。
支付人数转化率：在小程序内，完成非免密支付转化的小程序用户数占比，即小程序内非免密支付成功人数/小程序打开人数。
⑥页面
（页面）访问次数：访问该页面的总次数。
（页面）访问人数：访问该页面的总用户数，同一用户多次访问不重复计。
（页面）次均时长：用户平均每次访问该页面的停留时长（单位为秒），即该页面的总停留时长/访问次数。
（页面）入口页次数：该页面作为入口页的访问次数，例如一用户从页面A进入小程序，则页面A的入口页次数+1。
（页面）退出页次数：该页面作为退出页的访问次数，例如一用户从页面B退出小程序，则页面B的退出页次数+1。
（页面）退出率：该页面作为退出页的访问次数占比，即退出页次数/访问次数。
（页面）分享次数：分享该页面的总次数。
（页面）分享人数：分享该页面的总人数，同一用户多次分享不重复计。
2、常规分析
1）概况：提供小程序关键指标趋势以及top页面访问数据，快速了解小程序发展概况。例如下图：
2）访问分析：提供小程序用户访问规模、来源、频次、时长、深度、留存以及页面详情等数据，具体分析用户新增、活跃和留存情况。例如下图
3）、实时统计：提供小程序实时访问数据，满足实时监控需求。例如下图
4）、用户画像：提供小程序的用户画像数据，包括用户年龄、性别、地区、终端及机型分布。例如下图：
3、自定义分析
自定义分析支持灵活多维和近实时的用户行为分析，可以通过自定义上报，对用户在小程序内的行为做精细化跟踪，满足页面访问等标准统计以外的个性化分析需求。例如，电商类小程序通过配置自定义上报，收集数据，可以完成如下分析：
购买商品的人，各省份、城市、年龄、性别的分布如何？不同用户群购买的商品数量、商品价格有什么差别？
用户访问商品页、查看商品详情、查看评论、下单、支付、完成购买，逐步的转化率如何？
不同用户群的转化是否有差异？
今天参与线上活动的用户，各个时段（小时级）的活跃度如何？
登录https://mp.weixin.qq.com，进入“数据分析” – “自定义分析” - “事件管理”，点击 “新建事件”。具体配置步骤可参考官方文档。
4、小程序助手
“小程序数据助手”是微信公众平台发布的官方小程序，支持相关的开发和运营人员查看自身小程序的运营数据，扫描下面小程序码可立即体验。前提是你的微信账户是小程序管理员或者运营者才可登录体验。
“小程序数据助手”当前功能模块包括数据概况、访问基础分析（用户趋势、来源分析、留存分析、时长分析、页面详情）、实时统计和用户画像（年龄性别、省份城市、终端机型），数据与小程序后台常规分析一致。
十、云开发
开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。
云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
云开发提供了几大基础能力支持：
<colgroup><col span="1" width="95"><col span="1" width="189"><col span="1" width="450"></colgroup>
| 能力 | 作用 | 说明 |
|---|---|---|
| 云函数 | 无需自建服务器 | 在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码 |
| 数据库 | 无需自建数据库 | 一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库 |
| 存储 | 无需自建存储和 CDN | 在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理 |
| 云调用 | 原生微信服务集成 | 基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力 |
十一、拓展
小程序开源了，weui-wxss、weui.js和react-weui等，可以使用他们进行Web页面的设计与开发，它可以运行在任何浏览器中。weui在Git上的地址：WEUI
总结
本文主要总结了微信小程序的工作机制、设计规范以及数据分析相关的内容，因笔者水平有限，文中难免会存在疏漏、错误的地方，欢迎大家指正，一起沟通学习、共同进步。欢迎关注个人公众号：孟冬初寒月。
