UX и оформление dashboard — Streamlit: создание интерактивных dashboards на Python

Данные в видео:

id,product,category,price,quantity,month,country
1,Laptop,Electronics,1200,5,January,Germany
2,Phone,Electronics,800,12,January,France
3,Tablet,Electronics,650,7,February,Germany
4,Camera,Electronics,550,4,March,Spain
5,TV,Electronics,1400,3,April,Italy
6,Headphones,Electronics,180,20,April,France
7,Chair,Furniture,150,15,February,Germany
8,Table,Furniture,320,8,March,France
9,Sofa,Furniture,950,2,April,Italy
10,Cabinet,Furniture,700,4,May,Spain
11,Lamp,Furniture,90,25,May,Germany
12,Bookshelf,Furniture,450,6,June,France
13,T-Shirt,Clothing,40,50,January,Italy
14,Jeans,Clothing,80,30,February,Germany
15,Jacket,Clothing,180,10,March,France
16,Sneakers,Clothing,220,14,April,Spain
17,Hat,Clothing,35,40,May,Italy
18,Backpack,Clothing,95,18,June,Germany
19,Coffee Machine,Home,350,5,January,France
20,Vacuum Cleaner,Home,480,6,February,Spain
21,Microwave,Home,260,7,March,Italy
22,Kettle,Home,60,22,April,Germany
23,Blender,Home,110,13,May,France
24,Air Fryer,Home,240,9,June,Spain
25,Monitor,Electronics,420,8,May,Germany
26,Keyboard,Electronics,70,35,June,France
27,Mouse,Electronics,45,42,June,Italy
28,Desk,Furniture,520,5,June,Germany
29,Hoodie,Clothing,120,16,June,Spain
30,Toaster,Home,55,20,June,France

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

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

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

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

Что вы узнаете в рамках статьи

В этом уроке мы сосредоточимся на улучшении пользовательского опыта и внешнего вида приложения.

Мы разберём:

отображение ключевых показателей через st.metric;
использование контейнеров;
настройку отображения таблиц через column_config;
форматирование чисел;
отображение валют и процентов;
progress bar;
сообщения об успехе и ошибках;
экспорт данных;
download_button;
базовую кастомизацию интерфейса;
использование CSS внутри Streamlit.

Ключевые термины

UX (User Experience) — пользовательский опыт взаимодействия с приложением.
st.metric — компонент для отображения ключевых показателей.
Container — контейнер для группировки элементов интерфейса.
column_config — механизм настройки отображения столбцов таблицы.
Formatting — форматирование отображаемых данных.
Progress Bar — индикатор выполнения операции.
Alert — уведомление для пользователя.
download_button — кнопка скачивания данных.
CSS — язык описания внешнего вида элементов интерфейса.

Почему внешний вид имеет значение

Представьте два dashboard.

Первый содержит полезные данные, но все элементы просто идут друг за другом без какой-либо структуры.
Второй показывает те же самые данные, но показатели выделены, таблицы оформлены аккуратно, а важная информация сразу бросается в глаза.

Хотя функциональность одинаковая, второй dashboard обычно воспринимается как более профессиональный продукт. Именно поэтому UX играет такую важную роль.

Ключевые показатели через `st.metric`

Практически любой dashboard начинается с KPI-блоков. Например, через KPI-блоки часто отображают общую выручку, количество заказов, число клиентов и средний чек.

Для таких задач Streamlit предоставляет компонент st.metric.

st.metric(
    "Продажи",
    15000
)

После запуска приложения появится аккуратный блок с показателем.

Отображение изменения показателя

Очень часто важно показать не только текущее значение, но и изменение относительно прошлого периода.

Например:

st.metric(
    "Продажи",
    15000,
    delta="+12%"
)

Теперь пользователь сразу увидит динамику показателя. Это один из самых популярных элементов современных dashboard.

Используем контейнеры

Когда элементов становится много, полезно объединять их в логические блоки. Для этого можно использовать контейнеры.

container = st.container()

with container:
    st.metric("Продажи", 15000)
    st.metric("Заказы", 350)

Контейнер помогает визуально группировать связанные элементы. Особенно это становится полезным на больших страницах.

Форматирование данных

Часто данные выглядят не очень удобно. Например: 15342.456781. Для пользователя такое число воспринимается тяжело. Гораздо лучше: 15 342.46. Форматирование делает интерфейс значительно понятнее.

Например:

st.write(
    f"{sales:,.2f}"
)

Валюты и проценты

Практически любой аналитический dashboard работает с денежными показателями.

Например:

st.write(
    f"${revenue:,.2f}"
)

Для процентов:

st.write(
    f"{conversion_rate:.2f}%"
)

Такие мелочи сильно влияют на восприятие данных.

Настройка таблиц через `column_config`

По умолчанию таблицы отображаются довольно нейтрально. Но Streamlit позволяет гибко настраивать отображение отдельных столбцов через параметр column_config.

Например, можно изменить название столбца и настроить формат чисел:

st.dataframe(
    df,
    column_config={
        "price": st.column_config.NumberColumn(
            "Цена",
            format="$ %.2f"
        )
    }
)

Теперь вместо технического имени price пользователь увидит заголовок «Цена», а значения будут отображаться как денежные суммы. Одним из самых популярных вариантов является NumberColumn. Он позволяет задавать формат отображения чисел, ограничивать количество знаков после запятой, а также удобно отображать валюты и процентные значения.

Например:

"discount": st.column_config.NumberColumn(
    "Скидка",
    format="%.1f %%"
)

Для ссылок существует специальный тип LinkColumn.

