Главная » BI Consult - хранилища данных (DWH), системы бизнес-аналитики (BI) и интегрированного планирования (IBP). Учебный центр, консалтинг, техническая поддержка. » Разработка styleguide для BI-системы » Разработка Styleguide для BI-системы

Разработка Styleguide для BI-системы

Зачем нужен стайлгайд для BI

Стайлгайд — это единый свод правил визуального оформления, поведения и содержания дашбордов, отчётов и аналитических приложений. Его цель — сделать аналитику предсказуемой, читаемой и быстрой в разработке. Он:

снижает стоимость владения (меньше переделок, быстрее онбординг разработчиков);
повышает качество решений (согласованная терминология, форматы, палитры, UX-паттерны);
улучшает доверие к цифрам (единые правила округления, единицы измерения, источники данных);
служит основой для дизайн-системы BI (каталог «мастер»-метрик, стандартных визуализаций и шаблонов).

Аудитория и зона действия

Кто пользуется: продуктовые владельцы/аналитики, BI-разработчики, дизайнеры, дата-инженеры, тестировщики, владельцы метрик, бизнес-пользователи.
Где действует: все BI-инструменты в компании (Power BI, Tableau, Qlik, FineBI и др.), плюс встроенная аналитика (embedded).
На что влияет: дашборды, отчёты, метрики, визуальные компоненты, взаимодействия, семантический слой, шаблоны проектов/тем.

Принципы

Единообразие: одинаковые сущности выглядят и работают одинаково.
Читаемость и смысл: данные важнее декора. График выбирается по задаче анализа.
Доступность: контраст, шрифты, цветовые схемы, поддержка дальтонизма.
Производительность: визуал — только с нужной детализацией; тяжелые расчёты — вне визуального слоя.
Управляемость: версии стайлгайда, change-log, процесс изменений, артефакты в репозитории.
Локализация и точность: форматы дат/валют, двуязычие терминов при необходимости, источники и единицы.

Структура стайлгайда (что должно быть в документе)

Дизайн-токены

Цвета: базовая палитра (фоновая, текстовая, акцентная), тематические палитры (категориальные, последовательные, дивергентные). Обязательно — варианты для дальтоников.
Типографика: базовый шрифт, размеры (H1/H2/H3/Body/Caption), межстрочные интервалы, правила для KPI-карт.
Отступы и сетка: модульная сетка (например, 8-пиксельная), минимальные поля и расстояния между визуалами.

Макеты страниц (layout)

Header: название, период отчётности, фильтры верхнего уровня, дата обновления.
Зона KPI: 3–6 ключевых карточек (текущая величина, прогресс к цели, тренд, статус).
Тренды и структуры: 1–2 ключевых графика (линия/столбцы/комбинация) с фокусом на инсайты.
Детализация: таблицы с drill-through, мини-чарты/бар-спарки, тултипы с пояснениями.
Навигация: хлебные крошки, табы/закладки, стандартная панель фильтров.

Компоненты визуализации

KPI-карты: формат числа (разрядность, знаки), цвет статуса по порогам, иконки, подпись цели.
Линейные графики: не более 3–4 серий; легенда слева/сверху; маркеры только при необходимости; сетка тонкая.
Столбчатые/горизонтальные: сортировка по убыванию, подписи процентов при долях, категории — не более 12.
Дивергентные шкалы: для отклонений ±, ноль визуально выделен.
Таблицы: не более 50 строк без пагинации; обязательная сортировка; условное форматирование — по правилам палитры.
Картограммы: только при наличии геосмысла; подписи/тултипы с нормализацией (на душу, на 1000 и т. п.).

Взаимодействия (interaction patterns)

Drill-down: только по иерархиям, описанным в семантическом слое (Год → Квартал → Месяц → День).
Drill-through: на отдельные листы с контекстом выбранной записи (идентификатор, период, сегмент).
Cross-filter: включён по умолчанию для согласованных визуалов; конфликтующие фильтры — запрещены.
Tooltips: кратко + ключевой контекст (единицы, определение метрики), без «стен текста».

Семантический слой и метрики

