掌握微信小程序设计技能和设计规范也是一种不用下载就能使用的微应用

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

掌握微信小程序设计技能和设计规范也是一种不用下载就能使用的微应用

本文由作者孟冬初寒月发表于社区

这篇文章比较长，建议收藏

微信小程序是一款无需下载即可使用的微应用程序。 这也是一项创新的应用发明。 经过三年的发展，构建了全新的微信小程序开发环境和开发生态系统。 小程序也是中国互联网行业多年来真正能够影响普通程序员的创新成果。

那么，掌握微信小程序设计技巧和设计规范也是产品经理的技能树之一。

微信小程序是连接用户和服务的全新方式。 在微信内可以轻松获取和传播，具有良好的用户体验。

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

针对微信小程序轻快的特点，小程序制定了界面设计指南和建议。 设计准则以充分尊重用户的知情权和操作权为基础。 旨在在微信生态内建立友好、高效、一致的用户体验微信小程序在线制作，同时*大限度地适应和支持不同的需求，实现用户和小程序服务提供商的双赢。

小程序概述

一个小程序页面由以下几部分组成：

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

1、小程序工作原理

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

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

2.小程序的本质

因此，小程序的编码方式实际上是使用前端语言来编写的。 从理解的角度来看，小程序可以认为是运行在微信浏览器容器中的网页程序，从设计到组件都遵循一套WeUI规范。

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

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

WeUI页面元素的级别、级别顺序及组合规范（从低到高）：、、Mask，四个级别。

预览地址：#

1）

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

2）

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

3)面膜

遮蔽层：与图层配合使用，用于锁定内容层和导航层操作，不单独使用。

4）

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

4、小程序运行机制

1）小程序启动

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

热启动：如果用户已经打开过一个小程序，然后在一定时间内再次打开该小程序，此时不需要重启，只需要将后台小程序切换到前台即可。 这个过程是热启动；

冷启动：当用户**次打开小程序或者被微信主动销毁后再次打开时，需要重新加载并启动小程序，即冷启动。

小程序没有重启的概念。

2）前台/后台状态

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

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

3）小程序销毁

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

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

5、小程序更新机制

1）未启动时更新

开发在管理后台发布新版本的小程序后，如果用户本地有历史版本的小程序，此时仍可能打开旧版本。 微信客户端将有多次机会检查本地缓存的小程序是否有更新版本。 如果是这样，它将默默更新到新版本。

一般来说，开发在后台发布新版本后，并不能立即影响所有现有网络用户，但*坏的情况下，新版本信息会在发布后24小时内分发给用户。 用户下次打开时，会先更新*新版本再打开。

2）启动时更新

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

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

6. 插件

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

7.小程序会员管理

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

开放接口和设备

小程序设计规范

1）突出案例

每个页面应该有明确的焦点，以便用户每次进入新页面时都能快速理解页面内容。 在确定重点的前提下，应尽量避免页面上出现其他与用户决策和操作无关的干扰因素。

2）流程清晰的案件

为了让用户能够顺利地使用页面，当用户在执行某个操作过程时，应该避免用户目标过程之外的内容打断用户。

3）异常状态——表单错误情况

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

4）减少输入案例

由于手机键盘面积小且密集，输入困难，容易造成输入错误。 因此，在设计小程序页面时，应尽量减少用户输入，并利用现有的界面或其他易于操作的选择控件来改善用户输入体验。

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

小程序基础设计

1.小程序菜单的深浅配色方案（iOS及）

开发可以在满足易用性的前提下，从微信提供的小程序菜单中选择合适的深浅色两套方案掌握微信小程序设计技能和设计规范也是一种不用下载就能使用的微应用，以适应小程序页面设计风格。

2.小程序菜单

在小程序的所有页面上，包括小程序内嵌的网页和插件，微信都会将官方小程序菜单放置在右上角，如图所示。

开发无法自定义内容，但可以选择深色和浅色两种基本颜色，以适应页面设计风格。 官方小程序菜单将放置在界面固定位置。 开发在设计界面时应在该区域预留空间。 如果需要在该区域附近放置交互元素，请特别注意交互事件是否会发生冲突以及操作是否易于使用。 。

3、品牌标志设计

小程序启动页是微信小程序在一定程度上展现品牌特征的页面之一。 该页面将突出显示小程序品牌特征和加载状态。 除启动页上显示品牌标志外，页面上的所有其他元素，例如加载进度指示器，均由微信统一提供，无法更改，不需要开发开发。

小程序导航及布局设计

1. 导航区和标题区

开发可以根据自己的功能设计需求，在页面中添加自己的导航。 并保持不同页面之间的导航一致，具有清晰的方向和返回路径。 由于手机屏幕尺寸的限制，小程序页面的导航应尽可能简单。 建议开发自己的导航风格与微信官方小程序菜单风格保持一定的区别，以方便区分。

2. 标签导航

开发可以为小程序页面添加标签导航。 标签分页栏可以固定在页面顶部或底部，方便用户在不同标签之间切换。 标签数量不少于2个，*大不超过5个。为保证可点击面积，建议标签数量不要超过4个。 一个页面不应有超过一组选项卡式分页栏。

首页原生底部标签

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

顶部标签

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

3.页脚（组件）

小程序页面加载设计

加载反馈注意事项

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

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

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

结果反馈

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

1. 开始页面加载

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

2.下拉页面刷新加载

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

3.全局加载反馈

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

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

2）模态加载

模态加载样式将覆盖整个页面。 由于无法明确告知具体加载位置或内容，可能会引起用户焦虑，因此应谨慎使用。 除某些全局操作外，请勿使用模态加载。

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

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

4) 组件

4. 部分加载

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

