Разработка UX/UI дизайна криптобиржи
Дизайн биржи — это баланс между профессиональной плотностью информации и доступностью для широкой аудитории. Binance перегружена. Robinhood упрощена до потери функций. Хорошая биржа находит баланс: новичок не теряется, профессионал не скучает.
Исследование и аудитория
Перед дизайном — определение целевой аудитории. Это кардинально меняет решения:
Розничный трейдер (основная масса): привык к мобильным приложениям, не понимает order book, боится margin. Нужен: простой spot trading, понятные балансы, четкие P&L.
Активный трейдер: торгует часами, использует индикаторы, хочет быстрое размещение ордеров, горячие клавиши, customizable layout.
Профессионал/institutional: нужна 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 в строке (miniature 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 недель.