Дизайн DeFi-дашборда: волты стейкинга, позиции и комиссии на одном экране
Дизайн DeFi-дашборда — это работа над тем, чтобы баланс пользователя, стоимость следующего действия и состояние каждой автоматической позиции уместились на одном экране. thelegacy проектирует такие дашборды и интерфейсы стейкинга для web3-команд: потоки Souq, дашборд опционов Optix и дашборд маркетмейкинга Skynet ниже — наши опубликованные примеры.
Более широкая услуга — UX/UI и веб-дизайн; эта страница показывает, что мы выводим на экран и зачем.
Что должен показывать DeFi-дашборд?
Пять вещей: чем владеет пользователь, где это лежит, сколько будет стоить следующее действие, что делают автоматические позиции и какие действуют ограничения. Таблица сопоставляет каждую с экраном в наших кейсах.
| На что должен отвечать экран | Как это решено в кейсе |
|---|---|
| Чем я владею и как это меняется? | Портфель Souq: пять KPI-карточек над графиком, который можно показать в USD, SOL, ETH или BTC |
| Где лежат деньги? | Дашборд Skynet: круговая диаграмма распределения баланса для каждой пары, вкладки для сводного вида и отдельных бирж |
| Сколько будет стоить это действие? | Окна Souq: комиссии расписаны над кнопкой подтверждения |
| Что это за стратегия простыми словами? | Optix: карточки стратегий со схемой выплаты и одной строкой пояснения |
| Работает ли каждая автоматическая позиция? | Skynet: таблицы ботов со столбцом статуса для каждой стратегии |
Как спроектировать интерфейс стейкинга, который сначала показывает стоимость?
Вынесите все комиссии в окно подтверждения над кнопкой и сделайте все окна потока одним семейством. В Souq вкладчики кладут стейблкоины в волт, например ETH-Gaming, получают доли волта и зарабатывают награды в игровых токенах. Выбор блокчейна, подтверждение депозита, покупка и продажа долей, добавление и вывод ликвидности и вывод наград идут в одном порядке: название волта сверху, суммы в тёмных плитках, комиссии, затем одна кнопка подтверждения.
Решение, которое мы бы повторили: комиссии никогда не прячутся под раскрывающимся блоком. В потоке, где подписанную транзакцию не отменить, скрытая стоимость — дефект дизайна, а не выбор вёрстки.
Как сделать торговый дашборд понятным непрофессионалу?
Начните со взгляда пользователя на рынок, а полную таблицу ордеров покажите второй. Optix — ончейн-протокол опционов, а опционы — нишевый продукт даже в крипте. Дашборд открывается четырьмя переключателями настроения — от стрелки вверх до волны, дальше идут карточки стратегий вроде Call, Strap и Bull Call Spread, каждая с маленькой схемой выплаты и одной простой строкой. Опытные трейдеры всё равно получают полную таблицу Legs, ордера Market и Limit и панель, ограничивающую волт одобренными контрагентами.
Что нужно дашборду для автоматической торговли?
Карта денег и статус каждого бота. В дашборде Skynet эмитент токена следит за ботами, которые торгуют его парами. Боковая панель содержит Dashboard, Market Making, Balances, Charts и Transactions, вкладки переключают сводный вид и отдельные биржи, а параметры ботов лежат в простых таблицах для маркетмейкинга, ликвидности и адаптивных стратегий.
Дизайн DeFi-сайта: чек-лист перед передачей в разработку
- Баланс и его изменение видны без клика.
- Каждая комиссия показана до кнопки подтверждения.
- У каждой автоматической позиции есть статус.
- Цвет несёт смысл: прибыль, убыток и нулевые значения имеют постоянные цвета.
- На телефоне таблица превращается в карточки «подпись — значение».
Если вы строите DeFi-продукт, страница UX/UI-дизайна показывает, как мы работаем. Читайте также: UX web3-кошельков и паттерны финтех-UX, которые строят доверие.
Главное
- Проверка экрана: видны ли баланс, стоимость следующего действия и статус каждой автоматической позиции без единого клика.
- В Souq все окна потока стейкинга устроены одинаково, а комиссии расписаны над кнопкой подтверждения, потому что подписанную транзакцию не отменить.
- В Optix дашборд открывается настроением рынка, а не таблицей ордеров; полная таблица остаётся для опытных.
Частые вопросы
Что такое DeFi-дашборд?
Это экран, который собирает в одном месте данные пользователя в децентрализованных финансах: баланс, позиции, награды и стоимость следующего действия. Его цель — дать решить, что делать дальше, не переключаясь между несколькими приложениями.
Что такое интерфейс стейкинга?
Это часть продукта, где пользователь вносит активы в волт или пул, следит за наградами и выводит средства. Он отличается от торгового терминала тем, что ведёт от состояния позиции, а не от графика цены.
Чем дизайн DeFi отличается от обычного финтеха?
Подписанную транзакцию нельзя отменить, комиссии зависят от сети, а данные приходят из блокчейна. Поэтому стоимость и последствия действия нужно показать до подтверждения, а не после.
Что показывать на мобильной версии дашборда?
То же самое, но в другой форме: строки таблицы превращаются в карточки «подпись — значение», а баланс и статусы остаются на первом экране. В Optix у каждой из вкладок New, Quotes и Trades есть мобильная версия.
Сколько времени занимает дизайн такого дашборда?
Это зависит от числа потоков, числа состояний экрана и от того, есть ли готовая дизайн-система. Ориентир даёт только описание задачи, поэтому общих сроков мы не называем.
