从零完成一套微信小游戏界面：果园配对实战
编写与来源核查日期：2026-10-31。本实战只讨论微信小游戏，采用原创教学项目“果园配对”。先读视觉设计基础，再按本章各阶段制作自己的设计文件。
本章提供需求、参数、流程图、六组界面示意、状态表、原型连线方案和交付模板，并配有可交互的果园配对演示。先亲自翻牌、暂停、通关或失败重玩，再对照下文拆解设计。静态 SVG 仍可下载或导入设计工具继续编辑；浏览器演示不是微信小游戏工程、Figma 文件或微信实机案例。
先体验一局
正常模式每局随机洗牌，4 × 4 卡牌、8 对水果、24 次机会；第一张不扣机会，第二张接受后扣一次，比较期间不接收第三张。暂停保留牌面，返回首页前确认，通关或失败后都可以重开完整一局。侧栏的“最后一对”“最后一次机会”预置临界局面，仍需要自己翻牌触发胜负。
浏览器切换标签页会结算已接受的比较并暂停，回到页面后主动继续；这只演示中断恢复的设计意图，不能证明微信前后台事件已集成。本次演示未接入真实广告、复活奖励、网络加载或跨刷新存档；这些分支继续按本文方案在实际微信工程中验证。
1. 写清楚这次要完成什么
玩家任务：翻开两张卡片，记住水果的位置，在机会耗尽前完成全部配对。目标是让第一次接触本玩法的玩家理解规则、完成一局，并能处理失败和中断。
1.1 先固定规则，避免界面各自发明逻辑
| 项目 | 本次设计约定 |
|---|---|
| 牌组 | 4 × 4，共 16 张；八种水果各两张；新一局重新洗牌 |
| 初始资源 | 每局 24 次机会，不设计时器、金币或体力 |
| 一次机会 | 翻开两张不同且未配对的牌，完成比较后扣 1；匹配与不匹配都扣 |
| 牌面反馈 | 相同则保持翻开并标记；不同则短暂停留后盖回；比较期间不收第三张 |
| 胜负顺序 | 先结算本次配对，再检查是否完成八对；完成即胜，否则机会为 0 才进入失败 |
| 复活 | 本局最多成功复活一次；完整观看激励广告并确认奖励后增加 6 次机会，保留棋盘 |
| 放弃／重玩 | 重玩恢复 24 次并洗牌；返回首页清空本局，操作前说明后果 |
| 中断 | 主动暂停或微信切后台后保留本次会话棋盘，返回需主动继续；进程销毁后的断点恢复不在本次练习范围 |
“暂停保留”不等于已经实现跨进程存档。实际产品若承诺再次进入继续上局，必须另行设计持久化、版本迁移及损坏处理。复活也属于产品方案，广告开通条件与当前平台运营规则应由实际项目核对，本章不承诺每个项目都能接入。
1.2 六组界面和完成标准
本次交付：首页／规则、局内、暂停／退出确认、通关、失败／复活、加载／异常。最后一组含首开资源失败、广告准备中和暂无广告等变体，不应只画一张理想状态。
完成标准是别人能按你的文件回答：每屏做什么、点哪里、点完去哪、失败怎么办、窗口变了怎么排。不要把“画完六张图”当作全部完成。
2. 画出一局的所有去向
| 当前状态 | 触发 | 下一状态与保留内容 |
|---|---|---|
| 首页 | 开始配对 | 资源准备；按钮改为加载态，防止连点 |
| 资源准备 | 成功／失败 | 成功进入新棋盘；失败留在加载页，可重试或回首页 |
| 局内 | 翻开一张 | 保留牌面，不扣机会；再次点同一张无效 |
| 局内 | 翻开第二张 | 比较并扣 1，更新进度，按规则判胜负 |
| 局内 | 暂停或切后台 | 完成已接受的比较后进入暂停；未完成比较的单张牌保留 |
| 暂停 | 继续 | 回原棋盘和机会数；不自动接收暂停前未释放的触摸 |
| 暂停 | 返回首页 | 打开退出确认；取消回暂停，确认清空本局回首页 |
| 通关 | 再玩一局／回首页 | 新局为 24 次并洗牌；回首页不保留已完成局 |
| 失败，未复活 | 普通重玩／看广告继续 | 重玩新局；广告按结果进入复活或原失败状态 |
| 失败，已复活 | 重玩／回首页 | 不再显示广告复活入口 |
对“比较后恰好用完最后一次机会”补一条例子：当 已配对 = 7/8、剩余 = 1，最后两张相同，应进入通关而非失败。把这条写在流程图旁，设计稿与程序才不会分别解释。
阶段产出：流程图、规则表、每个界面的任务卡。用布局评审清单第一阶段检查是否漏掉返回和中断。
3. 先做线框，确定棋盘和系统边界
使用 750 × 1334 设计坐标，从上到下画：系统避让带、关卡与暂停、机会／进度、棋盘、简短规则、底部留白。原型中假设顶部保留 120、底部保留 48 作为绘图占位；实际避让必须使用微信返回的数据，不能写死这两个数值上线。
| 局内部件 | 参考位置或尺寸，均为设计单位 | 目的 |
|---|---|---|
| 内容左右边距 | 48 | 标题、信息条、棋盘共用边线 |
| 顶部关卡行 | y = 136，行高 80；暂停热区 88 × 88 | 关卡身份与暂停放在胶囊避让带之下 |
| 信息块 | y = 248，高 112 | 左侧剩余机会，右侧配对进度 |
| 棋盘 | x = 48，y = 400，宽高 654 | 完整保留 4 × 4，不裁掉边缘卡牌 |
| 卡牌／间隙 | 151.5 × 151.5／16 | 对应基础篇的宽度计算 |
| 底部说明 | y = 1102 起，最多两行 | “翻开两张相同水果，完成 8 对”；不挤占棋盘 |
暂停、机会和棋盘之间保留间隔，避免玩家翻牌时点到暂停。首页只保留游戏名、玩法说明、开始按钮和规则入口；没有成长系统就不虚构金币条、商店和每日签到。
短屏时如何重排
设计坐标不能强制套满每个设备。先将窗口、安全区和胶囊矩形转换到同一坐标系，确定可用内容矩形。依次收起装饰、压缩多余垂直留白、将规则改为按需展开，再检查棋盘是否仍可辨认和点击。不能仅缩小所有内容，让按钮和文字一起变得难用。
在统一后的可用矩形内，预留信息区、间距与必要操作后，用以下公式估算棋盘：
棋盘边长 = min(可用宽 - 左右边距, 可用高 - 必要信息与操作区高度)
单牌边长 = (棋盘边长 - 3 × 卡间距) ÷ 4
若单牌在真机上过小，应提高最低支持窗口要求或重新设计信息区，而不是宣称公式自动适配成功。安全区有方向及字段缺失情况，胶囊还需要独立避让；平台依据见微信官方接口定义，推导详见屏幕适配。本练习采用竖屏，不额外承诺横屏布局。
阶段产出：一张标准线框、一张最短目标窗口线框及各区重排说明，实际窗口参数留待项目选机后填写。
4. 建立视觉样板，再扩展到整套页面
采用视觉基础篇的完整色表和文字样式：奶油背景、白卡面、深绿主操作、深色文字、少量金色装饰。先制作卡牌、主按钮、信息块、弹窗四个组件，确认它们能在局内与结算中复用。
图为缩小后的整体对照，可通过原图链接查看原尺寸。它用于对比页面关系，不用于从缩略图测量字号或热区；局内具体尺寸以第 3 节为准，异常变体以第 5 节为准。
| 界面 | 主次与文案示例 | 必要变体 |
|---|---|---|
| 首页 | “果园配对”；说明“24 次机会，找齐 8 对水果”；主按钮“开始配对” | 开始加载中；规则展开，关闭回首页 |
| 局内 | “剩余机会 24”“已配对 0/8”；完整棋盘；暂停 | 单张翻开、比较中、匹配、未匹配、低机会 |
| 暂停 | “休息一下”；主按钮“继续配对”；次按钮“返回首页” | 退出确认写明“返回后本局进度将清空”，提供“继续本局／确认退出” |
| 通关 | “配对完成！”；“已完成 8/8 对”；主按钮“再玩一局” | 长结果文案；动效跳过后结果不变 |
| 失败 | “机会用完了”；保留配对进度；“看广告，增加 6 次机会”；“重新开始” | 广告加载、暂无广告、播放失败、提前关闭、奖励确认中；已复活版本移除复活 |
| 加载／异常 | “正在准备卡牌…”；失败时“卡牌加载失败，请重试” | “重试”与“返回首页”；有真实阶段再显示阶段，不伪造百分比 |
本例没有货币奖励，因此通关页不凭空显示金币到账。失败页中广告继续更突出，但普通重玩仍完整可见且可达，关闭不可偷偷变成广告入口。实际商业化方案还要核对微信当期运营规则。
阶段产出：六组视觉稿、组件规范板、长文案和资源缺失压力稿。图中水果以形状和名称共同区分；用于正式项目时仍需在目标尺寸检查，不以本图代替真实美术验收。
5. 补齐状态，不让原型停在理想截图
5.1 卡牌与输入
| 状态 | 外观与反馈 | 接受的操作 |
|---|---|---|
| 背面 | 浅绿卡背，统一图案 | 无比较进行时可翻开 |
| 第一张翻开 | 显示水果，保留选中边框 | 可点另一张；点本张不扣机会 |
| 两张比较中 | 两张都可辨认，剩余机会更新一次 | 暂时不接收第三张；暂停请求待本次比较结算 |
| 不匹配 | 示例停留 600ms 后盖回 | 完成盖回后重新接受翻牌 |
| 已配对 | 保留水果，角落勾选，背景减弱 | 不接受翻牌，也不占新的比较次数 |
动画中断不能改变匹配结果。切后台时完成已接受的比较并提交结果：不匹配的两张在暂停底下盖回，匹配则记录；只有第一张翻开时保留它。若本次比较触发胜负，返回显示相应结算，不再叠一个可以继续的暂停页。
5.2 复活广告与异常
| 状态 | 玩家可见信息 | 下一步 |
|---|---|---|
| 准备中 | “正在准备广告…”；复活按钮不可重复点 | 可选择普通重玩或回首页；退出后忽略过期回调，不自动弹广告 |
| 可用 | “看广告，增加 6 次机会”；注明本局最多一次 | 玩家主动点击才尝试播放 |
| 暂无广告／加载失败 | 具体提示；普通重玩保持可用 | 可稍后重试；不扣机会、不标记已复活 |
| 播放中 | 使用微信广告组件 | 本次会话保留棋盘；不制作假的平台关闭按钮 |
| 中途关闭／播放失败 | “未完成观看，本次未增加机会”或失败原因 | 返回原失败状态，保留普通重玩 |
| 完整观看、奖励确认中 | “正在确认继续机会…” | 阻止重复确认；收到可靠结果前不显示已增加 |
| 确认成功 | “已增加 6 次机会”；提供“继续配对” | 同局同棋盘，机会为 6；记录本局已复活 |
| 确认结果未知 | “继续机会暂未确认，请重试确认” | 按同一局、同一次观看记录查询；禁止再播放一条广告代替确认 |
微信 RewardedVideoAd.onClose 的 isEnded 用于区分完整观看，不能仅凭“从广告返回”发奖励。由此设计出完整观看与中断分支；奖励一致性、兼容和重复回调由工程处理。微信官方接口定义
奖励确认中保持本局标识，不能一边重开新局一边把旧奖励加给新局。若项目允许离开确认页，必须定义返回后的查询入口及结果归属。本练习选择确认结果明确前留在当前页，提供同一笔确认的重试，并如实显示等待。
6. 按连线表制作可点击原型
在 Figma 或团队已有的设计工具中，将首页、加载、局内、结算做成页面，将暂停和退出确认做成覆盖层，将按钮与卡牌做成带状态的组件。Figma 的组件变体和覆盖层可用于表达这些设计意图；该原型仍不等于微信运行效果。
建议给原型页面命名为 01_Home、02_Loading、03_Play、04_Pause、05_Win、06_Fail、07_ExitConfirm，再增加 LoadingError、AdUnavailable、AdCancelled、RevivePending、ReviveConfirmed 和 FailAfterRevive。命名用于定位，不作为固定的文件格式要求。
| 起点与触发 | 连线或状态变化 | 原型验收点 |
|---|---|---|
| 首页“开始配对” | 到 Loading，再到 Play | 加载期间没有第二次开始 |
| 首页“怎么玩” | 打开规则覆盖层；关闭后留在首页 | 能解释两张一组及机会消耗规则 |
| Play 点第一张、第二张 | 用预设匹配／不匹配页面演示 | 保留第一张位置；比较时第三张无响应 |
| Play“暂停” | 打开 Pause，遮罩拦截底层 | 点遮罩不翻牌，点“继续”回同一局 |
| Pause“返回首页” | 打开 ExitConfirm | “继续本局”退回暂停；确认才清空 |
| 预设最后一对匹配 | 到 Win；“再玩一局”到新 Play | 最后一次机会成功不显示失败 |
| 预设机会耗尽 | 到 Fail | 重玩与复活的代价能被区分 |
| Fail“看广告…” | 进入模拟等待，再分别连异常和确认状态 | 模拟页写“原型模拟”，不伪装真实广告 |
| ReviveConfirmed“继续配对” | 回保留的 Play，机会改为 6 | 进度与牌面保留，下一次失败无复活入口 |
先用固定情境，不必在设计工具里重写一整套随机翻牌逻辑。 准备三组可重复数据：开局 24 次、0/8；临界通关 1 次、7/8；临界失败 1 次、6/8 且两张不同。另设原型演示起点切换场景，演示入口不能成为正式产品按钮。
微信前后台事件、真实广告回调和资源失败无法只靠页面连线证明。先用标注清楚的模拟页评审流程，工程完成后按同一脚本在微信真机复核。原型交付时检查所有按钮，任何未连线的入口应写明本次范围或补齐，不能靠讲解者替玩家点击。
7. 定义反馈节奏与中断规则
| 反馈 | 起始练习参数 | 结束结果与中断要求 |
|---|---|---|
| 按钮按下 | 80ms，视觉内容轻微下移 | 热区不跟随缩小；移出取消，连点不重复开始 |
| 翻牌 | 180ms，中途切换牌面 | 最终牌面由状态决定；暂停不留下半张牌 |
| 比较失败 | 停留 600ms，再盖回 | 给出辨认时间；切后台按第 5 节结算 |
| 配对成功 | 轻亮一次并出现勾选 | 不遮住其他牌，不播放大范围烟花 |
| 结算出现 | 200ms 淡入；主操作保持清楚 | 结果先确定，跳过或减少动效不改变结果 |
以上时间是设计候选值，不是性能指标或玩家测试结论。先看玩家能否辨认和继续操作，再调整速度。无需为了这套界面先学习 3D、骨骼动画或复杂粒子；用图片、文字和少量补间即可起步。深入实现见补间与缓动、弹窗案例。
8. 整理工程交付包
设计文件建议按 需求与流程 → 视觉规范 → 组件 → 页面与状态 → 原型 → 交付与验收 分区。每次变更记录受影响的规则和页面，例如“初始机会从 20 改为 24”应同时更新首页说明、局内、规则页与测试数据。
| 交付物 | 必须写清的内容 | 本例 |
|---|---|---|
| 视觉规范 | 语义色、字号／行高、圆角、间距、光源 | 关联基础篇色表与规范板，实际项目留版本 |
| 素材 | 逻辑尺寸、导出倍率、透明边、命名与授权 | card_back、fruit_apple、icon_pause；动态文字不烘焙进图片 |
| 可伸缩背景 | 哪些边角不能拉伸、九宫格切线 | 面板与按钮单独标切线；图标不跟背景拉长 |
| 组件说明 | 状态、命中范围、可变文本与最大内容 | 复活按钮四类外观，卡牌五类业务状态 |
| 页面说明 | 层级、焦点、遮罩拦截、安全区、返回路径 | Pause 拦截棋盘；ExitConfirm 取消回 Pause |
| 业务映射 | 数值来自哪里、何时提交、重复如何处理 | 一次比较只扣一次；同一次复活只加一次 |
| 验证记录 | 设备与微信版本、场景、结果、截图、遗留问题 | 未执行填写“未验证”，不默认通过 |
可直接复制下面的组件交付模板：
组件：ReviveButton / 版本：练习 v1
目标：在失败后主动观看广告，确认后增加 6 次机会
尺寸：跟随弹窗内容宽；参考高 104 设计单位；文字最多两行
外观：正常 / 按下 / 加载 / 不可用，图标和文字分层
热区：独立于按压视觉；不覆盖“重新开始”
数据：局标识、广告可用状态、本局是否已复活、奖励确认状态
点击：只有当前失败且可复活时请求；等待期间防重复
成功：可靠确认后加 6 一次，进入待继续状态，保留牌面
异常：无广告、提前关闭、播放失败与确认未知分别显示
退出：准备阶段离开后忽略过期结果；确认阶段按第 5 节处理
素材：背景可九宫格；视频图标独立；条件文字动态渲染
验收：参考下节脚本；微信真机当前未验证
九宫格如何切分见Cocos 官方说明和本站图集与九宫格。实际导出格式由目标引擎确认，本章 SVG 是设计参考，不承诺一键导出即可运行。
9. 用具体任务验收整套界面
先做设计自查，再请没有参与设计的人按任务操作原型，最后在工程和微信真机上验证。让测试者“开始一局并找到一对水果”，不要直接提示“点绿色按钮”。记录观察，不预设“这套配色必然更好”。
| 任务或边界 | 预期结果 | 验证层级 |
|---|---|---|
| 首次开始并说明规则 | 知道每次比较扣一次，找到机会和进度 | 原型／用户任务 |
| 不匹配、连点第三张 | 仅扣 1；第三张不加入；盖回后可继续 | 状态原型演示＋工程 |
| 最后一次机会完成第八对 | 通关，最终机会为 0；不弹失败 | 工程固定数据 |
| 机会为 0，配对未完成 | 显示失败；仍能普通重玩 | 原型＋工程 |
| 暂停、取消退出、继续 | 牌面与机会不变；底层不被点穿 | 原型＋微信真机 |
| 广告无填充、播放失败、提前关闭 | 无复活奖励，可重玩；提示可理解 | 模拟原型＋微信真机 |
| 完整观看，重复回调或确认重试 | 同一次只增加 6；下一次失败无复活 | 工程＋微信真机 |
| 比较中／广告返回时切后台 | 按约定结算，返回不自动翻牌；状态无重复 | 微信真机 |
| 最短目标窗口、长文案、缺图 | 必要操作可达、卡牌可辨；有占位／重试 | 压力稿＋微信真机 |
| 资源加载失败后重试 | 不重复开局，不显示伪进度 | 工程＋微信真机 |
每条记录 任务、设备／窗口、构建与微信版本、触发步骤、预期、实际、证据、问题负责人。原型验证只说明模拟路径可理解，不能证明微信广告、性能和真实触控成功。完整问题记录格式可复用布局评审模板。
本练习的交付自查
- 规则、流程和所有页面中的机会数、配对数一致。
- 六组界面及规则、退出确认和广告异常变体齐全。
- 色彩、字体、间距、图标和材质组成一套规范。
- 原型连线能走完通关、失败、重玩、复活和中断返回。
- 最后一次成功优先、单张牌暂停、比较中断有明确规则。
- 素材、热区、九宫格、长文本和业务映射能供工程使用。
- 设计稿、模拟原型、工程检查和微信真机结果分别记录。
本站已提供文档、原创静态示意与浏览器可玩演示；浏览器的核心流程可以在实验室体验。Figma 原型、引擎集成、用户任务测试、广告复活及微信真机项目仍需按实际文件和工程执行，不因站内演示可玩而标记为已通过。
10. 如何接着学
如果卡在“为什么这样排”，回到布局研究；卡在“整套画面不统一”，回到视觉基础；开始制作时读设计工具与交付 → 九宫格 → 屏幕适配 → 输入。项目运行后再按资源管理和性能验证排查，不把技术细节全部塞进玩家流程。
平台依据采用微信团队维护的小游戏接口定义，其中窗口、安全区、胶囊和广告关闭结果用于建立约束；本章的玩法、页面、尺寸和交互选择均为原创教学方案。资料核查日期为 2026-10-31。