Лучшие практики дизайна децентрализованных бирж (DEX)

Редактировать страницу

С момента запуска Юнисвоп в 2018 году были запущены сотни децентрализованных бирж в десятках различных сетей. Многие из них привнесли новые элементы или добавили свою изюминку, но интерфейс в целом остался прежним.

Одной из причин этого является закон Якоба (opens in a new tab):

Пользователи проводят большую часть своего времени на других сайтах. Это означает, что пользователи предпочитают, чтобы ваш сайт работал так же, как и все другие сайты, которые они уже знают.

Благодаря ранним новаторам, таким как Юнисвоп, Pancakeswap и Sushiswap, у пользователей децентрализованных финансов (DeFi) сформировалось коллективное представление о том, как должна выглядеть децентрализованная биржа (DEX). По этой причине сейчас появляется нечто вроде «лучших практик». Мы видим, как все больше дизайнерских решений стандартизируются на разных сайтах. Вы можете рассматривать эволюцию DEX как гигантский пример тестирования на практике. То, что работало, осталось, а то, что нет — было отброшено. Здесь все еще есть место для индивидуальности, но существуют определенные стандарты, которым должна соответствовать DEX.

Эта статья представляет собой краткое изложение того:

что следует включить;
как сделать интерфейс максимально удобным;
каковы основные способы кастомизации дизайна.

Все примеры вайрфреймов были созданы специально для этой статьи, хотя все они основаны на реальных проектах.

Набор Figma также включен в конце статьи — смело используйте его, чтобы ускорить создание собственных вайрфреймов!

Базовая анатомия DEX

Пользовательский интерфейс (UI) обычно содержит три элемента:

Главная форма
Кнопка
Панель деталей

Вариации

Это будет общей темой в данной статье, но существуют различные способы организации этих элементов. «Панель деталей» может быть:

Над кнопкой
Под кнопкой
Скрыта в панели-аккордеоне
И/или в модальном окне «предпросмотра»

Примечание: модальное окно «предпросмотра» не является обязательным, но если вы показываете очень мало деталей в главном UI, оно становится необходимым.

Структура главной формы

Это блок, в котором вы фактически выбираете, какой токен хотите обменять. Компонент состоит из поля ввода и небольшой кнопки, расположенных в один ряд.

DEX обычно отображают дополнительные детали в одной строке сверху и одной строке снизу, хотя это можно настроить иначе.

Вариации

Здесь показаны две вариации UI: одна без каких-либо границ, создающая очень открытый дизайн, и другая, где строка ввода имеет границу, создавая акцент на этом элементе.

Эта базовая структура позволяет отобразить в дизайне четыре ключевых элемента информации: по одному в каждом углу. Если есть только одна верхняя/нижняя строка, то мест всего два.

В процессе эволюции децентрализованных финансов (DeFi) сюда включалось множество различных элементов.

Ключевая информация для включения

Баланс в кошельке
Кнопка «Макс.» (Max)
Фиатный эквивалент
Влияние на цену для «получаемой» суммы

На заре развития DeFi фиатный эквивалент часто отсутствовал. Если вы создаете какой-либо проект Web3, крайне важно, чтобы фиатный эквивалент отображался. Пользователи по-прежнему мыслят в категориях местных валют, поэтому для соответствия ментальным моделям реального мира это должно быть включено.

Во втором поле (там, где вы выбираете токен, на который совершаете своп) вы также можете включить влияние на цену рядом с суммой в фиатной валюте, рассчитав разницу между вводимой суммой и расчетной суммой на выходе. Это довольно полезная деталь.

Кнопки с процентами (например, 25%, 50%, 75%) могут быть полезной функцией, но они занимают больше места, добавляют больше призывов к действию и увеличивают умственную нагрузку. То же самое касается ползунков с процентами. Некоторые из этих решений UI будут зависеть от вашего бренда и типа пользователей.

Дополнительные детали могут быть показаны под главной формой. Поскольку этот тип информации предназначен в основном для продвинутых пользователей, имеет смысл либо:

свести ее к минимуму, либо;
скрыть в панели-аккордеоне.

Дополнительная информация для включения

Цена токена
Проскальзывание
Минимум к получению
Ожидаемый результат
Влияние на цену
Оценка стоимости газа
Другие комиссии
Маршрутизация ордеров

Возможно, некоторые из этих деталей могут быть необязательными.

Маршрутизация ордеров — это интересно, но для большинства пользователей она не имеет большого значения.

Некоторые другие детали просто повторяют одно и то же разными словами. Например, «минимум к получению» и «проскальзывание» — это две стороны одной медали. Если у вас установлено проскальзывание в 1%, то минимум, который вы можете ожидать получить = ожидаемый результат минус 1%. Некоторые UI показывают ожидаемую сумму, минимальную сумму и проскальзывание... Что полезно, но, возможно, излишне.

Большинство пользователей в любом случае оставят проскальзывание по умолчанию.

«Влияние на цену» часто показывается в скобках рядом с фиатным эквивалентом в поле «получить» (to). Это отличная деталь UX, но если она показана здесь, действительно ли нужно показывать ее снова ниже? А затем еще раз на экране предпросмотра?

Многих пользователей (особенно тех, кто совершает своп небольших сумм) эти детали не будут волновать; они просто введут число и нажмут «обменять».

То, какие именно детали будут показаны, зависит от вашей аудитории и от того, какое впечатление должно производить приложение.

Если вы все же включаете допуск на проскальзывание в панель деталей, вам также следует сделать его редактируемым прямо отсюда. Это хороший пример «ускорителя»; изящный трюк UX, который может ускорить работу опытных пользователей, не влияя на общее удобство использования приложения.

Хорошей идеей будет тщательно продумать не только одну конкретную часть информации на одном экране, но и весь процесс в целом: Ввод чисел в главной форме → Просмотр деталей → Переход на экран предпросмотра (если он у вас есть). Должна ли панель деталей быть видимой постоянно, или пользователю нужно нажать на нее, чтобы развернуть? Стоит ли создавать трение, добавляя экран предпросмотра? Это заставляет пользователя притормозить и обдумать свою сделку, что может быть полезно. Но хотят ли они снова видеть всю ту же информацию? Что для них наиболее полезно на данном этапе?

Варианты дизайна

Как уже упоминалось, многое из этого сводится к вашему личному стилю. Кто ваш пользователь? Каков ваш бренд? Вы хотите «профессиональный» интерфейс, показывающий каждую деталь, или предпочитаете минимализм? Даже если вы ориентируетесь на продвинутых пользователей, которым нужна вся возможная информация, вам все равно следует помнить мудрые слова Алана Купера:

Каким бы красивым, каким бы крутым ни был ваш интерфейс, было бы лучше, если бы его было меньше.

Структура

токены слева или токены справа
2 строки или 3
детали над или под кнопкой
детали развернуты, свернуты или не показаны

Стиль компонентов

пустые
с контуром
залитые

С чисто UX-точки зрения стиль UI имеет меньшее значение, чем вы думаете. Визуальные тренды приходят и уходят циклами, и многие предпочтения субъективны.

Самый простой способ прочувствовать это — и подумать о различных конфигурациях — посмотреть на некоторые примеры, а затем поэкспериментировать самостоятельно.

Включенный набор 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 г.

Наверх ↑