"url": st.column_config.LinkColumn(
    "Сайт"
)

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

"image": st.column_config.ImageColumn(
    "Фото товара"
)

В этом случае вместо текстового URL пользователь увидит само изображение. Для дат существует DateColumn.

"created_at": st.column_config.DateColumn(
    "Дата создания"
)

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

Также Streamlit поддерживает отображение прогресса через ProgressColumn.

Предположим, что в таблице есть столбец выполнения задачи:

"progress": st.column_config.ProgressColumn(
    "Выполнение",
    min_value=0,
    max_value=100
)

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

"category": st.column_config.TextColumn(
    "Категория"
)

Это удобно, когда нужно переименовать столбец или добавить подсказки.

Например, итоговая конфигурация может выглядеть так:

st.dataframe(
    df,
    column_config={
        "product": st.column_config.TextColumn(
            "Товар"
        ),
        "price": st.column_config.NumberColumn(
            "Цена",
            format="$ %.2f"
        ),
        "discount": st.column_config.NumberColumn(
            "Скидка",
            format="%.1f %%"
        ),
        "image": st.column_config.ImageColumn(
            "Фото"
        ),
        "url": st.column_config.LinkColumn(
            "Ссылка"
        )
    }
)

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

Progress Bar

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

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

Создание progress bar выглядит следующим образом:

progress = st.progress(0)

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

progress.progress(25)

# очистка данных

progress.progress(50)

# агрегация

progress.progress(75)

# построение отчета

progress.progress(100)

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

Alerts и уведомления

Пользователь должен понимать, что происходит в приложении.

Например, если файл успешно загружен:

st.success(
    "Файл успешно загружен"
)

Предупреждение:

st.warning(
    "Не все столбцы найдены"
)

Ошибка:

st.error(
    "Не удалось обработать файл"
)

Информационное сообщение:

st.info(
    "Загрузка может занять некоторое время"
)

Такие уведомления значительно улучшают UX приложения.

Экспорт данных

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

Экспорт CSV

Сначала подготовим данные:

csv_data = df.to_csv(
    index=False
)

Теперь создадим кнопку:

st.download_button(
    "Скачать CSV",
    csv_data,
    file_name="report.csv"
)

После нажатия пользователь получит файл.

Базовая кастомизация интерфейса

Даже небольшие настройки позволяют сделать приложение более удобным и профессиональным. Для этого в Streamlit используется функция st.set_page_config(), которая обычно вызывается в самом начале программы.

st.set_page_config(
    page_title="Sales Dashboard",
    layout="wide"
)

Параметр page_title задаёт название вкладки браузера, а layout="wide" включает широкую раскладку страницы. Для dashboard-приложений это особенно полезно, поскольку таблицы и графики получают больше места на экране.

Также можно настроить иконку вкладки:

st.set_page_config(
    page_title="Sales Dashboard",
    page_icon="📊"
)

Чаще всего эти параметры используют вместе:

st.set_page_config(
    page_title="Sales Dashboard",
    page_icon="📈",
    layout="wide"
)

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

Пользовательский CSS

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

Например, следующий код выравнивает все заголовки первого уровня по центру страницы:

st.markdown(
    """
    <style>
    h1 {
        text-align: center;
    }
    </style>
    """,
    unsafe_allow_html=True
)

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

В таких ситуациях удобно использовать LLM. Достаточно описать желаемый результат простыми словами, например:

Создай современный CSS для dashboard в светлой цветовой схеме с аккуратными карточками показателей и мягкими тенями.

После этого модель сгенерирует готовый CSS-код, который можно встроить в приложение через st.markdown(). Такой подход позволяет быстро улучшать внешний вид dashboard и экспериментировать с оформлением даже без глубоких знаний frontend-разработки.

Наиболее частые ошибки

Отсутствие форматирования чисел
Длинные дробные значения делают интерфейс менее удобным для восприятия.
Слишком много уведомлений
Большое количество сообщений начинает отвлекать пользователя.
Отсутствие обратной связи при загрузке данных
Пользователь может подумать, что приложение зависло.
Чрезмерное использование CSS
Иногда попытки полностью переделать внешний вид Streamlit приводят к нестабильному интерфейсу.

Наиболее частые вопросы

Стоит ли использовать CSS в каждом проекте?
Не обязательно. Во многих случаях стандартных компонентов Streamlit вполне достаточно.
Можно ли скачивать только CSV?
Нет, через download_button можно отдавать пользователю различные типы файлов.
Нужно ли использовать st.metric?
Нет, но для отображения KPI-показателей это один из самых удобных компонентов.
Обязательно ли знать CSS для Streamlit?
Нет. Базовые изменения можно делать даже без глубокого знания CSS, а сложные стили сегодня часто генерируют с помощью LLM.

Итоги

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

Кроме того, мы познакомились с базовой кастомизацией интерфейса и увидели, как можно использовать CSS для улучшения внешнего вида приложения. Теперь dashboard не только умеет работать с данными, но и выглядит значительно более аккуратно и профессионально. Именно такие детали чаще всего отличают технический прототип от продукта, которым действительно удобно пользоваться.

Что вы узнаете в рамках статьи

Ключевые термины

Почему внешний вид имеет значение

Ключевые показатели через st.metric

Отображение изменения показателя

Используем контейнеры

Форматирование данных

Валюты и проценты

Настройка таблиц через column_config

Progress Bar

Alerts и уведомления

Экспорт данных

Базовая кастомизация интерфейса

Пользовательский CSS

Наиболее частые ошибки

Наиболее частые вопросы

Итоги

Ключевые показатели через `st.metric`

Настройка таблиц через `column_config`