自 Uniswap 于 2018 年发布之后，成百上千的去中心化交易所已在数十个不同的链上发布。 它们中的许多已经引入新的元素或加入自己的调整，但界面基本保持相同。

这种现象的原因之一是雅各布定律(opens in a new tab)：

用户将大多数时间花费在其他网站。 这意味着用户更愿意你的网站采用他们已在其他网站熟知的操作方式。

得益于 Uniswap 、Pancakeswap 和 Sushiswap 这样的早期创新者，去中心化金融用户对去中心化交易所的外观已经达成一些共识。 因此，各类“最佳做法”层出不穷。 我们看到越来越多的设计决策成为网站的标准。 你可以将去中心化交易所的演变视作实时检验的巨型范例。 有用的东西留下，无用的东西淘汰。 尽管仍有个性化的余地，去中心交易所还是应该符合特定的标准。

本文概括介绍以下内容：

• 应该包含的元素
• 如何尽可能地提高实用性
• 定制设计的主要方式

所有的示例线框均依据本文专门制作，但它们都基于真实的项目。

Figma 工具包也附于本文底部 - 请随意使用，快速制作你自己的线框！

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

用户界面大致包含三个元素：

1. 主表单
2. 按钮
3. 细节面板

变体

这将是本文的通用主题，但这些元素可能有多种不同的组织方式。 “细节面板”可能位于：

• 按钮上方
• 按钮下方
• 隐藏在可折叠面板中
• 和/或显示在“预览”模态上

注意： “预览”模态是可选的，但如果主用户界面只显示了很少的细节，它就十分重要了。

主表单的结构

这是一个方框，供你选择想要交换的代币。 组件包括一个输入字段和一个小按钮，排成一行。

去中心化交易所通常在它的上一行和下一行显示额外细节，但也可以采用其他配置。

变体

这里显示了两种用户界面变体：一种没有任何边框，形成一种非常开放的设计；另一种的输入行带有边框，以突出显示该元素。

这种设计的基本结构显示了四种关键信息：每个角上各一种。 如果只有一个顶部/底部行，则仅有两种信息。

去中心化金融演变期间的许多不同事物都包含在其中。

需要包含的关键信息

• 钱包余额
• 最大化按钮
• 等价法币
• 价格对“接收”金额的影响

在去中心化金融的早期，等价法币经常缺失。 如果你在构建任何形式的 Web3 项目，显示等价法币至关重要。 用户始终从本地货币的角度考虑，所以为了符合真实世界的心理模型，等价法币应该包含进来。

在第二个字段（供你选择兑换成的代币），你也可以通过计算输入金额与估计输出金额之间的差异，在法定货币金额旁包含价格影响。 这是一个需要包含的相当有用的细节。

百分比按钮（即 25%、50%、75%）可以成为一项有用的功能，但会占用更多空间，增加更多行动号召，以及更多心理负担。 百分比滚动条也是如此。 其中一些用户界面的决定取决于你的品牌和用户类型。

主表单下可以显示额外的细节。 由于这类信息主要针对专业用户，因此合理的做法有：

• 尽量将其最小化，或；
• 将其隐藏在可折叠面板中

要包含的额外细节

• 代币价格
• 滑点
• 最小接收值
• 预计输出
• 价格影响
• 预计燃料成本
• 其他费用
• 订单路由

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

订单路由很有趣，但对大多数用户来说没有作用。

一些其他细节只是在以不同方式重述相同的内容。 例如，“最小接收值”与“滑点”就像是同一个硬币的两个面。 如果将滑点设为 1%，那么你预计收到的最小值就是预期输出 -1%。 一些用户界面会显示预计金额、最小金额和滑点… 这些细节很有用，但可能过于琐碎。

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

“价格影响”通常显示在“至”字段中等价法币旁的括号内。 该细节能有效地增强用户体验，但如果已经显示在这里，真的还有必要在下面再显示一次吗？ 然后在预览屏幕上再显示一次？

许多用户（尤其是那些进行小额兑换的用户）不会在意这些细节；他们只会简单地输入数字并点击兑换。

具体显示哪些细节将取决于你的受众以及你希望该应用程序给人带来的体验。

如果你在细节面板中包含了滑点容差，还应该让它可在此处直接编辑。 这是一个很好的“加速器”例子；简洁的用户体验可以帮助经验丰富的用户加快流程，而且不会影响应用程序的一般可用性。

