Design de app de controle de gastos: redesign de um painel de orçamento, antes e depois

As pessoas abrem um app de orçamento para saber uma coisa: quanto ainda posso gastar. O primeiro rascunho abaixo reporta tudo. O número está na última de quatro caixas iguais, a 10 px, os gastos são uma pizza de oito fatias com legenda de 8 px, e as transações são uma tabela de cinco colunas a 9 px.

A correção mantém todas as funções e muda a ordem. O número vem primeiro e é enorme, a pizza vira uma barra plana, e a tabela vira quatro linhas simples que dá para ler.

A tela inteira, antes e depois

Rascunho júnior

Corrigido

À esquerda, nada lidera. Quatro caixas, uma pizza, um gráfico de barras, uma linha de filtros e uma tabela têm mais ou menos o mesmo peso, e a resposta para a única pergunta é um valor de 10 px na quarta caixa. O olho precisa varrer a tela inteira para achá-lo.

À direita, a tela responde em ordem: quanto sobrou, para onde foi o resto, o que aconteceu recentemente. Um número é grande, todo o resto é texto simples, e cada elemento tem uma única função de cor.

O que mudou, medido

Correção 1: ponha primeiro o que resta para gastar

Antes

Depois

Quatro caixinhas iguais em linha: Renda US$ 4.200 em verde, Despesas US$ 1.916 em vermelho, Economias US$ 1.000 em azul e Saldo US$ 1.284 em preto, tudo a 10 px, contra US$ 1.284 em tipo enorme e negrito com restam de US$ 3.200 e faltam 12 dias em cinza embaixo.

As quatro caixas dão a todo número o mesmo tamanho, então nenhum deles é a resposta. O usuário tem que saber que o Saldo é o que importa e ainda lê-lo a 10 px.

A correção escolhe um. US$ 1.284 está a 48 px em negrito, e a linha embaixo traz os dois fatos que dão sentido a ele: o orçamento de onde vem, US$ 3.200, e os dias que faltam no mês. Um número sem seu orçamento é curiosidade. Com ele, o usuário sabe se deve se preocupar.

Os números fecham, então nada foi inventado para caber. Renda de US$ 4.200 menos US$ 1.000 de economias é o orçamento de US$ 3.200, e US$ 1.916 gastos deixam US$ 1.284. Renda e Economias foram para a aba Estatísticas.

Regra para reutilizar: ache o único número pelo qual a tela é aberta, faça dele a maior coisa nela e escreva o contexto em uma linha embaixo.

Correção 2: uma barra plana em vez de uma pizza

Antes

Depois

Um grande gráfico de pizza com oito fatias coloridas rotuladas Aluguel, Comida, Lazer, Transporte, Compras, Saúde, Contas e Assinaturas com legenda minúscula e porcentagens, contra uma barra empilhada fina em índigo, coral, âmbar e verde-azulado com uma ponta clara, uma legenda dois por dois de Aluguel US$ 1.100, Comida US$ 412, Lazer US$ 186 e Outros US$ 218, e três linhas de orçamento com barras finas embaixo.

Uma pizza é difícil de ler na melhor das hipóteses, porque as pessoas comparam mal os ângulos. Oito fatias pioram. Cinco das fatias valem poucos por cento cada, então viram lascas, e a legenda que as nomeia tem 8 px.

A barra é lida da esquerda para a direita, como uma barra de progresso, que todo mundo já entende. Ela é desenhada em escala contra o orçamento de US$ 3.200, então a ponta clara são os US$ 1.284 que ainda restam, e a tela mostra o mesmo número duas vezes em duas formas. As cinco categorias pequenas se somam em Outros, US$ 218, e se abrem em Orçamentos. As fatias fecham: 1.100 + 412 + 186 + 84 + 62 + 30 + 22 + 20 dá US$ 1.916.

Os orçamentos ficam logo abaixo como linhas simples: um nome, "US$ 412 de US$ 600" e uma barra de 4 px. Uma barra se enche rumo a um limite, então mostra o quanto o usuário está perto dele. Uma pizza não consegue.

Regra para reutilizar: use uma barra quando as partes somam um todo e agrupe as partes pequenas em Outros.

Correção 3: quatro linhas, não uma tabela

Antes

Depois

Um título Transações com botões de filtro Todas, Receitas e Despesas sobre uma tabela de cinco colunas com Data, Estabelecimento, Categoria, Método e Valor, dez linhas de texto de 9 px e um botão de mais coral flutuante cobrindo os últimos valores, contra um título Recentes com Ver tudo em coral e quatro linhas: um M verde-azulado para Marlow Market, um R violeta para Reel House, um A âmbar para Alder Studio com receita em verde e um C verde para Cityline Transit.

Uma tabela de cinco colunas a 9 px é uma planilha. No celular ela pede olhos apertados e leitura horizontal ao longo da linha, e o botão de mais flutuante fica por cima da coluna de valores, então os últimos números ficam cobertos.

