单页设计
一页讲完，但每屏都有行动
用细线分隔与留白建立层级，滚动到任意位置都能看到「下一步做什么」。信息密度控制在每屏 1 个论点 + 3 个支撑点。
交付：栅格稿 + 6 区块组件清单
这是一个网页样式设计参考 · 单页设计 / 区块链应用开发 / 极简细线版式，仅作视觉与结构参考。
单页网站 · 区块链应用开发 · 用户体验优化
把一条链， 绽放成可用的产品 我们陪你把 灵感 落到第 1 个版本
从单页设计的信息骨架，到链上合约、钱包接入与响应式布局，我们以 6 周为一个小步周期推进：每 2 周交付一个可点、可测、可上链的增量版本。你不必一次想清楚全部，我们按周把不确定变成可验证的数字。
6周单页 MVP 首个可上链版本
2周一次增量交付与走查
≤1.5s移动端首屏可交互目标（LCP）
01 / 实用指导清单
把区块链应用做「好用」的 7 条落地清单
每条都配可核对的做法与阈值，可直接贴进你的需求文档。我们更愿意陪你逐条打勾，而不是给你一份漂亮但落不了地的方案。
-
01
先写「单页信息骨架」，再画视觉
用 6 个区块定稿：价值主张、能力便签、案例图集、协作流程、FAQ、CTA。每区块只保留 1 个主行动，全页主 CTA 不超过 3 个。骨架评审通过后再进入视觉，可省掉约 40% 的返工。
验收口径：每区块 1 句主标题 ≤ 22 字，正文 ≤ 70 字 -
02
钱包连接只留一条主路径
首屏只放「连接钱包」一个主按钮，其余（助记词导入、硬件钱包、多链切换）收进二级入口。连接失败给出 3 类明确原因：网络不匹配、余额不足、用户拒签，并附重试按钮。
量化目标：连接成功率 ≥ 92%，失败后 10s 内可重试 -
03
把链上等待「翻译成人话」
交易提交后展示三段状态：已广播（约 2s）→ 打包中（约 12s）→ 已确认，并给区块浏览器链接。禁止只转圈，必须给出预计时长与可撤销提示。
量化目标：等待超过 15s 时显示可刷新的进度说明 -
04
合约交互做「最小授权」与白名单
代币授权默认填当前所需额度而非无限额度；敏感方法（转账、升级、提权）加二次确认弹层；前端只调用白名单合约地址，地址写进配置并用
量化目标：无限授权占比降到 0，敏感操作 100% 二次确认chainId校验。 -
05
响应式布局按 5 档断点收口
320 / 640 / 1024 / 1600 / 2560px 五档：卡片列数 1→1→2→4→4，容器宽度逐级放宽到 1400 / 1680px。栅格用
量化目标：任意视口无横向溢出，点按区 ≥ 44×44pxminmax(0,1fr)，图片容器固定宽高比 +object-fit:cover，避免加载跳动。 -
06
性能与可访问性一起验收
首屏图片
量化目标：移动端 LCP ≤ 1.5s，CLS ≤ 0.05，Lighthouse 可访问性 ≥ 95loading="lazy"、字体用系统 grotesque、动效走 CSS 且可被prefers-reduced-motion关闭；正文对比度 ≥ 4.5:1，交互元素加:focus-visible描边。 -
07
上线后按「陪伴节奏」迭代
上线首月每周看 3 个指标：连接成功率、首笔交易完成率、FAQ 展开率。FAQ 展开率最高的两条，下个版本直接前置到首屏文案里。
量化目标：首笔交易完成率每月提升 ≥ 5 个百分点
02 / 能力便签
四张便签，贴在我们最常被问到的能力上
便签会有点歪，像贴在显示器边上的提醒——每一张都对应一个可交付物和验收方式。
区块链应用
合约、钱包、索引器一条链打通
合约接口先定 ABI 与错误码，前端按错误码做文案映射；事件索引用增量同步，断点续传保证数据不丢。
交付：ABI 文档 + 错误码对照表
用户体验优化
把「等待」和「失败」设计出来
等待态给进度与时长，失败态给原因与一键重试，空态给示例与下一步。三类状态各有专属文案模板，避免临时写。
交付：状态文案库（约 40 条）
创新设计
描边大字 + 细线母题，克制地好看
强调色只用于按钮、激活态与关键数字，占比控制在 10% 以内；大标题用描边镂空处理，靠明度层次而非高饱和抢眼。
交付：颜色令牌表 + 组件状态图
03 / 客户评价
他们最在意的，是「被陪着把事做完」
摘录三段真实协作反馈，保留了我们被指出问题的部分——这些反馈后来变成了流程里的固定动作。
我们没有产品经理，只有一个想法。他们先陪我们把单页信息骨架写了三版，第二周就做出了能点能测的版本。最有用的是那张错误码对照表，客服照着念就能答。
首笔交易完成率：上线首月提升 23%
林澈链上工具产品负责人
之前最怕用户说「卡住了」。他们把等待切成三段并给了预计时长，客服工单里关于「交易去哪了」的问题直接少了六成。响应式布局也是那次一起收口的，移动端体验终于不像附属品。
等待类工单：下降 61%
周砚数字资产平台运营负责人
他们坚持把无限授权改成按需授权，一开始我们嫌麻烦，后来审计报告里这条成了加分项。每周五的走查会雷打不动，问题当场定责任人，不拖到下周。
审计高风险项：清零
苏黎DeFi 团队技术负责人
04 / 工作流程
四步走，每步都有可核对的输出
周期以 6 周为一个小步，每 2 周一次增量交付。你随时能看到进度，也随时能喊停或调整方向。
01
对齐与拆解
用半天工作坊把想法拆成 6 个单页区块与 1 份需求清单，明确哪些先做、哪些这轮不做。
- 周期
- 第 1 周
- 输出
- 信息骨架 + 需求清单
02
设计与原型
细线栅格稿 + 可点击原型，含连接钱包、等待态、失败态三类关键界面，先在小范围用户里走一遍。
- 周期
- 第 2–3 周
- 输出
- 原型 + 颜色令牌表
03
开发与联调
合约接口、钱包接入、响应式布局同步推进；每 2 周交付一个可上链的增量版本，附错误码对照表。
- 周期
- 第 3–5 周
- 输出
- 可测版本 + ABI 文档
04
上线与陪伴
上线首月每周复盘三项指标，FAQ 高频问题回写首屏文案，形成持续迭代的小步节奏。
- 周期
- 上线后持续
- 输出
- 周报 + 迭代清单
05 / 常见问题
你可能会先问这几件事
点开任意一条查看具体做法与数值。没有标准答案的部分，我们会直接说「取决于你的场景」，并给出判断依据。
只做一个单页网站，够承载区块链应用吗？
够。单页设计适合把「价值主张—能力—案例—流程—FAQ—行动」讲完整，关键是把链上交互（连接钱包、发起交易、查看状态）做成页面内的清晰动作，而不是堆在二级页。经验值：单页承载 6 个区块、3 个主行动时，移动端滚动完成率最高；再多就会稀释注意力。
我们还没有合约，能先做前端吗？
可以先用接口契约并行：约定方法名、入参、错误码与状态机（待签名/广播中/已确认/失败），前端先接模拟数据跑通交互，合约就绪后替换数据源即可。这样能省下约 2 周串行等待时间，但错误码必须两边共用同一份清单。
响应式布局要投多少精力？
按 5 档断点收口即可：320 / 640 / 1024 / 1600 / 2560px。重点是三件事——卡片列数随宽度变化、图片容器固定宽高比、长英文地址强制断行。做到位后，超过 80% 的移动端样式问题会在开发阶段就被拦住。
如何量化「用户体验优化」的效果？
盯三个指标：钱包连接成功率（目标 ≥ 92%）、首笔交易完成率（每月提升 ≥ 5 个百分点）、等待类客服工单占比（目标下降 50% 以上）。上线首月每周看一次，指标不动就先改文案与状态反馈，而不是先改视觉。
上线后你们还管吗？
管。我们把上线当作陪伴的开始：首月每周一次 30 分钟复盘，按数据决定下周改什么。若某项指标连续两周无变化，我们会主动提出暂停迭代，先回到需求层重新对齐，避免无效改版。
- 诊断后 48 小时内给出书面建议
- 骨架草案含 6 个区块与 3 个主行动
- 风险清单标注合约、合规与性能三类
- 不签长约：先跑一个小步周期再决定