Web3界面设计：为dApp、钱包和交易所，一次一个状态

Web3 UI/UX设计涵盖哪些内容

快速测试： 让一位新手使用您的原型发送一笔测试交易。记录他们每一次犹豫的时刻。

Web3 UI/UX设计让用户更容易理解和完成dApp、钱包、交易所或落地页的路径。它将研究和交互规划与视觉设计相结合，使界面能够解释用户可以做什么以及接下来会发生什么。

当您正在准备新产品、重构令人困惑的旅程，或在开发前对齐现有界面时，这项服务非常合适。当受众包括刚接触加密货币、可能还不了解钱包连接、交易确认或Gas费的人群时，它尤其有用。

工作内容可以包括：

• 用户研究和相关竞品体验审查。
• 展示用户如何从入口点移动到任务完成的用户流程图。
• 在视觉润色前确定结构和优先级的线框图。
• 用于一致屏幕的视觉设计系统和组件库。
• 可点击原型、可用性测试以及Figma中的开发人员交付。

如果项目还需要一致的视觉标识，可将界面工作与设计与视觉或加密货币品牌设计结合。正确的起点是最重要的产品任务，而不是一次性重绘所有屏幕的请求。

我们如何绘制Web3用户旅程？

一个强大的Web3界面始于对用户目标、他们必须做出的决策以及每一步所需信息的清晰描述。我们在确定屏幕布局之前绘制旅程，以便团队在更改仍然容易时解决令人困惑的逻辑。

我们审查您的产品、现有屏幕、受众和竞品体验，然后确定核心任务和问题。对于钱包或dApp，这可能意味着追踪引导、钱包连接、交易操作以及确认或恢复路径。我们将顺序记录为流程图，并指出决策点、缺失信息以及用户可能需要安心的地方。

在进入详细设计之前，请准备：

• 产品的主要用户任务和目标受众。
• 现有屏幕、产品说明或可用的工作版本。
• 需要连接钱包或用户确认的操作。
• 已知的交易状态、错误案例和支持指南。
• 您的开发团队已知的任何技术限制。

我们利用这些材料来商定哪些旅程属于计划，以及原型需要展示什么。对于需要用通俗语言解释这些步骤的产品信息，设计可以与Web3内容创作协调。

界面应显示哪些钱包和交易状态？

Web3界面应使钱包和交易状态可见，而不是让用户猜测操作是否成功。将这些状态与主屏幕一起设计，让产品团队能够审查和构建更完整的体验。

对于每个相关操作，我们考虑用户在操作之前、期间和之后看到的内容。这包括钱包连接、待处理交易、确认、清晰的成功状态以及有用的错误消息。当Gas费或其他决策影响操作时，界面应以适合目标受众的语言解释选择。针对非加密货币用户的引导应在相关步骤出现时介绍不熟悉的步骤，而不是假设用户已有先验知识。

对流程的实用审查会问：

• 用户能否判断何时需要连接钱包？
• 他们确认的是哪个操作是否清晰？
• 屏幕是否解释了正在等待什么以及下一步该做什么？
• 用户能否从错误中恢复而不丢失当前位置？
• 标签和消息在连接的屏幕之间是否一致？

这些问题塑造了线框图、视觉设计和原型行为。它们也为开发人员提供了要实现的状态的共享参考。当交易消息、引导提示或解释性文本需要专门撰写时，我们可以将界面与Web3文案撰写协调。

您的团队在Figma中收到的内容

经验法则： 为每笔交易展示5种状态：就绪、等待、成功、失败和取消。

您的团队会收到一个完整的设计套餐：记录好的旅程、屏幕设计、可复用的界面元素以及展示关键交互如何组合的原型。确切的屏幕集遵循商定的计划，因此每个人都知道正在设计和审查什么。

研究和竞品审查为用户流程图提供信息；流程图指导线框图；批准的结构进入视觉设计系统和组件库。然后，我们将相关屏幕连接成可点击的原型，并使用可用性测试找出需要澄清的地方。最终的Figma交付为开发人员提供了设计屏幕和状态的有组织参考。

