去中心化交易所(DEX) 設計的最佳實踐

自 2018 年 Uniswap 推出以來，已經有數百個去中心化交易所(DEX) 在不同的區塊鏈上推出。其中許多去中心化交易所引入新的元素或增加自己的特色，但他們依然保有整體介面的一致性。

能做到這樣的原因之一，就是遵循 Jackob 法則（Jakob’s Law）：

使用者大多數時間在使用其他網站，他們會更喜歡您的網站與其他已經很熟悉的網站以相同方式運作。

多虧有像 Uniswap、Pancakeswap 和 Sushiswap 這類型的早期創新者，DeFi 使用者對去中心化交易所（DEX）的樣貌有了共同的認知。因此，現在有了「最佳實踐」。我們看到越來越多不同平台的設計逐漸標準化。你可以將去中心化交易所的演變，看成一個大型的即時測試案例。有用的設計被保留下來，不好的設計會被淘汰，雖然應該要保有設計彈性，但去中心化交易所的設計應遵循某些規範。

這篇文章會提到

要引入什麼
如何提升易用性
如何進行有彈性的設計

所有範例線框圖都是基於真實案例，專為本文製作而成。

Figma 工具包就放在文末，歡迎用來加速您的線框圖設計！

拆解去中心化交易所的基本設計要素

UI 通常包含下列三種元素：

主介面
按鈕
資訊選單

變化

這將是本文的通用主題，但這三個元素有許多不同的組織方式。資訊頁面的變化包含：

位在按鍵上方
位在按鍵下方
隱藏在折疊區內
或者是在預覽模式內

請注意：雖然預覽模式不是必要的，但若主介面顯示的資訊非常少，那就必須使用預覽模式。

主介面的架構

您可以在這個區塊選擇要交換的代幣。這個元件是由一個輸入欄位與一個小型按鍵排列組成。

去中心化交易所會根據使用情境，通常會在這個上方或下方，顯示額外的說明文字。

變化

這裏展示了兩種用戶介面變化：一種沒有任何邊框，形成一種非常開放的設計；另一種的輸入行帶有邊框，引導使用者關注該元素。

該基本結構允許顯示四種關鍵資訊：每個角落顯示一種。如果只有一個頂部/底部行，則只顯示兩種資訊。

隨著去中心化金融 (DeFi) 的演變，許多其他資訊也被包含在這裏。

需要包含的關鍵資訊

錢包餘額
最大化按鈕
等價法定貨幣
價格對「接收」金額的影響

在去中心化金融的早期，等價法定貨幣常常被忽略。無論你正在構建任何類型的 Web3 項目，顯示等價法定貨幣都是至關重要的。用戶仍然以本地貨幣進行思考。因此，爲了與真實世界的心理模型相匹配，等價法定貨幣應該包含在内。

在第二個欄位 (你選擇交換的目標代幣)，你還可以透過計算輸入金額與預計輸出金額之間的差異，在法定貨幣金額旁包含價格影響。這是一個相當實用的細節。

百分比按鈕（例如：25%、50%、75%）可以是個實用的功能，但會佔用更多空間、增加更多行動呼籲，並加重心理負擔。百分比滾滑桿亦是如此。其中一些用戶介面的決定取決於您的品牌和使用者類型。

主表單下方可以顯示額外的細節。由於這類資訊主要針對專業的使用者，因此合理的做法有：

盡可能最小化，或;
將其隱藏在折叠面板中

需要包含的額外資訊

代幣價格
滑點
最小到帳金額
預期輸出
價格影響
燃料成本估算
其他費用
訂單路徑

可以説，其中一些細節是可選的。

訂單路徑很有趣，但對大多數使用者來説沒什麽作用。

一些其他細節只是在以不同的方式表達同樣的内容。例如，「最小到帳金額」與「滑點」就像是同個硬幣的兩個面。如果將滑點設爲 1%，那麽您預計收到的最小金額就是預期輸出 - 1%。一些用戶介面會顯示預期金額，最小金額和滑點… 這些細節雖然有用，但可能過於繁瑣了。

大多數用戶只會使用默認的滑點。

「價格影響」通常在等價法定貨幣旁「發送至」欄位中的括號内。該細節能夠有效提升用戶體驗，但如果已經在這裏顯示，真的還有必要在下方再次顯示嗎？然後在預覽畫面中再顯示一次？

許多使用者（尤其是進行小額交換的使用者）不會在意這些細節；他們只會簡單地輸入數字並點擊交換。

具體顯示哪些細節將取決於您的受眾，以及您希望該應用程式給使用者帶來什麽樣的感覺。

如果您在詳情面板中包含了滑點容差，則還應該讓其可以在此處直接編輯。這是一個很好的「加速器」例子；簡潔的用戶體驗可以幫助經驗豐富的使用者加快使用流程，並且不會影響應用程式的一般可用性。

在思考時仔細考慮整體的流程，而非螢幕上的片面資訊是個好方法，流程如下：在主表格輸入數字 → 掃描詳情 → 點擊進入預覽畫面（如果有的話）詳情面板應該常駐顯示，還是需要經使用者點擊才展開面板？您是否應該透過新增預覽頁面來增加緩衝？這非常有用，使用者必須放慢速度並考慮該交易。但是，他們會想再看到完全一樣的資訊嗎？此時，對使用者來說最重要的是什麼？