dima/chatballs
1
0 Fork 0
mirror of https://github.com/dartdavros/chatballs.git synced 2026-10-05 01:14:58 +03:00
Code Issues Packages Projects Releases Wiki Activity
Files
aacdd422b30bbf2d2fd55f5a58a6cd19a6977344
chatballs/design/internal/baseline/uploads/ADR-HUB-0013-Internal-UI-Design-System.md
T

8.4 KiB
Raw Blame History

ADR-HUB-0013 — Дизайн-система внутреннего интерфейса Hub

Статус

Принято.

Дата

2026-06-16.

Контекст

Внутренний интерфейс Hub должен обслуживать две роли — OWNER и OPERATOR — и поддерживать:

  • командный обзор компании;
  • управление отделом продаж;
  • плотный realtime-inbox;
  • продукты, предложения и цены;
  • AI-агентов, знания, промпты и release-снимки;
  • интеграции;
  • Commerce Core;
  • настройки и аудит.

Интерфейс содержит большое количество таблиц, фильтров, форм, статусов и сложных рабочих экранов. Нужна единая промышленная дизайн-система, пригодная для enterprise-приложения и AI-интерфейсов, без разработки базового UI-kit с нуля.

Решение

Для внутреннего Hub используется:

  • Ant Design — основная компонентная и UX-система;
  • Ant Design X — паттерны и компоненты AI-диалогов;
  • Edevs Hub Theme — собственный набор design tokens и локальных компонентов поверх Ant Design.

Конкретная версия библиотек фиксируется в техническом плане реализации. UI-спецификация привязана к публичным паттернам Ant Design, но не к конкретному номеру major-версии.

Визуальное направление

  • светлая тема;
  • премиальный минимализм;
  • высокая, но контролируемая информационная плотность;
  • спокойная нейтральная основа;
  • один основной акцентный цвет;
  • цвет используется прежде всего для статусов и действий;
  • минимум декоративных элементов;
  • отсутствие градиентов, стекломорфизма, неоновых эффектов и визуального шума;
  • desktop-first.

Базовые принципы

1. Сначала состояние, затем действие

На управленческих экранах пользователь сначала видит состояние системы, затем доступные действия.

2. Один основной CTA на контекст

На странице или в отдельном рабочем блоке выделяется одно основное действие. Вторичные действия не конкурируют с ним визуально.

3. Стандартные паттерны не переизобретаются

Таблицы, формы, фильтры, подтверждения, статусы, drawer, modal и navigation должны следовать Ant Design, если нет зафиксированной причины создать локальный компонент.

4. Локальные компоненты Hub

Допускаются собственные составные компоненты:

  • DepartmentCard;
  • AttentionStatus;
  • ConversationInbox;
  • ActorBadge;
  • ChannelBadge;
  • ProductAIReleaseCard;
  • CommerceStatusTimeline;
  • IntegrationHealthCard;
  • MetricCard;
  • KnowledgeDocumentEditor.

Они строятся из Ant Design primitives и используют общие tokens.

5. Роль и контекст всегда видимы

Пользователь должен однозначно понимать:

  • находится он на уровне всей компании или внутри отдела продаж;
  • под какой ролью он работает;
  • какой продукт, канал, диалог или заказ открыт.

Типографика

Используется системный font stack Ant Design без обязательной внешней зависимости от загружаемого шрифта.

Иерархия:

  • заголовок страницы;
  • заголовок секции;
  • основной текст;
  • вспомогательный текст;
  • метаданные;
  • технические идентификаторы.

Технические идентификаторы, release ID, order ID и event ID могут отображаться моноширинным системным шрифтом.

Цветовая семантика

Обязательные semantic tokens:

  • primary — основное действие и активная навигация;
  • success — подтверждённое успешное состояние;
  • warning — требуется внимание;
  • error — критическая ошибка или разрушительное действие;
  • info — нейтральная служебная информация;
  • ai — визуальное различение AI-участника;
  • human — визуальное различение человека;
  • channel-* — различение MAX, Telegram и Web Chat без превращения интерфейса в разноцветную мозаику.

Цвет не является единственным носителем статуса: используются текст, иконка и label.

Плотность и размеры

  • базовая плотность — compact enterprise;
  • таблицы по умолчанию используют среднюю или компактную высоту строки;
  • большие пустые поля и oversized-карточки запрещены;
  • карточки метрик должны содержать только показатель, контекст, изменение и состояние;
  • рабочие экраны используют доступную ширину viewport, а не узкую центральную колонку.

Адаптивность

  • основной макет проектируется для ширины 1440 px;
  • обязательная рабочая ширина внутреннего Hub — от 1024 px;
  • при ширине 1024–1279 px sidebar может переходить в компактный режим;
  • мобильный интерфейс внутреннего Hub не входит в первую итерацию;
  • публичные Web Chat и checkout проектируются отдельно и не регулируются этим ADR.

Доступность

  • клавиатурная навигация для основных действий;
  • видимый focus state;
  • достаточный контраст;
  • подписи для icon-only кнопок через tooltip и accessible label;
  • ошибки формы отображаются рядом с полем и в итоговом сообщении;
  • destructive-действия требуют явного подтверждения.

Последствия

Положительные

  • единая UX-модель сложного корпоративного интерфейса;
  • высокая скорость дизайна и реализации;
  • предсказуемые таблицы, формы и навигация;
  • готовая основа для AI-интерфейсов;
  • минимизация собственного базового UI-kit.

Ограничения

  • дизайнер не должен просто воспроизводить стандартный demo-вид Ant Design;
  • тема и локальные компоненты Hub обязательны;
  • изменение стандартных паттернов должно быть обосновано;
  • публичный Web Chat и checkout требуют отдельных UI-спецификаций.

Официальные источники

Reference in new issue View Git Blame Copy Permalink