Quatro linhas bastam para uma tela inicial. Um círculo de 36 px com a letra do estabelecimento dá ao olho onde se apoiar, o estabelecimento está a 15, a categoria a 13 e em cinza, e o valor fica à direita. A receita é o único verde da lista, então o salário se destaca sem rótulo. Data, forma de pagamento e filtros se abrem em Ver tudo e em cada linha, então nada se perde.

Regra para reutilizar: uma tela inicial mostra os poucos recentes, não o histórico completo. Ponha os filtros atrás de Ver tudo.

Correção 4: faça do mês o título

Antes

Depois

Uma linha de cabeçalho com ícone de menu, a palavra Penny em coral, a palavra Dashboard, um dropdown Novembro de 2026, um ícone de exportar e um sino com ponto vermelho, contra um pequeno logotipo Penny em coral acima de Novembro em negrito de 28 pontos com uma seta, um sino com ponto vermelho e um mais coral.

O cabeçalho do rascunho reúne seis coisas no mesmo tamanho: menu, logotipo, um rótulo "Dashboard" que não diz nada, um dropdown, exportar e um sino. O dropdown é o controle que as pessoas realmente usam, e é o menor.

A correção dá um título à tela e o título é o controle. "Novembro" está a 28 em negrito com uma seta, o logotipo é pequeno em sua própria linha, e o mais saiu do botão flutuante para o cabeçalho, ao lado do sino. O menu e o rótulo Dashboard foram para a aba Perfil, e exportar foi para Estatísticas.

Regra para reutilizar: se o controle principal é um filtro, faça dele o título.

As correções menores

• Toda função permanece. O gráfico semanal, Renda e Economias vão para Estatísticas. As cinco categorias pequenas se somam em Outros e se abrem em Orçamentos junto com Metas. Filtros, datas e forma de pagamento se abrem em Ver tudo e em cada linha.
• Margens iguais. O rascunho tem 14 px à esquerda e 12 px à direita. A correção usa 20 nos dois lados.
• Sem caixas. A correção não tem card, bloco nem sombra. Espaço e tipografia separam as coisas.
• Menos abas. Quatro abas numa barra plana de 78 px com linha fina, no lugar de cinco com ícones misturados preenchidos e de contorno.
• Escala tipográfica. O texto vai de 13 a 48 px, contra os 8 a 13 px do rascunho.
• Espaço embaixo do conteúdo. A correção termina 67 px acima da barra de abas, então nada é cortado nem coberto. No rascunho um mais flutuante fica sobre a tabela.

Audite sua própria tela de orçamento

Baixe o arquivo Figma

O arquivo gratuito tem o rascunho júnior, a tela corrigida e cada parte como componente.

Arquivo Figma gratuito

Redesign de tela de controle de gastos, antes e depois

As duas telas e cada parte como componente do Figma. Grátis, somente visualização, duplique para seus rascunhos.

Abrir no Figma

FAQ

Como projetar a tela inicial de um controle de gastos?

Abra com o que resta para gastar, grande, com o orçamento e os dias restantes numa linha embaixo. Depois uma barra plana para mostrar para onde foi o dinheiro, algumas linhas simples de orçamento e as quatro transações mais recentes, com o resto atrás de Ver tudo.

Gráfico de pizza ou de barra, qual é melhor para categorias de gastos?

Uma barra empilhada plana, quando as partes somam um todo. As pessoas leem comprimento mais rápido que ângulo, e as categorias pequenas continuam visíveis como um trecho da barra em vez de uma lasca. Agrupe as menores em Outros.

Quantas categorias um gráfico de orçamento deve mostrar?

Três ou quatro. Nesta tela, cinco categorias pequenas se somam em Outros, US$ 218, e se abrem em Orçamentos, então a barra continua legível.

Qual deve ser o tamanho do número principal num app de finanças?

Grande o bastante para ser a primeira coisa vista. Aqui o saldo está a 48 px em negrito, contra 28 px do título do mês e 15 px das linhas.

Quantas transações uma tela inicial deve mostrar?

De quatro a cinco linhas, a 13 a 15 px, com um link Ver tudo para a lista completa, filtros e forma de pagamento.

O que a barra de abas de um app de orçamento deve conter?

Quatro abas bastam: Início, Estatísticas, Orçamentos e Perfil. Metas ficam dentro de Orçamentos.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O app, Penny, seus estabelecimentos e seus valores são inventados. Os números são consistentes nas duas telas: renda de US$ 4.200 menos economias de US$ 1.000 é o orçamento de US$ 3.200, gastos de US$ 1.916 deixam US$ 1.284, e faltam 12 dias significa 18 de novembro, a data da transação mais recente.
• Padrão estudado: Copilot Money e Monarch, com um número do que resta para gastar, uma barra para as categorias, linhas simples e uma barra de abas plana.
• Os ícones são da Phosphor (MIT). Nenhuma foto é usada.
• Publicado originalmente como carrossel no App Brainy.