微信小程序是一款无需下载即可使用的微应用，也是一种应用创新。经过三年的发展，构建了全新的微信小程序开发环境和开发者生态。微信小程序也是这么多年能够真正影响中国互联网行业普通程序员的创新成果。因此，掌握微信小程序设计技巧和设计规范，也是产品经理的技能树之一。如果你没有系统的了解或者即将学习微信小程序设计规范的朋友，那么作者的这篇文章或许对你有所帮助。文章有点长。建议收藏后阅读。如果你觉得阅读对你有帮助，不要忘记给作者一些掌声作为鼓励。. 吧~

微信小程序是一种连接用户和服务的全新方式。可在微信中轻松获取和传播，用户体验极佳。

小程序提供简单高效的应用开发框架和丰富的组件和API，帮助开发者在微信中开发具有原生APP体验的服务。

针对微信小程序的活跃特点，小程序制定了小程序界面设计的指导方针和建议。设计指南建立在充分尊重用户的知情权和操作权的基础上。旨在在微信生态内建立友好、高效、一致的用户体验，同时最大程度地适应和支持不同的需求，实现用户与小程序服务商的共赢。

一、小程序概览

一个小程序页面包含以下内容：

为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径和文件名。

1、小程序的工作原理

首先我们简单了解一下小程序的运行环境。小程序的运行环境分为渲染层和逻辑层。WXML 模板和 WXSS 样式在渲染层工作展示版微信小程序开发教程，而 JS 脚本在逻辑层工作。

小程序的渲染层和逻辑层由两个线程管理：渲染层的接口使用接口渲染；逻辑层使用线程来运行 JS 脚本。一个小程序有多个接口，所以渲染层有多个线程。这两个线程之间的通信会通过微信客户端（也用来指下图的微信客户端）进行中继，逻辑层通过发送网络请求，小程序的通信模型如下图所示。

2、小程序精髓

所以小程序的编码方式其实是用前端语言编写的。从理解的角度来看，小程序可以看作是一个运行在微信浏览器容器中，从设计到组件都遵循一套WeUI规范的Web程序。

我们把微信客户端提供给小程序的环境称为宿主环境。借助宿主环境提供的能力，小程序可以实现很多普通网页无法实现的功能。为了让开发者能够方便的调用微信提供的能力，比如获取用户信息、微信支付等，小程序提供了很多API供开发者使用。需要注意的是，大部分API回调都是异步的，需要处理代码逻辑的异步问题。

3、WeUI页面元素的层次结构、层次顺序及组合规范

WeUI页面元素的层级、层级顺序和组合规范（从低到高）： , , Mask, 四层。预览地址

1）,

内容层：承载页面的主要内容。

2）,

导航层：位于内容层之上，当用户滑动内容层时可以保持位置不变。通常用于承载导航栏等需要固定在页面上的元素。

3），面具

掩蔽层：与层结合使用，锁定内容层和导航层操作，不能单独使用。

4）:

弹出层作为内容层和导航层的补充，用于承载弹出通知、操作菜单、菜单、成功或加载状态等弹出内容，并形成错误提示。

4、小程序运行机制

1），小程序启动

小程序启动有两种情况，一种是“冷启动”，一种是“热启动”。

热启动：如果用户已经打开了某个小程序，然后在一定时间内再次打开该小程序，此时无需重启，只需将后台的小程序切换到前台即可，此过程是一个温暖的开始；

冷启动：当用户第一次打开小程序或小程序被微信主动销毁后再次打开时，需要重新加载启动小程序，即冷启动。小程序没有重启的概念。

2），前台/后台状态

当用户点击右上角的胶囊按钮关闭小程序，或者按下设备的home键离开微信时，小程序并没有直接销毁，而是进入后台状态；

当用户再次进入微信或再次打开小程序时，小程序会再次从后台进入前台。

3），小程序销毁

需要注意的是，只有小程序进入后台一定时间，或者系统资源使用率过高，才会真正被破坏。

在iOS上，当微信客户端在一定的时间间隔内（目前为5秒）连续收到两次或两次以上的系统内存告警时，会主动销毁小程序并提示用户“此小程序可能导致微信响应，减速已终止” . 建议小程序使用 wx。必要时监视内存警报事件，并执行必要的内存清理。

