去中心化交易所 (DEX) 设计最佳实践

自 2018 年尤尼斯瓦普推出以来，已有数百个去中心化交易所 (DEX) 在数十个不同的链上推出。其中许多引入了新元素或添加了它们自己的特色，但界面总体上保持不变。

造成这种情况的一个原因是雅各布定律 (Jakob’s Law) (opens in a new tab)：

用户将大部分时间花在其他网站上。这意味着用户更希望你的网站与他们已经了解的所有其他网站的运作方式相同。

多亏了尤尼斯瓦普、Pancakeswap 和 Sushiswap 等早期创新者，去中心化金融 (DeFi) 用户对去中心化交易所的外观有了共同的认知。因此，类似“最佳实践”的东西正在涌现。我们看到越来越多的设计决策在各个网站中被标准化。你可以将去中心化交易所的演变视为一个巨大的实时测试案例。行之有效的设计被保留下来，而无效的则被淘汰。虽然仍有展现个性的空间，但去中心化交易所应该符合某些标准。

本文总结了：

应该包含哪些内容
如何使其尽可能易用
定制设计的主要方法

所有的示例线框图都是专门为本文制作的，尽管它们都基于真实项目。

底部还包含了 Figma 工具包——请随意使用它来加速你自己的线框图设计！

去中心化交易所的基本剖析

用户界面 (UI) 通常包含三个元素：

主表单
按钮
详情面板

变体

这将是本文的一个常见主题，但这些元素有多种不同的组织方式。“详情面板”可以：

在按钮上方
在按钮下方
隐藏在手风琴面板中
和/或在“预览”模态框中

注意：“预览”模态框是可选的，但如果你在主 UI 上显示的细节很少，它就变得必不可少了。

主表单的结构

这是你实际选择要兑换哪个代币的框。该组件由一行中的一个输入字段和一个小按钮组成。

去中心化交易所通常在上方一行和下方一行显示额外的细节，尽管这可以有不同的配置。

变体

这里展示了两种 UI 变体；一种没有任何边框，创造了一种非常开放的设计，另一种输入行有边框，从而将焦点集中在该元素上。

这种基本结构允许在设计中显示四个关键信息：每个角落一个。如果只有顶部/底部一行，那么就只有两个位置。

在去中心化金融 (DeFi) 的演变过程中，这里包含了许多不同的内容。

需包含的关键信息

钱包余额
最大值 (Max) 按钮
法币等值金额
对“接收”金额的价格影响

在去中心化金融 (DeFi) 的早期，法币等值金额通常是缺失的。如果你正在构建任何类型的 Web3 项目，显示法币等值金额是必不可少的。用户仍然习惯以当地货币来思考，因此为了匹配现实世界的心理模型，应该包含这一点。

在第二个字段（你选择要兑换成哪个代币的字段）中，你还可以通过计算输入金额和估计输出金额之间的差值，在法币金额旁边包含价格影响。这是一个非常有用且值得包含的细节。

百分比按钮（例如 25%、50%、75%）可能是一个有用的功能，但它们占用更多空间，增加了更多号召性用语，并增加了更多心理负担。百分比滑块也是如此。其中一些 UI 决策将取决于你的品牌和用户类型。

额外的细节可以显示在主表单下方。由于此类信息主要面向专业用户，因此合理的做法是：

尽可能保持极简，或者；
将其隐藏在手风琴面板中

需包含的额外信息

代币价格
滑点
最低接收量
预期输出
价格影响
Gas 成本估算
其他费用
订单路由

可以说，其中一些细节可能是可选的。

订单路由很有趣，但对大多数用户来说并没有太大区别。

其他一些细节只是用不同的方式重述同一件事。例如，“最低接收量”和“滑点”是同一枚硬币的两面。如果你将滑点设置为 1%，那么你预期接收的最低金额 = 预期输出 - 1%。一些 UI 会显示预期金额、最低金额和滑点……这很有用，但可能有些多余。

无论如何，大多数用户都会保留默认滑点。

“价格影响”通常显示在“接收”字段中法币等值金额旁边的括号内。这是一个很棒的 UX 细节，但如果它显示在这里，真的还需要在下方再次显示吗？然后在预览屏幕上再显示一次？

许多用户（尤其是那些兑换小额资金的用户）不会关心这些细节；他们只会输入一个数字并点击兑换。

确切显示哪些细节将取决于你的受众以及你希望应用程序具有什么样的感觉。

如果你确实在详情面板中包含了滑点容差，你也应该让它直接在这里可编辑。这是“加速器”的一个很好的例子；一个巧妙的 UX 技巧，可以加快有经验用户的流程，而不会影响应用程序的整体可用性。

仔细思考不仅是一个屏幕上的某一条特定信息，而是整个流程，这是一个好主意：在主表单中输入数字 → 浏览详情 → 点击进入预览屏幕（如果你有预览屏幕）。详情面板应该始终可见，还是需要用户点击才能展开？你应该通过添加预览屏幕来制造摩擦吗？这迫使用户放慢速度并考虑他们的交易，这可能很有用。但他们想再次看到所有相同的信息吗？在这一点上对他们最有用的是什么？