多层视差纵深
背景层以 0.15×／0.35×／0.6× 三种速率位移，前景内容保持 1×，滚动时形成空间呼吸感而不眩晕。
五块能力矩阵：从「看得见」到「信得过」
极致用户体验 每块都对应一个可验收指标，避免只做视觉而丢失可用性。
链上数据可读化
把区块高度、TPS、确认时间、Gas 波动翻译成短句与进度条，非技术访客也能判断网络状态。
梦幻空间光感
三层径向柔光叠加网格底纹，低对比漫射；强调色仅用于关键数字与激活态，避免高饱和铺面。
动态交互克制原则
入场动效 0.6s 缓出、错峰 70ms 递增；hover 位移不超过 3px，保证移动端点按区稳定 ≥ 44px。
无障碍与降级
尊重 prefers-reduced-motion，关闭全部位移与生长动画；焦点态 2px 高亮描边，键盘可完整导航。
实用指导清单：区块链展示页的 5 条硬指标
每条都给出可测量阈值，落地时直接拿去做验收清单，而不是凭感觉调样式。
视差层只动 transform，不动 top/left
背景层用 translate3d 配合 will-change，避免触发重排；同时给滚动方向留 8% 余量，防止快速滑动出现露边。若使用 background-attachment: fixed，务必在 iOS 上做特征检测并降级为静态背景。
60fps中端机滚动帧率下限
首屏价值主张控制在 46 个字符内
标题一行半可读完为佳；描述段不超过 3 行，并明确给出「你能得到什么」。把「链上确认」「Gas」「TPS」等术语第一次出现时配一句白话解释，降低理解成本。
≤ 3 行首屏描述段落上限
强调色面积不超过整屏 10%
青蓝强调色只用于关键数字、按钮、激活态与细高亮线；大面积留白交给中性底与柔光。检查方法：截图后统计高饱和像素占比，超过 10% 就回收一部分。
≤ 10%高饱和像素占比
链上数据必须标注采集时间与来源
面板中的 TPS、确认时长、Gas 区间需注明「近 1 小时均值」「来自节点 A」，避免误导投资判断。数据延迟超过 30 秒时给出明显的状态提示，而不是静默展示旧值。
≤ 30s数据陈旧告警阈值
图片统一裁切并预留宽高比
Hero 用 16:11、场景卡用 16:10、特写用 4:3，容器写死 aspect-ratio，图片加 object-fit: cover 与 loading="lazy"，避免布局跳动导致 CLS 超标。
< 0.1CLS 目标值
数据可视化面板：把链上状态摊开给你看
左列看体验指标，右列看网络指标；所有数值均为近 1 小时均值，便于对比调优效果。
页面体验指标达成度
链上网络吞吐（近 1 小时均值 · 来自节点 A）
每秒交易数
平均确认时长
| 指标 | 当前 | 阈值 | 状态 |
|---|---|---|---|
| 每秒交易数 TPS | 2,480 | ≥ 1,500 | 健康 |
| 平均确认时长 | 1.8s | ≤ 3.0s | 健康 |
| Gas 区间 | 18–34 gwei | ≤ 50 gwei | 平稳 |
| 合约调用成功率 | 99.4% | ≥ 99% | 健康 |
图文混排特写：视差不是炫技，是引导阅读的节奏
把「梦幻空间」当作叙事手法：越深越慢，越浅越快，让视线自然落到关键信息上。
三层景深 + 一条数据主线
背景柔光层负责氛围，网格层负责空间刻度，内容层负责信息密度。三层之间用位移差与明度差区分，用户不会迷路，也不会觉得页面在「晃」。
- 柔和层：位移 0.15×，模糊 48px，透明度 ≤ 50%
- 刻度层：64px 网格，径向遮罩收边，避免机械感
- 内容层：1× 常态滚动，卡片圆角 20–28px，阴影分三级
- 强调层：仅关键数字与按钮使用青蓝高亮，占比 ≤ 10%
应用场景展示：三类人会这样用它
技术爱好者、开发者与潜在投资者关注点不同，页面用同一套视觉承载三种阅读路径。
科技爱好者 · 概念理解
用白话短句解释共识机制与跨链桥，配合视差节奏把抽象概念拆成三个可感知的画面。
目标：首访 3 秒内说出产品在做什么
开发者 · 接入评估
SDK 接入步骤、节点响应参数与错误码一屏可见，粘性目录让文档与示例始终保持在手边。
目标：从浏览到拿到示例代码 ≤ 2 次点击
潜在投资者 · 风险判断
数据面板给出可核验指标与采集时间，风险提示与收益说明同屏呈现，避免只讲好话。
目标：关键指标缺失率 0%，均标注来源工作流程步骤：4 步把设计稿变成可上线的展示页
每一步都有交付物与验收口径，设计与前端可以并行推进。
定色与令牌
先确定中性底、主色、强调色三档比例 60/30/10，并把间距、圆角、阴影、字号写成变量，后续所有组件只引用变量。
搭景深骨架
先做三层视差骨架与分屏 Hero，确认滚动位移差 ≤ 12% 视口高度，再往里填内容，避免后期返工。
灌入真实内容
用真实链上指标替换占位数字，补齐术语解释与数据来源标注；图片统一裁切比例并压缩到 200KB 以内。
验收与降级
检查键盘可达、对比度 ≥ 7:1、无横向溢出；开启减少动效后页面仍完整可读，最后跑一次 320px 宽度回归。