UI liderbord e cartões de missão: melhores práticas

1) Porquê tudo isso: objetivos UI

Liderbord: Explicar instantaneamente «quem está onde» e por que jogar a partir de agora; mostrar o alvo mais próximo (+ N pontos para apê).

Cartões de missão: transformar regras longas em uma unidade de ação compreensível por 10 a 30 minutos.

2) Hierarquia da informação liderbord

Conjunto mínimo de colunas:

1. Local (#) com largura sustentável e um grande número.

2. Jogador (avatar/moldura/título, curto) - perfil clicado →.

3. Pontos/métrica de classificação (SP/MMR/pontos de ivente) - Alinhar à direita.

4. Prêmio/área de nível (ícone de raridade/faixa de recompensa).

5. Tempo/estágio (live/qualifier/finals), horário final.

Pattern:

Realce sua linha (sticky row + «voltar para mim»).
«Limite para o alvo»: pequeno «- 48 SP para TOP-100».
Pente de empate («T-10» para pontos iguais).

3) Controle e navegação

Filtros liga/divisão, região, amigos, só o meu provedor.

Ordenações por local (por suplício) pontos, hora de entrada, área de prémios.

Paginação vs skroll infinito:

desktop - paginação + «para si mesmo», mobile - skroll infinito, mas com «para o início/para si mesmo».
Jump-to Rank: campo de entrada de grau para transição instantânea (importante para pranchas em larga escala).

4) Atualizações em tempo real (sem «botijão»)

Atualizações Diff: Mudamos apenas as linhas que realmente se moveram.

Animação de movimento de linha: 120-200 ms, easing-out; sem saltar.

Anti-flicker: atualizações batch a cada 1-2 segundos (não mais frequente).

Atualizações otimistas: adicionando pontos localmente e lançando «sincronização»....

5) Honestidade e segurança em UI liderbord

Explicação de regras: botão «Como os óculos são considerados?» ao lado do título.

Anti-bulling, disfarçar parte do nick (opção), queixa por nome tóxico, 1 clique.

Marcador de contas suspeitas: oculto dos outros; o jogador é «os seus óculos são testados».

Divisão de divisões: visivelmente diferentes crachás ligas para que os fortes não se misturem com os iniciais.

6) Cartão de missão anatomia (one-glance design)

Título (≤ 40 a 50 caracteres), ícone do tipo de missão.

Descrição curta (o que fazer, onde, quanto).

Um bar de progresso com número/percentual + estimativa de tempo (≈ 20-25 min).

Complexidade (1-3 pontos) e raridade de recompensa (cor/face).

Prémios: tokens/cosméticos (pequenas miniaturas), sem subtexto «em dinheiro».

Prazo: temporizador antes de expirar com cor macia (orange/vermelho nos últimos 10%).

CTA: Iniciar/Continuar/Retirar - um botão principal.

Secundary: «Mudar de missão» (se permitido), «Mais informações» (modelo de regras).

7) Estados dos cartões de missão

Locked: cinza, com a dica «abrir depois do nível 7 «; CTA = "O que é preciso? ».

Available: cor por tipo; CTA = «Começar».

In-progress: bar de progresso ativo, CTA = «Continuar».

Completed: cheque verde; CTA = «Retirar» (efeito ≤ 1 segundo).

Expired: pálido; CTA = «Ocultar «/« Repetir na temporada N ».

On hold (teste de honestidade): chave amarela «verificação de resultado de 1-3 min».

8) Linguagem visual e disponibilidade

Cores raras: Common (neutro), Rare (azul), Epic (violeta), Legendary (ouro), Mythic (arco-íris).

Cores semânticas: sucesso/progresso é verde, avisos são âmbar, dedline é vermelho.

Contraste ≥ 4. 5:1, fontes ≥ 14-16 px no celular.

Tudo o que é importante não é apenas cor (ícones/pattern).

VFX de baixo custo: 0. 6–1. 2 c, sem sobreposição do controle.

Adaptável: tabela do cartão → (2 colunas tablet, 1 coluna phone); cabeçalhos fixados.

9) Estados de download, vazios e erros

Esqueletos para tabelas e cartões (3-5 linhas/tales).

