Application de bureau
Tableau de bord de revenus SaaS
Cette conception de tableau de bord de revenus SaaS réunit en une seule vue les métriques d'abonnement, un graphique de revenus sur 30 jours, les statuts de comptes et les événements récents.
Cas d'usage du tableau de bord
- Revues de revenus SaaSParcourir ensemble les mesures de revenus, de comptes, de churn et de latence.
- Suivi des comptesComparer noms de comptes, offres et statuts dans un seul tableau.
- Suivi des événements d'abonnementLire les événements récents des comptes avec leurs heures et leurs offres.
Points forts de la mise en page
- Quatre métriques de synthèseMRR, comptes actifs, churn et latence P95 en tête.
- Revenus et comptesUn large graphique de tendance placé à côté des lignes de nouveaux comptes.
- Événements récentsQuatre événements d'exemple classés selon l'heure affichée.
Vue du tableau de bord
1 / 1Une vue d'ensemble des revenus SaaS
L'écran s'ouvre sur « Overview · April 2026 », avec une commande « Last 30 days » et un bouton « + New report » en haut. En dessous, quatre panneaux présentent le MRR (48,2 K$), les comptes actifs (3184), le churn (30 j) (2,1 %) et la latence P95 (182 ms), chacun avec une valeur de variation secondaire. Cela place mesures commerciales et techniques dans le même premier coup d'œil, sans expliquer comment ces mesures différentes sont définies.
La couleur distingue rapidement les chiffres secondaires : trois sont en vert, tandis que le « +0.4 pp » du churn est en rouge. Le signe seul n'indique pas si une variation est favorable ; le libellé et l'unité comptent donc. Les chiffres et les détails de comptes fournis sont des contenus d'exemple illustratifs, et non des résultats d'exploitation vérifiés.
Lire les panneaux de revenus et de comptes
La rangée suivante associe « Revenue · 30 days » et « New accounts ». Le CSS définit cette rangée avec un rapport de colonnes de 2:1, ce qui donne au graphique linéaire plus d'espace qu'au tableau des comptes. Cette proportion fait de la forme des revenus l'élément visuel principal, tout en laissant l'offre et le statut disponibles pour un contrôle rapide des comptes.
Le graphique progresse globalement mais présente des creux visibles ; il indique la direction et la variation plutôt qu'une valeur quotidienne précise, puisqu'aucun libellé d'axe ni valeur tracée n'est affiché. Le tableau voisin comporte trois champs explicites : Account, Plan et Status. Par exemple, Linear est en Team et actif, tandis que Notion est en Team et en essai. Séparer offre et statut en colonnes distinctes aide à différencier le niveau d'abonnement de l'état du compte.
Lecture des métriques
Comparez les quatre valeurs principales et leurs variations, en vérifiant chaque unité et chaque libellé avant d'interpréter la direction.
Contrôle des comptes
Utilisez le tableau des comptes pour relier une organisation à son offre et à son statut, sans confondre noms d'offres et libellés de statut.
De la synthèse aux événements récents
L'ordre de lecture visuel va des quatre métriques au graphique et au tableau des nouveaux comptes, puis descend vers « Recent events ». La feuille de style fait occuper à cette section toute la largeur sous les panneaux à deux colonnes. Son tableau utilise Time, Account, Event et Plan, ce qui permet de relier une action enregistrée à la fois à une organisation et à une offre.
Les exemples listés incluent « Upgraded to Team » pour Acme Co et « Cancelled subscription » pour Globex. Ces lignes apportent un contexte que les métriques de synthèse et le tableau des statuts de comptes ne fournissent pas, mais l'écran ne précise pas comment les événements se rapportent aux métriques affichées. L'ordre et les horodatages d'exemple en font une vue d'activité récente, et non la preuve d'un historique d'audit complet.
| Zone | Champs visibles | Objectif de lecture |
|---|---|---|
| Panneaux de métriques | Métrique, valeur, variation | Parcourir les mesures principales et leurs écarts associés. |
| Nouveaux comptes | Compte, offre, statut | Comparer le niveau d'offre d'un compte à son état affiché. |
| Événements récents | Heure, compte, événement, offre | Relier une entrée d'activité d'exemple à un compte et à une offre. |
Limites visibles du design et des capacités
Cet artefact présente une conception de tableau de bord avec des valeurs d'exemple et des commandes visibles. « Last 30 days » et « + New report » semblent interactifs, mais les éléments disponibles n'établissent pas qu'ils modifient la plage de dates, créent un rapport ou se connectent à un service en direct. Le graphique, les métriques et les tableaux doivent donc être lus comme du contenu de design, et non comme la preuve de données en direct, d'un stockage ou d'actions accomplies.
La source définit une barre latérale de 220px à côté de l'espace de travail principal. La vue capturée se concentre sur la zone principale : une rangée graphique-comptes de 2:1 suivie d'un tableau d'événements pleine largeur. En dessous de 900px, la source empile ces deux panneaux et passe les cartes de métriques sur deux colonnes ; elle ne fournit pas de mise en page de navigation complète propre au téléphone.
Comment créer un tableau de bord de revenus SaaS dans OpenDesign
Définir la vue d'ensemble et les métriques
Commencez par un titre de vue d'ensemble daté et quatre panneaux de métriques. Choisissez des mesures cohérentes pour votre public et précisez ce que signifient chaque valeur et chaque variation, y compris les unités et les périodes de comparaison. Veillez à distinguer clairement les valeurs d'exemple des données opérationnelles vérifiées.
Invite suggéréeCrée une conception de tableau de bord de revenus SaaS avec une vue d'ensemble datée, quatre panneaux de métriques pour le MRR, les comptes actifs, le churn à 30 jours et la latence P95, un graphique linéaire des revenus sur 30 jours, un tableau des nouveaux comptes et un tableau des événements récents. Utilise des données d'exemple illustratives clairement identifiées. Présente les commandes visibles de plage de dates et de nouveau rapport uniquement comme éléments de design ; ne laisse pas entendre que des services fonctionnent ou que les données sont en direct.
Organiser le graphique et le contexte des comptes
Affinez l'équilibre entre le graphique de revenus et le tableau des comptes. Conservez la distinction entre compte, offre et statut, et décidez si le graphique a besoin d'axes ou de valeurs visibles pour la lecture visée. Vérifiez que le tableau, plus détaillé, reste lisible à côté de la vue de tendance.
Relier les événements à leur contexte
Donnez à la liste d'événements des champs pour l'heure, le compte, l'événement et l'offre, puis vérifiez que les lignes d'exemple traduisent une action sans suggérer un historique complet. Examinez la transition entre les métriques de synthèse, le graphique, les lignes de comptes et les événements à la largeur d'espace de travail visée.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Conception de wireframe de tableau de bord analytique
Un tableau de bord greybox OpenDesign cartographie un espace de travail analytique au moyen d’une barre latérale, de quatre emplacements KPI, d’un graphique schématique, de cinq lignes de tableau et d’annotations de mise en page bleues.
Application de bureau
Design d’application de boîte de réception de revue de code
Ce design d’application réunit demandes de revue, échecs CI, tickets assignés et activité dans un espace de travail lisible d’un coup d’œil pour le tri quotidien.
Application de bureau
Design de tableau de bord de performance des contenus
Un tableau de bord de contenus sombre relie les aperçus par plateforme à l’examen des graphiques, à la planification des brouillons et à une analyse approfondie des signaux d’audience et de conversion.
Application de bureau
Design de planificateur d'excursion à la journée
Planifiez six étapes minutées dans la ville fictive de Solara Bay, avec une carte illustrée, des estimations de marche et des avertissements utiles sur l'itinéraire.
Application de bureau