Розробка UX/UI дизайну крипто-біржи
Дизайн біржи — це баланс між професійною щільністю інформації та доступністю для широкої аудиторії. Binance перегружена. Robinhood спрощена до втрати функцій. Хороша біржа знаходить баланс: новачок не губиться, професіонал не нудиться.
Дослідження та аудиторія
Перед дизайном — визначення цільової аудиторії. Це кардинально змінює рішення:
Роздрібний трейдер (основна маса): звик до мобільних додатків, не розуміє order book, боїться margin. Потрібно: простий spot trading, зрозумілі баланси, чіткий P&L.
Активний трейдер: торгує годинами, користується індикаторами, хоче швидке розміщення ордерів, гарячі клавіші, customizable layout.
Професіонал/інституціональний: потребує FIX API, детальну історію, експорт даних, sub-accounts.
Для більшості бірж — multi-tier дизайн: Simple Mode та Advanced Mode, перемикаються одним кліком.
Торговий екран — головний інтерфейс
Layout Advanced Mode
┌─────────────────────────────────────────────────────────┐
│ LOGO [BTC/USDT ▼] 42,150 +2.35% [Simple | Pro] ⚙ │
├──────────────┬──────────────────────┬────────────────────┤
│ │ │ │
│ ORDER BOOK │ CANDLESTICK CHART │ PLACE ORDER │
│ (DOM) │ (TradingView) │ ┌─────────────┐ │
│ │ │ │ BUY │ SELL │ │
│ ASK │ │ └─────────────┘ │
│ 42,152 1.2 │ │ Limit ▼ │
│ 42,151 0.8 │ │ Price: ______ │
│ 42,150 2.1 │ │ Amount: _____ │
│ ────────── │ │ Total: ______ │
│ 42,149 1.5 │ │ [──────────] │
│ 42,148 3.2 │ │ 25% 50% 75% 100% │
│ BID │ │ [ Place BUY ] │
│ │ │ │
├──────────────┴──────────────────────┤ │
│ TRADE HISTORY ⟷ MY ORDERS │ │
│ 42,150 0.5 14:31:22 B │ │
│ 42,149 1.2 14:31:18 S │ │
└─────────────────────────────────────┴────────────────────┘
Форма ордера — критичний UX елемент
Помилки при розміщенні ордера — прямі фінансові втрати. Вимоги до форми:
Slider для розміру позиції: користувач вибирає 25/50/75/100% від доступного баланса одним кліком. Вводити число в поле — повільно та помилково.
Підтвердження крупних ордерів: якщо ордер > 10% денного обсягу користувача — діалог підтвердження.
Decimal precision: BTC з 8 знаками, USDT з 2. Автоматичне форматування.
Real-time preview: поки користувач вводить суму — миттєво показуємо Total: 4,215.00 USDT та Fee: 4.22 USDT.
// Real-time розрахунок в формі ордера
function OrderForm() {
const [quantity, setQuantity] = useState('');
const [price, setPrice] = useState('');
const total = useMemo(() => {
const q = parseFloat(quantity) || 0;
const p = parseFloat(price) || lastPrice;
return (q * p).toFixed(2);
}, [quantity, price, lastPrice]);
const fee = useMemo(() => {
return (parseFloat(total) * TAKER_FEE_RATE).toFixed(4);
}, [total]);
return (
<form>
<input value={price} onChange={e => setPrice(e.target.value)} placeholder="Price" />
<input value={quantity} onChange={e => setQuantity(e.target.value)} placeholder="Amount" />
<BalanceSlider
available={availableBalance}
price={parseFloat(price) || lastPrice}
onSelect={(pct) => setQuantity(((availableBalance * pct) / parseFloat(price)).toFixed(8))}
/>
<div>Total: {total} USDT</div>
<div>Fee: {fee} USDT</div>
<button type="submit">Place BUY</button>
</form>
);
}
Цвітова схема та типографія
Торгові кольори
Міжнародний стандарт:
- Зелений (#00B15E або #26A69A): рост ціни, buy кнопки, profit
- Червоний (#E84242 або #EF5350): падіння, sell кнопки, loss
Регіональне відхилення: у Китаї та Японії — обернена традиція (червоний = рост). Для Asian ринку потрібна опція інвертування.
Dark vs Light тема
Трейдери переважають темну тему: менше втоми очей при багатогодинній роботі з екраном. Світла — для мобільного у денний час.
:root[data-theme="dark"] {
--bg-primary: #0D0F12;
--bg-secondary: #141619;
--bg-card: #1A1D22;
--border: #2A2D35;
--text-primary: #EAECF0;
--text-secondary: #8B8FA8;
--green: #00B15E;
--red: #E84242;
}
:root[data-theme="light"] {
--bg-primary: #F5F6FA;
--bg-secondary: #FFFFFF;
--bg-card: #FFFFFF;
--border: #E4E7EF;
--text-primary: #1A1D2E;
--text-secondary: #6B7087;
}
Моноширинний шрифт для цифр
Цени та обсяги — тільки моноширинний шрифт. JetBrains Mono, Roboto Mono, IBM Plex Mono. Інакше при оновленні цен стовпці «дригаються» — цифри різної ширини.
.price, .quantity, .total, .balance {
font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
font-variant-numeric: tabular-nums; /* tabular числа — однакова ширина */
}
Markets / Watchlist екран
Головна сторінка біржи — список торговельних пар:
┌──────────────────────────────────────────────┐
│ 🔍 Search pair... [Favorites] [All] [BTC]│
├──────┬──────────┬─────────┬─────────┬────────┤
│ ★ │ Pair │ Price │ 24h % │ Volume │
├──────┼──────────┼─────────┼─────────┼────────┤
│ ★ │ BTC/USDT │ 42,150 │ +2.35% │ 1.2B │
│ ★ │ ETH/USDT │ 2,205 │ +1.87% │ 456M │
│ │ SOL/USDT │ 98.5 │ -0.42% │ 89M │
└──────┴──────────┴─────────┴─────────┴────────┘
Ключові деталі:
- Sparkline chart у рядку (мініатюрний 7-денний графік) — контекст без кліку
- Колір рядка змінюється при оновленні: flash green/red на 300 мс
- Швидкий перехід на торговий екран по кліку на рядок
Мобільний дизайн
Мобільний layout торгового екрану — tab-based, не компресія desktop:
Tabs: [Позиції | Chart | Order Book | Trade]
Кожна вкладка — повний екран. Order book на мобіле показує 10–15 рівнів (не 50 як на десктопі). Форма ордера — bottom sheet, який з'являється при натисканні "Buy/Sell".
Процес дизайну
- Research (3–5 днів): аналіз Binance, OKX, Kraken, Coinbase Advanced, Bybit
- Information Architecture (3–5 днів): карта екранів, userflows для 5 ключових сценаріїв
- Wireframes (1–2 тижні): всі екрани для desktop та mobile
- Дизайн-система (1 тиждень): кольори, типографія, компоненти
- High-fidelity дизайн (3–4 тижні): всі екрани з анімаціями та станами
- Prototype & Testing (1 тиждень): Figma prototype + usability testing
- Developer Handoff (3–5 днів): Storybook компоненти, CSS-змінні, специфікації
Повний UX/UI дизайн біржи: 8–12 тижнів.