Aplicativo desktop
Design de Dashboard de Receita SaaS
Este design de dashboard de receita SaaS reúne métricas de assinatura, um gráfico de receita de 30 dias, status de contas e eventos recentes em uma única visão geral.
Casos de Uso do Dashboard
- Revisões de Receita SaaSAnalise juntas as medidas de receita, contas, churn e latência.
- Monitoramento de ContasCompare nomes de contas, planos e status em uma única tabela.
- Acompanhamento de Eventos de AssinaturaLeia eventos recentes de contas junto com seus horários e planos.
Destaques do Layout do Dashboard
- Quatro Métricas de ResumoMRR, contas ativas, churn e latência P95 abrem a tela.
- Receita e ContasUm amplo gráfico de tendência fica ao lado das linhas de novas contas.
- Eventos RecentesQuatro eventos de exemplo estão ordenados pelo horário exibido.
Tela do Dashboard
1 / 1Uma Visão Geral da Receita SaaS
A tela tem o título “Overview · April 2026”, com um controle “Last 30 days” e um botão “+ New report” no topo. Abaixo, quatro painéis de métricas apresentam MRR ($48.2K), contas ativas (3,184), churn (30d) (2.1%) e latência P95 (182 ms), cada um com um valor secundário de variação. Isso coloca medidas comerciais e técnicas na mesma primeira leitura, embora não explique como essas medidas diferentes são definidas.
A cor dá aos valores secundários uma distinção visual rápida: três são verdes, enquanto o “+0.4 pp” do churn é vermelho. O sinal sozinho não explica se uma variação é favorável, então o rótulo e a unidade importam. Os valores e os detalhes de contas apresentados são conteúdo de exemplo ilustrativo, não resultados operacionais verificados.
Como Ler os Painéis de Receita e Contas
A linha seguinte combina “Revenue · 30 days” com “New accounts”. O CSS define essa linha com proporção de colunas de 2:1, dando ao gráfico de linhas mais espaço do que à tabela de contas. Essa proporção torna a forma da receita o elemento visual principal, ao mesmo tempo que mantém plano e status disponíveis para uma checagem rápida das contas.
O gráfico sobe no geral, mas inclui quedas visíveis; ele comunica direção e variação, não um valor diário preciso, já que não há rótulos de eixo nem números plotados. A tabela ao lado tem três campos explícitos: Account, Plan e Status. Por exemplo, Linear está no plano Team e ativa, enquanto Notion está no plano Team e em teste. Manter plano e status em colunas separadas ajuda a distinguir o nível da assinatura do estado da conta.
Leitura das Métricas
Compare os quatro valores principais e suas variações, verificando cada unidade e rótulo antes de interpretar a direção.
Checagem de Contas
Use a tabela de contas para relacionar uma organização ao seu plano e status, sem tratar nomes de planos como rótulos de status.
Do Resumo aos Eventos Recentes
A ordem visual de leitura vai das quatro métricas para o gráfico e a tabela de novas contas, e depois desce até “Recent events”. A folha de estilos faz essa seção de eventos ocupar a linha inteira abaixo dos painéis de duas colunas. Sua tabela usa Time, Account, Event e Plan, de modo que o leitor pode conectar uma ação registrada a uma organização e a um plano.
Os exemplos listados incluem “Upgraded to Team” para Acme Co e “Cancelled subscription” para Globex. Essas linhas acrescentam contexto que as métricas de resumo e a tabela de status de contas não oferecem, mas a tela não especifica como os eventos se relacionam com as métricas exibidas. A ordenação e os horários de exemplo fazem disso uma visão de atividade recente, não uma prova de histórico de auditoria completo.
| Área | Campos Visíveis | Finalidade da Leitura |
|---|---|---|
| Painéis de métricas | Métrica, valor, variação | Analisar as medidas principais e suas variações associadas. |
| Novas contas | Conta, plano, status | Comparar o nível da conta com o estado exibido. |
| Eventos recentes | Horário, conta, evento, plano | Relacionar uma entrada de atividade de exemplo a uma conta e a um plano. |
Limites Visíveis do Design e das Funcionalidades
Este artefato apresenta um design de dashboard com valores de exemplo e controles visíveis. “Last 30 days” e “+ New report” parecem interativos, mas as evidências disponíveis não estabelecem que eles alterem o intervalo de datas, criem um relatório ou se conectem a um serviço ao vivo. O gráfico, as métricas e as tabelas devem, portanto, ser lidos como conteúdo de design, não como prova de dados ao vivo, armazenamento ou ações concluídas.
O código-fonte define uma barra lateral de 220px ao lado da área de trabalho principal. A visão capturada se concentra na área principal: uma linha de gráfico e contas na proporção 2:1, seguida por uma tabela de eventos em largura total. Abaixo de 900px, o código empilha esses dois painéis e muda os cartões de métricas para duas colunas; ele não fornece um layout de navegação completo específico para celular.
Como criar um design de dashboard de receita SaaS no OpenDesign
Defina a visão geral e as métricas
Comece com um título de visão geral datado e quatro painéis de métricas. Escolha medidas que façam sentido juntas para o seu público e especifique o que cada valor e cada variação significam, incluindo unidades e períodos de comparação. Mantenha os valores de exemplo claramente distintos de dados operacionais verificados.
Prompt sugeridoCrie um design de dashboard de receita SaaS com uma visão geral datada, quatro painéis de métricas para MRR, contas ativas, churn em 30 dias e latência P95, um gráfico de linhas da receita de 30 dias, uma tabela de novas contas e uma tabela de eventos recentes. Use dados de exemplo ilustrativos claramente identificados. Mostre os controles visíveis de intervalo de datas e de novo relatório apenas como elementos de design; não sugira serviços em funcionamento nem dados ao vivo.
Organize o gráfico e o contexto das contas
Refine o equilíbrio entre o gráfico de receita e a tabela de contas. Preserve a distinção entre conta, plano e status, e decida se o gráfico precisa de eixos ou valores visíveis para a tarefa de leitura pretendida. Verifique se a tabela, mais detalhada, continua legível ao lado da visão de tendência.
Conecte os eventos ao contexto
Dê à lista de eventos campos de horário, conta, evento e plano, e verifique se as linhas de exemplo comunicam uma ação sem sugerir um histórico completo. Revise a transição das métricas de resumo para o gráfico, as linhas de contas e os eventos na largura de área de trabalho pretendida.
Exportar e obter um link de compartilhamento
Exporte seu design finalizado e, em seguida, use Compartilhar no OpenDesign para obter um link de compartilhamento. Abra o link em uma janela separada do navegador e verifique se a versão desejada e seus assets estão disponíveis antes de enviá-lo.
Design de wireframe de painel analítico
Um dashboard greybox do OpenDesign mapeia um workspace de analytics por meio de uma barra lateral, quatro placeholders de KPI, um gráfico esquemático, cinco linhas de tabela e anotações de layout em azul.
Aplicativo desktop
Design de aplicativo de caixa de entrada para revisão de código
O design de aplicativo de caixa de entrada para revisão de código reúne solicitações de revisão, falhas de CI, issues atribuídas e atividade em um único espaço de trabalho de leitura rápida para a triagem diária.
Aplicativo desktop
Design de Dashboard de Desempenho de Conteúdo
Um dashboard de conteúdo escuro conecta visões de plataformas à inspeção de gráficos, ao planejamento de rascunhos e a uma visão mais aprofundada dos sinais de audiência e conversão.
Aplicativo desktop
Design de planejador de passeio de um dia
Planeje seis paradas com horários na cidade fictícia de Solara Bay, com um mapa ilustrado, estimativas de caminhada e alertas úteis sobre o trajeto.
Aplicativo desktop