Dia 11: Listas e itens repetitivos
Como exibir uma coleção de dados de forma clara, escaneável e consistente. Hoje vamos projetar o "molde" para seus conteúdos.
O poder da consistência
Quando um usuário vê uma lista, seja de e-mails, contatos ou músicas, o cérebro dele espera que cada item siga o mesmo padrão visual. Essa consistência torna a informação previsível e muito mais fácil de processar. O objetivo do design de listas é criar um "molde" (componente) de item que funcione perfeitamente, não importa quantas vezes ele seja repetido.
A anatomia de um item de lista
A maioria dos itens de lista em interfaces modernas compartilha uma estrutura similar, que pode ser adaptada para diferentes necessidades. Os elementos mais comuns são:
- Ícone ou Avatar: Um identificador visual rápido (a foto de um contato, o ícone de um tipo de arquivo).
- Linha Principal (Título): A informação mais importante que define o item (o nome da pessoa, o título da notícia).
- Linha Secundária (Metadado): Informação de apoio que dá contexto (o cargo da pessoa, a data da mensagem).
- Ação (Opcional): Um botão ou ícone para uma ação rápida (ex: um ícone de "três pontinhos" para mais opções).
- Divisórias: Uma linha fina que separa visualmente um item do outro, crucial para a clareza em listas densas.
Densidade: listas compactas vs. confortáveis
Nem toda lista é igual. A quantidade de espaço que você usa define a "densidade" da informação e a sensação que ela passa.
- Listas Compactas: Usam menos espaçamento. São ideais para dashboards e ferramentas onde o usuário precisa ver muitos dados de uma vez (ex: lista de e-mails no Gmail).
- Listas Confortáveis: Usam mais espaço em branco. São perfeitas para aplicativos de conteúdo onde a legibilidade e um ritmo de leitura mais calmo são importantes (ex: um feed de notícias).
Seu desafio de hoje: o mestre dos moldes
Sua missão hoje é projetar um componente de item de lista para dois cenários diferentes, mostrando sua capacidade de adaptação.
Checklist do desafio:
- Desenhe um item para uma lista de contatos de celular. Ele deve conter: Avatar (foto), Nome do Contato e o Número de telefone.
- Desenhe um item para um "feed de atividades" de um aplicativo. Ele deve conter: Ícone da atividade (ex: comentário), Texto da atividade (ex: "Mariana respondeu ao seu comentário") e a Data/hora (ex: "Há 5 minutos").
- Use os componentes que você criou para montar uma pequena lista com 3 a 4 itens em cada um dos cenários, prestando atenção nas divisórias e no espaçamento consistente entre eles.
Concluiu? Mostre sua consistência!
Projetar componentes de lista mostra que você pensa de forma escalável e organizada.