Design de app de notas: redesign da tela inicial, antes e depois

Um app de notas tem uma única missão na tela inicial: levar você até a nota que você quer. O primeiro rascunho abaixo tem tudo que você precisa para achar uma nota, mas pinta doze post-its em seis cores com texto de 8 px, adiciona oito tags em mais oito cores, avisa sobre armazenamento antes de você ler uma palavra e estaciona um botão de mais flutuante em cima de uma nota.

A correção mantém todas as funções e tira o enfeite em volta das notas. As tags coloridas viram chips de pasta com contorno fino, as notas fixadas viram dois blocos brancos, todas as outras notas viram uma linha simples, e a busca é um campo cinza sob um título simples.

A tela inteira, antes e depois

Rascunho júnior

Corrigido

Na esquerda, tudo grita no mesmo volume. Seis cores de post-it, oito cores de tag, um banner amarelo e um mais amarelo competem entre si, e as próprias notas são a menor coisa da tela.

Na direita, a tela é lida na ordem em que uma pessoa pensa: o que é isso, posso buscar, qual pasta, o que eu fixei, o que mais tem aqui. As únicas cores são as de dentro das notas.

O que mudou, medido

Correção 1: um título simples e um campo de busca

Antes

Depois

Um logotipo serifado minúsculo sobre Todas as notas (128), um menu suspenso de Data de modificação, dois alternadores de visualização e um ícone de busca, com um banner amarelo de armazenamento e um botão ASSINAR AGORA embaixo. Contra um título grande Notas, um menu de três pontos e um campo de busca cinza com a palavra Buscar dentro.

O cabeçalho do rascunho tem sete controles antes de você ver uma única nota: um menu, um logotipo, uma contagem, uma ordenação, dois alternadores de visualização e um ícone de busca. Aí um banner diz que você usou 85% do seu espaço, com um botão para pagar.