Empty state: texto útil + «Obter missão inicial».

Erros da rede: compreensíveis, com «Repetir»; offline - exibe o dinheiro e marca «última atualização: 14:02».

10) Desempenho

Virtualizar listas (300 + linhas).

Icones como spright/Lottie (não zoológico SVG sem necessidade).

Debounce filtros/buscas (300-500 ms).

Cachês de clientes e ETag para pranchas/missões.

11) Conteúdo honesto e anti-abuse em missões UI

Resumo «Como funciona»: chance de drop, lógica pity, caps, sem nebulosidades de marketing.

Anti-Farm Pattern: Notamos a «diversidade» - o progresso é mais rápido quando se muda de provedor/aposta.

Cooldowns para o botão «Mudar de Missão» e uma dica para quando voltar.

12) Métricas que são realmente importantes

Cartões de missão CTR, Start Rate, Complition Rate, Median TTC.

Equip Rate/Duration para cosméticos obtidos através de missões.

Líder Engagement: cliques em «para si», «ir para o perfil», tempo de visibilidade.

Complaint/Mute Rate em VFX/notificações.

Stickiness (DAU/MAU) e D7/D30 uplift em missões/torneios.

Gini em SP: igualdade de progresso com o mesmo tempo de jogo.

13) A/B ideias

1. Formato do bar de progresso: numérico + visual vs apenas visual.

2. Estimativa de tempo: mostrar/não mostrar; Influência na partida.

3. CTA: um grande vs dois botões iguais.

4. Ordem padrão: local vs por área de prêmios.

5. O limite de realce da deadline é T-10% vs T-20% do tempo.

6. «Para si mesmo» em liderbord: botão vs sempre linha fixada.

14) Exemplos de esquemas JSON (conteúdo → UI)

Cartão de missão

json
{
"id": "m. s4. provider. diversity «», title «:» Abra três provedores de «», summary «:» Jogue em 3 provedores diferentes em 30 minutos «» «,» dificulty «:» medium «», est _ time _ min «: 25», progress «: se» current «: 2», target «: 3)» rewards «: 1962» tocens «: 10», cosmetic _ drop «: <» rarity «:» Rare «, p»: 0 1 aquela coisa, "expires _ at": "2025-10-26T18: 00: 00Z", "state": "in _ progress", "cta": se "label": "Continuar", "deplink": "app ://open/lobby? tab=providers"}
}

Linha de liderbord

json
{
"rank": 124,  "user": {"id": "u_59211", "name": "SeaFox", "avatar_frame": "legendary. wave"},  "score": 18420,  "league": "Gold I",  "prize_band": "Top 100",  "delta_to_next": 47,  "is_me": false,  "stage": "qualifier",  "ends_at": "2025-10-24T21:00:00Z"
}

15) Microcópia (curto e claro)

A missão começou, "Vamos! Ainda faltam 20 min".

«Mais 1 provedor até ao prémio».

Deadline - «10% do tempo, chegue a tempo».

Teste de honestidade - «Verificamos o resultado (até 3 min) - recompensa mantida».

16) Folha de cheque antes do lançamento

As tabelas são legíveis em 320 px; há «para si» e sticky header.
Os cartões das missões são compreendidos com um olhar: alvo, tempo, recompensa, CTA.
Real tempo de atualização sem flicker; deff patchi e frequência batch.
Tela «Como funciona»: fórmulas de óculos/kap/raridade.
Controle de ruídos: limites VFX/min, «modo silencioso» noturno.
Disponibilidade: contraste, não apenas cor, navegação por teclado.
Anti-Abuse: Kuldown «Mudar de missão», realce variabilidade.
As métricas e o plano A/B foram estabelecidos; logs de cliques e sincronizações.

Uma UI forte de liderbord e cartões de missão é uma leitura instantânea, dinâmica suave, transparência justa e barulho controlado. Dê ao jogador o objetivo mais próximo, progresso compreensível e VFX cuidadoso, mantenha as atualizações estáveis e as regras claras. Então a prancha torna-se o motor da competição, e os cartões das missões são uma «unidade de ação» conveniente, que cresce sistematicamente o envolvimento e a retenção.