小程序页面设计

小程序页面设计实际上是根据我们的业务设计，按照小程序设计规范和视觉规范，对小程序组件和我们自己设计的组件进行有序组合和布局的过程。

1.小程序组件库

组件预览地址：

2.小程序视觉规范

1) 字体大小

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

2) 字体颜色

①主色：

#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)

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

Light        Gray          Semi         Black
#b2b2b2      #888888       #353535      #000000

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

Naormal    Press（20%）    Disabled（10%）
#576b95
#09BB07
#e64340

3）列表

4) 表格

5) 按钮

6) 图标

尺寸：100*100像素

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

7）小程序按钮

反馈设计-

1. 操作反馈

1）图标式弹出提示

图标式的弹窗提示适合轻量级的成功提示。 它们会在1.5秒后自动消失，不中断过程，对用户影响很小。 适合不需要强调的操作提醒，比如成功提示。 特别注意的是，这种形式不适合错误提示，因为错误提示需要明确告知用户，所以不适合使用一闪而过的弹出提示。

2）文字弹出提示

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

3）模态对话框

模态对话框可以用来提示用户需要清楚了解的操作结果的状态，并可以附有下一步操作指导。

4）结果页（不）

对于操作结果为当前流程结束的情况，您可以通过操作结果页面进行反馈。 这种方法是告知用户操作已经完成的*有力、*明确的方式，并且可以根据实际情况为下一步操作提供指导。

5）异常状态——表单错误（不是）

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

6) (对话框)

7) （弹出菜单）

iOS 对比

8) Half-（半屏组件）

9) (多列选择器)

10）Toast（弹出提示）

小程序数据分析

1. 功能概述

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

1) 术语解释

用户：使用过小程序微信用户，据此判断。

Page：小程序的页面，用页面路径表示，如index、/list。

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

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

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

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

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

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

分享：用户点击小程序内或小程序外的菜单，将小程序及其页面分享给好友。

新增：用户**次访问小程序页面称为新增。

活跃：一段时间内访问过小程序用户被视为活跃。

Stay：从用户打开小程序内的页面到主动关闭或超时退出小程序的过程。 切换到后台、显示到聊天顶部或悬浮窗等均不算停留在小程序中。

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

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

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

2）指标说明

①访问

累计访问量：历史上累计访问过小程序的用户数。 同一用户多次访问不会重复统计。

新访客数：首次访问小程序页面的用户数。 同一用户多次访问不会重复统计。

打开次数：小程序被打开的总次数。 从用户打开小程序到主动关闭或超时退出小程序过程计为1次。

访问次数：小程序页面的总访问次数。 多个页面之间的跳转以及同一页面的重复访问均算作多次访问。

访问人数：访问小程序页面的用户总数。 同一用户多次访问不会重复统计。

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

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

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

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

沉默回访用户：过去30天内未访问过、90天内访问过（流失期在30~90天内）、当天访问过的用户。

流失和回访用户：过去90天内未访问过的用户、过去访问过的用户（流失期超过90天）、当天访问过的用户。

②分享

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

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

③添加

添加用户总数：历史添加小程序为“我的小程序”的用户总数（不包括取消添加的用户数）。

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

④保留

新留存：指定时间点新增用户（即首次访问小程序）占此后第N天（或周、月）再次访问小程序的用户数的比例。

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

⑤付款方式

累计支付金额：截至昨日，小程序历史非免密支付累计金额总和。

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

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

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

支付次数：小程序内非免密支付成功次数。 同一用户多次付款不会重复统计。

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

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

重复购买次数：当日未在小程序中首次完成支付的用户数量。 同一用户多次付款不会重复统计。

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

支付人数转化率：小程序内完成非免密支付转化的小程序用户数占比，即小程序内非免密支付成功次数/打开小程序的人数。

⑥页码

访问次数：该页面的总访问次数。

访问者数量：访问该页面的用户总数。 同一用户多次访问不会重复统计。

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

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

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

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

分享次数：该页面被分享的总次数。

共享人数：共享该页面的总人数。 同一用户多次分享不会重复统计。

2、常规分析

1）概述

提供小程序关键指标趋势和首页访问数据，快速了解小程序发展概况。 比如下面这张图：

2）访问分析

提供小程序用户访问规模、来源、频次、时长、深度、留存、页面详情等数据，提供新用户新增、活跃、留存等详细分析。例如下图

3）实时统计

提供小程序实时访问数据，满足实时监控需求。例如下图

4）用户画像

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

3. 定制分析

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

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

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

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

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

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

4.小程序助手

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

The of " 小程序 Data " data , basic (user , , , , page ), real-time and user (age and , and city, model), The data is with the in the 小程序 .

10

Cloud 开发

开发 can use cloud 开发 开发 小程序 and games, and can use cloud up a .

Cloud 开发 开发 with cloud and , the back-end and and . There is no need to build a . Using the API by the for core 开发 can rapid and . At the same time, this , are with the cloud used by 开发 and are not .

Cloud 开发 basic :

能力

影响

阐明

Cloud

No need to build your own

Code in the cloud is by , and 开发 only need to write their own logic code

数据库

No need to build your own

可在小程序前端操作并可在云函数中读写的JSON数据库

贮存

No need to build your own and CDN

/ cloud files on the front end 小程序 , and them in the cloud 开发

Cloud call

The to use the open of 小程序 based on cloud , -side calls, to open data, etc.

小程序 are open , such as weui-wxss, weui.js, react-weui, etc. You can use them to and 开发 Web pages, and they can run in any .

Weui's on Git:

总结

This the , and data of 小程序 . The 's level is , and there will be and in the . is to me, and learn , and make .

------Text line------

点击“寻找”

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等