5、小程序更新机制

1），未启动时更新

开发者在管理后台发布新版本小程序后，如果用户有本地历史版本的小程序，此时可能仍会打开旧版本。微信客户端会多次检查本地缓存的小程序是否有更新版本，如果有，会默默更新到新版本。一般来说，开发者在后台发布新版本后，并不能立即影响到所有现有网络用户，但最坏的情况是，新版本信息会在发布后24小时内分发给用户。下次用户打开时，会在打开前更新最新版本。

2），启动时更新

每次小程序冷启动时，都会检查是否有更新版本。如果发现新版本，会异步下载新版本代码包，并与客户端本地包同时启动，即新版本小程序需要等待。直到下一次冷启动才会应用。

如果您需要立即应用最新版本，您可以使用 wx.API 来处理它。

6、插件

插件是可以添加到小程序中并直接使用的功能组件。开发人员可以像开发供其他小程序使用的小程序一样开发插件。同时，小程序开发者可以直接在小程序中使用插件，无需重复开发，为用户提供更丰富的服务。

7、小程序会员管理

不同的项目成员拥有不同的权限，以确保小程序的安全有序开发。

二、开放接口和设备

三、小程序设计规范

1）焦点案例：每个页面都应该有一个清晰的焦点，这样用户每次进入新页面时都能快速了解页面内容。在确定关键点的前提下，尽量避免页面上其他与用户决策和操作无关的干扰因素。

2）清流程案例：为了让用户能够流畅的使用页面，当用户执行某个操作流程时，应避免用用户目标进程之外的内容打断用户。

3）异常状态-表单错误案例：表单报错，在表单顶部告知错误原因，并标识错误字段提示用户修改。

4）减少输入案例：由于手机键盘面积小而密，输入困难，容易造成输入错误。因此，在设计小程序页面时，应尽量减少用户输入，使用现有的界面或其他一些易于操作的控件来改善用户输入体验。

例如下图中，添加银行卡时，通过摄像头识别界面帮助用户输入。此外，微信团队还开放了地理位置界面等多种微信小程序界面。充分利用这些接口，将大大提高用户输入的效率和准确性，从而优化体验。

四、小程序基本设计1、小程序菜单深浅配色方案（iOS和）

在满足易用性的前提下，开发者可以在微信提供的小程序菜单中，在两组配色中选择合适的方案，以适应小程序页面的设计风格。

2、小程序菜单

小程序的所有页面，包括小程序内嵌的网页和插件，微信都会在右上角放置官方小程序菜单，样式如图。开发者无法自定义其内容，但可以选择深色和浅色两种基本配色方案，以适应页面设计风格。官方小程序菜单会放置在界面的固定位置。开发人员在设计界面时应在该区域预留空间。如果需要在该区域附近放置交互元素，则需要特别注意交互事件是否会发生冲突以及操作是否易于使用。.

3、品牌标志设计

小程序启动页是小程序在微信中一定程度上展示品牌特征的页面之一。此页面将突出显示小程序品牌特征和加载状态。除了在启动页面显示品牌标志（Logo）外，页面上的所有其他元素，例如加载进度指示，均由微信提供，未经开发者任何开发不得更改。

五、小程序导航与布局设计1、导航区与标题区

开发者可以根据自己的功能设计需求，在页面中添加自己的导航。并且保持不同页面之间的导航一致，指向清晰，有退路。由于手机屏幕尺寸的限制，小程序页面的导航应该尽量简单。建议开发者自己设计的导航样式与微信官方小程序菜单样式不同，以便区分。

2、标签导航

开发者可以在小程序页面中添加标签导航（Tab）。tab分页栏可以固定在页面的顶部或底部，方便用户在不同的分页之间切换。标签个数不小于2个，最大不超过5个。为保证点击区域，建议标签个数不超过4个。标签式分页栏也不能出现超过一组在一个页面上。

首页原生底部标签

其中，小程序首页可以选择微信提供的原生底部标签分页样式，仅用于小程序首页。开发过程中可以自定义图标样式、标签文字和文字颜色等。具体的图标大小等设置请参考开发文档和WeUI基础控件库。

顶部标签

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