A correção dá à tela um nome e uma porta de entrada. Notas está em 34 px negrito. A busca é um campo de largura total com raio de 10 px em um cinza claro (#F2F2F7), então parece um campo e ninguém precisa adivinhar que um ícone é uma busca.

Ordenar e visualizar continuam existindo, atrás dos três pontos. O aviso de armazenamento e o Upgrade foram para o Perfil, onde a pessoa vai gerenciar a conta.

Regra para reutilizar: o topo de uma tela deve nomeá-la e oferecer o caminho principal de entrada. Todo o resto vai atrás de um menu.

Correção 2: chips de pasta em vez de tags coloridas

Antes

Depois

Oito tags minúsculas preenchidas, Trabalho em vermelho, Ideias em âmbar, Diário em verde, Pessoal em azul, Viagens em verde-azulado, Receitas em laranja, Casa em roxo e Livros em rosa, todas espremidas em uma linha. Contra chips em pílula com contorno fino com Todas, Trabalho, Ideias, Diário e Viagens, com Todas preenchido de preto e o resto escapando pela borda direita.

Oito tags em oito cores não dá para distinguir só pela cor por muito tempo, e com 9 px são difíceis de tocar. Elas também preenchem a linha exatamente, então a fileira parece terminada e não dá nenhuma pista de que há mais.

A correção usa pílulas de 32 px com contorno fino. A selecionada, Todas, é preenchida de preto. As outras são simples, e as pastas depois de Viagens entram deslizando pela borda direita. Um chip cortado pela borda da tela avisa ao polegar que dá para rolar, e ninguém precisa de seta.

Regra para reutilizar: mostre qual item está selecionado com preenchimento, não com uma cor diferente para cada item.

Correção 3: fixe as notas que você usa como dois blocos brancos

Antes

Depois

Três post-its coloridos em uma fileira, amarelo, rosa e azul, cada um com um alfinete minúsculo e um ícone de mais opções nos cantos de cima e texto de 8 px. Contra um título Fixadas com um alfinete âmbar e dois blocos brancos: um esboço a lápis de uma cabana com o título Reforma da cabana e há 2h, e uma prévia de texto do checklist de lançamento com seu título e 9:12.

No rascunho, uma nota fixada parece exatamente igual a todas as outras, além de um ícone de alfinete de 11 px. Os dois primeiros post-its são as mesmas notas que estão fixadas na versão corrigida. O alfinete não muda como elas são tratadas, então não muda nada em como é fácil achá-las.

A correção dá às notas fixadas sua própria seção e sua própria forma. Dois blocos brancos de 169 px com raio de 12 px e contorno fino ficam sob o título Fixadas. A nota da cabana mostra seu esboço, o checklist de lançamento mostra uma prévia de texto, e cada um tem um título semibold de 14 pt e uma data de 12 pt embaixo. Fixar agora muda o que você vê, e esse é o motivo para fixar.

Regra para reutilizar: se um estado importa, dê a ele um lugar na tela. Um ícone pequeno em um cartão idêntico não é um lugar.

Correção 4: todas as outras notas são uma linha simples

Antes

Depois

Duas fileiras de post-its coloridos, verde, laranja, roxo, amarelo, rosa e azul, cada um cheio de texto minúsculo e uma data de Editada embaixo. Contra quatro linhas simples sobre branco: Lisboa em maio, Notas de pão de fermentação natural, Ideias de livros e Páginas da manhã, cada uma com título de 16 pt, uma data e uma linha do texto embaixo, separadas por linhas finas.

Um post-it mostra a nota inteira, então o que você recebe são algumas linhas de texto de 8 px. Você não consegue ler nem escanear, e preenche uma tela inteira com doze deles. As seis cores não significam nada, então não se aprende nada com elas.

A correção é uma lista. Cada nota é um título em 16 pt, uma data e uma linha do texto em 14 pt que termina em reticências. As linhas têm 57 px de altura com linhas finas entre elas, então cerca de oito cabem sob os blocos fixados. Dá para ler todos os títulos de uma olhada e abrir a nota certa pela primeira linha.

Regra para reutilizar: uma lista serve para achar coisas, um cartão serve para olhar uma coisa. Escolha o que combina com a tarefa.

Correção 5: a barra de abas e o botão de criar

Antes

Depois

A parte de baixo do rascunho: um botão redondo amarelo de mais sentado em cima da última nota, sobre uma barra de abas plana com cinco abas com rótulo, Notas, Diário, Tarefas, Tags e Perfil, com ícones cheios e vazados misturados. Contra uma cápsula flutuante com quatro ícones, um selecionado, com as notas passando por baixo, e um botão redondo âmbar de criar separado, com um lápis, ao lado.

O rascunho coloca um mais flutuante em cima da última nota, então ele esconde texto. A barra de abas tem cinco abas com rótulos, e o ícone de Notas é cheio enquanto o resto é vazado.

A correção faz dois controles com duas funções. Uma cápsula de 52 px só com ícones guarda quatro abas, em um único estilo de ícone, e um botão âmbar de criar de 52 px com um lápis fica ao lado. As notas continuam por baixo dos dois, então a tela parece uma lista longa em vez de uma lista cortada por uma barra. A aba Tags sumiu porque os chips de pasta fazem o trabalho dela.

Regra para reutilizar: ponha o botão de "criar algo novo" onde está o polegar e dê a ele forma e cor próprias para que não seja confundido com navegação.

As correções menores

• Toda função continua. A busca é o campo sob o título. A ordenação por Data de modificação e os alternadores de grade e lista ficam atrás dos pontos. Todas as notas (128) virou a pasta Todas. O botão de mais opções fica dentro de cada nota. O aviso de armazenamento foi para o Perfil.
• Uma margem. O rascunho tem 14 px na esquerda e 12 px na direita. A tela corrigida usa 20 dos dois lados, com 10 px entre os blocos.
• Um destaque. O âmbar (#F5B301) é usado só no alfinete e no botão de criar. Todo o resto é preto, cinza e branco.
• Uma escala tipográfica legível. O rascunho vai de 8 a 14 px. A tela corrigida começa em 12 px para as datas e vai até 34 px no título.
• Conteúdo de verdade. O bloco do esboço mostra um desenho real em vez de uma caixa colorida, então a seção fixada mostra do que a nota trata antes de você abri-la.
• Sem logotipo. O rascunho tem um logotipo serifado, Margin, no cabeçalho. A tela corrigida não tem nenhum, porque o título da tela é o cabeçalho no Apple Notes.

Audite a sua própria tela de notas

Baixe o arquivo do Figma

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

Arquivo grátis do Figma

Redesign de app de notas, antes e depois

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

Abrir no Figma

FAQ

Como a tela inicial de um app de notas deve ser desenhada?

Comece com um título simples e um campo de busca, depois chips de pasta, uma seção curta de Fixadas e uma lista de notas com título e uma linha cada. Mantenha avisos e vendas fora do caminho para que as notas sejam a coisa mais forte da tela.

Um app de notas deve usar grade ou lista?

Lista, para achar notas, porque títulos e uma linha de texto são legíveis de relance. Uma grade de cartões completos só funciona se cada cartão for grande o bastante para ler, e com 117 px de largura o texto cai para 8 px.

Quantas cores um app de notas deve usar?

Uma de destaque. O Apple Notes usa um único âmbar para o alfinete e o botão de criar, e mantém todo o resto neutro, então as notas carregam a cor.

Onde o aviso de armazenamento deve ficar em um app de notas?

Na tela de Perfil ou de configurações, ou como um aviso pequeno só quando o usuário estiver perto do limite. Um banner acima da primeira nota faz toda visita começar com uma mensagem de venda.

Como as notas fixadas devem aparecer em um app de notas?

Como sua própria seção sob um título Fixadas, mostradas como dois blocos com uma prévia, um título e uma data. Um ícone de alfinete em um cartão idêntico não torna uma nota mais fácil de achar.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O app, Margin, e todos os seus dados são inventados. As notas batem nas duas telas: os dois blocos fixados são os dois primeiros post-its do rascunho, e as linhas são os post-its seguintes com os mesmos títulos, datas e primeiras linhas.
• Padrão estudado: Apple Notes no iPhone.
• Foto: um esboço a lápis de Sofya Borboris no Pexels, endireitada, recortada no desenho e colocada sobre branco. Sem IA.
• Os ícones são da Phosphor (MIT). A barra de status foi desenhada a partir de uma captura de tela medida de um iPhone. O logotipo do rascunho é Libre Caslon Display Regular.
• Publicado originalmente como carrossel no App Brainy.