和业务方一起画出“谁在哪个环节需要看什么数据”。产出：1 张业务对象表 + 1 份页面清单，明确哪些字段必须上链、哪些留在业务库。
产物：需求卡片 / 字段归属表
工作流程 · 6 步走完
从一次现场走访，到链上可验证的单页交付
每一步都给出可验收的产物与量化口径，避免“看起来很技术、落地全靠猜”。
按日均写入量决定：低于 5 万笔用联盟链单通道即可；高于 50 万笔再考虑分片或侧链。确认共识、出块间隔（建议 2～3 s）与节点数量。
阈值：<5 万笔/日 → 单通道先定接口再写前端：合约方法命名统一为 query/settle/revoke，返回结构固定 {code,data,traceId}，前端只认这三种形状，联调返工率可降约 40%。
一条页面承载全部叙事：锚点导航 + 骨架屏 + 分块懒加载。图片统一 object-fit:cover 与固定宽高比，首屏图片控制在 180 KB 以内。
请 5 位真实使用者完成 3 个任务：查一条存证、发起一次授权、导出一次凭证。任务完成率低于 80% 的环节立刻改文案与按钮位置。
门槛：完成率 ≥ 80%上线首周盯三个数：交易失败率、页面报错率、平均停留时长。失败率超过 1% 先看 gas/手续费与重试策略，不要先改前端。
红线：失败率 ≤ 1%
图文特写 · 一条数据的一生
数据从传感器出发，到你能一眼看懂的界面
智慧网络负责“采集与汇聚”，区块链负责“不可篡改的凭证”，而单页设计负责把两者翻译成人话。
- 采集层：设备每 30 s 上报一次，异常值（超阈值 ±15%）先本地缓存，避免弱网丢点。
- 汇聚层：边缘网关做去重与压缩，把 1000 条原始读数合并成 1 条摘要再入链。
- 存证层：只把哈希与时间戳写入链上，原始大文件留在对象存储，节省约 90% 存储成本。
- 呈现层：单页按“状态—证据—操作”三段式排布，用户 3 次点击内完成一次核验。
上链字段数4（hash / ts / deviceId / status）
单次存证体积约 240 字节
核验平均耗时1.1 s（含网络）
页面模块懒加载阈值进入视口前 300 px
数据可视化面板
把“快不快、稳不稳”画成可读的条形
以下为某类智慧网络 + 区块链应用上线 90 天后的典型观测区间，用于设定你自己的验收线。
关键链路健康度
观测窗口：上线后 90 天 / 抽样 12 万次请求读法：低于 90% 的项优先排查网络与重试策略，而不是先加动画；成功率类指标每提升 1 个百分点，客诉大约下降 6%～9%。
平均出块间隔2.6 s联盟链三节点共识
单页模块数7 块锚点导航一一对应
图片首屏预算180 KB超出即压缩或换尺寸
核验点击步数≤3 步超过就重排信息层级
核心能力 · 4 项
我们把复杂的链上逻辑，做成你能点得动的四件事
每张卡都写明“做什么、怎么做、验收看哪个数”。
智慧网络接入与节点编排
支持 MQTT / HTTP 双通道接入，网关侧做去重压缩；节点扩容以 每 500 台设备 +1 网关 为经验值，避免单点拥塞。
01接入
区块链存证与合约接口
只上链哈希与时间戳，合约方法收敛为三个动词；提供幂等 traceId，重复提交不会产生二次扣费。
02存证
单页设计与前端开发交付
一条路由承载全部内容，锚点即导航；组件按 4/8pt 间距节奏与统一圆角组织，改一处令牌全站生效。
03前端
用户体验优化与走查
用 5 人 × 3 任务的走查法定位卡点；文案改“状态 + 证据 + 下一步”，按钮点按区不小于 44 px。
04体验
解决方案对比
三种常见做法，怎么选不踩坑
同样的业务目标，架构选错会让后期成本翻倍。下表按“适合谁、代价是什么”来讲。
| 维度 | 纯中心化单页 | 联盟链 + 单页 | 公链 + 单页 |
|---|---|---|---|
| 适合场景 | 内部看板、无第三方取证需求 | 多方对账、监管留痕、供应链协同 | 面向公众的凭证与权益类应用 |
| 单笔存证成本 | ≈0 | 几分～几角 | 随网络波动，需预算上限 |
| 数据不可篡改 | 依赖权限与日志 | 多节点共识，可审计 | 公开可验证 |
| 前端复杂度 | 低，接口直观 | 中，需处理异步确认状态 | 高，需处理钱包与手续费提示 |
| 上线周期（参考） | 2～3 周 | 4～8 周 | 8～14 周 |
| 核心避坑点 | 别把“有日志”当成“可取证” | 异步确认必须给中间态 UI | 手续费提示不能省 |
交付节奏 · 滚动查看
四个阶段的交付物，滚动时逐层叠加
P1
架构与字段归属确认
产出架构图 + 字段归属表 + 上链白名单；确认哪些数据只读、哪些可写、谁能撤销。验收：三方签字确认，字段争议项清零。
P2
合约与接口冻结
合约方法、返回体、错误码一次冻结；提供 Mock 服务让前端先跑通。验收：接口联调一次通过率 ≥ 90%。
P3
单页开发与体验走查
七个区块顺序成文，锚点导航同步；走查 5 人 × 3 任务。验收：任务完成率 ≥ 80%，LCP ≤ 2.0 s。
P4
上线观测与迭代
首周每日复盘失败率、报错率、停留时长；每两周一次小版本。验收：存证成功率 ≥ 99%，失败率 ≤ 1%。
实用指导清单 · 6 条
动手前先看这 6 条，能省下大把返工时间
每条都给到具体做法与可量化口径，照做即可落地。
01先把“上链白名单”定死
只上链 4 类字段：哈希、时间戳、设备/业务标识、状态。原始图片与日志留在对象存储。经验值：单条存证控制在 300 字节内，一年 100 万笔的链上体积约 300 MB，检索与备份都可控。
02单页做“锚点即导航”，别做多级菜单
区块顺序固定为：流程 → 特写 → 数据 → 能力 → 对比 → 清单。导航项与区块一一对应，超过 7 个锚点就合并内容；这样移动端不用折叠菜单，点按区自然 ≥ 44 px。
03异步确认必须给中间态
链上写入存在等待期，界面要明确三态：已提交 / 确认中 / 已确认。建议确认中用骨架与进度提示，超过 15 s 给出手动刷新入口，避免用户以为“卡死”而重复提交。
04图片与字体先做预算
首屏图片 ≤ 180 KB，统一固定宽高比容器 + object-fit:cover 防跳动；全站只用一个等宽字体做数据与代码，正文用系统字体栈，避免外部字体加载造成闪烁。
05用 5 人 × 3 任务做体验走查
任务：查一条存证、发起一次授权、导出一次凭证。记录完成率、耗时与卡点位置。任一任务完成率低于 80%，优先改文案与信息层级，而不是加动效。
06给动效留“降级开关”
入场与视差动效只用 CSS 动画且加载即播放，元素默认可见；同时在 prefers-reduced-motion 下全部关闭。这样在任何浏览器与无脚本环境下，内容都完整可读。