Найкращі практики дизайну децентралізованих бірж (DEX)
З моменту запуску Юнісвоп у 2018 році було запущено сотні децентралізованих бірж у десятках різних мереж. Багато з них представили нові елементи або додали власні особливості, але інтерфейс загалом залишився незмінним.
Однією з причин цього є закон Якоба (opens in a new tab):
Користувачі проводять більшу частину свого часу на інших сайтах. Це означає, що користувачі вважають за краще, щоб ваш сайт працював так само, як і всі інші сайти, які вони вже знають.
Завдяки першим новаторам, таким як Юнісвоп, Pancakeswap та Sushiswap, користувачі децентралізованих фінансів (DeFi) мають спільне уявлення про те, як виглядає DEX. З цієї причини зараз з'являється щось на зразок «найкращих практик». Ми бачимо, як дедалі більше дизайнерських рішень стандартизуються на різних сайтах. Ви можете розглядати еволюцію DEX як гігантський приклад тестування на практиці. Те, що працювало, залишилося, а те, що ні — було відкинуто. Тут усе ще є місце для індивідуальності, але існують певні стандарти, яким має відповідати DEX.
Ця стаття є коротким оглядом того:
- що слід включити
- як зробити його максимально зручним у використанні
- основні способи налаштування дизайну
Усі приклади макетів (вайрфреймів) були створені спеціально для цієї статті, хоча всі вони базуються на реальних проєктах.
Набір Figma також включено внизу — сміливо використовуйте його та прискорюйте створення власних макетів!
Базова анатомія DEX
Інтерфейс користувача (UI) зазвичай містить три елементи:
- Головна форма
- Кнопка
- Панель деталей
Варіації
Це буде спільною темою в цій статті, але існують різні способи організації цих елементів. «Панель деталей» може бути:
- Над кнопкою
- Під кнопкою
- Прихована в панелі-акордеоні
- Та/або в модальному вікні «попереднього перегляду»
Зверніть увагу: модальне вікно «попереднього перегляду» є необов'язковим, але якщо ви показуєте дуже мало деталей у головному інтерфейсі, воно стає необхідним.
Структура головної форми
Це поле, де ви фактично вибираєте, який токен хочете обміняти. Компонент складається з поля введення та маленької кнопки в одному рядку.
DEX зазвичай відображають додаткові деталі в одному рядку зверху та одному рядку знизу, хоча це можна налаштувати інакше.
Варіації
Тут показано дві варіації інтерфейсу; одна без жодних меж, що створює дуже відкритий дизайн, і інша, де рядок введення має межу, що створює фокус на цьому елементі.
Ця базова структура дозволяє відобразити чотири ключові елементи інформації в дизайні: по одному в кожному куті. Якщо є лише один верхній/нижній рядок, то місць лише два.
Під час еволюції DeFi сюди було включено багато різних речей.
Ключова інформація для включення
- Баланс у гаманці
- Кнопка «Макс.» (Max)
- Фіатний еквівалент
- Вплив на ціну для «отриманої» суми
На ранніх етапах розвитку DeFi фіатний еквівалент часто був відсутній. Якщо ви створюєте будь-який проєкт Web3, важливо, щоб фіатний еквівалент відображався. Користувачі все ще мислять категоріями місцевих валют, тому, щоб відповідати ментальним моделям реального світу, це слід включити.
У другому полі (тому, де ви вибираєте токен, на який обмінюєте) ви також можете включити вплив на ціну поруч із сумою у фіатній валюті, розрахувавши різницю між введеною сумою та орієнтовною сумою на виході. Це досить корисна деталь для включення.
Кнопки з відсотками (наприклад, 25%, 50%, 75%) можуть бути корисною функцією, але вони займають більше місця, додають більше закликів до дії та збільшують когнітивне навантаження. Те саме стосується повзунків із відсотками. Деякі з цих рішень щодо інтерфейсу залежатимуть від вашого бренду та типу користувачів.
Додаткові деталі можна показати під головною формою. Оскільки цей тип інформації призначений переважно для професійних користувачів, має сенс або:
- звести її до мінімуму, або;
- приховати її в панелі-акордеоні
Додаткова інформація для включення
- Ціна токена
- Проковзування
- Мінімально отримано
- Очікуваний результат
- Вплив на ціну
- Орієнтовна вартість газу
- Інші комісії
- Маршрутизація ордерів
Можна стверджувати, що деякі з цих деталей можуть бути необов'язковими.
Маршрутизація ордерів — це цікаво, але для більшості користувачів вона не має великого значення.
Деякі інші деталі просто повторюють те саме різними словами. Наприклад, «мінімально отримано» та «проковзування» — це дві сторони однієї медалі. Якщо у вас встановлено проковзування на рівні 1%, то мінімум, який ви можете очікувати отримати = очікуваний результат мінус 1%. Деякі інтерфейси показуватимуть очікувану суму, мінімальну суму та проковзування... Що корисно, але, можливо, є надмірним.
Більшість користувачів усе одно залишать проковзування за замовчуванням.
«Вплив на ціну» часто відображається в дужках поруч із фіатним еквівалентом у полі «до» (to). Це чудова деталь UX, яку варто додати, але якщо вона показана тут, чи дійсно її потрібно знову показувати нижче? А потім ще раз на екрані попереднього перегляду?
Багато користувачів (особливо ті, хто обмінює невеликі суми) не звертатимуть уваги на ці деталі; вони просто введуть число і натиснуть «обмін».
Те, які саме деталі будуть показані, залежатиме від вашої аудиторії та того, яке враження ви хочете справити своїм застосунком.
Якщо ви все ж включаєте допуск на проковзування в панель деталей, вам також слід зробити його редагованим безпосередньо звідси. Це хороший приклад «прискорювача»; акуратний трюк UX, який може прискорити роботу досвідчених користувачів, не впливаючи на загальну зручність використання застосунку.
Варто ретельно продумати не лише одну конкретну частину інформації на одному екрані, але й увесь процес загалом: Введення чисел у головній формі → Перегляд деталей → Перехід на екран попереднього перегляду (якщо він у вас є). Чи повинна панель деталей бути видимою постійно, чи користувачеві потрібно натиснути на неї, щоб розгорнути? Чи варто створювати додаткові перешкоди, додаючи екран попереднього перегляду? Це змушує користувача сповільнитися та обдумати свою угоду, що може бути корисним. Але чи хочуть вони знову бачити ту саму інформацію? Що для них найкорисніше на цьому етапі?
Варіанти дизайну
Як уже згадувалося, багато з цього зводиться до вашого особистого стилю. Хто ваш користувач? Який ваш бренд? Ви хочете «професійний» інтерфейс, що показує кожну деталь, чи віддаєте перевагу мінімалізму? Навіть якщо ви орієнтуєтеся на професійних користувачів, які хочуть отримати всю можливу інформацію, вам усе одно слід пам'ятати мудрі слова Алана Купера:
Яким би красивим, яким би крутим не був ваш інтерфейс, було б краще, якби його було менше.
Структура
- токени зліва або токени справа
- 2 рядки або 3
- деталі над або під кнопкою
- деталі розгорнуті, згорнуті або не показані
Стиль компонентів
- порожні
- з контуром
- заповнені
З суто точки зору UX, стиль інтерфейсу має менше значення, ніж ви думаєте. Візуальні тренди приходять і йдуть циклами, і багато вподобань є суб'єктивними.
Найпростіший спосіб відчути це — і подумати про різні конфігурації — це поглянути на деякі приклади, а потім трохи поекспериментувати самостійно.
Набір Figma, що додається, містить порожні, контурні та заповнені компоненти.
Погляньте на наведені нижче приклади, щоб побачити різні способи, як усе це можна поєднати:
Але з якого боку має бути токен?
Суть у тому, що це, ймовірно, не має великого значення для зручності використання. Однак є кілька речей, про які слід пам'ятати, і які можуть схилити вас в той чи інший бік.
Було досить цікаво спостерігати, як мода змінюється з часом. Спочатку в Юнісвоп токен був зліва, але згодом його перемістили праворуч. Sushiswap також зробив цю зміну під час оновлення дизайну. Більшість, але не всі, протоколи наслідували цей приклад.
Фінансова конвенція традиційно ставить символ валюти перед числом, наприклад, $50, €50, £50, але ми кажемо 50 доларів, 50 євро, 50 фунтів.
Для звичайного користувача — особливо того, хто читає зліва направо, зверху вниз — токен праворуч, імовірно, здається більш природним.
Розміщення токена зліва, а всіх чисел справа виглядає приємно симетрично, що є плюсом, але в такого макета є й інший недолік.
Закон близькості стверджує, що елементи, які знаходяться близько один до одного, сприймаються як пов'язані. Відповідно, ми хочемо розміщувати пов'язані елементи поруч. Баланс токенів безпосередньо пов'язаний із самим токеном і змінюватиметься щоразу, коли вибирається новий токен. Тому має трохи більше сенсу, щоб баланс токенів знаходився поруч із кнопкою вибору токена. Його можна було б перемістити під токен, але це порушує симетрію макета.
Зрештою, в обох варіантів є свої плюси та мінуси, але цікаво, що тенденція, схоже, схиляється до розміщення токена праворуч.
Поведінка кнопки
Не робіть окремої кнопки для схвалення (Approve). Також не робіть окремого кліку для схвалення. Користувач хоче здійснити обмін, тому просто напишіть «обмін» на кнопці та ініціюйте схвалення як перший крок. Модальне вікно може показувати прогрес за допомогою індикатора кроків або простого сповіщення «транзакція 1 з 2 — схвалення».
Кнопка як контекстна довідка
Кнопка може виконувати подвійну функцію як сповіщення!
Насправді це досить незвичний патерн дизайну за межами Web3, але він став стандартом у ньому. Це хороша інновація, оскільки вона економить простір і зосереджує увагу.
Якщо основна дія — ОБМІН — недоступна через помилку, причину можна пояснити за допомогою кнопки, наприклад:
- змінити мережу
- підключити гаманець
- різні помилки
Кнопку також можна прив'язати до дії, яку потрібно виконати. Наприклад, якщо користувач не може здійснити обмін через те, що він перебуває в неправильній мережі, на кнопці має бути написано «переключитися на Етеріум», і коли користувач натискає на кнопку, вона має переключити мережу на Етеріум. Це значно прискорює процес для користувача.
Створіть власний за допомогою цього файлу Figma
Завдяки наполегливій роботі багатьох протоколів дизайн DEX значно покращився. Ми знаємо, яка інформація потрібна користувачеві, як ми повинні її показувати та як зробити процес максимально плавним. Сподіваємося, ця стаття надає ґрунтовний огляд принципів UX.
Якщо ви хочете поекспериментувати, сміливо використовуйте набір макетів Figma. Він максимально простий, але має достатньо гнучкості для побудови базової структури різними способами.
Набір макетів Figma (opens in a new tab)
DeFi продовжуватиме розвиватися, і завжди є місце для вдосконалення.
Хай щастить!
Останнє оновлення сторінки: 21 жовтня 2025 р.
