← 返回设计工作台

大科学 · 微信小程序全主题设计

交付版本 DESIGN 1.1 / 2026-10-16

依据《微信小程序交互原型 v1.0》组织页面与异常恢复路径,以《真实事物场景与问题库 v1.0》确定九类事物与 63 个核心问题。交付的是视觉设计与设计内容合同;不代表新增主题的计算模型、3D 资产或正式小程序已实现。

1. 交付范围

交付项数量与说明
九主题主流程9 × 8 = 72 张:主题入口、体验、原理、内部、实验、对比、分享海报、分享落地
完整问题目录9 张:每类事物完整展示 7 个核心问题
实验过程状态18 张:每主题运行中、A 组完成
场景专属设计63 张:每个问题的控制量、观察目标、比较条件与保持量
汽车原型补充2 张:滑行原理、制动原理,保留既有原型三题
公共页面2 张:首页、关于与设置
异常与边界状态16 张:加载、素材失败、降级、恢复、中断、空结果、一组结果、旧模型、保存失败、分享失败、拒绝相册、非法落地、清除确认、空电量、未开放、静音
系统选中状态45 张:每主题 5 个系统的选中与说明
B 组实验状态27 张:每主题 B 组准备、运行与完成
合计254 张画板;每张含 SVG 与 2 倍 PNG。另有 9 张全流程板与 1 张九主题总览。

设计范围包含汽车、高铁、飞机、电梯、冰箱、洗衣机、收音机、手机、计算机。问题库末尾仅列为远期灵感的空调、轮船、大桥、卫星等未纳入本次九主题设计范围。

2. 怎么看、怎么交给开发模型

  1. 打开 设计工作台,先看首页和九主题总览。
  2. 切换一个主题,选「全流程」检查完整链路;选「单页评审」看尺寸、说明和高清图。
  3. 「问题目录」显示全部七题;「7 个场景」显示每题控制面板。选「全部画板」可以平铺所有设计。
  4. 「状态与恢复」检查异常出口。控件在 PNG 内不执行操作;交互验证继续使用原型。
  5. 开发模型同时读取 content.json、manifest.json、覆盖清单 CSV 和本说明。视觉以 SVG 为准,行为以既有开发包和确认后的扩展合同为准。

本目录可整体复制后直接打开 index.html,无需联网或构建。图像全部内嵌在 SVG 中;PNG 可独立使用。工作台的原原型链接仅在项目目录中有效,离线单独交付时请另附原型包。

3. 页面流程与控件语义

首页 → 主题入口 / 问题目录 → 先体验 → 看原理 → 看内部 → 做实验 → 看发现 → 分享 → 接收者初始体验

位置行为要求
首页对象卡点击整卡进入主题。未开放对象显示「筹备中」,转入介绍状态;不能进入空白或不可运行的体验页。
主题入口主按钮进入默认体验;相关问题进入对应场景;「全部问题」进入独立问题目录。
体验一个核心体验区、最多两类首层控件、一个「探索原理」主入口。取消独立帮助和常驻暂停;重置留在控制卡内。后台暂停只在恢复时出现。
原理现象、解释、部件链、按需展开术语。汽车三题分别是动力、滑行、制动;不得把规划中的能量回收带入首发滑行模型。
内部图上编号和系统标签选择同一状态。选中说明同步更新;同一时间只突出一个系统。显示外壳、展开结构、查看路径保留明确状态。
实验准备→运行→单组完成→换另一组→比较。开始后锁定条件;终止或切后台仅作废运行组。已完成组保留。两组有效后才出现比较结论。
结果先看比较条件,再看反馈和发现。空数据不能显示为 0;不同模型版本的结果不能混合。重做返回实验条件选择。
分享朋友卡片分享问题,不携带个人实验数据。海报默认无小程序码,取得真实码后另加;不画假码。接收者从初始状态进入。
返回 / 重置返回上级保留有效内容;返回主题前结束当前动画。重置清空当前体验的输入量与动态状态,不清除其他主题记录;清除本机全部数据必须二次确认。

4. 统一视觉规格

要素规格
逻辑画板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 宽将双控件改为上下排列。
动效位移、旋转和背景由同一状态驱动;停下后一起停。汽车面向左,固定镜头下道路向右移动,近景快于远景。减弱动态时保留数值和静态状态差异。

5. 九主题的差异

主题独立观察与交互结构设计
汽车油门、刹车、速度、驱动功率、电量;干湿路面对比车身、电池、电驱、制动、悬架
动车牵引、受电弓、轨道与气流;车头外形对比接触网、受电弓、牵引、转向架、制动
飞机气流、迎角、姿态和受力;小迎角范围内比较升力机身、机翼、发动机、控制面、起落架
电梯楼层、载荷、轿厢与对重的反向运动轿厢、曳引轮、对重、门光幕、安全装置
冰箱开关门、热量方向、温区和压缩机状态箱体、压缩机、冷凝器、节流、蒸发器
洗衣机转动方式、衣物分布、脱水含水量滚筒、电机、供排水、减振、控制
收音机调谐、频率与波形、天线、信号强度;等价静音反馈天线、调谐、解调、放大、扬声器
手机虚拟消息、信号链、虚拟触点和传感器;不索取设备隐私权限麦克风、芯片、天线、外部网络、扬声器
计算机启动程序、任务负载、存储与内存、数据路径处理器、内存、存储、图形、散热与网络

每题的专属控制量、比较条件与保持量已写入 content.json。主流程页展示每主题一个完整代表实验;63 张场景稿展示其他问题如何进入同一流程,并非声称已经分别完成 63 套数值计算模型。

6. 首发与扩展的边界

首发仍以既有 MP 1.0 汽车合同为准。汽车保留驾驶、三题原理、五系统、固定 50 km/h / 全力制动的干湿路面对比。图中 12.29 m / 24.58 m 与 1.77 s / 3.54 s 来自既有原型示例。不能据扩展问题库擅自加入 ABS、碰撞、能量回收或任意初速度。

新增八主题、汽车其他问题属于设计扩展。这里采用“较大/较小”等定性反馈,避免没有模型依据的精确数值。正式开发前,应为实际要上线的扩展主题补充计算/状态模型合同、验证用例和对应动态资产;开发模型不能从视觉柱长反推物理比例。

原问题库的远期条目不是这次承诺的开发范围。本设计包也不新增登录、支付、积分排行、聊天、真实录音或位置采集。

7. 资产与后续制作的明确分工

本次已交付:九类现有写实图片的设计使用、九套独立 SVG 结构图、63 张场景控件稿、全部页面布局与图文层级。SVG 结构图可以作为 2D 教学结构的实现依据。

后续资产当前状态与制作要求
真实可旋转 3D 模型本设计任务未生成九类 GLB;不得把静态 PNG 当作可拆装 3D。确需 3D 时由本会话继续制作并另行验收。
可动部件与剖面分层现有写实概览图是合成预览,不可直接保证独立轮轴、门、活塞、线圈可动;各主题上线前按控制量分层交付。
扩展问题的局部特写摄像头、触控层、GNSS、洗涤剂分子等用局部教学图另行细化。当前场景页给出交互区域和观察目标,不假称有完整工程细节。
真实平台素材小程序码、分享配置、隐私主体信息由发布配置取得。稿件不放虚构码,不假定权限已授权。

8. 文件与维护方式

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 维护逐系统说明。原型连线预览不运行真实数值实验,状态由评审控件手动切换。

回到设计工作台 →