AIST.tech DS / Patterns / Dashboard Layouts

Дашборды.

Каркас для всего, что живёт за логином: app shell, четыре способа разместить контент (tile grid, list rows, hero + bento, split panel) и состояния пустоты. Один shell на весь ЛК, разные раскладки внутри — в зависимости от типа данных.

01. App shell

Левая навигация 220 px, верхний topbar 56 px, контент с паддингом 32. Это единственный shell в ЛК — все экраны собираются внутри него. Sidebar собирается из секций (caps label + items), не из плоского списка.

Sidebar 220 pxCard background. Right border. Brand сверху, user footer снизу.

Topbar 56 pxBreadcrumbs слева, иконки/CTA справа. Не поиск по центру.

Sidebar item7 × 12 padding, radius 8, ico 16 px. Active = muted bg.

Content padding 32На mobile — 20. Без карточек-обёрток вокруг страниц.

— app shell: sidebar + topbar + content

Обзор

Что происходит в вашем рабочем пространстве.

— здесь контент страницы —

02. Tile grid

Для однородного списка из 6–24 элементов: проекты, агенты, шаблоны, интеграции. 3 колонки на десктопе, 2 на планшете, 1 на mobile. Карточка с иконкой 32, заголовком, описанием 1–2 строки и футером.

3 колонки, gap 14Не 4 (плотнее ноль воздуха) и не 2 (растягивает карточки).

Min-height 142Карточки одной высоты — ряды держатся.

Hover = borderТолько цвет границы, никаких теней.

Status в футереMono caps + цветная точка. Не badge.

— tile grid: 9 проектов, 3 колонки

Проекты

9 активных. Кликните, чтобы открыть.

MI Analyst

Market intelligence для tech-сегмента.

Запущен14 окт

Voice Trainer

Голосовой тренажёр для агентов недвижимости.

Запущен12 окт

CRM Connector

Связка с Битрикс24 и amoCRM.

Действие3 окт

Onboarding Bot

Помощник для новых сотрудников.

Черновик28 сент

QA Reviewer

Автоматическая проверка звонков.

Запущен20 сент

Call Summarizer

Резюме звонков для PM команды.

Запущен18 сент

03. List rows

Для потока операций или событий: запуски агентов, диалоги, журнал. Плотный список с колонками, статусом и временем — читается быстрее, чем карточки, когда элементов 20+.

Grid 1fr 110 100 90Имя растёт, остальное фиксировано.

Padding 14 × 18Не table-density — чуть воздуха, эта поверхность кликабельна.

Header caps monoНа muted bg. Не sortable здесь — это feed, не таблица.

Badge статусаPill с цветным bg. Тут уместен, в отличие от tile grid.

— list rows: журнал запусков

Журнал запусков

Последние 24 часа.

ЗапускТокеныВремяСтатус

Конкурентный анализ Q4MI Analyst · run-7841

14 320

2 мин назад

Идёт

Сценарий: вход на EU рынокMI Analyst · run-7840

42 180

14 мин назад

Готов

Резюме недельных звонковCall Summarizer · run-7839

6 092

1 ч назад

Готов

Импорт CRM (Битрикс24)CRM Connector · run-7838

—

2 ч назад

Ошибка

Patent Watch · weeklyMI Analyst · run-7837

28 604

5 ч назад

Готов

QA: голосовой тренажёрVoice Trainer · run-7836

—

12 ч назад

Пропущен

04. Hero + bento

Для стартовой страницы (Обзор). Большая карточка-герой слева = активная сущность (текущий проект, ключевой отчёт), плюс 4 мини-плитки 2 × 2 — цифры и недавние события. Это единственное место, где карточки разной формы оправданы — они показывают иерархию.

Grid 2fr 1fr 1frHero занимает 2 столбца и 2 строки. 4 tiles в правой части.

Soft glow на heroradial-gradient primary 6% — даёт «главную» карточку.

Hero ≠ просто tileradius 16 (не 12), внутри — stat row через border-top.

Mini-tile числаv-big 2rem, tabular-nums. Дельта — mono color ok/fail.

— hero + bento: главный экран

Доброе утро, Михаил

