UX walkthrough · live

UX досконально

Полный обход интерфейса терминала: каждая панель, меню и виджет — с живыми скриншотами и референсом контролов/шорткатов.

Рабочее пространство

Стартовый экран — мозаика виджетов (докинг Lumino). Гостю сразу открывается рабочий демо-workspace с живыми котировками; окно логина снимается Esc.

Верхняя панель: лого/Community, переключатель воркспейсов («My Workspace»), Start Free Trial, Hotkeys, Add Widgets, аккаунт.
Виджеты тайлятся бок о бок; границы тянутся (live-resize), виджеты перетаскиваются (drag заголовка), есть fullscreen каждого.
Несколько воркспейсов (табы), сохраняются на сервере; переключение/создание/переименование.

Демо-workspace: Watchlist + График (живые котировки), верхняя панель

Live-resize: перетаскивание границы виджета мгновенно перекомпоновывает сетку

Хедер графика и контролы

Слева направо в шапке графика:

Контрол	Действие
☰ Drag to Move	перетащить виджет
🔗 Widget Linking	связать графики (синхрон символа/ТФ/crosshair по каналам-цветам)
BTC/USDT BYBIT	поиск/смена символа
1h	меню таймфреймов
Change Chart Types	Candles / Line / Bars
ƒ Add Indicators	пикер индикаторов + маркетплейс
VS Compare Symbol	наложить другой инструмент
Create Alert (⌥A)	создать алерт
Object Tree	слои (рисунки/индикаторы)
Undo/Redo	⌘Z / ⌘⇧Z
More Settings (…)	Settings / Duplicate / Delete
Share Chart	шаринг/embed
Enter Fullscreen	развернуть
Buy / Sell	инлайн-ордер (если подключена биржа)

Иконки без статических подписей — тултипы появляются на hover. Слева вверху — инлайн Buy/Sell и live OHLC-ридаут.

Таймфреймы (тики/секунды/custom)

Движок строит свечи на лету из сырых котировок — отсюда богатый выбор интервалов.

Ticks: 1/5/10/25/50/100/500/1000 (1–49 бесплатно на всех стримах; 50–1000 — Binance/Bybit/Pepperstone/Exness).
Seconds: 1/3/5/10/15/30/45; Minutes: 1/3/5/15/30/45; Hours: 1/2/3/4; Days: 1D/1W/1M.
Custom Timeframe — любой интервал (напр. 7 мин, 3 часа). Любимые ТФ — звездой в верхнюю панель.

Меню «Change Timeframe»: Ticks 1–1000, Seconds, Custom Timeframe

Типы графика и crosshair

Типы: Candles / Line / Bars (area/baseline — для индикаторов и сравнения).
Crosshair: перекрестие + ценовой пилл на шкале + временной пилл на оси + live-OHLC в шапке. Магнит к OHLC (порог 16px), snap-угол 45° (Shift).

Crosshair: ценовой+временной пиллы, OHLC-ридаут

Индикаторы

Кнопка ƒ → пикер: поиск «Find scripts», фильтр Built-in, сетка (Accumulation/Distribution, ALMA, Aroon, ADX, ATR, Awesome Oscillator, Bollinger Bands, RSI…), внизу Explore (маркетплейс) + «+» (создать на Indie).

Пикер индикаторов: Built-in грид + Find scripts + Explore

Добавленные индикаторы рисуются в пейнах: Bollinger Bands оверлеем, RSI/объёмы — отдельными пейнами. Расчёт серверный (мелькает «Loading…»), рендер на GPU.

Bollinger Bands: полосы + средняя SMA + заливка, легенда с параметрами

Панель настроек графика

More Settings → Settings. Декларативная панель, 6 групп; внизу Templates / Apply to All / Reset to Default.

Группа	Опции
Style	тип Candles/Line/Bars; цвета Body/Border/Wicks, Last Visible Price, Last Price, Volume Bars — каждый со свотчем + reset + видимость; advanced color picker
Canvas	Background, Text Color, Grid (none/hor/vert/both), Crosshair (solid/dashed/dotted), Margins (right/top/bottom)
Security Label	внутричартовый watermark: Logo / Full Name / Exchange / Market Status + OHLC
Scales	Regular / Logarithmic / Percent / Index to 100; price labels; Timezone (дефолт Etc/UTC); Extended Hours
Alerts	Alert lines, Inactive alerts, Ticker labels
Templates	сохранить весь визуал графика для переиспользования

Chart Settings: группа Style (Candles/Line/Bars + цвета/видимость) + Canvas; внизу — drawing-тулбар

Инструменты рисования

Тулбар появляется при наведении (внизу/слева графика). 7 категорий + утилиты. Точки хранятся в логических координатах (устойчивы к зуму).

Категория	Инструменты (шорткаты)
Measures	Quick Measure (⇧M), Date&Price, Date (⌥D), Price (⌥⇧M), Long-Short (⌥L), Volume Profile
Lines	Line (⌥T), Arrow, Ray, Trend Angle, H-Ray (⌥⇧H), H-Line (⌥H), V-Line (⌥V), Cross (⌥X), Channel (⌥⇧C)
Patterns	XABCD, Cypher, Head&Shoulders, ABCD, Triangle, Three Drives, Elliott Impulse/Correction
Shapes	Circle (⌥O), Rectangle (⌥R), Triangle (⌥G), Ellipse (⌥⇧O), Curve (⌥K), Arc (⌥⇧K)
Free-form	Pen (⌥P), Highlighter (⌥I), Path (⌥⇧P), Polyline (⌥N)
Fibonacci	Retracement (⌥F), Extension (⌥⇧F), Speed-Resistance Fan, Time Zone
Text	Text (⌥⇧T), Callout (⌥⇧Y), Price Tag (⌥⇧G)

