Как расположить блоки дашборда,
чтобы главное было видно сразу

1. Продумайте путь от вопроса к ответу

Бывает, что в отчёте есть всё необходимое, но пользоваться им трудно. Период спрятан в углу, итог теряется среди карточек, а подробная таблица занимает самое заметное место. Человек тратит внимание на поиск, прежде чем начинает разбираться в данных.

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

Для еженедельного отчёта о продажах удобна такая последовательность: условия отчёта → итог и сравнение → наблюдение → подробности для проверки. Для отчёта об авариях порядок будет другим: первым делом нужно увидеть незакрытые критические события. Единственного правильного расположения для всех задач нет.

В первой статье мы выбрали показатели и договорились об их смысле. Теперь сохраним те же данные и изменим только подачу. Так будет видно, что именно делает оформление.

2. Один набор данных — два впечатления

В учебном магазине сумма оплаченных заказов за 5–11 октября 2026 года составила 4 516 875 ₽. Неделей раньше, с 28 сентября по 4 октября, — 4 873 260 ₽. Количество заказов снизилось с 1 638 до 1 475, средний чек вырос с 2 975,13 ₽ до 3 062,29 ₽.

Заказ учитываем один раз по уникальному ID, по времени полной оплаты. Суммы — после скидок, без доставки, до возвратов. Время — московское, обе недели завершены. Эти правила одинаковы в обоих вариантах ниже.

Все три числа верные. Но самая крупная карточка показывает растущий показатель. Итог продаж находится ниже, база сравнения — в конце. При быстром взгляде легко решить, что неделя была удачной. Это следствие выбранного акцента, хотя в самих расчётах ошибки нет.

Теперь первым читается итог, рядом с ним виден масштаб снижения. Под ним находятся два связанных показателя. Короткое наблюдение помогает связать числа, но не объявляет причину: мы ещё не знаем, почему заказов стало меньше.

В обоих макетах только недельные итоги. Динамику по дням нельзя восстановить из этих значений, поэтому линии графиков здесь нет. В рабочем отчёте она появится после подключения дневных данных.

Что именно изменилось

• Период и сравнение стали видны до чтения чисел.
• Крупнейший блок отвечает на основной вопрос руководителя.
• Заказы и средний чек собраны в одну группу, чтобы их легче было сопоставить.
• Разница в рублях показывает масштаб, процент — относительное изменение.
• Положительный знак больше не получает отдельного визуального преимущества.

Выделять средний чек первым было бы уместно в отчёте, посвящённом именно корзине покупателя. Проблема возникает, когда визуальный приоритет расходится с задачей страницы.

3. Сетка помогает договориться о порядке

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

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

Одинаковая ширина удобна для элементов одного уровня. Но графику с длинными названиями категорий может понадобиться больше места, чем короткой карточке. Делите пространство по задаче, а затем выравнивайте границы.

Когда блоки лучше поставить друг под другом

Если сравнение требует читать мелкие подписи или постоянно переводить взгляд через весь экран, соседство перестаёт помогать. Два широких графика часто удобнее разместить вертикально. Особенно если первый отвечает на вопрос «Что произошло?», а второй — «В какой группе это заметнее?».

В BI-инструменте контейнеры или привязка элементов к сетке помогают сохранять взаимное расположение. Свободное размещение полезно для отдельных задач, но требует внимательнее проверять перекрытия и поведение при изменении размера экрана.

4. Отступы показывают, какие элементы связаны

Подпись должна находиться ближе к своему числу, чем к соседней карточке. Заголовок графика — ближе к самому графику, чем к предыдущему разделу. Это кажется мелочью, пока из-за одинаковых расстояний не становится непонятно, к чему относится пояснение.

Различайте внутренний отступ — расстояние от содержимого до края карточки — и внешний, который отделяет карточку от соседних блоков. Первый помогает содержимому не прилипать к рамке. Второй показывает границы смысловой группы.

Это отправная точка для дизайна, а не норматив. Здесь круглые значения обозначают параметры оформления, а не результаты измерения. Итог зависит от шрифта, плотности данных и условий просмотра. Лучше повторять небольшую понятную шкалу, чем подбирать случайный отступ для каждой карточки.

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

5. Заметность создают не только цветом

У главного показателя может быть более крупное число, отдельная строка и больше свободного пространства вокруг. Для этого не обязательно заливать всю карточку насыщенным цветом. Спокойный фон оставляет возможность использовать цвет там, где он действительно несёт смысл.

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

