Десктопное приложение
Дизайн дашборда выручки SaaS
Дизайн дашборда выручки SaaS объединяет в одном обзоре метрики подписок, график выручки за 30 дней, статусы аккаунтов и последние события.
Сценарии использования дашборда
- Обзоры выручки SaaSПросматривайте выручку, аккаунты, отток и задержку вместе.
- Мониторинг аккаунтовСравнивайте названия аккаунтов, тарифы и статусы в одной таблице.
- Отслеживание событий подписокЧитайте последние события аккаунтов вместе со временем и тарифами.
Особенности макета дашборда
- Четыре сводные метрикиСверху расположены MRR, активные аккаунты, отток и задержка P95.
- Выручка и аккаунтыШирокий график тренда стоит рядом со строками новых аккаунтов.
- Последние событияЧетыре примерных события упорядочены по отображаемому времени.
Вид дашборда
1 / 1Обзор выручки SaaS
Экран озаглавлен «Overview · April 2026», вверху есть элемент «Last 30 days» и кнопка «+ New report». Ниже четыре панели метрик показывают MRR ($48.2K), активные аккаунты (3,184), churn (30d) (2.1%) и P95 latency (182 ms), у каждой есть дополнительное значение изменения. Так коммерческие и технические показатели попадают в один первый взгляд, хотя экран не объясняет, как определены эти разные показатели.
Цвет быстро различает вторичные значения: три из них зелёные, а «+0.4 pp» у оттока красное. Один лишь знак не показывает, благоприятно ли изменение, поэтому важны подпись и единица измерения. Приведённые значения и данные аккаунтов — иллюстративный примерный контент, а не проверенные операционные результаты.
Как читать панели выручки и аккаунтов
Следующий ряд объединяет «Revenue · 30 days» и «New accounts». В CSS для этого ряда задано соотношение колонок 2:1, поэтому линейному графику отведено больше места, чем таблице аккаунтов. Такая пропорция делает форму выручки главным визуальным элементом, а тариф и статус остаются под рукой для быстрой проверки аккаунта.
График в целом растёт, но с заметными спадами; он показывает направление и колебания, а не точное дневное значение, так как подписей осей и числовых значений нет. В соседней таблице три явных поля: Account, Plan и Status. Например, Linear — тариф Team, статус active, а Notion — тариф Team, статус trial. Отдельные столбцы для тарифа и статуса помогают отличить уровень подписки от состояния аккаунта.
Просмотр метрик
Сравните четыре главных значения и сопровождающие их изменения, проверяя единицу и подпись каждого, прежде чем интерпретировать направление.
Проверка аккаунта
Используйте таблицу аккаунтов, чтобы соотнести организацию с её тарифом и статусом, не принимая названия тарифов за метки статуса.
От сводки к последним событиям
Визуальный порядок чтения идёт от четырёх метрик к графику и таблице новых аккаунтов, а затем вниз к «Recent events». Таблица стилей растягивает этот раздел на всю ширину ряда под двумя колонками панелей. В таблице есть поля Time, Account, Event и Plan, так что зафиксированное действие можно связать и с организацией, и с тарифом.
Среди примеров — «Upgraded to Team» у Acme Co и «Cancelled subscription» у Globex. Эти строки добавляют контекст, которого нет в сводных метриках и таблице статусов, но экран не указывает, как события связаны с показанными метриками. Порядок и примерные отметки времени делают это видом недавней активности, а не доказательством полной истории аудита.
| Область | Видимые поля | Назначение чтения |
|---|---|---|
| Панели метрик | Метрика, значение, изменение | Быстро просмотреть главные показатели и сопровождающие их изменения. |
| Новые аккаунты | Аккаунт, тариф, статус | Сравнить уровень тарифа с отображаемым состоянием. |
| Последние события | Время, аккаунт, событие, тариф | Соотнести примерную запись активности с аккаунтом и тарифом. |
Видимый дизайн и границы возможностей
Этот макет представляет дизайн дашборда с примерными значениями и видимыми элементами управления. «Last 30 days» и «+ New report» выглядят интерактивными, но имеющиеся данные не подтверждают, что они меняют период, создают отчёт или подключаются к живому сервису. Поэтому график, метрики и таблицы следует читать как проектный контент, а не как доказательство живых данных, хранения или выполненных действий.
В исходном коде задан боковой блок шириной 220px рядом с основной рабочей областью. Снятый вид сосредоточен на основной области: ряд «график — аккаунты» в соотношении 2:1, затем таблица событий на всю ширину. Ниже 900px исходный код складывает эти две панели в стопку и переводит карточки метрик в две колонки; полноценной навигации специально для телефона он не задаёт.
Как создать дизайн дашборда выручки SaaS в OpenDesign
Задайте обзор и определения метрик
Начните с заголовка обзора с датой и четырёх панелей метрик. Выберите показатели, которые логично сочетаются для вашей аудитории, и укажите, что означает каждое значение и каждое изменение, включая единицы измерения и периоды сравнения. Пусть примерные значения заметно отличаются от проверенных операционных данных.
Рекомендуемый промптСоздай дизайн дашборда выручки SaaS: обзор с датой, четыре панели метрик (MRR, активные аккаунты, отток за 30 дней и задержка P95), линейный график выручки за 30 дней, таблица новых аккаунтов и таблица последних событий. Используй чётко обозначенные иллюстративные примерные данные. Видимые элементы выбора периода и создания нового отчёта покажи только как элементы дизайна; не создавай впечатления работающих сервисов или живых данных.
Выстройте график и контекст аккаунтов
Уточните баланс между графиком выручки и таблицей аккаунтов. Сохраните различие между аккаунтом, тарифом и статусом и решите, нужны ли графику видимые оси или значения для задуманной задачи чтения. Проверьте, что более подробная таблица остаётся читаемой рядом с трендом.
Свяжите события с контекстом
Дайте списку событий поля времени, аккаунта, события и тарифа, затем проверьте, что примерные строки передают действие и не создают впечатления полной истории. Оцените переход от сводных метрик к графику, строкам аккаунтов и событиям при предполагаемой ширине рабочей области.
Экспортируйте дизайн и получите ссылку для публикации
Экспортируйте готовый дизайн, затем воспользуйтесь функцией Share в OpenDesign, чтобы получить ссылку. Откройте ссылку в отдельном окне браузера и убедитесь, что нужная версия со всеми ресурсами доступна, прежде чем отправлять её.
Дизайн вайрфрейма аналитического дашборда
Грейбокс-дашборд от OpenDesign описывает аналитическое рабочее пространство: боковая панель, четыре заглушки KPI, схематичный график, пять строк таблицы и синие аннотации к макету.
Десктопное приложение
Дизайн приложения для инбокса код-ревью
Дизайн приложения для инбокса код-ревью объединяет запросы на ревью, сбои CI, назначенные задачи и активность в одном рабочем пространстве для ежедневной сортировки.
Десктопное приложение
Дизайн дашборда эффективности контента
Тёмный дашборд контента связывает срезы по платформам с анализом графиков, планированием черновиков и более глубоким просмотром сигналов аудитории и конверсии.
Десктопное приложение
Дизайн планировщика поездки
Спланируйте шесть остановок по времени в вымышленном городе Солара-Бей с иллюстрированной картой, оценками пеших переходов и полезными предупреждениями о маршруте.
Десктопное приложение