Утилиты: Magnet (Regular highs/lows · Strong каждое OHLC, ⌘-hold), Hide/Show (⌘H), Sync (Global/Workspace/Channel/Local), Lock (⌘L), Favorites (★), Remove All.
Object Tree (слои): папки, группировка (⌘/⇧-select), видимость, блокировка, порядок (front/back), переименование, sync per-группа.

Drawing-тулбар внизу графика: cursor/crosshair/magnet/line/ray/channel/shapes/pattern/pen/text/measure/hide/lock/trash

Widget Hub и виджеты

«Add Widgets» открывает правый drawer с карточками-превью (drag&drop в сетку или «+»).

Widget Hub: карточки Chart / Watchlist / Indie® Code Editor… с «+» и drag&drop

Виджет	UX / что делает
Chart	см. выше — ядро
Watchlist	списки (builtIn/свои), live-котировки, виртуализация, ресайз колонок, flash цены, Add Symbol
Screener	скринер акций: фильтры/категории, сортировка по капитализации/метрикам
Financials	фундаментал: P/E, P/S, P/B, EV/EBITDA, dividend yield; периоды Yr/QTR
Market Depth	стакан (DOM) + Order Flow Bubbles (Canvas2D), пресеты ценового шага, classic/pro
Indie® Code Editor	IDE на CodeMirror для индикаторов/стратегий; см. ниже
Strategy/Backtesting	бэктест: equity/drawdown, метрики (Sharpe/Sortino/Calmar/Profit Factor), Trades/Orders
Feed	лента сообщества
Notes	блочный редактор, заметки по бумаге
Account	торговый счёт брокера: equity/PnL/margin, Assets/Positions/Orders/History
Lime / J2T / Ilotcos	брокерские order/portfolio (iframe)

Indie IDE

Редактор скриптов на CodeMirror 6 с подсветкой Python-подобного Indie: тулбар Docs/Draft/Add to Chart, компиляция серверная, ошибки с координатами в консоли.

Indie® Code Editor: from indie import / @indicator / def Main(self): return self.close[0]

Торговля и ордера

Buy/Sell в шапке графика открывают Create Order (если подключена биржа — Bybit нативно / Lime через iframe).

Параметры: Side, Price (ввод или с графика), Quantity, Order Value/Cost (авторасчёт), TIF=GTC, Trigger Price (Last/Mark/Index), TP/SL/RR, Reduce-Only.
Chart-trading: drag ценовых уровней, визуальные TP/SL, RR на графике. Margin Cross/Isolated + Leverage.
Account Widget: Equity/Available/Unrealized PnL; табы Assets/Positions/Open Orders/Order/Trade History; двусторонний sync с биржей.
Beta-лимиты: только Market/Limit, только One-Way, нет редактирования ордеров.

Алерты

Создание: кнопка Alerts / bell на графике / правый клик / ⌥A; линию алерта можно драгать по шкале цены.
14 триггеров (Moving Up/Down±%, Crossing/Cross Up/Down, Greater/Lower, Channel-условия), источник Price или Indicator, мульти-условные (AND).
Доставка: popup / email / Telegram / Discord / webhook; переменные сообщения ({{ticker}}, {{close}}…); режимы Plain/JSON.
Частота: Only Once / Per Bar / Per Bar Close / Per Minute / Every Trigger. Лимиты: Free 1 (3мес), All-In 400 вечных. Логи на весь lifetime.

Горячие клавиши

Все хоткеи конфигурируемы (Hotkeys в верхней панели).

Действие	Клавиши
Cycle виджеты / manager	Tab / ⇧Tab
Fullscreen виджета	⇧F
Settings panel	⌘I
Create alert	⌥A
Add symbol to watchlist	⌥W
Undo / Redo	⌘Z / ⌘⇧Z
Copy/Paste drawing	⌘C / ⌘V
Clone drawing	⌘+drag
Hide all drawings	⌘H
Lock drawing	⌘L
Magnet (strong)	⌘-hold
Bar zoom	⌘+scroll
Snap 45°	⇧ при рисовании
Drawing tools	⌥T line · ⌥F fib · ⌥R rect · ⌥H h-line · ⌥V v-line …

Ощущение: pan/zoom, fullscreen

Pan — drag (инерция на тач), zoom — колесо (якорь к курсору) / ⌘+scroll. Рендер on-demand: 0 draw в покое, 120Гц при движении — отсюда плавность.
Fullscreen виджета — на весь экран; индикаторы пересчитываются под новый диапазон в реальном времени.

пан: после (BB пересчитались в реальном времени)

Мобильный UX

Грузит реальный терминал (без заглушки). На тач Lumino переключается в single-document (один виджет за раз). Зум страницы залочен — все жесты у приложения.

Тач: touch-drag виджетов, пинч-зум графика, kinetic-инерция, Touchpad-Overlay для точного рисования (long-tap edit / tap finish / double-tap complete).
Нижний drawing-тулбар на графике; мобильные тулбары; PWA (service worker). Нативного приложения у takeprofit.com нет.

Мобильный вид (390px): watchlist + график, снизу — мобильный drawing-тулбар

Метод

Живой обход демо-терминала (Playwright, десктоп 1680×1020 + мобильный 390px). Скриншоты сняты в продукте; референс контролов/шорткатов/виджетов сверен с официальной документацией (99 страниц) и кодом. Тяжёлый WebGL-терминал крашит рендерер под автоматизацией — часть поверхностей снята покадрово. Артефакты: ~/research/takeprofit-charts/ux/, /shots/.