Navigation
Восемь паттернов, по которым пользователь перемещается между поверхностями. Маркетинг ведёт за руку. ЛК ставит карту перед глазами. Analyst прячет навигацию, чтобы освободить экран. Один словарь — три голоса.
Top bar — маркетинг
aist.tech. Hairline-бордер снизу, никаких теней. Логотип слева, навигация по центру, CTA справа. Inverse-кнопка «Начать» — ровно один акцент на всю шапку.
Когда выпадающее меню
| Раздел = одна страница | Просто ссылка. Без меню. «Кейсы», «Блог», «Команда». |
| 2–4 подпункта | Простой dropdown — одна колонка. Иконка + заголовок + описание. |
| 5+ подпунктов или несколько групп | Mega-menu — 2–3 колонки, с футером и «Все … →». |
| Trigger | Hover на desktop, click на tablet/mobile. Шеврон вращается на 180°. |
| Скрытие | На mouseleave с hover-bridge сверху — чтобы курсор успевал доехать до панели. |
| Клавиатура | Tab → открывает (focus-within), Esc закрывает, ↓ идёт по пунктам. |
Высота, отступы, поведение
| Property | Value |
|---|---|
| Height | 64 px |
| Padding x | 32 px (--space-xl) |
| Bottom border | 1 px #E0E0E0 |
| Sticky behavior | Не sticky. На маркетинге — скролл свободный. |
| Logo | Commissioner 800/17, точка — primary |
| Nav links | Commissioner 500/15, opacity 0.85, gap 28 |
| Active link | На маркетинге не показываем — страницы плоские. |
Top bar — продукт (app.aist.tech)
ЛК и Analyst используют один и тот же Top bar. Уже ниже маркетингового, плотнее. Поиск Cmd+K в центре — основной инструмент. Уведомления + аватар справа.
Поиск Cmd+K — что ищем
Один палитра-поиск на продукт. Ищет по нескольким сущностям — продукты, команда, документы, недавние действия.
| Контекст | Что индексируем |
|---|---|
| ЛК | Продукты, команда, биллинг, настройки, страницы документации. |
| Analyst | Чаты, отчёты, источники, дашборды — через product switcher. |
| Маркетинг | Не показываем. Поиск там — через Google. |
Sidebar — ЛК
240 px при default, 56 px при collapsed. Org-switcher сверху, навигация группами, settings/help в футере. Active-state — тонкая полоска primary слева + secondary-фон.
Org switcher (multi-tenant)
Сверху sidebar. Клик открывает меню со списком организаций и «Создать новую». Стандарт для multi-tenant SaaS — занимает место только там, где нужно навигация.
Active state — как показываем
| Способ | Когда |
|---|---|
| Полоска primary слева + secondary фон | Default sidebar item. |
| Только полоска | Collapsed sidebar (нет места для фона). |
| Иконка primary | Дополнительный сигнал, идёт вместе с полоской. |
MI Analyst — чат + workspace
Главное окно Analyst — не список разделов в сайдбаре, а диалог с аналитиком. Слева 1/3 — чат: история, ввод, ссылки на данные. Справа 2/3 — то, что этот диалог производит: графики, таблицы, отчёт. Юзер спрашивает слева — и видит результат справа.
Те же шрифты, что и везде (Commissioner + Spectral). Светлый фон. Mono — только для цифр в таблицах и технических идентификаторов. Никакого «терминал-вайба» — это product UI, а не CLI.
Отказы по неделям, Q1 2026
Источник: cc_calls_2026q1 · разбивка по продукту, ISO-недели
| Продукт | Звонки | Конверсия | Δ |
|---|---|---|---|
| Voice Operator | 18 421 | 28.1% | +2.1 |
| MI Analyst | 9 870 | 22.4% | +0.8 |
| Doc Reader | 12 005 | 19.7% | −1.3 |
| Custom LLM | 7 995 | 25.6% | +3.4 |
Почему именно так
| Чат слева, не справа | Чтение слева направо — сначала вопрос, потом ответ. Курсор и ввод — на ведущей стороне. |
| Пропорция 1:2 | Чат — инструмент, результат — главное. Графику и таблице нужна ширина, чату — нет. |
| Те же шрифты, что везде | Commissioner + Spectral. Mono только для цифр и идентификаторов источников. |
| Светлый, не тёмный | Тёмный был экспериментом MVP. Analyst — такой же продукт, как ЛК; различие в структуре, не в цвете. |
| Список разделов — в Top bar | Чаты, отчёты, источники — через product switcher и Cmd+K. Сайдбар — это сам диалог. |
Breadcrumbs
Только в ЛК на страницах глубиной ≥ 3 уровня. Маркетинг — плоский, не нужно. Analyst использует свой путь через query path.
Truncation для длинных путей
Правила breadcrumbs
| Когда показывать | В ЛК на уровне ≥ 3. На уровне 1–2 sidebar даёт достаточно контекста. |
| Где разместить | Сразу под topbar, до заголовка страницы. |
| Текущая страница | Не ссылка. Жирный, foreground. |
| Truncation | Если путь длиннее 5 элементов — заменить серединку на «…», оставить root и последние 2. |
| Разделитель | «/» в muted 0.5 opacity. Не «›», не «→». |
Tabs
Внутри страницы. Когда нужно показать несколько views одного объекта — продукт → обзор / метрики / настройки. Underline-стиль, без background-pills.
Когда tabs, когда sidebar
| Если… | Используй |
|---|---|
| 2–6 view-ов одной сущности | Tabs |
| 7+ разделов или вложенная навигация | Sidebar (или sub-sidebar) |
| Контекст — разные страницы | Sidebar / breadcrumbs |
| Контекст — разные срезы данных | Tabs |
Pagination
Под таблицей / списком, если элементов больше 50. Слева — meta («1–50 из 1248»), справа — номера страниц.
Когда нужна, когда нет
| ≤ 50 элементов | Не нужна. Просто список. |
| 50–500 | Pagination или infinite scroll — по вкусу. Pagination точнее, infinite — проще. |
| 500+ | Только pagination. Infinite scroll плохо работает на больших объёмах. |
| Analyst | Always pagination. Аналитики хотят знать сколько строк. |
In-page TOC
Только на длинных текстовых страницах — документация, design system, блог. Sticky справа, активный пункт подсвечивается primary при скролле.
Voice Operator — документация
Голосовой агент для колл-центра. В этом разделе — как запустить, настроить и интегрировать.
Начало работы
Зарегистрируйтесь, добавьте номер, привяжите CRM …
Настройка скриптов
Скрипты разговора живут в разделе …
Интеграции
Bitrix24, AmoCRM, кастомные REST …
Когда показывать
| Длинная статья (4+ разделов, 1500+ слов) | Да, sticky TOC справа. |
| Документация продукта | Да, обязательно. |
| Marketing landing | Нет. Скролл — сам по себе формат. |
| Mobile | Снизу или схлопнуть в «Содержание …» сверху. |
Общие правила
Active-state виден с первого взгляда: цвет + вес + индикатор.
Active помечен только цветом, который еле отличим от default.
Иконка + текст в sidebar. При collapsed — только иконка.
Только иконки в default sidebar — требует от юзера запоминать значки.
Один search-инпут на продукт, по Cmd+K. Работает с клавиатуры.
Несколько search-инпутов на разных страницах с разной семантикой.
Breadcrumbs только когда нужны (≥ 3 уровня в ЛК).
Breadcrumbs на каждой странице «потому что паттерн».
Tabs underline-стиль. Тонко, не давит на контент.
Tabs как pill-кнопки с тенями. Это control, не CTA.
Принципы
- Active state — контракт. Пользователь должен видеть, где он, не читая URL.
- Один паттерн на задачу. Не дублируем sidebar и tabs для того же контента.
- Cmd+K — ускоритель, не замена. Search не отменяет навигацию — дополняет.
- Density следует поверхности. Маркетинг — воздушный, ЛК — стандартный, Analyst — плотные таблицы при тех же шрифтах.
- Tab focus всегда виден. Любой элемент навигации проходим клавиатурой — focus ring обязателен.
Tokens reference
| Element | Property | Value |
|---|---|---|
| Topbar (mkt) | height | 64 px |
| Topbar (app) | height | 56 px / --topbar-height |
| Sidebar (app) | width default / collapsed | 240 / 56 px |
| MI Analyst layout | chat / workspace | 1fr / 2fr |
| Nav item | padding / radius | 7 × 10 / 8 px |
| Nav item | active indicator | 3 × 14 px primary rule |
| Tab | padding / underline | 14 × 16 / 2 px foreground |
| Pagination button | min-w / h | 32 × 32 px |
| Breadcrumb | font / sep | Commissioner 13/0.5op |
| Search palette | shortcut | ⌘K (Cmd / Ctrl) |