Tier 01 · 单页体验
钱包接入与首屏
￥18,000 起 / 2 周
- 钱包连接 + 网络切换 + 余额展示三态
- 移动端优先，断网/拒签/超时 3 类异常兜底
- 交付 Figma 源文件 + 可运行前端开发片段
服务档位 / 按链上复杂度计价
三档按「合约交互节点数 + 状态分支数」计价，报价含 2 轮免费走查；超出部分按 680 元/节点结算。
Tier 02 · 全链路
DApp 交互与状态体系
￥46,000 起 / 5 周
- 覆盖 6~10 个核心合约交互节点，含签名、授权、撤销
- 交易生命周期 5 阶段可视化（待签→广播→确认→成功/失败）
- 设计令牌 + 组件库双交付，前端可直接引用 CSS 变量
- 性能预算：首屏 JS ≤ 180KB，LCP ≤ 2.0s（4G 中端机）
Tier 03 · 共创驻场
独立设计与长期陪伴
￥12,000 / 月 · 起订 3 个月
- 每周 1 次 45 分钟体验走查，输出可执行修改单
- 每月 1 次创意网页样式提案，含 2 套视觉方向
- 无障碍与对比度巡检：正文对比度 ≥ 4.5:1
协作流程 / 4 步把链上状态讲成人话
我们不做纯视觉稿，而是把「合约返回什么」翻译成「用户此刻该看到什么」——每一步都有可验收的产物。
-
链路盘点：列出全部状态分支把合约方法、事件、错误码整理成一张 20~40 行的状态表，标注哪些是用户可感知的。遗漏的错误码超过 3 个即判定需重盘。
-
情绪分层：给等待一个说法把 0~3s、3~15s、15s+ 划成三段反馈：乐观态、进度态、可取消态。超过 15s 未确认必须给出哈希与区块浏览器入口。
-
界面织网：网格拼图式信息架构关键信息用 2×4 拼图容器分区，单屏信息块不超过 6 个，避免链上术语堆叠；术语首次出现必须配一句白话注解。
-
联调验收：真机 + 真链在测试网跑通全部状态分支，记录每步耗时；签名弹窗在 320px 宽屏下点按区 ≥ 44px，不允许出现横向滚动。
设计宇宙的 6 个支点 / 每一支都对应一条可验收指标
玻璃拟态面板 + 光晕渐变，是我们给冷峻链上数据加的体温。
状态可视化
把交易生命周期拆成 5 个可视阶段，每个阶段都有文字 + 颜色 + 图标三重编码，色盲用户也能区分。
指标：状态误读率 < 3%
独立设计语言
撞色 + 拼贴 + 打破常规栅格，让 DApp 不再长得像同一套后台模板；设计令牌统一由 CSS 变量承载。
指标：令牌复用率 ≥ 90%
用户体验兜底
拒签、断网、Gas 飙升、RPC 超时四类异常全部有出口，绝不把用户留在转圈动画里。
指标：异常可恢复率 100%
科技感网页设计
等宽字体承载哈希与地址，正文用无衬线保证可读；镂空描边标题负责记忆点，不抢信息本身。
指标：正文对比度 ≥ 4.5:1
动态交互克制
只用 150~450ms 的过渡与渐显错峰，尊重 prefers-reduced-motion，动效服务于理解而非表演。
指标：动效时长 ≤ 450ms
前端开发交付
交付可运行的 HTML + CSS 片段，作用域隔离、无 JS 依赖，直接贴进现有工程即可预览。
指标：首屏 JS ≤ 180KB
128+
已盘点的链上状态分支总数
2.0s
4G 中端机首屏 LCP 上限
12天
单页体验档平均首版交付周期
94%
走查后异常出口补全覆盖率
落地清单 / 7 条能直接照做的做法
给区块链应用开发团队与独立设计师的实务建议，每条都带可量化阈值。
先建状态表，再画界面
把合约的 read/write 方法与错误码列成表，标注「用户可感知 / 不可感知」。可感知状态超过 8 个时，先做信息分组再进入视觉，否则必然堆叠。
等待反馈分三段，超过 15s 必须给哈希
0~3s 用乐观态，3~15s 用进度态并显示已等待秒数，15s+ 提供区块浏览器链接与「刷新状态」按钮；禁止无上限的转圈。
哈希与地址用等宽字体并允许断行
地址按 4 字符一组显示，中间用 0x7f…a91c 缩写；容器设 overflow-wrap:break-word，避免长串撑破 320px 窄屏。复制按钮点击后 1.5s 内给出「已复制」反馈。
强调色只占 10% 面积
中性底色与主色承担 90% 版面，高亮蓝仅用于按钮、激活态、关键数字与 1px 高亮线；一旦高亮色块超过单屏面积 10%，立刻降级为描边或文字色。
异常四件套：拒签 / 断网 / Gas 飙升 / RPC 超时
每种异常都要有独立文案 + 恢复动作。拒签文案需说明「未产生任何链上费用」；Gas 超过用户设定上限 30% 时弹出二次确认，而非静默失败。
用设计令牌替代魔法数值
间距走 4/8pt 节奏、圆角与阴影统一引用变量、过渡统一 150/250/450ms 三档。改一次令牌即可全局换肤，也便于前端开发与设计稿对齐。
动效必须可被关掉，且不承载信息
渐显错峰延迟控制在 60~360ms，全部动效在 prefers-reduced-motion:reduce 下降级；任何靠动画才能看到的关键信息都属于不合格设计。
无障碍巡检不要留到最后
每轮走查固定检查：正文对比度 ≥ 4.5:1、点按区 ≥ 44px、焦点可见环 2px、图片 alt 描述具体场景；窄屏 320px 下逐屏确认无横向溢出。