Masaüstü uygulaması
SaaS Gelir Panosu Tasarımı
Bu SaaS gelir panosu tasarımı, abonelik metriklerini, 30 günlük gelir grafiğini, hesap durumlarını ve son olayları tek bir genel bakışta toplar.
Pano Tasarımı Kullanım Alanları
- SaaS Gelir İncelemeleriGelir, hesap, churn ve gecikme ölçümlerini birlikte tarayın.
- Hesap İzlemeHesap adlarını, planları ve durumları tek tabloda karşılaştırın.
- Abonelik Olayı TakibiSon hesap olaylarını zamanları ve planlarıyla birlikte okuyun.
Pano Yerleşiminin Öne Çıkanları
- Dört Özet MetrikMRR, aktif hesaplar, churn ve P95 gecikme öne çıkar.
- Gelir ve HesaplarGeniş bir trend grafiği, yeni hesap satırlarının yanında yer alır.
- Son OlaylarDört örnek olay, gösterilen zamana göre sıralanır.
Pano Görünümü
1 / 1SaaS Gelir Genel Bakışı
Ekranın başlığı “Overview · April 2026”dır; üstte “Last 30 days” kontrolü ve “+ New report” düğmesi bulunur. Altında dört metrik panel MRR ($48.2K), aktif hesaplar (3,184), churn (30d) (%2.1) ve P95 gecikme (182 ms) değerlerini, her biri ikincil bir değişim değeriyle sunar. Bu, ticari ve teknik ölçümleri ilk taramada bir araya getirir; ancak bu farklı ölçümlerin nasıl tanımlandığını açıklamaz.
Renk, ikincil rakamlara hızlı bir görsel ayrım kazandırır: üçü yeşil, churn'ün “+0.4 pp” değeri ise kırmızıdır. Yalnızca işaret, değişimin olumlu olup olmadığını açıklamaz; bu yüzden etiket ve birim önemlidir. Sağlanan rakamlar ve hesap ayrıntıları örnek niteliğindeki içeriktir, doğrulanmış operasyonel sonuçlar değildir.
Gelir ve Hesap Panellerini Okuma
Sonraki satır “Revenue · 30 days” ile “New accounts” bölümlerini eşleştirir. CSS bu satırı 2:1 sütun oranıyla tanımlar; böylece çizgi grafiğe hesap tablosundan daha fazla alan verir. Bu oran gelir eğrisini ana görsel yaparken hızlı bir hesap kontrolü için plan ve durumu da erişilebilir tutar.
Grafik genel olarak yükselir ancak görünür düşüşler içerir; eksen etiketleri veya çizilmiş sayılar gösterilmediğinden kesin bir günlük değerden çok yönü ve değişkenliği aktarır. Yandaki tablonun üç açık alanı vardır: Account, Plan ve Status. Örneğin Linear, Team planında ve aktiftir; Notion ise Team planında ve deneme aşamasındadır. Planı ve durumu ayrı sütunlarda tutmak, abonelik kademesini hesap durumundan ayırmaya yardımcı olur.
Metrik Taraması
Dört ana değeri ve eşlik eden değişimleri karşılaştırın; yönü yorumlamadan önce her birimi ve etiketi kontrol edin.
Hesap Kontrolü
Plan adlarını durum etiketi saymadan, bir kuruluşu planı ve durumuyla ilişkilendirmek için hesap tablosunu kullanın.
Özetten Son Olaylara
Görsel okuma sırası dört metrikten grafiğe ve yeni hesaplar tablosuna, ardından aşağıda “Recent events” bölümüne ilerler. Stil sayfası bu olay bölümünü iki sütunlu panellerin altında tam satır boyunca uzatır. Tablosu Time, Account, Event ve Plan alanlarını kullanır; böylece okuyucu kaydedilen bir eylemi hem bir kuruluşla hem de bir planla ilişkilendirebilir.
Listelenen örnekler arasında Acme Co için “Upgraded to Team” ve Globex için “Cancelled subscription” bulunur. Bu satırlar, özet metriklerin ve hesap durumu tablosunun sunmadığı bağlam ekler; ancak ekran, olayların gösterilen metriklerle nasıl ilişkili olduğunu belirtmez. Sıralama ve örnek zaman damgaları bunu bir son etkinlik görünümü yapar; eksiksiz bir denetim geçmişinin kanıtı değildir.
| Alan | Görünen Alanlar | Okuma Amacı |
|---|---|---|
| Metrik paneller | Metrik, değer, değişim | Ana ölçümleri ve eşlik eden farkları tarayın. |
| Yeni hesaplar | Hesap, plan, durum | Hesap kademesini gösterilen durumuyla karşılaştırın. |
| Son olaylar | Zaman, hesap, olay, plan | Örnek bir etkinlik kaydını bir hesap ve planla ilişkilendirin. |
Görünür tasarım ve işlev sınırları
Bu çalışma, örnek değerler ve görünür kontroller içeren bir pano tasarımı sunar. “Last 30 days” ve “+ New report” etkileşimli görünür, ancak eldeki kanıt bunların tarih aralığını değiştirdiğini, rapor oluşturduğunu veya canlı bir hizmete bağlandığını göstermez. Bu nedenle grafik, metrikler ve tablolar tasarlanmış içerik olarak okunmalıdır; canlı veri, depolama veya tamamlanmış eylemlerin kanıtı değildir.
Kaynak, ana çalışma alanının yanında 220px'lik bir kenar çubuğu tanımlar. Yakalanan görünüm ana alana odaklanır: 2:1 grafik-hesap satırı ve ardından tam genişlikte olay tablosu. 900px altında kaynak bu iki paneli üst üste dizer ve metrik kartlarını iki sütuna çevirir; telefona özgü eksiksiz bir gezinme düzeni sağlamaz.
OpenDesign'da SaaS Gelir Panosu Tasarımı Nasıl Oluşturulur
Genel Bakışı ve Metrik Tanımlarını Belirleyin
Tarihli bir genel bakış başlığı ve dört metrik panelle başlayın. Hedef kitleniz için birbirine uygun ölçümleri seçin; birimler ve karşılaştırma dönemleri dahil her değerin ve değişimin ne anlama geldiğini belirtin. Örnek değerleri doğrulanmış operasyonel verilerden görünür biçimde ayırın.
Önerilen PromptMRR, aktif hesaplar, 30 günlük churn ve P95 gecikme için dört metrik panel, 30 günlük gelir çizgi grafiği, yeni hesaplar tablosu ve son olaylar tablosu içeren, tarihli bir genel bakışa sahip bir SaaS gelir panosu tasarımı oluştur. Açıkça belirtilmiş, örnek niteliğinde veriler kullan. Görünür tarih aralığı ve yeni rapor kontrollerini yalnızca tasarım öğeleri olarak göster; çalışan hizmetler veya canlı veri ima etme.
Grafik ve Hesap Bağlamını Düzenleyin
Gelir grafiği ile hesap tablosu arasındaki dengeyi inceltin. Hesap, plan ve durum ayrımını koruyun; amaçlanan okuma görevi için grafikte görünür eksenlerin veya değerlerin gerekip gerekmediğine karar verin. Daha ayrıntılı tablonun trend görünümünün yanında okunabilir kaldığını kontrol edin.
Olayları Bağlamlarına Bağlayın
Olay listesine zaman, hesap, olay ve plan alanlarını verin; ardından örnek satırların eksiksiz bir geçmiş ima etmeden bir eylemi aktarıp aktarmadığını kontrol edin. Özet metriklerden grafiğe, hesap satırlarına ve olaylara geçişi hedeflenen çalışma alanı genişliğinde gözden geçirin.
Dışa Aktarın ve Paylaşım Bağlantısı Alın
Bitmiş tasarımınızı dışa aktarın, ardından bir paylaşım bağlantısı almak için OpenDesign'daki Paylaş seçeneğini kullanın. Bağlantıyı göndermeden önce ayrı bir tarayıcı penceresinde açarak amaçlanan sürümün ve bileşenlerinin erişilebilir olduğunu doğrulayın.
Analitik Dashboard Wireframe Tasarımı
Bir OpenDesign gri kutu dashboard'u; kenar çubuğu, dört KPI yer tutucusu, şematik grafik, beş tablo satırı ve mavi yerleşim açıklamaları aracılığıyla bir analitik çalışma alanını haritalandırır.
Masaüstü uygulaması
Kod İnceleme Gelen Kutusu Uygulama Tasarımı
Kod İnceleme Gelen Kutusu Uygulama Tasarımı; inceleme isteklerini, CI hatalarını, atanmış sorunları ve etkinlikleri günlük önceliklendirme için hızla gözden geçirilebilen tek bir çalışma alanında bir araya getirir.
Masaüstü uygulaması
İçerik Performansı Gösterge Paneli Tasarımı
Koyu temalı bir içerik gösterge paneli; platform anlık görüntülerini grafik inceleme, taslak planlama ve kitle ile dönüşüm sinyallerinin daha ayrıntılı görünümüyle birleştiriyor.
Masaüstü uygulaması
Günübirlik Gezi Planlayıcı Tasarımı
İllüstrasyonlu bir harita, yürüme tahminleri ve yararlı rota uyarılarıyla kurgusal Solara Bay'de altı zamanlanmış durağı planlayın.
Masaüstü uygulaması