Web3 UI设计：从首次点击到行动，打造清晰体验

设计始于产品需要清晰呈现的时刻

Web3 UI设计将产品的功能与用户下一步需要理解的内容连接起来。我们从用户任务出发，围绕它塑造旅程与界面。

想象一位大使计划负责人，在沉寂一个月后打开项目仪表盘。他们想查看哪些事项需要关注，但下一步并不明显。我们会审视他们前来完成的任务，找出困惑的起点，让重要选择更易于遵循。

同样的方法也适用于dApp、钱包、交易所或落地页流程。我们审查产品、目标用户及任何现有材料。研究与竞品分析有助于我们在绘制详细界面之前，发现缺失的上下文与别扭的步骤。

起点取决于您的团队已知的信息。如果旅程清晰，我们可以专注于界面设计与原型。如果不清晰，我们可以先厘清流程。当工作还需要视觉支持时，可将其与Web3设计与视觉相结合。

Web3界面应如何引导用户完成钱包操作？

一个实用的钱包流程应展示用户能做什么、接下来会发生什么以及界面如何响应。我们在打磨界面之前，先梳理每个重要操作。

假设一位新用户看到钱包连接提示，却不清楚为何需要连接。我们会审视提示前应呈现哪些信息，以及连接后用户会看到什么。我们还会梳理流程中应在何处解释交易或错误。目标是让下一步决策易于理解，而非隐藏技术步骤。

我们通常梳理交易旅程中的3个时刻：连接、确认与响应。线框图让您的团队在视觉设计开始前检查顺序与文案。随后，原型使选定的路径更易于作为连贯体验进行讨论。

为进行有效的首次审阅，请提供主要任务、当前需求、任何现有界面以及已知的钱包或交易状态。如果产品文案需要单独处理，Web3文案撰写可帮助保持界面语言的一致性。产品负责人应确认设计团队无法推断的任何规则。

您的产品团队可审阅的工作文件

您将收到一套完整的设计材料，用于审阅用户旅程并准备实施。我们在详细设计开始前，商定需要关注的任务与界面。

一套典型的工作成果可能包括：

• 研究笔记与竞品分析。
• 优先任务的用户流程与线框图。
• 视觉设计系统与组件库。
• 选定路径的可点击原型。
• 可用性测试及Figma中的开发交付。

流程与线框图展示任务的结构。设计系统与组件帮助您的团队审阅跨界面的视觉语言。可点击原型使选定的旅程更易于体验。可用性测试让团队有机会观察用户何时需要更多上下文。

最终交付将商定的Figma工作整理好，供开发人员使用。如果产品的整体品牌形象仍在塑造中，请在确定视觉方向前，将界面决策与加密项目品牌设计对齐。您的团队随后可一同审阅产品文案与设计。

从首次审阅到Figma交付

工作从产品背景推进到流程、界面决策、原型及开发交付。我们设置审阅节点，以便您的团队在下一层构建之前做出反馈。

在Brand Community，我们使用启动清单来收集受众、优先任务、现有设计文件、产品需求及已知问题。然后，我们商定谁可以回答产品问题，谁将审阅工作。两个审阅节点有助于保持反馈清晰：一个针对流程与线框图，另一个针对视觉方向与选定原型。

时间安排取决于旅程的数量与复杂度、已有材料以及决策反馈的速度。工作也可通过共享的产品文案，与加密内容创作或更广泛的社交媒体与内容团队相连接。

准备好塑造界面的产品决策

当您的团队能够解释用户、任务及背后的产品规则时，设计审阅最为有效。我们可以将未解答的问题在流程中呈现出来，但不应通过猜测来填补。

Figma原型可以展示预期的钱包与交易状态，但无法决定已连接钱包的显示内容，也无法决定网络交易是否完成。这些行为及其背后的产品规则仍由平台和您的产品团队负责。

为启动首次审阅，请准备以下3项内容：

1. 简短的产品概述及您预期的目标用户。
2. 最重要的一个旅程，以及任何现有的Figma文件或需求。
3. 一位能够确认产品决策并收集反馈的负责人。

您不需要一份完美的简报。将您已有的材料发送给我们，包括那些感觉尚未解决的界面或问题。我们将与您一起审阅材料，商定第一个旅程与审阅节点，并规划一条通往原型与Figma交付的清晰路径。

如何操作

1. 分享产品概况发送产品概述、目标用户、优先任务及任何现有的设计文件或需求。
2. 商定审阅内容我们确认要关注的旅程、谁可以回答产品问题，以及您的团队何时审阅决策。
3. 梳理用户任务我们准备商定的流程与线框图，以便您的团队在界面设计前检查结构。
4. 设计并测试选定路径我们创建视觉系统与界面，构建可点击原型，并按约定进行可用性测试。
5. 准备Figma交付我们将批准的设计文件整理好，供开发人员使用，并向您的团队介绍相关的界面选择。