资产总览卡
三行信息结构：余额、24h 变化、待确认笔数。变化量用强调色，其余保持正文色。
blur 16px · 圆角 24px关键数据条：先把责任指标写进设计稿
可持续与责任视角60/30/10色彩配比基线中性暖底 60%、主色 30%、强调色 10%；强调色只用于按钮、激活态与关键数字。
≤ 2.5s中端机首屏可交互磨砂层数每增加 1 层，实测首屏绘制约 +180ms，超过 3 层收益递减。
4.5:1正文对比度下限玻璃卡片上的正文需在底图最亮与最暗处分别测一次，取更差的那个值。
0 张装饰性大图预算首屏装饰图控制在 1 张以内，其余走懒加载；单图不超过 180KB。
解决方案对比：玻璃拟态在区块链界面里的三种用法
按成本与收益选型| 实现路径 | 典型参数 | 首屏开销 | 适用场景 | 责任提示 |
|---|---|---|---|---|
| 纯 CSS 磨砂卡 | backdrop-filter: blur(16px) | +40~90ms | 链上状态卡、行情面板、余额概览 | 推荐 同时写 -webkit 前缀，降级为半透明底仍可读 |
| 静态位图预渲染 | PNG 贴图 + 1px 内高光 | +10~30ms | 长列表、低端机主导的 B 端后台 | 需准备 2x 切图，主题换色成本高 |
| 全站叠层磨砂 | 5 层以上 blur 叠加 | +260ms 起 | 仅展会/海报式单页 | 谨慎 低端机滚动掉帧，且文字对比度难达标 |
常见问题 FAQ：把踩过的坑提前写出来
6 个高频疑问玻璃拟态会不会牺牲区块链界面的可读性与无障碍？
关键不在模糊本身，而在「底图活跃度」。做法：把正文区域的底图对比度压到 8% 以内，卡片内加一层 rgba(255,255,255,.58) 的白色遮罩，再测文字与卡片实际背景的对比度，正文 ≥4.5:1、辅助信息 ≥3:1。若底图有高饱和色块穿过文字，就把它移到卡片外的留白区。
响应式设计里，磨砂卡在窄屏应该保留还是移除？
窄屏建议把 blur 降到 10~12px 并减少叠层数量，而不是直接删掉——磨砂是这条记录的视觉母题，删掉会丢失识别度。同时把卡片间距收到 12px、栅格从 4 列降到 1 列，保证点按区不小于 44×44px。
互动动画怎么做到「有呼吸感」又不拖累性能？
只动 transform 与 opacity，时长 0.3~0.6s，缓动用 cubic-bezier(.16,1,.3,1)；错峰延迟按 0.05~0.08s 递增。避免动画 backdrop-filter 或 box-shadow 的模糊半径，那会触发逐帧重绘。并保留 prefers-reduced-motion 降级。
区块链数据看板上，哪些数字该用强调色？
只给「变化量、风险值、待确认数」三类数字上强调色，其余保持正文色。页面里强调色占比控制在 10% 以内，可用一个简单办法自检：把页面截图转灰度，强调色区域不应超过画面的一小块。
图片多、区块多，怎么避免布局跳动？
所有图片容器先写好 aspect-ratio（如 4/3、16/10、3/4.4），img 统一 object-fit:cover 并加 loading="lazy"；卡片高度用内容撑开而非固定 min-height，避免长文案被截断。
「数字启航」的叙事怎么不落成空话？
把它翻译成可验收的界面动作：新用户进入 3 步内看到第一条链上记录、每步都有返回路径、失败态给出原因与重试按钮。叙事负责情绪，清单负责闭环，两者缺一不可。
实用指导清单：6 条可落地的验收要点
逐条打勾再交付- 先定层级预算全站磨砂层级不超过 3 层（底图 / 内容卡 / 浮层），每层 blur 值固定为 10 / 16 / 24px，写进设计令牌，禁止页面各处手改。验收：随机抽 5 个组件，blur 值只出现这 3 个数字。
- 对比度双点测量在底图最亮处与最暗处各测一次正文对比度，取更差值，要求正文 ≥4.5:1、次级文字 ≥3:1。不达标时优先加深卡片白遮罩，而不是把文字加粗加大。
- 断点梯度写全至少覆盖 1600px / 1024px / 640px / 380px 四档：宽屏栅格 4 列、常规 2 列、窄屏 1 列；容器宽度用
clamp()过渡，避免整屏空铺或横向溢出。 - 交互反馈三件套每个可点元素必须有 hover 位移（≤4px）、focus-visible 外描边（3px 强调色）、点按态；过渡统一 0.25s，缓动统一
var(--ease)。验收：Tab 键走完全站，焦点不丢失、不越界。 - 链上状态可感知待确认 / 已确认 / 失败三态用不同强调方式（描边色、图标、文案），不要只靠颜色区分；每个状态附一句人话解释，失败态必须给重试入口与原因码。
- 性能与可持续自检首屏图片总量 ≤180KB、懒加载 100% 覆盖、动画只跑 transform/opacity；提交前用降速到 4x 的网络跑一遍，确认无 JS 时所有区块仍完整可见。
案例横向带：四个可复用的界面装置
左右滑动查看案例横向滚动带← 滑动 →
交易详情面板
长哈希值用等宽字体并强制断行，右侧放复制按钮，点按区不小于 44px。
断点 1024px · 单列折叠
节点状态列表
在线/同步中/离线三态用图标加文案双重编码，避免仅靠颜色传达。
对比度 ≥4.5:1
启航引导页
三步引导配进度点，每步都有「跳过」与「返回」，不强迫用户走完全程。
过渡 0.45s ease-out把这份参考稿变成你们团队的验收标准
建议做法：先把上面 6 条清单抄进设计评审模板，再让前端把 blur、圆角、过渡写进同一套令牌。玻璃拟态不是装饰，而是一种对透明与可信的承诺——用得克制，它才站得住。