N2J.ru
Вход

Дизайн-контракт N2J: общие правила UI

Это действующие правила оформления всех модулей сайта. Любой новый блок делается по ним — и любой блок, сделанный не по ним, правится по ним без дополнительных обсуждений. Ниже — правила, затем один образцовый макет, на котором есть всё.

I. Основа: геометрия, сетка и экраны

  1. Контейнер страницы модуля — всегда w-full px-3.5 pt-4 pb-16 sm:px-6 lg:px-8. Ширина — вся, на всю колонку сайта.
  2. Геометрия радиусов скругления: базовые контейнеры и карточки — строго rounded-xl (12px). «Мыльный» rounded-xl запрещён в B2B-интерфейсах. Внутренние контролы (кнопки, инпуты) — rounded-lg (8px) по правилу вложенных радиусов.
  3. Компоновка по задаче: короткую форму можно ограничить по ширине, но боковая колонка нужна только с полезным контекстом (лимиты, пример, история, актуальный статус), а не для заполнения пустоты. На мобильных важная информация располагается после формы или раскрывается; скрывать её можно, только если она вторична и доступна в другом месте.
  4. Первый экран: один заголовок, одна короткая фраза о задаче и основное действие. Вторичные маршруты и подробные объяснения не конкурируют с ним; инструкции и FAQ раскрываются по запросу.
  5. Мобильная эргономика: внутренние отступы карточек на смартфонах — p-4, на десктопе — sm:p-6. Тач-таргеты интерактивных элементов ввода и отправки — не менее min-h-[44px].
  6. Широкие данные (реестры, таблицы, конструкторы) занимают 100% ширины и оборачиваются в скролл-контейнер overflow-x-auto whitespace-nowrap n2j-scrollbar.
  7. Запрещены: display:contents, «липкие» (sticky) колонки во всю страницу, перестройки aside на 2xl.
  8. Тёмная тема обязательна: у каждого цвета пишется пара dark:…. Проверяем обе темы.

II. Типографика — единая шкала

text-xl sm:text-2xl font-bold заголовок страницы (h1, один на экран).

text-base sm:text-lg font-bold заголовок карточки формы / секции (h2).

text-sm font-bold заголовок виджета / сайдбара (h3).

text-sm основной текст, поля, кнопки, строки таблиц.

text-xs вторичное: даты, подписи полей, бейджи, метаданные.

  1. Мельче text-xs в интерфейсе НЕ бывает: 10px/11px для текста запрещены. Иконки внутри компактных кнопок и чипов — text-[11px] (исключение).
  2. Шрифт один — системная гарнитура Tailwind. font-mono — строго для кодов, ID, логов, таймеров и названий моделей.
  3. Выделение — font-semibold или font-bold. КАПС — только для коротких заголовков столбцов таблиц.

III. Цвет = смысл

  1. Синий — главное действие (submit); на экране ОДНА ключевая кнопка. Красный — удаление и критические сбои. Зелёный — успешное завершение. Янтарный — статус «в работе» / ожидание. Серый — всё второстепенное.
  2. Контраст по WCAG AA: текст не светлее gray-500 на белом (gray-400 — только плейсхолдеры и разделители). Проверяем в тёмной теме отдельно.
  3. Ошибка никогда не показывается одним цветом — обязателен понятный текст причины словами.

IV. Кнопки и действия

  1. Форма кнопок: радиус rounded-lg (8px). Основные кнопки имеют высоту min-h-[44px] px-5 sm:px-6 для безупречного тапа на смартфонах. В строках списков — компактные h-8 px-2.5 text-xs.
  2. Удаление — всегда в два клика по той же кнопке: первый клик вооружает её (красный фон, «Точно удалить?»), второй — запускает действие. Без всплывающих окон confirm(). Тайм-аут сброса — 3–4 секунды.
  3. На время выполнения кнопка переходит в disabled + спиннер; двойная отправка исключается на фронтенде.
  4. Никаких фейковых кнопок и пустых ссылок без действий. Демонстрационные макеты обязательно предваряются предупредительной плашкой.

