去中心化交易所 (DEX) 設計最佳實務
自 2018 年尤尼斯瓦普推出以來，已有數百個去中心化交易所 (DEX) 在數十個不同的鏈上線。 其中許多引入了新元素或加入了他們自己的特色，但介面通常保持不變。
其中一個原因是雅各定律 (Jakob’s Law) (opens in a new tab)：
使用者大部分的時間都花在其他網站上。這意味著使用者更喜歡你的網站與他們已經熟悉的所有其他網站以相同的方式運作。
感謝尤尼斯瓦普、Pancakeswap 和 Sushiswap 等早期創新者，去中心化金融 (DeFi) 使用者對去中心化交易所的外觀有了共同的概念。 因此，類似「最佳實務」的概念正在浮現。我們看到越來越多的設計決策在各個網站之間被標準化。你可以將去中心化交易所的演進視為一個即時測試的巨大範例。有效的方法被保留下來，無效的則被淘汰。雖然仍有展現個性的空間，但去中心化交易所應該符合某些標準。
本文總結了：
- 應包含哪些內容
- 如何使其盡可能易於使用
- 自訂設計的主要方式
所有範例線框圖都是專門為本文製作的，儘管它們都是基於真實專案。
底部也包含了 Figma 套件 - 歡迎使用它來加速你自己的線框圖製作！
去中心化交易所的基本剖析
使用者介面 (UI) 通常包含三個元素：
- 主表單
- 按鈕
- 詳細資訊面板
變化形式
這將是本文的一個共同主題，但這些元素有各種不同的組織方式。「詳細資訊面板」可以：
- 在按鈕上方
- 在按鈕下方
- 隱藏在手風琴式折疊面板中
- 和/或在「預覽」互動視窗 (modal) 上
注意：「預覽」互動視窗是選用的，但如果你在主 UI 上顯示的詳細資訊非常少，它就變得不可或缺。
主表單的結構
這是你實際選擇要兌換哪個代幣的區塊。該元件由同一列中的一個輸入欄位和一個小按鈕組成。
去中心化交易所通常會在上方一列和下方一列顯示額外的詳細資訊，儘管這可以有不同的配置。
變化形式
這裡顯示了兩種 UI 變化形式；一種沒有任何邊框，創造了非常開放的設計，另一種輸入列有邊框，將焦點集中在該元素上。
這個基本結構允許在設計中顯示四個關鍵資訊：每個角落一個。如果只有一個頂部/底部列，那麼就只有兩個位置。
在去中心化金融 (DeFi) 的演進過程中，這裡包含了許多不同的東西。
應包含的關鍵資訊
- 錢包餘額
- 最大值 (Max) 按鈕
- 法幣等值金額
- 對「收到」金額的價格影響
在去中心化金融 (DeFi) 的早期，經常缺少法幣等值金額。如果你正在建立任何類型的 Web3 專案，顯示法幣等值金額是不可或缺的。使用者仍然以當地貨幣來思考，因此為了符合現實世界的心理模型，應該包含這一點。
在第二個欄位（你選擇要兌換成哪個代幣的欄位）中，你也可以透過計算輸入金額和預估輸出金額之間的差額，在法幣金額旁邊包含價格影響。這是一個非常實用的詳細資訊。
百分比按鈕（例如 25%、50%、75%）可能是一個實用的功能，但它們會佔用更多空間、增加更多行動呼籲 (call to action)，並增加更多心理負擔。百分比滑桿也是如此。其中一些 UI 決策將取決於你的品牌和使用者類型。
額外的詳細資訊可以顯示在主表單下方。由於這類資訊主要是給專業使用者看的，因此合理的做法是：
- 盡可能保持極簡，或者；
- 將其隱藏在手風琴式折疊面板中
應包含的額外資訊
- 代幣價格
- 滑價
- 最低收到金額
- 預期輸出
- 價格影響
- 燃料成本預估
- 其他費用
- 訂單路由
可以說，其中一些詳細資訊可能是選用的。
訂單路由很有趣，但對大多數使用者來說沒有太大差別。
其他一些詳細資訊只是用不同的方式重申同一件事。例如，「最低收到金額」和「滑價」是一體兩面。如果你將滑價設定為 1%，那麼你可以預期收到的最低金額 = 預期輸出 - 1%。有些 UI 會顯示預期金額、最低金額和滑價……這很有用，但可能有點多餘。
無論如何，大多數使用者都會保留預設的滑價。
「價格影響」通常顯示在「接收 (to)」欄位中法幣等值金額旁邊的括號內。這是一個很棒的 UX 細節，但如果它顯示在這裡，真的需要再次顯示在下方嗎？然後又在預覽畫面上顯示一次？
許多使用者（尤其是兌換小額的使用者）不會在意這些細節；他們只會輸入一個數字並點擊兌換。
確切顯示哪些詳細資訊將取決於你的受眾以及你希望應用程式呈現的感覺。
如果你確實在詳細資訊面板中包含了滑價容忍度，你也應該讓它可以直接從這裡編輯。這是一個「加速器」的好例子；這是一個巧妙的 UX 技巧，可以加快有經驗使用者的流程，而不會影響應用程式的整體易用性。
仔細思考的不應只是一個畫面上的特定資訊，而是整個流程，這是一個好主意： 在主表單中輸入數字 → 瀏覽詳細資訊 → 點擊進入預覽畫面（如果你有預覽畫面的話）。 詳細資訊面板應該隨時可見，還是使用者需要點擊才能展開？ 你應該透過新增預覽畫面來製造摩擦力嗎？這會迫使使用者放慢速度並考慮他們的交易，這可能很有用。但他們想再次看到所有相同的資訊嗎？此時對他們來說最有用的是什麼？
設計選項
如前所述，這很大程度上取決於你的個人風格 你的使用者是誰？ 你的品牌是什麼？ 你想要一個顯示每個細節的「專業」介面，還是想要極簡風格？ 即使你的目標是想要所有可能資訊的專業使用者，你仍然應該記住 Alan Cooper 的名言：
無論你的介面多麼美麗、多麼酷炫，如果能少一點會更好。
結構
- 代幣在左側，或代幣在右側
- 2 列或 3 列
- 詳細資訊在按鈕上方或下方
- 詳細資訊展開、最小化或不顯示
元件樣式
- 空白 (empty)
- 外框 (outlined)
- 填滿 (filled)
從純粹的 UX 角度來看，UI 樣式的重要性不如你想像的那麼大。視覺趨勢會循環交替，而且很多偏好都是主觀的。
感受這一點並思考各種不同配置的最簡單方法，就是看看一些範例，然後自己做一些實驗。
隨附的 Figma 套件包含空白、外框和填滿的元件。
看看下面的範例，了解你可以用哪些不同的方式將它們組合在一起：
但是代幣應該放在哪一側？
最重要的是，這對易用性可能沒有太大的影響。然而，有幾件事需要記住，這可能會讓你傾向於其中一種方式。
看著流行趨勢隨時間改變是一件滿有趣的事。尤尼斯瓦普最初將代幣放在左側，但後來將其移到了右側。Sushiswap 在設計升級期間也做了這個改變。大多數（但不是全部）協定都紛紛效仿。
金融慣例傳統上將貨幣符號放在數字前面，例如 $50、€50、£50，但我們說 50 美元、50 歐元、50 英鎊。
對一般使用者來說——尤其是從左到右、從上到下閱讀的人——代幣在右側可能感覺更自然。
將代幣放在左側，所有數字放在右側，看起來具有令人愉悅的對稱性，這是一個優點，但這種佈局還有另一個缺點。
相近法則指出，靠得近的項目會被認為是相關的。因此，我們希望將相關項目放在一起。代幣餘額與代幣本身直接相關，並且會在選擇新代幣時改變。因此，將代幣餘額放在代幣選擇按鈕旁邊稍微合理一些。它可以移到代幣下方，但這會破壞佈局的對稱性。
最終，這兩種選項都有優缺點，但有趣的是，趨勢似乎是朝向將代幣放在右側。
按鈕行為
不要為授權設置獨立的按鈕。也不要為授權設置獨立的點擊動作。使用者想要兌換，所以只需在按鈕上寫「兌換」，並將授權作為第一步啟動。互動視窗可以使用步驟指示器顯示進度，或者顯示簡單的「交易 1/2 - 授權中」通知。
作為情境說明的按鈕
按鈕可以兼作警示！
這在 Web3 之外實際上是一種相當不尋常的設計模式，但在 Web3 內部已成為標準。這是一個很好的創新，因為它節省了空間，並保持了注意力的集中。
如果主要動作——兌換——因為錯誤而無法使用，可以透過按鈕解釋原因，例如：
- 切換網路
- 連接錢包
- 各種錯誤
按鈕也可以對應到需要執行的動作。例如，如果使用者因為在錯誤的網路上而無法兌換，按鈕應該顯示「切換到以太坊」，當使用者點擊按鈕時，它應該將網路切換到以太坊。這顯著加快了使用者流程。
使用這個 Figma 檔案建立你自己的設計
感謝多個協定的努力，去中心化交易所的設計已經改善了許多。我們知道使用者需要什麼資訊、我們應該如何顯示它，以及如何讓流程盡可能順暢。 希望本文能提供 UX 原則的紮實概述。
如果你想進行實驗，請隨意使用 Figma 線框圖套件。它盡可能保持簡單，但具有足夠的彈性，可以用各種方式建立基本結構。
Figma 線框圖套件 (opens in a new tab)
去中心化金融 (DeFi) 將繼續演進，而且總是有改進的空間。
祝你好運！
頁面最後更新： 2025年10月21日