套餐可以包括：

• 与产品相关的研究笔记和竞品审查发现。
• 所选旅程的用户流程图和线框图。
• 视觉界面设计和可复用的组件库。
• 用于审查和可用性测试的可点击原型路径。
• Figma中的开发人员交付，屏幕和状态按参考组织。

这为产品、设计和开发团队提供了一个在实施前讨论的共同工件。如果您的项目需要围绕界面发布制定更广泛的沟通计划，请将工作与社交媒体和内容连接。我们在开始时定义您将收到的内容，以便原型深度和屏幕覆盖范围与团队的下一步决策相匹配。

设计如何从简报推进到交付

工作通过商定的审查点推进，从产品背景到经过测试的原型和开发人员交付。在MarketingExtra，第一次审查检查简报、现有材料和团队限制是否为我们提供了足够的背景来绘制正确的用户旅程。

启动后，我们确认受众、主要任务、源材料以及将审查工作的决策者。我们在完善界面之前绘制流程图和线框图，这使您的团队能够在视觉细节最终确定之前对结构做出响应。一旦视觉方向和组件方法获得批准，我们将选定的屏幕连接成原型并测试相关任务。最终的交付在Figma中为开发团队准备。

时间表在我们了解计划后商定。它受旅程的数量和复杂性、产品决策和源材料的可用性以及决策者审查设计检查点的速度影响。您可以通过指定一位决策者、尽早共享现有产品文档以及在每次审查时将反馈汇总为一份回复来帮助工作推进。

请发送您的产品概述、当前屏幕或构建版本、目标用户以及您最需要改进的旅程。我们将审查这些材料，与您澄清计划，并概述达到开发人员就绪原型所需的设计工作。

您的6点Web3界面检查清单

在开发人员开始之前检查这6点。它们涵盖了Web3用户失去信任的时刻，例如等待、失败和签名，并使设计更易于构建和测试。如果某个项目难以勾选，那是有用的信息：它显示了在花费任何金钱或时间之前需要解决什么。

1. 设计所有5种交易状态。
2. 在用户签名前显示费用和网络。
3. 用通俗语言编写错误消息。
4. 与一位新手一起测试流程。
5. 在小屏手机上检查布局。
6. 交付带有命名组件的Figma文件。

术语一览

交易状态 指支付或操作的阶段，例如等待或失败。

线框图：屏幕的简单草图，在视觉设计前显示布局。

设计过程能确定什么

设计可以展示产品如何传达钱包操作和交易状态，但它无法确定外部钱包、链或合约在每种情况下的行为。这些系统可能返回产品团队必须处理的状态或消息，因此我们使设计的状态明确，并与您的团队能够提供的技术信息对齐。原型和可用性测试有助于评估人们是否理解预期的旅程；它们不保证采用或成功交易。对于交付，我们记录您的团队确认的预期状态，例如连接不可用、用户拒绝、待确认和返回的错误，以便开发人员能够区分设计的响应与需要产品或技术决策的条件。

请发送3样东西：您的产品需求、当前屏幕以及您关注的3个竞品。有了这些，我们规划研究和流程，并在设计开始前以书面形式确认成本。

如何操作

1. 分享产品背景发送产品概述、受众描述、当前屏幕或构建版本，以及您想要改进的主要用户任务。
2. 商定旅程和计划我们与您一起审查材料，确定优先级流程，并定义参与范围的屏幕、状态和原型深度。
3. 审查流程图和线框图我们绘制旅程并布局其结构，以便您的团队在视觉细化之前解决产品问题。
4. 设计并测试界面我们创建视觉系统和组件，将商定的屏幕连接成原型，并使用可用性测试找出需要澄清的地方。
5. 接收Figma交付我们在Figma中组织批准的设计和相关状态，以便您的开发团队拥有清晰的实施参考。