FightRate — Redesign de gráficos e sistema visual

Objetivo

Corrigir a direção visual do FightRate: gráficos profissionais, úteis e interativos; interface menos genérica/card-heavy; design system original e obrigatório para próximas telas.

Problemas atuais

Gráficos aparecem mesmo sem dados úteis.
Estados vazios parecem gráficos quebrados/amadores.
Vico está subutilizado: pouca interação, pouco contexto visual, sem zoom/scroll claro.
UI tem excesso de cards iguais, pouca hierarquia e pouco padrão visual.
O aplicativo parece montado por IA, não por um produto esportivo premium.

Decisões

Manter Vico. Pesquisa em 2026-06 mostra Vico como biblioteca Compose/Kotlin madura com suporte a scrollState e zoomState.
Não trocar dependências nesta fase.
Não desenhar chart customizado em Canvas.
Não renderizar gráfico se houver menos de 2 pontos reais.
Se houver poucos dados, mostrar insight/empty state, não eixos vazios.
O eixo temporal deve continuar baseado em timestamps reais.
O design system passa a ser a fonte visual do app.

Design System: FightRate Combat Lab

Conceito

Interface de laboratório de performance para lutas: escura, precisa, atlética, com sensação de equipamento esportivo premium. Menos cartões genéricos, mais painéis editoriais, faixas de dados, chips compactos, e superfícies com função clara.

Tokens principais

Fundo: #090A0B — preto quente de OLED.
Surface: #111315 — bloco primário.
Surface Elevated: #181B1E — módulo de leitura.
Ink: #F6F0E7 — texto principal quente.
Muted: #A79C8F — texto secundário.
Dim: #6E665D — metadados.
Accent: #FF6A1A — FightRate Orange.
Amber: #F6B44B — atenção.
Redline: #FF3B30 — limite/risco.
Cyan: #48C7D8 — recuperação/ciência.
Line: #2A2E32 — divisores sutis.

Forma

Telas: blocos editoriais com seções claras, não grade de cards repetidos.
Painéis principais: radius 28–32 dp, borda hairline, padding 20–24 dp.
Métricas pequenas: strips/pills, não cards grandes.
Gráfico: painel amplo, prioridade visual máxima, legenda compacta.
Empty state: peça editorial com próxima ação, nunca gráfico vazio.

Tipografia

Números grandes, tabulares quando possível.
Títulos curtos, fortes, em PT-BR.
Corpo pequeno, mas legível. Nada abaixo de 10sp para informação essencial.
Evitar muitos pesos/tamanhos diferentes.

Gráficos

Mostrar gráfico somente se samples.size >= 2 e duração > 0.
Para 1 ponto: mostrar leitura única e instrução de continuar medindo.
Para 0 pontos: mostrar estado vazio contextual.
Linha com espessura alta, cor FightRate Orange, área/ambiente escuro.
Scroll/zoom habilitado via Vico quando possível.
Controles explícitos de janela/zoom fora do gráfico.
Resumo sempre visível: média, pico, mínima, duração, densidade de amostras.
Não usar índices como tempo; usar segundos/minutos reais desde o início da janela.

Fatias de implementação

Consolidar tokens em tema/design system.
Criar componentes visuais base: FightSection, FightMetricStrip, FightEmptyState, FightChartPanel.
Atualizar HeartRateLineChart para não renderizar vazio e usar zoom/scroll Vico.
Reorganizar Home/Histórico para priorizar gráfico e dados úteis.
Atualizar documentação e roadmap.
Rodar testes/build e gerar APK.

Critérios de sucesso

Nenhum gráfico vazio é renderizado.
Gráfico com dados tem zoom/scroll ou controle equivalente claro.
Histórico sem dados mostra estado vazio premium.
UI usa tokens e componentes do design system.
Build final passa com ./gradlew :app:testDebugUnitTest :app:assembleDebug.

3.7 KiB Raw Permalink Blame History Unescape Escape