先确认完整任务流程
界面设计前需要确认用户从进入产品到完成目标的全部步骤，包括连接钱包、选择账户、切换网络、填写参数、查看预估、确认授权、签名、等待链上确认和查看结果。每一步要明确前端能够读取的状态以及合约实际执行的条件。
流程图需要包含用户主动取消、钱包拒绝、网络不匹配、余额不足、Gas 变化、交易被替换和长时间未确认等分支。缺少这些分支时，正式产品往往只能展示通用错误。
钱包与网络状态保持可见
- 清楚展示当前账户、网络和必要的余额信息。
- 切换网络前说明目标网络，切换失败时提供恢复方式。
- 钱包连接按钮和账户菜单使用不同状态，避免连接后仍显示模糊操作。
- 移动端考虑内置钱包浏览器、WalletConnect 与外部 App 跳转。
- 账户变化或网络变化后，重新校验当前表单和交易条件。
授权和签名需要说明后果
授权界面要说明授权对象、资产、额度和用途。无限额度授权、代理权限和高风险操作需要提供更明显的解释。签名请求需要区分登录签名、消息签名和发送交易，避免把不同操作使用同一套提示。
用户点击确认前，应能够查看关键参数和可能产生的费用。涉及兑换、质押、跨链、借贷或领取资产时，还要展示滑点、价格影响、锁定期、清算条件和目标地址等相关信息。
交易状态需要持续反馈
- 等待钱包：提示用户前往钱包查看请求。
- 已签名并广播：展示交易哈希和区块浏览器入口。
- 确认中：说明当前仍在等待链上结果，避免重复提交。
- 成功：展示实际结果、到账资产和下一步操作。
- 失败：提供具体原因、是否产生费用及可以采取的恢复方式。
前端显示的成功状态需要以真实返回结果为依据。产品演示使用测试数据时，应与生产环境信息清楚区分。
开发交接包含组件和状态说明
设计稿需要覆盖桌面端与移动端，并说明按钮、输入框、表格、弹窗、资产卡片、通知和错误提示的不同状态。交接文件中应标记数据来源、显示精度、地址缩写、时区、加载方式和无数据处理。
Hashline Studio 的 DApp UI/UX 设计服务包含用户流程、界面系统、交易状态和产品提示文案。LumaPay与 NODERA展示了支付、资产和身份验证方向的概念案例。
常见问题
DApp UI 设计和普通网页设计有什么差别？
DApp 需要处理钱包连接、网络、授权、签名、链上确认、Gas、失败恢复和资产风险等状态，界面需要向用户说明正在发生的操作及其后果。
DApp 设计前需要提供什么资料？
需要提供产品说明、用户流程、支持的钱包与网络、合约和前端能够返回的状态、测试环境、风险提示要求及现有品牌规范。
DApp 设计稿需要包含哪些状态？
除默认状态外，还需要覆盖连接中、等待签名、广播中、确认中、成功、失败、网络错误、余额不足、授权拒绝、空数据和维护等状态。