最好不要只考虑屏幕上的某一条特定信息，还要通盘考虑整个流程： 在主表单中输入数字 → 扫视细节 → 点击进入预览屏幕（如果有的话）。 细节面板应该一直保持可见，还是需要用户点击展开呢？ 应该通过添加预览屏幕来制造缓冲吗？ 这将迫使用户放慢速度并认真考虑他们的交易，可能会很有用。 但他们希望再次看到所有相同的信息吗？ 在这个时间点，哪些内容对他们来说最有用？

设计选项

如上所述，这很大程度取决于你的个人风格 你的用户是谁？ 你的品牌是什么？ 你想要一个展示所有细节的“专业”界面，还是尽可能的极简主义？ 即使你的首重是想要获得尽可能多信息的专业用户，你仍应记住 Alan Cooper 的忠告：

无论你的界面有多漂亮、多酷，如果能简洁一点，它将变得更好。

结构

• 代币在左边还是右边
• 2 行还是 3 行
• 细节在按钮上方还是下方
• 展开细节、最小化细节，还是不显示细节

组件风格

• 空白
• 带线框
• 填充

从纯粹的用户体验角度来看，用户界面的风格不像你想的那么重要。 视觉趋势循环往复，而且很多偏好非常主观。

要想感受这一点并考虑各种不同的配置，最简单的方法是，查看一些示例，然后自己去做一些尝试。

附带的 Figma 工具包内含空白、带线框和填充的组件。

查看下面的例子，了解将它们组合在一起的各种方式。

但是代币应该放在哪一边呢？

需要注意的是，这不会对实用性产生重大影响。 但有几点需要牢记于心，并可能会以某种方式影响你。

观察时尚潮流随时间变化是一件有趣的事。 Uniswap 最初将代币放在左边，但之后又将它移到了右边。 Sushiswap 在设计升级时也做了这项更改。 大多数协议（但并非全部）都效仿了这一点。

依据传统的金融惯例，货币符号被放在数字之前，即 $50、€50 和 £50，但我们讲的却是 50 美元、50 欧元和 50 英镑。

对于一般用户，特别是习惯从左往右、从上往下阅读的用户，将代币放在右边可能会感觉更自然。

将代币放在左边并将数字放在右边看起来是对称的，这是一个优点，但这种布局也有另一个缺点。

临近定律指出，相距较近的内容往往被看作是相关的。 因此，我们希望将相关的内容放在彼此旁边。 代币余额与代币本身直接相关，并且会在选择新代币时发生变化。 因此，将代币余额放在代币选择按钮旁边更为合理。 可以将它移动到代币下方，但那样会破坏布局的对称性。

总的来说，两种选择各有优缺点，但有趣的是，当前的趋势似乎是将代币放在右边。

按钮行为

不要有单独的“批准”按钮。 也不要单独点击“批准”。 用户想要交换，只需要点击“交换”按钮，并启动批准来作为第一步。 可以用一个模态，通过计步器显示交易进度，或者显示简单通知“交易 1/2 - 正在批准”。

用作上下文帮助的按钮

按钮可以起到另一个作用 - 作为警报！

实际上，这在 Web3 外是一种相当罕见的设计模式，但在 Web3 内已经成为一种标准。 这是一项很好的创新，因为它能节省空间并有助于集中注意力。

如果主操作“交换”由于错误不可使用，则可以通过按钮来解释原因，例如：

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

按钮还可以被映射到需要执行的操作。 例如，如果用户因为选择了错误的网络而不能进行交换，则按钮应显示“切换到以太坊”，并在用户点击按钮时将网络切换到以太坊。 这将显著加速用户的使用流程。

使用此 figma 文件构建您自己的设计

得益于多个协议的共同作用，去中心化交易所设计已经有了显著改进。 我们知道用户需要哪些信息，应该如何展示这些信息，以及如何使流程尽可能流畅。 希望这篇文章提供了关于用户体验原则的全面概述。

如果你想尝试，请随时使用 Figma 线框包。 它尽可能地保持简单，但仍有足够的灵活性，能以各种方式构建基础结构。

Figma 线框包(opens in a new tab)

去中心化金融将不断发展，而且始终有改进的空间。

祝你好运！