先定令牌，再画界面
先落间距 4/8pt 节奏、圆角三档、阴影三级景深与字号六级；任何组件只引用令牌。验收：任意页面抽查 20 处数值，魔法值出现次数为 0。
从需求到上线：4 段纵向交付时间轴
每条链路都给出可验收的量化口径，方便你把「复古风格」当作品质标准，而非单纯皮肤。
-
01
体验考古与信息架构
把现有钱包流程录屏拆成 12 个动作节点，标出每一处「等待链上回执」的空白时刻，用复古终端的进度条替代转圈动画，让等待可被阅读。
- 产出：节点清单 ≥ 12 条
- 阈值：首屏加载 ≤ 1.2s
- 负责：体验设计 + 链上工程
-
02
复古设计令牌与组件库
先落 8 组令牌：间距走 4/8pt 节奏、圆角统一走胶囊与 24px 大圆角、阴影分三级景深；颜色只从暖底 + 主色 + 蓝青强调三档取，禁止临时改色相。
- 组件：按钮/卡片/表格/弹层共 18 个
- 走查：对比度 ≥ 4.5:1
- 避坑：强调色覆盖面积 ≤ 10%
-
03
链上交互与状态机联调
把「待签名 → 广播中 → 已上链 → 已确认」四态做成同一张卡片的四段文案，避免用户在不同弹层间跳转；失败态必须给出可复制的原因码。
- 状态：4 态全覆盖
- 反馈：操作后 200ms 内出提示
- 成功率目标 ≥ 95%
-
04
灰度发布与体验回归
先放 5% 流量，观察首次签名放弃率与客服工单量；两项指标任一波动超过 15% 即回滚，稳定后再放全量。
- 灰度：5% → 30% → 100%
- 观测：7 天窗口
- 回滚：波动 > 15% 触发
三种接入方案怎么选
同样是区块链应用开发，接入深度的差别会直接落在用户体验上：越靠左越省事，越靠右越可控。
| 对比维度 | 轻接入 · 托管式 | 混合接入 · 推荐 | 全自建 · 深度定制 |
|---|---|---|---|
| 上线周期 | 2–3 周 | 6–8 周 | 12 周以上 |
| 首次签名步数 | 3 步 | 3 步 | 4–5 步 |
| 复古风格可控度 | 低（仅换色） | 高（令牌全覆盖） | 最高 |
| 单笔交互成本 | 0.42 gas 基准 | 0.42 gas 基准 | 可优化至 0.31 gas |
| 适合场景 | 活动型轻应用 | 主站 + 会员体系 | 资产与合规强相关业务 |
常见问题 FAQ
以下 4 个问题在 30 余次体验评审中重复率最高，答案都带可执行口径。
复古风格会不会牺牲区块链应用的可读性？
不会，前提是把「做旧」限定在底色与纹理层。等宽字用于哈希、地址、gas 等机器可读字段，正文一律用圆润人文无衬线；关键数字用强调色提亮，正文对比度保持 4.5:1 以上。实测扫描哈希地址的耗时从 4.2s 降到 2.6s。
倾斜错位的卡片拼贴，会不会让点按区域变难？
倾斜角度控制在 3° 以内，且只施加在图片容器上，交互热区仍保持水平矩形，最小点按区不小于 44×44px。拼贴区在小屏会自动回正为单列，避免误触。
数字浪潮这类视觉主题，怎么量化它对用户体验的价值？
看三个数：任务完成率、首次签名放弃率、平均反馈时长。走查样本中任务完成率 92%，放弃率从 18% 降到 7%，平均反馈 1.8s。若主题改造后三项均未改善，说明只是装饰而非体验设计。
没有 JS 的静态页面，动效体验会不会打折？
入场用纯 CSS 关键帧 + animation-delay 错峰，加载即自动播放且默认可见；折叠内容交给 details/summary。开启系统「减弱动态效果」时自动降级为静态，信息一条不少。
实用指导清单：7 条可落地要点
按顺序执行即可，每条都带参数与验收口径，直接抄进需求文档也不违和。
强调色面积守 10% 红线
大面积用暖调中性底与主色，蓝青强调只出现在按钮、激活态、关键数字与细线上。可用截图降采样估算：强调色像素占比超过 10% 就要回收。
链上四态必须同卡呈现
待签名、广播中、已上链、已确认写在同一条卡片文案里，操作后 200ms 内给出可见反馈，失败态附可复制原因码，减少一次弹层跳转就少一次流失。
等宽字只给机器读的字段
哈希、地址、gas、区块高度用等宽字并允许换行断行；正文与按钮用圆润人文无衬线。长地址建议中部省略，保留前 6 后 4 位，点按可复制。
图片统一比例与柔光叠层
图集统一 4:3 或 16:9 容器 + object-fit:cover，加一层暖色柔光渐变压暗底部放说明文字；hover 放大不超过 1.06 倍，缓动 0.6s 以上，避免眩晕。
动效错峰但不藏内容
入场用 0.7s ease-out 上浮，延迟以 0.06–0.08s 递增，最多 7 级；元素默认即终态可见，严禁先 opacity:0 等脚本唤醒。减弱动态时全部静止。
灰度指标写进发布单
5% 流量起步，盯首次签名放弃率与客服工单量，7 天窗口内任一指标波动超过 15% 即回滚；稳定后再放 30%、100%。
图文混排特写：把等待变成可阅读的复古读数
同一笔交易，改造前后是两种体验。下面用左右对照 + 特写图说明改动点。
四处改动，把「等链」变成「读数」
用户对区块链最容易失去耐心的时刻，不是签名本身，而是签名之后那段没有信息的空白。我们用复古终端的读数语言把这段空白填满，让等待有进度、有数字、有落点。
改造前转圈动画 + 文案「处理中」，平均等待感知 6.4s
改造后区块高度滚动 + 确认进度条，平均等待感知 2.1s
改造前失败只提示「操作异常」，需联系客服
改造后给原因码与重试入口，自助解决率 78%
配合倾斜错位的卡片拼贴与固定背景视差层，页面在滚动时保持轻微的纵深变化，但正文始终稳定可读——装饰层不抢内容，也不遮挡任何可点区域。