Единицы измерения: всегда указаны (шт, ₽, %, точки индекса).
Форматирование: тысячные разделители, тонкие пробелы; минус — обычный знак, проценты — до 1 знака.
Округление: правило по категориям (деньги до 0,1; объемы до целых; показатели с малыми значениями — до 2 знаков).
Нейминг метрик: кратко, по-английски или двуязычно, без аббревиатур без глоссария. Пример: Revenue, Gross Margin %, Avg Delivery Time, days.
Идентичность формул: одна метрика — одна формула во всех отчётах (мастер-метрика).

Язык и терминология

Локализация: язык интерфейса фиксируется по окружению. Все дашборды внутри домена — единообразны.
Глоссарий: обязательный для неоднозначных терминов (Например, «Клиент», «Продажа», «Выручка (IFRS/РСБУ)»).
Текст в интерфейсе: активные глаголы, без канцелярита, не более 60 знаков в названии визуала.

Доступность (A11y)

Контраст не ниже 4.5:1 для текста, 3:1 для крупного.
Цвет не единственный носитель смысла: дополнительно форма/иконка/подпись.
Минимальный размер шрифта body — 12–13 pt для десктопа; тач-таргеты — 40×40 px.
Цветовые схемы — проверены на CVD-варианты (deuteranopia/protanopia).

Производительность

Не более 8 визуалов на лист при живых источниках.
Пред-агрегаты/материализованные представления для тяжёлых запросов.
Ограничение строк в таблицах + ленивые выборки.
Избегаем тяжёлых вычислений в выражениях визуалов — считаем в модели.

Поведение и контент

Пустые состояния: информативные сообщения, что сделать, чтобы увидеть данные.
Ошибки: краткая причина + контакт поддержки/код трассировки.
Аннотации: короткие; для сложных комментариев — вынос в поясняющий блок.
Источник и дата обновления: всегда в шапке или футере.

Процесс и управление изменениями

Версионирование: BI-Styleguide vX.Y + changelog. Хранение в Git/Docs.
Артефакты: темы, палитры, иконки, JSON-темы, шаблоны файлов (PBIT/TWB/QVF), примерные макеты.
Процесс изменений: заявка → UX-ревью + Data-ревью → пилот → релиз → обновление артефактов.
Контроль качества: чек-листы (ниже), периодические аудиты витрин, визуальные «линтеры» (скрипты/правила).
Каталог компонентов: мастер-визуалы, мастер-метрики, мастер-измерения (reuse в проектах).

Инструмент-специфика (примеры)

Power BI

Темы: единый theme.json (цвета, шрифты, сетки, визуальные стили). Хранить в репозитории, версионировать.
Шаблоны: PBIT для типовых дашбордов (KPI-лист, детализация, экспорт).
Нейминг DAX: m_[Subject]_[Metric] для measures, d_[Dim]_[Attrib] для столбцов. Пример: m_Sales_Revenue, m_Margin_Pct.
Кросс-фильтры: по умолчанию «односторонние», включаем «двусторонние» только для специфических кейсов.
Bookmarks/Selection: шаблонный навбар/табы; ограничить произвольные анимации.
Performance: отключать автодат, использовать агрегированные таблицы, сводить к минимуму CALCULATE/FILTER в карточках.

Tableau

Default formatting: настроить в Workbook Defaults (шрифты, цвета, сетки).
Templates: базовый Workbook с готовыми листами (KPI/Trend/Breakdown).
Calculated fields: m_ для метрик, dim_ для измерений; комментарии в полях обязательны.
Tooltips: единый формат: Название — Значение — Единица — Дата/Период — Методика.

Qlik Sense

Themes.json: цвета/шрифты/границы/тени; запрет «радужных» палитр.
Master items: только из каталога; запрет локальных выражений без ревью.
Sheets: сетка 12 колонок; максимальная нагрузка — 8 визуалов на лист.

FineBI (учитываем ваши предпочтения)

Названия визуализаций: на английском.
Поля: с заглавной буквы (Product, Customer, Revenue).
Терминология интерфейса: My Analysis, Public Data, System Management; вместо «бурение» — drill-down; вместо «пользовательское» — «кастомное».
Шаблоны страниц: макет из шапки + KPI-ряд + тренд + детализация; единые фильтры сверху.
Доступность: проверка контраста в темах, не использовать чисто цвет для статуса.

