Design de tela de perfil: redesign de perfil e configurações de app, antes e depois
Uma tela de perfil que é uma lista plana de treze linhas, e a mesma tela corrigida: uma linha de identidade, um cartão de membro de verdade, configurações agrupadas que mostram seu estado e um Sair discreto. Cada mudança lado a lado, com o arquivo Figma grátis.
Uma tela de perfil tem três trabalhos: mostrar quem você é, mostrar o que você tem e dar um lugar para mudar as coisas. O primeiro rascunho abaixo faz as três coisas, mas numa lista plana de treze linhas, com os pontos espremidos numa linha pequena e o Sair como a coisa mais gritante da tela. É uma gaveta de bagunça: tudo está lá dentro, e nada é fácil de achar.
A correção mantém todas as funcionalidades. Ela dá a cada trabalho o seu próprio bloco e deixa as linhas mostrarem seu estado, então a maioria das configurações pode ser lida sem abrir.
A tela inteira, antes e depois
Rascunho júnior
Corrigido
À esquerda, tudo tem o mesmo peso. O avatar, o nome, o e-mail e o telefone ficam empilhados no meio, o banner de insistência fica logo acima dos pontos, e então treze linhas descem pela página, cada uma com a sua cor de ícone. O botão vermelho largo no fim é a cor mais forte da tela, então a última coisa que o olho encontra é a única ação que ninguém deveria acionar sem querer.
À direita, a tela tem quatro blocos e uma cor. A linha de identidade é curta, o cartão carrega os pontos, e os blocos e a lista de configurações guardam o resto. O azul cobalto da marca aparece no cartão, no botão Editar e na aba ativa, e o vermelho aparece uma vez, no Sair, como texto simples.
O que mudou, medido
Cada diferença numa tela só, a partir dos dois frames do Figma:
| Rascunho júnior | Corrigido | |
|---|---|---|
| Identidade | Pilha centralizada: avatar, nome, e-mail, telefone, Editar Perfil | Uma linha: avatar, nome, e-mail, botão Editar pequeno |
| Pontos | Uma linha de 9 pt: "Pontos: 12480 | Nível: Gold | Próximo: Platinum (13000)" | Um cartão com número de 44 pt e "520 pontos para o Platinum" |
| Menu | 13 linhas numa lista, 7 cores de ícone | 3 blocos e 5 linhas agrupadas, 1 tom de ícone |
| Estado da linha | Só Notificações (um selo) e Convidar Amigos (uma tag) | Contagem, saldo, cartão, idioma e um interruptor, tudo visível |
| Sair | Um botão vermelho de 38 px, largura total | Texto vermelho de 17 pt, centralizado |
| Barra de abas | 5 abas, ícones preenchidos e de contorno misturados | 5 abas numa barra flutuante, um só estilo de ícone |
| Margem | 14 à esquerda, 12 à direita | 20 nos dois lados |
Correção 1: uma linha para quem você é
Antes
Depois
Um avatar centralizado, o nome, um e-mail, um telefone e um botão Editar Perfil de contorno, com um banner amarelo embaixo, contra uma linha só: o avatar à esquerda, o nome e o e-mail ao lado e uma pequena pílula Editar à direita.
A pilha centralizada gasta cerca de 160 pontos de altura para dizer um nome e um e-mail. O telefone é a linha menos útil ali, e o botão Editar Perfil é um controle de contorno completo que compete com tudo o que vem abaixo.
A correção é uma linha: o avatar à esquerda, o nome e o e-mail ao lado e Editar como uma pílula pequena no fim. O bloco tem 60 pontos de altura em vez de 158, então o próximo bloco começa mais acima. O banner de insistência, "Complete seu perfil e ganhe 50 pontos!!!", sumiu do topo da tela. Um pedido para terminar o perfil pertence ao primeiro uso ou ao Editar, não acima da coisa que a pessoa veio ver.
Regra para reutilizar: a pessoa sabe o próprio nome. Dê à identidade uma linha e dê o espaço ao que muda.
Correção 2: transforme uma linha de texto em um cartão
Antes
Depois
Um pequeno logotipo seguido de "Pontos: 12480 | Nível: Gold | Próximo: Platinum (13000)" numa linha de texto minúsculo, contra um cartão azul profundo com o logotipo, uma tag Gold, 12.480 em tipo grande, uma barra de progresso e "520 pontos para o Platinum".
Os pontos são o motivo pelo qual um membro abre esta tela, e o rascunho os coloca no menor tipo da página. Os números estão todos lá, mas o leitor precisa fazer a subtração: 13.000 menos 12.480.
A correção faz a subtração por ele. O cartão mostra os pontos em 44 pt, o nível como uma tag dourada, uma barra 83 por cento cheia e a frase "520 pontos para o Platinum". O Gold começa em 10.000, então 12.480 está bem perto do próximo nível, e a barra mostra isso num relance. O cartão também usa o cobalto da marca e o único dourado do nível, o que o torna o bloco mais forte da tela, e isso está certo: é a única coisa aqui que recompensa quem está olhando.
Regra para reutilizar: mostre o resultado da conta, não os números que entram nela.
Correção 3: agrupe as configurações e mostre o estado delas
Antes
Depois
Treze linhas numa lista, de Meus Pedidos a Termos e Condições, cada uma com seu ícone colorido e uma seta, contra três blocos (Pedidos, Carteira, Salvos) e um grupo branco de cinco linhas: Endereços, Formas de Pagamento, Notificações, Idioma e Ajuda e Legal.
Treze linhas com o mesmo tamanho, a mesma seta e sete cores de ícone não têm ordem. Meus Pedidos e Termos e Condições parecem igualmente importantes, e o rascunho não diz nada sobre o que há atrás de uma linha até você tocar nela.
A correção ordena a lista pela frequência de uso:
- Pedidos, Carteira e Salvos viram blocos. São os três lugares aonde as pessoas mais vão, então ganham alvos grandes e um dado ao vivo cada: "2 ativos", "R$ 42,50" e "18 itens".
- As configurações ficam em um grupo. Endereços diz "2 salvos", Formas de Pagamento diz "Visa ·· 4242" e Idioma diz "Português". A pessoa confere sem um toque.
- Notificações vira um interruptor. É uma escolha de ligado e desligado, então não precisa da própria tela.
- As linhas pouco usadas vão para trás de Ajuda e Legal. Convidar Amigos, Avaliar o App, Sobre Nós, Política de Privacidade e Termos continuam existindo, um toque mais adiante.
Toda linha do rascunho continua acessível. Nada foi apagado, foi colocado onde a frequência diz que deve ficar. Os ícones também compartilham um só tom, então a cor na tela significa algo: a marca indica as coisas ativas e tocáveis.
Correção 4: deixe o Sair discreto
Antes
Depois
Um botão vermelho de largura total com letras maiúsculas brancas escrevendo SAIR, contra as palavras Sair em vermelho, 17 pt, centralizadas com espaço ao redor.
Um botão vermelho sólido é o controle mais barulhento da tela do rascunho, e pede para ser pressionado. Sair é raro e levemente destrutivo, já que joga a pessoa de volta para o login. Deve ser fácil de achar e difícil de acionar por engano.
A correção mantém o vermelho, porque o vermelho ainda diz que é uma ação de saída, e tira o preenchimento. É texto simples embaixo do grupo de configurações, com espaço ao redor. Continua a um toque de distância, mas não puxa mais o olhar.
As correções menores
- Um título grande em vez de uma barra de navegação. "Meu Perfil" com uma seta de voltar, um ícone de compartilhar e um ícone de sol virou "Perfil" em 34 pt. A barra de abas já diz onde você está, então a seta de voltar sumiu, e o sino de notificações é o único ícone que sobrou.
- Uma margem. O rascunho usa 14 à esquerda e 12 à direita. A correção usa 20 nos dois lados e 14 entre blocos.
- Uma escala tipográfica. O texto no rascunho vai de 8 a 15 px. A correção usa tamanhos do iOS de 11 a 34 pt.
- Um destaque. O rascunho tem sete cores de ícone, um banner amarelo e um botão vermelho. A correção tem o cobalto da marca, um dourado para o nível e vermelho para o Sair.
- Uma barra de abas flutuante. As cinco abas ficam, mas usam um só estilo de ícone, com apenas a aba ativa preenchida.
Audite sua própria tela de perfil
| Pergunta | Por que importa |
|---|---|
| A identidade ocupa uma linha? | A pessoa sabe o próprio nome, então não deve gastar 160 pontos |
| Dá para ler os pontos ou o status em um segundo? | Um resumo em texto pequeno faz o leitor fazer a conta |
| Os lugares mais usados são maiores que os pouco usados? | Linhas iguais escondem o que importa |
| Cada linha de configuração mostra seu valor atual? | O estado é a resposta para a maioria das visitas |
| Há mais de uma cor de destaque? | Sete cores de ícone não significam nada |
| O Sair é mais forte que o Editar? | A ação rara deve ser a discreta |
Baixe o arquivo do Figma
O arquivo grátis tem as duas telas, com os blocos corrigidos como componentes.
Arquivo Figma grátis
Redesign da tela de perfil, antes e depois
As duas telas e cada parte como componente do Figma. Grátis, somente visualização, duplique para os seus rascunhos.
FAQ
O que uma tela de perfil em um app deve mostrar?
Quem a pessoa é, o que ela tem e uma forma de mudar suas configurações. Coloque a identidade numa linha curta, coloque os pontos, o saldo ou o plano num cartão e agrupe as configurações abaixo.
Onde o botão Sair deve ficar numa tela de perfil?
No fim das configurações, abaixo do último grupo, como texto simples. Deve ser acessível, mas nunca o controle mais barulhento da página.
Quantas linhas uma lista de configurações deve ter?
De cinco a sete na primeira visualização funciona bem. Mova as pouco usadas, como páginas legais e avaliação do app, para trás de uma linha como Ajuda e Legal.
As linhas de configurações devem mostrar o valor atual?
Sim. Um valor como "Português" ou "Visa ·· 4242" responde à pergunta sem um toque, e um interruptor é melhor que uma linha para uma simples escolha de ligado ou desligado.
Como mostrar pontos de fidelidade numa tela de perfil?
Como um cartão com o número grande, o nível atual como tag e uma frase sobre o que vem a seguir, como "520 pontos para o Platinum". Faça a subtração pelo leitor.
Fontes
- As duas telas são nossas, projetadas e medidas no Figma. O app, o membro e os números são inventados.
- Os tamanhos de texto seguem a escala tipográfica do iOS nas Human Interface Guidelines da Apple.
- Foto do avatar: Tamra Creatives Agency no Pexels.
- Publicado originalmente como carrossel no App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