3、页脚（组件）

六、小程序页面加载设计

加载反馈说明

如果加载时间较长，应提供取消操作，并使用进度条显示加载进度。

在加载过程中，要保持动画效果；没有动画效果的加载很容易给人一种界面卡住的错觉。

不要在同一页面上同时使用超过 1 个加载动画。

结果反馈

除了在用户等待时及时反馈外，还需要对操作结果进行清晰的反馈。根据实际情况，可选择不同的结果反馈方式。对于页面的本地操作，可以在操作区直接反馈，对于页面级的操作结果，可以通过弹出提示、模态对话框或者结果页面来展示。对于常用控件，微信设计中心会提供控件库，所有控件库都提供了完整的操作反馈。

1、开始页面加载

小程序启动页是小程序在微信中一定程度上展示品牌特征的页面之一。此页面将突出显示小程序品牌特征和加载状态。页面上的所有其他元素，例如加载进度指示器，均由微信提供。

2、页面下拉刷新加载

在微信小程序中，微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。

3、全局负载反馈

1）、使用标题栏提示加载小程序页面内容的过程

开发者可以参考图中的样式，使用标题栏来提示加载小程序页面内容的过程。例如：

2），模态加载

的加载样式会覆盖整个页面，使用时要谨慎，因为无法清楚地分辨出具体的加载位置或内容，可能会引起用户的焦虑。除某些全局操作外，请勿使用模态加载。

3），自定义页面内容的加载方式

开发者可以在小程序中自定义页面内容的加载方式。建议自定义加载样式尽可能简洁，无论是使用本地加载还是全局加载，并使用简单的动画来告知用户加载过程。

4），组件

4、部分加载

部分加载反馈是指只对页面触发加载的部分进行反馈。这种反馈机制更有针对性，页面跳动小。是微信推荐的反馈方式。例如：

七、小程序页面设计

小程序页面设计其实就是按照我们的业务设计，按照小程序设计规范和视觉规范，将小程序组件和我们自己设计的组件进行有序组合排版的过程。

1、小程序组件库

组件预览地址：设计组件库

2、 小程序视觉规范

1），字体大小

微信中字体的使用与运行的系统字体一致。常用的字体大小为 20、18、17、16、14、13、11(pt)。使用场景如下：

2），字体颜色

①、主色：

# # # # # RGB(9,187,7) RGB(53,53,53) RGB(136,136,136) RGB(87,107,149) RGB(230, 67,64)

②。主要内容为黑色，次要内容为灰色；表单的时间戳和默认值是灰色的；属于主要内容的大段的描述内容是半黑色的。

灰色半####

③。蓝色是链接颜色，绿色是完成字的颜色，红色是错误和状态的颜色。将透明度分别降低到 20% 和 10%。

(20%) (10%) # # #

3），列表

4），表格

5），按钮

6），图标

尺寸：100*100 像素

一般用于结果页的状态提示，根据结果的情况选择相应的图标。

7）小程序按钮

八、反馈设计-、操作反馈

1），图标弹出提示

图标式弹窗提示适用于轻量级的成功提示，1.5秒后自动消失，不中断进程，对用户影响不大。适用于不需要强调的操作提示，如成功提示。注意这种形式不适合错误提示，需要明确通知给用户，所以不适合使用闪过的弹窗提示。

2)，文字弹窗提示

文本类型的弹出提示适用于需要对当前状态或小错误进行轻量级文本解释的错误。1.5秒后自动消失，不中断进程，对用户影响不大。

3），模态对话框

需要用户清楚知道的操作结果的状态，可以通过模态对话框进行提示，并附上下一步的说明。

4），结果页面（非）

对于运行结果为当前流程结束的情况，可以通过运行结果页面进行反馈。这种方法最强烈、最清楚地告知用户操作已经完成，并可以根据实际情况对下一步操作给出指示

5），异常状态——表单错误（非）

表单报错，在表单顶部告知错误原因，并标识错误字段提示用户修改。

6），（对话）

7）,（弹出菜单）

IOS——

8）Half-（半屏组件）

9）（多列选择器）

10）,（弹出提示）

WEUI预览地址：预览地址

九、小程序数据分析1、功能概览

