Design de app bancário: redesign da tela inicial, antes e depois

A tela inicial de um app bancário precisa responder a uma pergunta em menos de um segundo: quanto dinheiro eu tenho? O primeiro rascunho abaixo é um cartão com gradiente bonito, mas o número do cartão é a maior coisa depois do saldo, as ações vêm em seis cores e quase toda transação é vermelha. Parece um anúncio de cartão de crédito.

A correção mantém o roxo da marca e todas as funcionalidades. Gasta a cor no número que importa e silencia todo o resto.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

À esquerda, o cartão é um cartão: saldo, número mascarado, nome do titular, validade e um logo VISA, tudo em um só gradiente. Embaixo vêm seis círculos de ação em seis cores, depois uma lista plana de transações em que o vermelho aparece em toda despesa e cada estabelecimento tem a sua própria cor de logo.

À direita, o cartão é um saldo. Tem o nome da conta, o número em reais, uma linha dizendo como ele mudou neste mês e os quatro últimos dígitos escondidos no canto. Tudo abaixo é mais calmo, então o saldo é o primeiro lugar onde o olho pousa.

Correção 1: gaste o roxo no saldo

Antes

Depois

"Saldo total" com um ícone de olho e $12,450.80 em um só tamanho, uma fileira de asteriscos e 4821, Titular e Validade, e um logo VISA sobre um gradiente vivo, contra "Conta principal" e 4821 no canto, $12,450 com o .80 menor e uma pílula "+$320.50 neste mês" sobre um roxo mais escuro.

O rascunho usa o gradiente da marca em um cartão que parece um cartão, então a primeira leitura é "isto é um cartão de crédito". O saldo é o maior texto, mas o número do cartão, o nome do titular, a validade e o logo VISA disputam a mesma parte do cartão. A maior parte disso é informação que a pessoa já sabe ou só precisa ao pagar online.

A correção mantém a mesma família de roxo e azul e a coloca atrás de uma única ideia. Os reais têm 42 pt e os centavos 22 pt, porque $12,450 é o número que você lê e .80 é o detalhe. Uma pílula mostra o que mudou neste mês, que é a segunda pergunta que as pessoas fazem sobre um saldo. O número do cartão encolhe para um "4821" mascarado no canto, o suficiente para saber de qual conta se trata.

Regra para reutilizar: quando a cor da sua marca é berrante, dê a ela uma só função.

Correção 2: três ações, não seis

Antes

Depois

Seis ícones redondos em azul, verde, laranja, rosa, roxo e cinza: Enviar, Solicitar, Recarregar, Pagar contas, Câmbio e Mais, contra três botões largos: um Enviar preenchido, depois Solicitar e Recarregar em branco simples.

Seis cores em seis ações dizem "estas são igualmente importantes e todas diferentes". Não são nem uma coisa nem outra. As três que ficam são as que toda conta precisa: Enviar, Solicitar e Recarregar. Pagar contas, Câmbio e Mais saem desta tela, e a nova aba Pagamentos dá a esse tipo de ação uma casa própria.

A correção também dá às três uma hierarquia. Enviar é preenchido com a cor da marca, porque é a ação pela qual as pessoas vêm. Solicitar e Recarregar são simples, então estão ali sem gritar. Os botões são largos, fáceis de acertar, e o rótulo fica ao lado do ícone em vez de embaixo.

Correção 3: agrupe transações por dia e use cor com significado

Antes

Depois

Uma lista plana de cinco transações, cada uma com um círculo colorido de marca, um carimbo de data longo como "22 out 2026 às 09:41" e valores em vermelho ou verde, contra dois grupos, Hoje e Ontem, cada um em um cartão branco com blocos de letra roxos, uma categoria sob cada nome, valores em preto e um único +$2,500.00 em verde.

Vermelho significa pare. Um app bancário que pinta toda despesa de vermelho transforma a vida normal, uma assinatura de streaming, uma corrida, um café, em uma fileira de pequenos alarmes. A correção deixa o dinheiro que sai em texto simples e usa verde para a única coisa que é boa notícia: dinheiro entrando.

Os carimbos de data também mudaram. Data e hora completas em cada linha são, em grande parte, informação repetida. Agrupar sob "Hoje" e "Ontem" diz a data uma só vez, e a segunda linha de cada item diz para que foi o pagamento: "Assinatura", "Transporte", "Salário". Essa é a pergunta que as pessoas realmente fazem ao percorrer uma lista.

Os estabelecimentos também perderam suas cores de marca. Um N vermelho, um U preto, um S verde e um A laranja parecem animados, mas transformam a lista em um arco-íris sem nada a dizer. Um bloco tingido com uma letra mantém as linhas uniformes, e assim você lê os valores e os nomes.

Correção 4: quatro abas, sem mais flutuante

Antes

Depois

Início, Cartões, um grande botão flutuante de mais, Estatísticas e Perfil, contra Início, Cartões, Pagamentos e Perfil com a aba ativa em roxo.

O botão flutuante de mais pergunta "adicionar o quê?". Em um app bancário pode significar enviar, solicitar, adicionar um cartão ou recarregar, e a pessoa precisa abri-lo para descobrir. Ele também fica por cima do conteúdo e racha a barra de abas em duas.

A correção o substitui por uma aba chamada Pagamentos, que diz o que há atrás dela. Estatísticas sai da barra de abas, e o cartão de saldo agora carrega o único número dela que as pessoas veem todo dia: a variação do mês.

As correções menores

• Um cabeçalho com um ícone. O rascunho tem um QR code, um sino e um ícone de configurações ao lado da saudação. A correção mantém só o sino.
• Um avatar de iniciais de verdade. O círculo roxo com "AM" é roxo sólido da marca, então se destaca do fundo.
• Uma margem e uma escala de espaçamento. As linhas ficam em uma margem de 20 pontos, com intervalos tirados de uma lista curta.
• Uma saudação mais calma. "Good Morning, Alex Moreno!" com M maiúsculo e ponto de exclamação virou "Bom dia" e um nome.
• Cartões que agrupam. As transações de cada dia ficam em um único contêiner branco, com um divisor fino entre as linhas e nenhum entre os grupos.

Audite o seu próprio app bancário

Baixe o arquivo do Figma

O arquivo gratuito traz as duas telas, cada parte corrigida como componente de antes e depois, as variáveis de cor da UI, os estilos de texto do iOS e um leia-me com os créditos.

Arquivo Figma grátis

Tela inicial de banco, antes e depois

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

Abrir no Figma

FAQ

O que a tela inicial de um app bancário deve mostrar primeiro?

O saldo, grande, com uma linha curta sobre como ele mudou neste mês. As ações rápidas vêm em seguida, depois as transações recentes.

Quantas ações rápidas um app bancário deve ter?

Três funcionam bem: Enviar, Solicitar e Recarregar. Deixe a mais comum preenchida e as outras simples, e mova as ações mais raras para uma aba Pagamentos.

As despesas devem ser vermelhas em um app bancário?

Não. O vermelho é lido como alerta, e gasto comum não é um. Mantenha os valores que saem em texto simples e use verde só para dinheiro que entra.

Como o número do cartão deve aparecer na tela inicial de um app bancário?

Mascarado e pequeno, só com os quatro últimos dígitos, para que as pessoas saibam qual conta estão vendo. Os detalhes completos pertencem à tela Cartões.

Um app bancário deve ter um botão flutuante de mais?

Normalmente não. Um mais não diz o que adiciona, então troque-o por uma aba com rótulo, como Pagamentos.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. Os nomes dos estabelecimentos são exemplos genéricos.
• Publicado primeiro como carrossel no App Brainy.