При этом второстепенное не означает неважное. Единицы измерения, база сравнения и ограничение полноты данных должны оставаться читаемыми. Если их приходится искать или увеличивать страницу, визуальная иерархия скрывает смысл.

Цвет изменения тоже требует контекста. Рост среднего чека сам по себе не гарантирует улучшение результата. Пишите знак и значение изменения, добавляйте пояснение, а оценку «хорошо» или «плохо» связывайте с задачей. Один цвет без подписи плохо работает и на чёрно-белой распечатке, и для человека, который различает цвета иначе.

6. На телефоне сохраняйте смысл, меняйте расположение

Уменьшенная копия большого отчёта редко удобна: числа ещё видны, а подписи уже невозможно прочесть. На узком экране карточки можно поставить в одну колонку, подробную таблицу вынести ниже и сократить число одновременно показанных разрезов.

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

• Не прячьте применённые фильтры. Панель выбора можно свернуть, но текущий период и существенные ограничения должны оставаться видимыми.
• Не рассчитывайте только на наведение мышью. Значение, необходимое для понимания вывода, должно быть доступно без него. Для дополнительных пояснений предусмотрите нажатие.
• Проверяйте длинные подписи. Перенос названия допустим, если не отрывает его от числа. Обрезка может скрыть важное различие между показателями.
• Берегите сопоставимость. Если графики размещаются вертикально, сохраняйте одинаковые единицы и сопоставимые шкалы там, где человек сравнивает величины.

Широкая подробная таблица может прокручиваться внутри своего блока. При этом сама страница не должна неожиданно уезжать в сторону. В BI-системе с отдельными макетами для устройств проверяйте каждый макет: наличие мобильной версии ещё не означает, что её порядок чтения удачен.

7. Что легко пропустить в красивом макете

Пояснение осталось за пределами скриншота

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

Карточки выровнены, а числа сравнивать трудно

Повторяйте формат внутри одного показателя: единицы, количество знаков после запятой, разделители разрядов. В таблице суммы обычно удобнее читать с выравниванием вправо. Не сравнивайте на глаз «4,52 млн» и «4 873 260», если человек должен оценить небольшое различие.

После фильтрации блоки меняют положение

Когда карточка без данных исчезает, соседние элементы могут сдвинуться, и привычный порядок нарушается. Часто понятнее сохранить место и показать сообщение: «Нет данных для выбранных условий». Ноль, отсутствие строк и ошибка загрузки — разные состояния.

Видно время обновления, но не полноту данных

Надпись «Обновлено сегодня» не объясняет, за какой период данные уже поступили полностью. Отведите место для статуса полноты, особенно если источники обновляются с разной задержкой. При неполных данных предупреждение должно быть рядом с затронутыми показателями.

Рядом стоят несопоставимые показатели

Близость подсказывает связь. Если одна карточка рассчитана по дате оплаты, а другая по дате создания заказа, общая рамка может создать ложное впечатление единой базы. Подпишите различие или разделите блоки. Аккуратная сетка не заменяет согласованные определения.

8. Проверьте композицию на конкретном задании

Покажите страницу человеку, для которого она предназначена, и попросите: «Найди сумму за последнюю завершённую неделю, сравни с предыдущей и скажи, что стоит проверить дальше». Не подсказывайте расположение элементов.

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

• Видны тема, период, единицы и сравнение.
• Самый заметный блок отвечает на главный вопрос.
• Связанные значения находятся рядом, пояснения — у своих чисел.
• Рамки, цвет и размеры не создают случайных приоритетов.
• При уменьшении окна и увеличении масштаба текст остаётся доступным.
• Пустые данные, ошибки и длинные названия не ломают расположение.
• Скриншот сохраняет условия, необходимые для понимания результата.

Небольшое практическое задание

Возьмите один экран своего отчёта. Запишите главный вопрос, уберите оформление и нарисуйте блоки прямоугольниками. Подпишите, на какой вопрос отвечает каждый. Затем соберите новую версию с одинаковыми границами и повторяющимися отступами. Только после этого верните шрифты и цвет.

Сравните варианты на одном и том же задании. Удачная переработка помогает быстрее найти ответ и реже ошибиться в его смысле. Просто более аккуратная картинка ещё не доказывает, что отчёт стал удобнее.