Практические примеры

Палитры

Категориальная (до 8 категорий): Category-01…08 — нейминг токенов вместо «синий/зелёный».
Последовательная: от светло-серого к насыщенному акцентному для плотностей/количеств.
Дивергентная: Neg — холодный, Pos — тёплый, ноль — нейтрально-серый.

KPI-карта «Выручка к плану»

Заголовок: Revenue vs Plan
Значение: 12 345 678 ₽
Подпись: +4.2% vs Plan
Статус: пороги: <-5% — красный, -5..+2% — янтарный, >+2% — зелёный.
Тултип: определение «Выручки», источник, период.

Макет листа «Продажи по регионам»

Header: Sales Performance / 2025-Q2, фильтры Region, Channel, Product.
KPI-ряд: Revenue, GM%, Units, ATP (avg transaction price).
Trend: линия Revenue по неделям с moving average.
Breakdown: горизонтальные бары Revenue by Region (top-10).
Детализация: таблица Top Accounts с drill-through на профиль клиента.

Таблица «Топ клиентов»

Колонки: Customer, Revenue, ₽, GM%, Orders.
Условное форматирование: GM% дивергентной шкалой, пороги из мастер-настроек.
Сортировка: по Revenue убывающая, не более 50 строк.

Риски и меры

Риск	Как проявляется	Меры
Дробление стилей	разные палитры/шрифты в командах	единый репозиторий тем, code-owners, ревью
Игнор A11y	слабый контраст, цвет-только	чек-лист доступности, автоматические проверки
Несогласованные метрики	«две выручки»	мастер-каталог метрик, владельцы, data-ревью
Перегруженность страниц	15+ визуалов, «мелочь»	правило ≤8 визуалов, сетка, приоритизация
Производительность	долгие загрузки	агрегаты, инкрементальные модели, кэширование
Экспорт/печать «ломает» верстку	жалобы на PDF	отдельные принт-макеты, запрет «плавающих» высот
Мобильная версия не продумана	не попадаем по тач-таргетам	мобильные адаптивные макеты и тест-кейсы
Вендорские «уникальные» визуалы	несогласованный UX	whitelisting визуалов, гайд-ревью перед добавлением

Чек-листы

Для разработчика

Использована актуальная тема/палитра vX.Y.
Названия визуалов ≤ 60 знаков, единицы измерения указаны.
≤ 8 визуалов на лист; таблицы ≤ 50 строк по умолчанию.
Метрики — только из мастер-каталога или согласованы.
Drill-down/through соответствуют иерархиям.
Контраст и цветовая доступность проверены.
Пустые состояния/ошибки оформлены.
Дата обновления и источник данных указаны.

Для UX-ревьюера

Макет соответствует шаблону; сетка выдержана.
Лейблы, легенды, тултипы — информативны и кратки.
Цвет не единственный носитель смысла.
Нет «чартджанка» (тени, 3D, лишние рамки).

Для Data-ревьюера

Формулы метрик соответствуют глоссарию.
Округление/форматы корректны.
Фильтры не конфликтуют; выборки корректны.
Тесты выборок (контрольные суммы) пройдены.

Вопрос-ответ

Чем стайлгайд отличается от дизайн-системы BI?
Стайлгайд — правила и стандарты; дизайн-система — ещё и библиотека готовых компонентов (темы, шаблоны, мастер-метрики, репозитории) с процессом поставки и версионирования.

Можно ли иметь разные палитры для разных бизнес-направлений?
Да, но через наследование от базовых токенов (наборы Brand A, Brand B) и единый каркас. Без «самопальных» цветов.

Что делать, если бизнес просит «сделать ярче»?
Использовать акцентные токены и приёмы композиции (масштаб, белое пространство), не нарушая доступности и последовательности.

Как поддерживать несколько BI-платформ?

Единые принципа и токены + артефакты на каждую платформу (Power BI theme.json, Tableau defaults, Qlik themes, FineBI темы/шаблоны). Все в одном репозитории.

