---
title: "去中心化交易所 (DEX) 设计最佳实践"
description: "解释代币兑换 UX/UI 决策的指南。"
lang: zh
---

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

造成这种情况的一个原因是[雅各布定律 (Jakob’s Law)](https://lawsofux.com/jakobs-law/)：

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

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

本文总结了：
- 应该包含哪些内容
- 如何使其尽可能易用
- 定制设计的主要方法

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

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

## 去中心化交易所的基本剖析 {#basic-anatomy-of-a-dex}

用户界面 (UI) 通常包含三个元素：
1. 主表单
2. 按钮
3. 详情面板

![Generic DEX UI, showing the three main elements](./1.png)


## 变体 {#variations}

这将是本文的一个常见主题，但这些元素有多种不同的组织方式。“详情面板”可以：
- 在按钮上方
- 在按钮下方
- 隐藏在手风琴面板中
- 和/或在“预览”模态框中
  
注意：“预览”模态框是可选的，但如果你在主 UI 上显示的细节很少，它就变得必不可少了。

## 主表单的结构 {#structure-of-the-main-form}

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

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

![Input row, with a details row above and below](./2.png)

## 变体 {#variations2}

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

![Two UI variations of the main form](./3.png)

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

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

## 需包含的关键信息 {#key-info-to-include}

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

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

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

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

额外的细节可以显示在主表单下方。由于此类信息主要面向专业用户，因此合理的做法是：
- 尽可能保持极简，或者；
- 将其隐藏在手风琴面板中

![Details shown in the corners of that main form](./4.png)

## 需包含的额外信息 {#extra-info-to-include}

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

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

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

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

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

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

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

![Some details show the same thing](./5.png)

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

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

![Slippage can be controlled from the details panel](./6.png)

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

## 设计选项 {#design-options}

如前所述，这在很大程度上取决于你的个人风格
你的用户是谁？
你的品牌是什么？
你想要一个显示每个细节的“专业”界面，还是想要极简主义？
即使你的目标是希望获得所有可能信息的专业用户，你仍然应该记住艾伦·库珀 (Alan Cooper) 的名言：

> 无论你的界面多么漂亮，多么酷炫，如果能少一点就更好了。

### 结构 {#structure}

- 代币在左侧，或代币在右侧
- 2 行或 3 行
- 细节在按钮上方或下方
- 细节展开、最小化或不显示

### 组件样式 {#component-style}

- 留白
- 轮廓
- 填充

从纯粹的 UX 角度来看，UI 样式的重要性不如你想象的那么大。视觉趋势循环往复，很多偏好都是主观的。

感受这一点并思考各种不同配置的最简单方法是查看一些示例，然后自己进行一些实验。

包含的 Figma 工具包包含留白、轮廓和填充组件。

看看下面的示例，了解将它们组合在一起的不同方式：

![3 rows in a filled style](./7.png)

![3 rows in a outlined style](./8.png)

![2 rows in an empty style](./9.png)

![3 rows in an outlined style, with a details panel](./10.png)

![3 rows with the input row in an outlined style](./11.png)

![2 rows in a filled style](./12.png)

## 但是代币应该放在哪一边？ {#but-which-side-should-the-token-go-on}

归根结底，它可能对可用性没有太大影响。然而，有几件事需要记住，这可能会让你倾向于某一种方式。

看到这种风尚随时间推移而改变，还是挺有趣的。尤尼斯瓦普最初将代币放在左侧，但后来将其移到了右侧。Sushiswap 在设计升级期间也做出了这一改变。大多数（但不是所有）协议都纷纷效仿。

传统上，金融惯例将货币符号放在数字之前，例如 $50、€50、£50，但我们*说* 50 美元、50 欧元、50 英镑。

对于普通用户——尤其是从左到右、从上到下阅读的人——代币在右侧可能感觉更自然。

![A UI with tokens on the left](./13.png)

将代币放在左侧，所有数字放在右侧看起来令人愉悦地对称，这是一个优点，但这种布局还有另一个缺点。

接近法则指出，靠得近的物品会被认为是相关的。因此，我们希望将相关的物品放在一起。代币余额与代币本身直接相关，并且每当选择新代币时都会发生变化。因此，将代币余额放在代币选择按钮旁边稍微更合理一些。它可以移到代币下方，但这会破坏布局的对称性。

最终，这两种选项都有优缺点，但有趣的是，趋势似乎是倾向于将代币放在右侧。

## 按钮行为 {#button-behavior}

不要为授权设置单独的按钮。也不要为授权设置单独的点击。用户想要兑换，所以只需在按钮上写“兑换”，并将授权作为第一步启动。模态框可以通过步进器显示进度，或者显示一个简单的“交易 1/2 - 授权中”通知。

![A UI with separate buttons for approve and swap](./14.png)

![A UI with one button that says approve](./15.png)

### 按钮作为上下文帮助 {#button-as-contextual-help}

按钮可以兼作警报！

这在 Web3 之外实际上是一种相当不寻常的设计模式，但在 Web3 内部已成为标准。这是一个很好的创新，因为它节省了空间，并保持了注意力的集中。

如果主要操作——兑换——由于错误而不可用，可以通过按钮解释原因，例如：

- 切换网络
- 连接钱包
- 各种错误

按钮也可以**映射到需要执行的操作**。例如，如果用户因为在错误的网络上而无法兑换，按钮应该显示“切换到以太坊”，当用户点击按钮时，它应该将网络切换到以太坊。这显著加快了用户流程。

![Key actions being initiated from the main CTA](./16.png)

![Error message shown within the main CTA](./17.png)

## 使用此 Figma 文件构建你自己的设计 {#build-your-own-with-this-figma-file}

多亏了多个协议的辛勤工作，去中心化交易所的设计有了很大改进。我们知道用户需要什么信息，我们应该如何展示它，以及如何使流程尽可能顺畅。
希望本文能为你提供关于 UX 原则的扎实概述。 

如果你想进行实验，请随意使用 Figma 线框图工具包。它尽可能保持简单，但具有足够的灵活性，可以通过各种方式构建基本结构。

[Figma 线框图工具包](https://www.figma.com/community/file/1393606680816807382/dex-wireframes-kit)

去中心化金融 (DeFi) 将继续发展，并且总有改进的空间。 

祝你好运！