小程序数据分析是一款面向小程序开发者和运营者的数据分析工具，提供关键指标统计、实时访问监控、自定义分析等，帮助小程序产品迭代优化和运营。主要功能包括日常统计的标准分析和自定义分析，以满足用户的个性化需求。

1）词汇表

用户：根据判断使用过小程序的微信用户。

Page：小程序的页面，由页面路径表示，例如/list。

受访页面：用户访问的所有小程序页面都可以称为受访页面。

入口页面：用户打开小程序时首先进入的页面称为入口页面。比如用户从A页面进入小程序，跳转到B页面，其中A是入口页面，B不是。

退出页面：用户离开小程序时最后访问的页面称为退出页面。比如用户从A页面跳转到B页面，从B页面退出小程序，B是退出页面，A不是。

场景：用户打开小程序的方式，比如扫描二维码打开小程序，场景就是二维码。

访问：用户浏览小程序页面的行为。

添加：用户将小程序添加到“我的小程序”的行为。

分享：用户点击小程序内部或外部的菜单，与朋友分享小程序及其页面。

添加：用户第一次访问小程序页面，称为添加。

活跃：在一段时间内访问过小程序的用户称为活跃用户。

停留：从用户在小程序中打开页面到随着时间的推移主动关闭或退出小程序的过程。切换到后台、显示到聊天顶部或浮动窗口都不算留在小程序中。

留存：一定时间内的新用户或活跃用户，在一段时间后仍然使用小程序的，称为留存，区分新留存和活跃留存。

事件：自定义分析中用户行为数据收集和分析的模型，代表某种用户行为。

漏斗：一种数据分析模型，由自定义分析中的一系列事件组成，用于分析业务流程中每个步骤的用户转化和流失。

2）指标说明

①、访问

累计访问人数：历史上访问过小程序的累计用户数。同一用户的多次访问不计算在内。

新访客数：首次访问小程序页面的用户数。同一用户的多次访问不计算在内。

打开次数：小程序打开的总次数。从用户打开小程序到主动关闭或退出小程序的过程随着时间的推移计为一次。

访问次数：小程序页面的总访问次数。多个页面之间的跳转和对同一页面的重复访问被计为多次访问。

访问者数量：访问小程序页面的用户总数。同一用户的多次访问不计算在内。

人均停留时长：每个用户在小程序页面停留的平均总时长（以秒为单位），即总停留时间/访问人数。

平均停留时间：每次打开小程序在小程序页面停留的平均总时间（以秒为单位），即总停留时间/打开次数。

平均访问深度：每次打开小程序时访问的去重页面的平均数量。

月活跃用户：30天内访问过且当天访问过的用户。

无声回访用户：过去30天内未访问，90天内访问过（流失期为30-90天内），当日访问过的用户。

流失用户和回访用户：过去90天未访问，历史访问过（流失期超过90天），当天访问过的用户

②、分享

分享次数：小程序页面被分享的总次数。

分享数：小程序页面的分享总人数。同一用户多次分享不会被重复计算。

③、添加

新增用户总数：将小程序添加为“我的小程序”的用户总数（不包括已取消的用户数）。

新增数量：与前一天相比，“我的小程序”新增用户数量。

④、保持

新增留存：在指定时间添加用户（即第一次访问小程序）后第N天（或周或月）重访小程序的用户比例。

活跃留存：在指定时间处于活跃状态（即访问小程序），并在之后第N天（或周、月）再次访问小程序的用户比例。

⑤支付

累计支付金额：截至昨日，小程序内非无加密历史支付的整体累计金额。

支付次数：小程序中非免密支付成功的次数。

支付金额：小程序中非免密支付成功的总金额。

平均支付金额：小程序内每次免密支付的平均金额，即小程序内免密支付成功总金额/小程序内免密支付成功次数.

支付人数：小程序中非免密支付成功的次数。同一用户的多次付款不会被重复计算。

人均消费次数：用户在小程序内完成免密支付的平均支付次数，即小程序内免密支付成功次数/免密支付成功次数- 小程序中的免费付款。

首次支付人数：当日在小程序中首次完成支付的用户数。同一用户的多次付款不会被重复计算。

重复购买次数：非当天在小程序中首次完成支付的用户数。同一用户的多次付款不会被重复计算。

