交付版本 DESIGN 1.1 / 2026-10-16
依据《微信小程序交互原型 v1.0》组织页面与异常恢复路径,以《真实事物场景与问题库 v1.0》确定九类事物与 63 个核心问题。交付的是视觉设计与设计内容合同;不代表新增主题的计算模型、3D 资产或正式小程序已实现。
| 交付项 | 数量与说明 |
|---|---|
| 九主题主流程 | 9 × 8 = 72 张:主题入口、体验、原理、内部、实验、对比、分享海报、分享落地 |
| 完整问题目录 | 9 张:每类事物完整展示 7 个核心问题 |
| 实验过程状态 | 18 张:每主题运行中、A 组完成 |
| 场景专属设计 | 63 张:每个问题的控制量、观察目标、比较条件与保持量 |
| 汽车原型补充 | 2 张:滑行原理、制动原理,保留既有原型三题 |
| 公共页面 | 2 张:首页、关于与设置 |
| 异常与边界状态 | 16 张:加载、素材失败、降级、恢复、中断、空结果、一组结果、旧模型、保存失败、分享失败、拒绝相册、非法落地、清除确认、空电量、未开放、静音 |
| 系统选中状态 | 45 张:每主题 5 个系统的选中与说明 |
| B 组实验状态 | 27 张:每主题 B 组准备、运行与完成 |
| 合计 | 254 张画板;每张含 SVG 与 2 倍 PNG。另有 9 张全流程板与 1 张九主题总览。 |
设计范围包含汽车、高铁、飞机、电梯、冰箱、洗衣机、收音机、手机、计算机。问题库末尾仅列为远期灵感的空调、轮船、大桥、卫星等未纳入本次九主题设计范围。
content.json、manifest.json、覆盖清单 CSV 和本说明。视觉以 SVG 为准,行为以既有开发包和确认后的扩展合同为准。本目录可整体复制后直接打开 index.html,无需联网或构建。图像全部内嵌在 SVG 中;PNG 可独立使用。工作台的原原型链接仅在项目目录中有效,离线单独交付时请另附原型包。
首页 → 主题入口 / 问题目录 → 先体验 → 看原理 → 看内部 → 做实验 → 看发现 → 分享 → 接收者初始体验
| 位置 | 行为要求 |
|---|---|
| 首页对象卡 | 点击整卡进入主题。未开放对象显示「筹备中」,转入介绍状态;不能进入空白或不可运行的体验页。 |
| 主题入口 | 主按钮进入默认体验;相关问题进入对应场景;「全部问题」进入独立问题目录。 |
| 体验 | 一个核心体验区、最多两类首层控件、一个「探索原理」主入口。取消独立帮助和常驻暂停;重置留在控制卡内。后台暂停只在恢复时出现。 |
| 原理 | 现象、解释、部件链、按需展开术语。汽车三题分别是动力、滑行、制动;不得把规划中的能量回收带入首发滑行模型。 |
| 内部 | 图上编号和系统标签选择同一状态。选中说明同步更新;同一时间只突出一个系统。显示外壳、展开结构、查看路径保留明确状态。 |
| 实验 | 准备→运行→单组完成→换另一组→比较。开始后锁定条件;终止或切后台仅作废运行组。已完成组保留。两组有效后才出现比较结论。 |
| 结果 | 先看比较条件,再看反馈和发现。空数据不能显示为 0;不同模型版本的结果不能混合。重做返回实验条件选择。 |
| 分享 | 朋友卡片分享问题,不携带个人实验数据。海报默认无小程序码,取得真实码后另加;不画假码。接收者从初始状态进入。 |
| 返回 / 重置 | 返回上级保留有效内容;返回主题前结束当前动画。重置清空当前体验的输入量与动态状态,不清除其他主题记录;清除本机全部数据必须二次确认。 |
| 要素 | 规格 |
|---|---|
| 逻辑画板 | 390 × 844;高清稿 780 × 1688。横向边距 20,卡片间距 14–18;顶部按微信安全区与胶囊实际位置适配。 |
| 色彩 | 品牌蓝 #1678FF、正文 #102A50、次要信息 #637A97、背景 #F4F8FD;绿色用于能量/完成,橙色用于制动/条件 B。必须配文字或形状,不能只靠颜色。 |
| 字体 | 主标题 22–27、分区标题 16–19、正文 14–15、辅助 12–13。真实设备放大字体时使用内容自然增高,不截断关键说明。 |
| 控件 | 主按钮高 48,视觉圆角 15;系统标签视觉高 28、实际触区至少 44;相邻触区不重叠。滑块支持拖动与逐步调整,动态值和位置保持一致。 |
| 画面 | 低对比浅蓝环境、实物占据主视觉;速度和其他读数放在独立区域,不覆盖主体。图片保持比例,不为了铺满而裁掉关键部件。 |
| 品牌 | 沿用大科学字标和蓝色品牌体系。工作台「科」方块只是工作台标记,不是新品牌 LOGO。正式品牌资产继续使用已有 brand-logo.svg。 |
| 响应式 | 360–430 宽保持单列,卡片宽度为屏幕减 40;可变文案允许纵向滚动,CTA 在内容之后。不能把 390 画板整体缩成小字;320 宽将双控件改为上下排列。 |
| 动效 | 位移、旋转和背景由同一状态驱动;停下后一起停。汽车面向左,固定镜头下道路向右移动,近景快于远景。减弱动态时保留数值和静态状态差异。 |
| 主题 | 独立观察与交互 | 结构设计 |
|---|---|---|
| 汽车 | 油门、刹车、速度、驱动功率、电量;干湿路面对比 | 车身、电池、电驱、制动、悬架 |
| 动车 | 牵引、受电弓、轨道与气流;车头外形对比 | 接触网、受电弓、牵引、转向架、制动 |
| 飞机 | 气流、迎角、姿态和受力;小迎角范围内比较升力 | 机身、机翼、发动机、控制面、起落架 |
| 电梯 | 楼层、载荷、轿厢与对重的反向运动 | 轿厢、曳引轮、对重、门光幕、安全装置 |
| 冰箱 | 开关门、热量方向、温区和压缩机状态 | 箱体、压缩机、冷凝器、节流、蒸发器 |
| 洗衣机 | 转动方式、衣物分布、脱水含水量 | 滚筒、电机、供排水、减振、控制 |
| 收音机 | 调谐、频率与波形、天线、信号强度;等价静音反馈 | 天线、调谐、解调、放大、扬声器 |
| 手机 | 虚拟消息、信号链、虚拟触点和传感器;不索取设备隐私权限 | 麦克风、芯片、天线、外部网络、扬声器 |
| 计算机 | 启动程序、任务负载、存储与内存、数据路径 | 处理器、内存、存储、图形、散热与网络 |
每题的专属控制量、比较条件与保持量已写入 content.json。主流程页展示每主题一个完整代表实验;63 张场景稿展示其他问题如何进入同一流程,并非声称已经分别完成 63 套数值计算模型。
首发仍以既有 MP 1.0 汽车合同为准。汽车保留驾驶、三题原理、五系统、固定 50 km/h / 全力制动的干湿路面对比。图中 12.29 m / 24.58 m 与 1.77 s / 3.54 s 来自既有原型示例。不能据扩展问题库擅自加入 ABS、碰撞、能量回收或任意初速度。
新增八主题、汽车其他问题属于设计扩展。这里采用“较大/较小”等定性反馈,避免没有模型依据的精确数值。正式开发前,应为实际要上线的扩展主题补充计算/状态模型合同、验证用例和对应动态资产;开发模型不能从视觉柱长反推物理比例。
原问题库的远期条目不是这次承诺的开发范围。本设计包也不新增登录、支付、积分排行、聊天、真实录音或位置采集。
本次已交付:九类现有写实图片的设计使用、九套独立 SVG 结构图、63 张场景控件稿、全部页面布局与图文层级。SVG 结构图可以作为 2D 教学结构的实现依据。
| 后续资产 | 当前状态与制作要求 |
|---|---|
| 真实可旋转 3D 模型 | 本设计任务未生成九类 GLB;不得把静态 PNG 当作可拆装 3D。确需 3D 时由本会话继续制作并另行验收。 |
| 可动部件与剖面分层 | 现有写实概览图是合成预览,不可直接保证独立轮轴、门、活塞、线圈可动;各主题上线前按控制量分层交付。 |
| 扩展问题的局部特写 | 摄像头、触控层、GNSS、洗涤剂分子等用局部教学图另行细化。当前场景页给出交互区域和观察目标,不假称有完整工程细节。 |
| 真实平台素材 | 小程序码、分享配置、隐私主体信息由发布配置取得。稿件不放虚构码,不假定权限已授权。 |
screens/:254 组可编辑 SVG 与高清 PNG;boards/:全流程板与总览;content.mjs:人工维护的设计文案和63题控制规格;build.mjs:画板渲染源;content.json:供开发消费的数据;manifest.json:画板目录;gallery.*:离线浏览工作台。
需要修改设计时,改 content.mjs / build.mjs 后在工程根目录执行 node ui/全主题设计稿-v1.1/build.mjs。不要只改导出的 PNG;重建会覆盖导出图。无需改动现有产品代码或原交互原型。
v1.1 补充:按原型逐页查看九主题。新增45张系统选择状态、27张B组实验状态;由 system-details.mjs 维护逐系统说明。原型连线预览不运行真实数值实验,状态由评审控件手动切换。