V. Формы

  1. Подпись НАД полем: text-xs sm:text-sm font-semibold; подсказка — серым рядом с ней или под инпутом.
  2. Поле: rounded-lg min-h-[44px] px-3.5 py-2.5 text-sm, фокус — focus:border-blue-500 focus:ring-3 focus:ring-blue-500/15.
  3. Кастомная стрелка селекта — встроенный SVG-фон через класс .n2j-select, с нативным поведением выпадающего меню ОС.
  4. Placeholder — конкретный пример («https://example.com/page»), а не абстрактная инструкция.
  5. Ошибка поля: красная рамка + понятное пояснение под полем. Пользовательский ввод и настройки сохраняются.

VI. Ожидание воркера, статусы и правило неразрывности

  1. Правило неразрывного статуса: спиннер, текст статуса («В работе») и секундомер зафиксированы в единый неделимый flex-ряд (flex items-center gap-2.5). Строго запрещено разносить спиннер и секундомер по разным краям контейнера через justify-between.
  2. Спиннер ожидания — анимация n2j-spin (не ломается глобальным prefers-reduced-motion в FA). Секундомер — font-mono tabular-nums. Ниже — живой прогресс и кнопка отмены/остановки.
  3. Слова статусов — по-русски: новый / в работе / готово / ошибка. Бейджи статусов — rounded-md px-2.5 py-1 text-xs font-semibold или rounded-full.
  4. Ошибки: полный текст причины + действие «Повторить». Успех — зелёный флеш-блок. Тишина интерфейса недопустима.

VII. Шапка, чипы, таблицы

  1. Хлебные крошки и шапка — поддерживают плавную горизонтальную прокрутку на смартфонах без разрыва верстки (overflow-x-auto whitespace-nowrap).
  2. Чипы шапки — текущий раздел, бейдж модуля и кнопка «Управление» (если доступна). Чужие модули в шапку не выносятся.
  3. Таблицы и реестры: компактная высота строки 40px (py-2.5), кегль text-sm, моноширинный ID с кнопкой быстрого копирования в буфер, безопасное удаление в 2 шага.
  4. Пустое состояние: чёткая инструкция и кнопка первого шага («Прогонов пока нет — создайте первый выше»).

VIII. Язык и честность данных

  1. Пользовательский интерфейс — на русском языке. Английские термины сопровождаются понятным переводом или пояснением.
  2. Никаких заглушек под «настоящие» данные и пустых хэш-ссылок href="#" без обработчиков.
  3. Модули строятся по общему принципу: предсказуемая сетка, одинаковые радиусы, единая шкала шрифтов и цветов.

Образец: эталонный модуль N2J

Форма с уместным контекстом, статус, таблица с двухшаговым удалением и статья.

Эталон для сравнения
Демонстрационный макет: формы и кнопки показывают оформление, данные учебные, сохранений нет.

Дизайн страницы

Дизайн Управление

Пришлите адрес страницы — ИИ подготовит варианты улучшенного оформления.

Создать прогон

Пример: главная страница или конкретная статья.

Мои прогоны

Выбор модели сохраняется

В работе

17:03

Финальная сборка HTML…

Статусы

новый в работе готово ошибка

Сообщения

Прогон dsnf592ccad создан — вернусь с результатом.

Мои прогоны

2
Код / Название Статус Целевой URL Создан Действия
dsnf592 Лендинг «Ромашка»
готово https://romashka.ru 20.09, 22:32
dsna35b Корпоративный блог
в работе https://example.com/blog 20.09, 21:07
Показано 2 из 14

Контекстная колонка: когда она помогает

Стандарт
Архитектура • 3 мин чтения • Обновлено: сентябрь 2026

Короткую форму не нужно растягивать на всю ширину монитора. Если поле получается слишком длинным, ограничьте ширину рабочей области; пустое место само по себе не повод добавлять карточку.

1. Контекстный блок — по необходимости

Сетка 2/3 + 1/3 уместна, когда справа есть конкретная помощь: лимиты, пример, история или текущий статус. Если такой информации нет, не добавляйте колонку ради заполнения места — используйте основную рабочую область без неё.

На мобильном важные подсказки остаются после формы или раскрываются по запросу. Скрывать можно только вторичный общий контент — лимиты, статусы и ошибки, нужные для действия, должны оставаться доступны.

Правило неразрывного статуса

Спиннер, название этапа и таймер формируют неделимую группу. Секундомер прикреплен к тексту и не отрывается к противоположному краю контейнера:

В работе 17:03

2. Радиусы: баланс строгости и дружелюбности

Для всех основных карточек стандартизирован радиус rounded-xl ($12\text{ px}$), а для внутренних интерактивных контролов — rounded-lg ($8\text{ px}$). Это создаёт гармоничную визуальную иерархию и исключает эффект «детского» интерфейса.