支付次数转化率：小程序内，完成非免密支付转化的小程序打开次数比例，即小程序内非免密支付成功次数/小程序中非免密支付成功次数小程序开放。

付费人转化率：小程序内完成免密支付转化的小程序用户比例，即小程序内免密支付成功次数/小程序数开瓶器。

⑥页面

(Page)：访问此页面的总次数。

访问者数量（页面）：访问该页面的用户总数。同一用户的多次访问不计算在内。

（页面）平均时间：每个用户访问页面的平均停留时间（以秒为单位），即页面的总停留时间/访问次数。

（页）入口页数：作为入口页访问该页面的次数。例如，如果用户从页面A进入小程序，则页面A的进入页面数为+1。

(Page) 退出页面数：作为退出页面访问该页面的次数。例如，如果用户从页面 B 退出小程序，则页面 B 上的退出页面数为 +1。

（页面）退出率：该页面的访问次数作为退出页面的比例，即退出页面数/访问次数。

(Page) ：页面被分享的总次数。

(Page) of ：分享页面的总人数。同一用户多次分享不会被重复计算。

2、一般分析

1）概览：提供小程序关键指标趋势和首页访问数据，快速了解小程序发展。例如下图：

2）访问分析：提供小程序用户的访问规模、来源、频率、时长、深度、留存、页面详情等数据，具体分析用户添加、活跃度、留存情况。例如下图

@​​>

3），实时统计：提供对小程序数据的实时访问，满足实时监控需求。例如下图

4），用户画像：提供小程序的用户画像数据，包括用户年龄、性别、地域、终端、机型分布。例如下图：

3、自定义分析

自定义分析支持灵活、多维和近实时的用户行为分析。可以通过自定义报表精细化跟踪用户在小程序中的行为，满足页面访问量等标准统计以外的个性化分析需求。例如，一个电商小程序可以通过配置自定义报表和收集数据来完成以下分析：

按省份、城市、年龄和性别划分的购买商品的人群分布情况如何？不同用户群体购买的商品数量和价格有何差异？

用户访问产品页面、查看产品详情、查看评论、下单、支付、完成购买时的渐进转化率是多少？

不同用户群的转化是否存在差异？

用户今天在每个时间段（每小时级别）参与在线活动的活跃程度如何？

登录，进入“数据分析”-“自定义分析”-“事件管理”，点击“新建事件”。具体配置步骤请参考官方文档。

4、小程序助手

“小程序数据助手”是微信公众平台发布的官方小程序。支持相关开发者和运营商查看自己小程序的运行数据。扫描下方小程序码，即刻体验。前提是你的微信账号是小程序管理员或运营商，才能登录体验。

“小程序数据助手”目前的功能模块包括数据概览、基础访问分析（用户趋势、来源分析、留存分析、时长分析、页面详情）、实时统计和用户画像（年龄、性别、省市） ，终端型号），数据与小程序后台常规分析一致。

十、云开发

开发者可以使用云开发开发微信小程序和小游戏，无需搭建服务器即可使用云能力。

云开发为开发者提供完整的原生云支持和微信服务支持，弱化后端和运维的概念，不需要搭建服务器，使用平台提供的API进行核心业务开发，可以实现快速启动和迭代。同时，这种能力与开发人员已经使用的云服务兼容，但不相互排斥。

云开发提供了几个基础能力支持：

能力描述云功能不需要自建服务器在云中运行代码。微信的私有协议自然是经过认证的。开发者只需要编写自己的业务逻辑代码。数据库不需要建数据库。国内可读写的JSON数据库存储，无需自建存储和CDN，直接在小程序前端上传/下载云文件，在云开发控制台可视化管理云调用。，包括服务器端调用、访问开放数据等能力

十个一、扩展

该小程序是开源的，weui-wxss、weui.js和-weui等，您可以使用它们来设计和开发网页，并且可以在任何浏览器中运行。weui 在 Git 上的地址：WEUI

总结

本文主要总结了微信小程序的工作机制、设计规范和数据分析相关内容。由于作者水平有限，文章难免有遗漏和错误。请大家指正，一起交流学习，一起进步。欢迎关注个人公众号：孟冬初寒月。