Дизайн 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 має мобільну версію.
Скільки часу займає дизайн такого дашборда?
Це залежить від кількості потоків, кількості станів екрана й від того, чи є готова дизайн-система. Орієнтир дає лише опис задачі, тому ми не називаємо загальних термінів.
