Desktop-App
Design eines SaaS-Umsatz-Dashboards
Dieses SaaS-Umsatz-Dashboard vereint Abo-Kennzahlen, ein 30-Tage-Umsatzdiagramm, Kontostatus und aktuelle Ereignisse in einer Übersicht.
Einsatzbereiche des Dashboards
- SaaS-UmsatzreviewsUmsatz-, Konto-, Churn- und Latenzkennzahlen gemeinsam überblicken.
- KontoüberwachungKontonamen, Tarife und Status in einer Tabelle vergleichen.
- Verfolgung von Abo-EreignissenAktuelle Kontoereignisse zusammen mit Zeiten und Tarifen lesen.
Layout-Highlights des Dashboards
- Vier KernkennzahlenMRR, aktive Konten, Churn und P95-Latenz stehen vorn.
- Umsatz und KontenEin breites Trenddiagramm steht neben Zeilen neuer Konten.
- Aktuelle EreignisseVier Beispielereignisse sind nach angezeigter Zeit geordnet.
Dashboard-Ansicht
1 / 1Eine SaaS-Umsatzübersicht
Der Bildschirm trägt die Überschrift „Overview · April 2026“, oben stehen ein „Last 30 days“-Steuerelement und die Schaltfläche „+ New report“. Darunter zeigen vier Kennzahlenfelder MRR ($48.2K), aktive Konten (3,184), Churn (30d) (2.1%) und P95-Latenz (182 ms), jeweils mit einem zweiten Veränderungswert. So stehen kaufmännische und technische Kennzahlen im selben ersten Blick, ohne dass erklärt wird, wie diese unterschiedlichen Größen definiert sind.
Farbe unterscheidet die Nebenwerte auf einen Blick: Drei sind grün, während der Churn-Wert „+0.4 pp“ rot ist. Das Vorzeichen allein sagt nicht, ob eine Veränderung günstig ist; daher sind Bezeichnung und Einheit wichtig. Die gezeigten Zahlen und Kontodetails sind illustrative Beispielinhalte, keine verifizierten Betriebsergebnisse.
Umsatz- und Kontobereiche lesen
Die nächste Reihe stellt „Revenue · 30 days“ neben „New accounts“. Das CSS definiert diese Reihe im Spaltenverhältnis 2:1, sodass das Liniendiagramm mehr Platz erhält als die Kontotabelle. Durch dieses Verhältnis bestimmt die Umsatzkurve das Bild, während Tarif und Status für eine schnelle Kontoprüfung verfügbar bleiben.
Das Diagramm steigt insgesamt, enthält aber sichtbare Einbrüche; es zeigt Richtung und Schwankung, nicht präzise Tageswerte, da weder Achsenbeschriftungen noch eingetragene Zahlen zu sehen sind. Die angrenzende Tabelle hat drei eigene Felder: Account, Plan und Status. Linear hat zum Beispiel den Tarif Team und ist aktiv, Notion hat Team und ist in der Testphase. Getrennte Spalten für Tarif und Status helfen, Abo-Stufe und Kontozustand zu unterscheiden.
Kennzahlen-Scan
Vergleichen Sie die vier Hauptwerte und ihre Veränderungen und prüfen Sie jeweils Einheit und Bezeichnung, bevor Sie die Richtung deuten.
Kontoprüfung
Nutzen Sie die Kontotabelle, um eine Organisation ihrem Tarif und Status zuzuordnen, ohne Tarifnamen als Statusangaben zu behandeln.
Von der Übersicht zu aktuellen Ereignissen
Die visuelle Leserichtung führt von den vier Kennzahlen zu Diagramm und Tabelle neuer Konten und dann nach unten zu „Recent events“. Das Stylesheet lässt diesen Ereignisbereich die volle Zeilenbreite unter den zwei Spaltenfeldern einnehmen. Die Tabelle nutzt Time, Account, Event und Plan, sodass sich eine erfasste Aktion sowohl einer Organisation als auch einem Tarif zuordnen lässt.
Zu den Beispielen gehören „Upgraded to Team“ für Acme Co und „Cancelled subscription“ für Globex. Diese Zeilen liefern Kontext, den die Kennzahlen und die Kontostatustabelle nicht bieten, doch der Bildschirm gibt nicht an, wie die Ereignisse mit den angezeigten Kennzahlen zusammenhängen. Reihenfolge und Beispielzeitstempel machen dies zu einer Ansicht aktueller Aktivität, nicht zum Beleg eines vollständigen Audit-Verlaufs.
| Bereich | Sichtbare Felder | Lesezweck |
|---|---|---|
| Kennzahlenfelder | Kennzahl, Wert, Veränderung | Hauptkennzahlen und ihre begleitenden Deltas überblicken. |
| Neue Konten | Konto, Tarif, Status | Die Kontostufe mit dem angezeigten Zustand vergleichen. |
| Aktuelle Ereignisse | Zeit, Konto, Ereignis, Tarif | Einen Beispieleintrag einem Konto und Tarif zuordnen. |
Sichtbares Design und Funktionsgrenzen
Dieses Artefakt zeigt ein Dashboard-Design mit Beispielwerten und sichtbaren Steuerelementen. „Last 30 days“ und „+ New report“ wirken interaktiv, doch die vorliegenden Belege zeigen nicht, dass sie den Zeitraum ändern, einen Bericht erstellen oder mit einem Live-Dienst verbunden sind. Diagramm, Kennzahlen und Tabellen sind daher als gestaltete Inhalte zu lesen, nicht als Beleg für Live-Daten, Speicherung oder abgeschlossene Aktionen.
Die Quelle definiert eine 220px breite Seitenleiste neben dem Hauptarbeitsbereich. Die erfasste Ansicht konzentriert sich auf den Hauptbereich: eine Reihe mit Diagramm und Konten im Verhältnis 2:1, gefolgt von einer Ereignistabelle in voller Breite. Unterhalb von 900px stapelt die Quelle diese beiden Felder und stellt die Kennzahlenkarten auf zwei Spalten um; ein vollständiges Navigationslayout für Smartphones liefert sie nicht.
So erstellen Sie ein SaaS-Umsatz-Dashboard in OpenDesign
Übersicht und Kennzahlendefinitionen festlegen
Beginnen Sie mit einer datierten Überschrift der Übersicht und vier Kennzahlenfeldern. Wählen Sie Messgrößen, die für Ihr Publikum zusammengehören, und legen Sie fest, was jeder Wert und jede Veränderung bedeutet, einschließlich Einheiten und Vergleichszeiträumen. Halten Sie Beispielwerte sichtbar von verifizierten Betriebsdaten getrennt.
Vorgeschlagener PromptErstelle ein Design eines SaaS-Umsatz-Dashboards mit einer datierten Übersicht, vier Kennzahlenfeldern für MRR, aktive Konten, Churn über 30 Tage und P95-Latenz, einem 30-Tage-Umsatzliniendiagramm, einer Tabelle neuer Konten und einer Tabelle aktueller Ereignisse. Verwende klar gekennzeichnete, illustrative Beispieldaten. Zeige die sichtbaren Steuerelemente für Zeitraum und neuen Bericht nur als Designelemente; suggeriere keine funktionierenden Dienste oder Live-Daten.
Diagramm und Kontokontext anordnen
Verfeinern Sie das Verhältnis zwischen Umsatzdiagramm und Kontotabelle. Erhalten Sie die Unterscheidung zwischen Konto, Tarif und Status, und entscheiden Sie, ob das Diagramm für die vorgesehene Leseaufgabe sichtbare Achsen oder Werte braucht. Prüfen Sie, dass die detailliertere Tabelle neben der Trendansicht lesbar bleibt.
Ereignisse mit ihrem Kontext verbinden
Geben Sie der Ereignisliste Felder für Zeit, Konto, Ereignis und Tarif und prüfen Sie, ob die Beispielzeilen eine Aktion vermitteln, ohne einen vollständigen Verlauf zu suggerieren. Prüfen Sie den Übergang von den Kennzahlen zu Diagramm, Kontozeilen und Ereignissen in der vorgesehenen Arbeitsbereichsbreite.
Exportieren und Share-Link erhalten
Das fertige Design exportieren und anschließend über „Teilen" in OpenDesign einen Share-Link abrufen. Den Link in einem separaten Browserfenster öffnen und prüfen, ob die gewünschte Version sowie alle Assets vorhanden sind, bevor er weitergegeben wird.
Analytics-Dashboard-Wireframe-Design
Ein OpenDesign Greybox-Dashboard bildet einen Analytics-Arbeitsbereich mit Seitenleiste, vier KPI-Platzhaltern, einem schematischen Diagramm, fünf Tabellenzeilen und blauen Layout-Anmerkungen ab.
Desktop-App
App-Design für einen Code-Review-Posteingang
Das App-Design für einen Code-Review-Posteingang vereint Review-Anfragen, CI-Fehler, zugewiesene Issues und Aktivitäten in einem gut überschaubaren Arbeitsbereich für die tägliche Triage.
Desktop-App
Design eines Content-Performance-Dashboards
Ein dunkles Content-Dashboard verbindet Plattform-Snapshots mit Diagramminspektion, Entwurfsplanung und einer detaillierteren Ansicht von Zielgruppen- und Conversion-Signalen.
Desktop-App
Tagesausflug-Planer Design
Sechs zeitgeplante Stopps in der fiktiven Solara Bay planen – mit illustrierter Karte, Gehzeitschätzungen und hilfreichen Routenwarnungen.
Desktop-App