clever-idea

byIsabella Meireles

## 💡 Design Guidelines para **Assistente de Termodinâmica** ### 1. **Visão Geral** Mini sistema interativo, mobile-first, para guiar o aluno na resolução sem entregar a resposta. A experiência deve ser **técnica, organizada e didática**, com estética **data-driven, analytical**, usando alinhamento preciso, tabelas claras e codificação visual de dados, conforme o estilo recomendado no toolkit enviado. #### 1.1 **Princípios** * **Aprender fazendo:** o aluno preenche, escolhe e justifica. * **Correção orientativa:** apontar inconsistências, não resolver automaticamente. * **Rastreabilidade:** cada dado deve ter origem clara. * **Progressão guiada:** enunciado → dados → hipóteses → fórmulas → cálculo → resultado. * **Clareza visual:** diferenciar dados fornecidos, encontrados e calculados. --- ### 2. **Color Scheme** * **Azul Técnico — `#2563EB`**: botões principais, etapa ativa. * **Cinza Grafite — `#1F2937`**: textos, títulos e fórmulas. * **Verde Dado Encontrado — `#16A34A`**: valores consultados em tabelas. * **Laranja Hipótese — `#F97316`**: hipóteses e alertas pedagógicos. * **Vermelho Correção — `#DC2626`**: inconsistências e erros. * **Fundo Claro — `#F8FAFC`**: área principal. --- ### 3. **Typography** #### 3.1 **Font Family** * Primária: **Inter** * Secundária técnica: **JetBrains Mono** para fórmulas, unidades e cálculos. #### 3.2 **Hierarquia** * H1: 700 Bold * H2: 600 Semibold * Corpo: 400 Regular * Botões: 600 Semibold * Fórmulas: JetBrains Mono 500 #### 3.3 **Tamanhos Mobile** * H1: 26px * H2: 20px * H3: 17px * Corpo: 15–16px * Botões: 15px * Labels: 13px --- ### 4. **UI Components** #### **Dashboard / Lista de Exercícios** Layout em cards por exercício, com status: “Não iniciado”, “Em resolução”, “Corrigido”. Cada card mostra progresso por etapas e botão **Continuar resolução**. #### **Página do Exercício** Topo com o enunciado fixável. Abaixo, um fluxo em etapas: 1. Leitura do enunciado 2. Dados fornecidos 3. Tabela progressiva 4. Hipóteses 5. Consulta às tabelas 6. Fórmulas 7. Desenvolvimento 8. Correção final #### **Tabela Progressiva** Tabela editável com colunas: * Grandeza * Símbolo * Valor * Unidade * Origem * Observação Usar chips: * **Fornecido** em azul * **Encontrado em tabela** em verde * **Calculado** em roxo * **Hipótese** em laranja #### **Consulta Manual de Tabelas** Área de busca e filtros por substância, pressão, temperatura, fase e propriedade. O sistema não escolhe automaticamente o dado: ele apenas permite registrar o valor consultado e sua fonte. #### **Registro de Hipóteses** Cards com campos: * Hipótese adotada * Justificativa * Impacto na resolução * Confiança do aluno Exemplo: “Processo adiabático”, “regime permanente”, “variação de energia cinética desprezível”. #### **Escolha de Fórmulas** Biblioteca de fórmulas por tema. O aluno seleciona a fórmula e explica por que ela se aplica. O sistema pode alertar: “Verifique se todas as variáveis estão disponíveis”. #### **Desenvolvimento dos Cálculos** Editor passo a passo com campos para substituição, unidades e resultado parcial. Deve permitir pedir **correção desta etapa**. #### **Página de Correção** Feedback dividido em: * Dados ausentes * Hipóteses incoerentes * Fórmula adequada/inadequada * Problemas de unidade * Resultado final plausível ou não --- ### 5. **Mobile UX & Accessibility** * Bottom nav com: Exercícios, Tabelas, Fórmulas, Histórico, Perfil. * Tap targets mínimos de 44px. * Cards com espaçamento generoso. * Contraste alto para dados e alertas. * Feedback tátil/visual em toda ação importante. * Correções nunca devem apagar o trabalho do aluno. --- ### 6. **Icons & Visual Style** * Ícones: **Lucide** ou **Feather**. * Estilo: técnico, limpo, acadêmico. * Usar ícones para: tabela, fórmula, hipótese, alerta, correção, fonte. * Evitar ilustrações excessivas; priorizar diagramas simples e tabelas legíveis. --- ### 7. **Microinteractions & Animations** * Transições suaves entre etapas. * Chips mudam de cor ao alterar origem do dado. * Alertas com destaque leve, sem bloquear o aluno. * Barra de progresso mostrando avanço metodológico. * Correção com animação discreta de checklist. --- ### 8. **Performance Considerations** * Tabelas termodinâmicas carregadas sob demanda. * Busca rápida por substância/propriedade. * Salvamento automático local. * Histórico de versões da resolução. * Interface leve, com SVGs e componentes reutilizáveis. --- ### 9. **Security & Privacy Design** * Confirmação antes de excluir resolução. * Histórico privado por aluno. * Exportação da resolução em PDF. * Opção de apagar dados. * Login simples e seguro, com recuperação clara de senha. --- ### 🔄 **Conclusão** O sistema deve parecer um **caderno inteligente de Termodinâmica**, não uma calculadora automática. Ele organiza o raciocínio, reproduz a metodologia do professor e ajuda o aluno a construir autonomia: identificar dados, justificar hipóteses, consultar tabelas, escolher fórmulas e validar sua própria resolução.