Как мерить соблюдение стайлгайда?
Периодические аудиты, чек-листы в Pull Request, автоматические скрипты-проверки (например, запрет нестандартных шрифтов/цветов).

Как быть с историческими дашбордами?
Миграция волнами: «ядро KPI», затем топ-используемые, затем «длинный хвост». Для критичных — принт-версия, если полноценная миграция дорога.

Когда оправданы исключения?
Только по заявке и с обоснованием (бизнес-эффект, ограничения платформы), с фиксацией в changelog.

Мини-приложения (фрагменты)

Нейминг метрик и измерений (пример)

Measures: m_Revenue, m_GrossMarginPct, m_OrdersCount
Dimensions: d_Date, d_Product, d_Region, d_Channel
Иерархии дат: Date > Year > Quarter > Month > Day

Пороговые значения статусов (пример)

On Track > +2% к плану — зелёный
Watch от −5% до +2% — янтарный
At Risk < −5% — красный

Фрагмент темы Power BI (упрощённо)

{
  "name": "Corp BI Theme v1.2",
  "textClasses": {
    "title": {"fontSize": 18},
    "header": {"fontSize": 14},
    "callout": {"fontSize": 24}
  },
  "visualStyles": {
    "*": {
      "labels": [{"color": {"solid": {"color": "#222222"}}}],
      "title": [{"color": {"solid": {"color": "#222222"}}, "show": true}]
    }
  },
  "colors": [
    "#2F78C4","#6AA6E8","#8EC06C","#F0B23E",
    "#D96B6B","#8F6BB3","#59BFB3","#A9A9A9"
  ],
  "palette": {
    "foreground": "#222222",
    "background": "#FFFFFF",
    "good": "#2CA25F",
    "neutral": "#F0B23E",
    "bad": "#D73027"
  }
}

Как внедрять (быстрый план)

Сбор ожиданий: аудит текущих витрин, болей и пользовательских сценариев.
Черновик токенов и шаблонов: палитры, шрифты, макеты 2–3 ключевых страниц.
Каталог мастер-метрик и глоссарий: владельцы, формулы, единицы.
Пилот на одном домене: релиз тем/шаблонов в 1–2 инструментах, сбор фидбэка.
Версионирование и rollout: документ, артефакты, чек-листы, обучение.
Контроль и развитие: квартальные аудиты, доска изменений, KPI соответствия.

← Предыдущая статья

Стайлгайд Tableau

Решения

Клиенты

Электронный дискаунтер «Ситилинк» — один из крупнейших онлайн‑ритейлеров России (3‑е место по объему онлайн‑продаж в рейтинге Data Insight и Ruward 2016 года E‑commerce Index TOP‑100, 8 место в рейтинге Forbes «20 самых дорогих компаний Рунета — 2017»). На рынке работает 9 лет.

В ассортименте дискаунтера более 50 000 наименований компьютерной цифровой, бытовой и садовой техники, офисной мебели и других товарных категорий. Более 700 мировых брендов в портфеле. Около 4 000 сотрудников по всей России
Группа компаний «Галакс» ведет свою деятельность с 2005 года, являясь в те годы дистрибьютором известных международных марок в ряде крупнейших торговых сетей России в сегменте аудио и видео аксессуаров. Активно работая в этом направлении и приобретая ценный опыт, начали создавать собственные торговые марки «GAL» и «VIXTER»
ИНВИТРО – крупнейшая частная медицинская компания в России, специализирующаяся на лабораторной диагностике и оказании других медицинских услуг.

ИНВИТРО располагает 9 самыми современными лабораторными комплексами и крупнейшей в Восточной Европе сетью более чем из 900 медицинских офисов. Страны присутствия — Россия, Украина, Казахстан, Беларусь.
СберКорус (Группа компаний Сбербанка) – это ИТ‑компания, ИТ‑интегратор, SaaS-провайдер. Является разработчиком цифровых сервисов и услуг для автоматизации широкого диапазона бизнес-процессов юридических лиц. В 2004 году компания стала первым в России оператором электронного документооборота, а в 2012 году вошла в экосистему Сбера.