3 запуска в работе. 7 готовых отчётов ждут просмотра.

Текущий проект

Конкурентный анализ Q4 — tech-сегмент

Сценарии входа на европейский рынок. Сравнение 9 конкурентов по 14 параметрам.

9/14Этапов завершено

42 КТокенов использовано

3 чДо готовности

Запусков сегодня

↑ 23% к вчера

Готовых отчётов

↓ 2 к неделе

Недавние

EU-сценарий 14:02
Patent Watch 11:30
Резюме звонков 09:45

Действия

Согласовать отчёт Сегодня
Проверить CRM sync Просрочено

05. Split panel

Для экранов, где основное действие в центре, а справа — контекст: детали выбранной строки, превью отчёта, чат-ассистент. Третья колонка 360 px, всегда закрываема. Это основной режим MI Analyst.

Grid 220 1fr 360Sidebar + main + right pane. Правая закрывается через ×.

Right pane card bgТа же поверхность, что sidebar. Не другой цвет.

Header pane 14 × 18Заголовок слева, close × справа.

Не модалКонтекст всегда на экране, пока нужен. Не окно поверх.

— split panel: контекст справа

Сделай сценарный анализ входа на EU рынок для нашего SaaS-продукта.

Чтобы построить корректный сценарий, мне понадобится понять три вещи: целевые страны, ценовую гипотезу и текущую готовность продукта к локализации. Начну с первого вопроса — …

DACH плюс Нидерланды. Цена сопоставима с US-планом, локализация — только EN.

Понял. Собрал предварительный отчёт по DACH+NL: 14 ключевых конкурентов, 3 ценовых сегмента. Открыл справа — …

06. Empty state

Когда на экране ещё ничего нет: новый аккаунт, пустой список, отфильтрованное «ничего не найдено». Не иллюстрация — иконка 56 × 56, заголовок-факт, одно объяснение, primary CTA.

— empty: первый запуск

Здесь будут ваши проекты.

Запустите первый — например, конкурентный анализ или разовый отчёт по рынку.

+ Создать первый проект

Какую раскладку выбрать

Tile grid	Однородный список 6–24 элементов одного типа: проекты, агенты, шаблоны, интеграции. Карточка показывает суть и статус.
List rows	Поток операций 25+ или табличные данные с временем: журнал запусков, диалоги, события, аудит. Главное — читать сверху вниз.
Hero + bento	Стартовый экран («Обзор»). Одна главная сущность + 3–4 вспомогательных метрики/виджета. Не применять для неоднородных экранов.
Split panel	Когда основное действие в центре, а контекст нужно держать на экране: чат + отчёт, master + detail, форма + предпросмотр. MI Analyst — здесь.
Empty state	Любая страница ЛК без данных. Никогда не оставлять пустой грид/таблицу — всегда показывать empty.

Do / Don't

DO Один shell на весь ЛК. Sidebar + topbar — общие, контент меняется внутри.

DON'T Разные сетки навигации на разных страницах. На Аналитике 240 px, на Настройках 200 — это дёргает глаз.

DO Tile grid и list rows — взаимоисключающие. Один тип данных — одна раскладка. Не «toggle view».

DON'T Bento на каждой странице. Bento = «обзор». На странице сущности — уже split или single.

DO Split panel закрывается. × всегда виден. После закрытия страница продолжает работать.

DON'T Right pane как модал. Контекст — не диалог. Не затемнять остальное.

DO Empty state = заголовок-факт + действие. «Здесь будут ваши проекты — создать первый».

DON'T «Упс, тут пусто 🙈». Никакого вины-юмора. ЛК — рабочий инструмент.

Токены

Sidebar width	220px	Фиксированная. Не коллапсится.
Topbar height	56px	Padding 14 × 24
Right pane width	360px	В split-режиме. На mobile — full screen overlay.
Content padding	32px / 20px	Desktop / mobile
Tile min-height	142px	Чтобы ряд держался при разной длине текста
Tile gap	14px	3-колоночный грид
Bento gap	14px	То же, что tile
Hero radius	16px	Bento-hero. Остальные — 12.
Row padding	14px 18px	Плотность между table-cell и card
Page heading	1.75rem, 800	В content area, не в topbar