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.

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document

System Requirements Document

1. Introduction

This document outlines the system requirements for the "Assistente de Termodinâmica," an interactive, mobile-first educational tool designed to guide students through thermodynamics problem-solving without providing direct answers. The system emphasizes a technical, organized, and didactic experience with a data-driven, analytical aesthetic.

2. System Overview

The "Assistente de Termodinâmica" is a mini interactive system aimed at enhancing students' learning by allowing them to engage in problem-solving activities. The system is designed to provide guidance and feedback, ensuring students understand the process and methodology behind thermodynamics problems. It includes features such as progressive problem-solving stages, data traceability, and visual clarity.

3. Functional Requirements

Page 1 of 6

User Stories

  • As a student, I want to fill in, choose, and justify my answers to learn by doing.
  • As a student, I want the system to point out inconsistencies without solving the problem for me.
  • As a student, I want each piece of data to have a clear origin for traceability.
  • As a student, I want a guided progression through problem-solving stages: statement, data, hypotheses, formulas, calculation, and result.
  • As a student, I want to differentiate between provided, found, and calculated data visually.
  • As a student, I want to view exercises in a dashboard with status indicators and a "Continue Resolution" button.
  • As a student, I want to follow a step-by-step flow in the exercise page, from reading the statement to final correction.
  • As a student, I want to edit a progressive table with columns for magnitude, symbol, value, unit, origin, and observation.
  • As a student, I want to use chips to indicate data status: provided, found in table, calculated, or hypothesis.
  • As a student, I want to manually search and filter tables by substance, pressure, temperature, phase, and property.
  • As a student, I want to record hypotheses with fields for adopted hypothesis, justification, impact, and confidence.
  • As a student, I want to choose formulas from a library and explain their applicability.
  • As a student, I want to develop calculations step-by-step with fields for substitution, units, and partial results.
  • As a student, I want to receive feedback on missing data, incoherent hypotheses, formula adequacy, unit problems, and result plausibility.
Page 2 of 6
  • As a student, I want a mobile UX with bottom navigation for Exercises, Tables, Formulas, History, and Profile.
  • As a student, I want high contrast for data and alerts, with tactile/visual feedback for important actions.
  • As a student, I want icons for table, formula, hypothesis, alert, correction, and source, with a technical and clean style.
  • As a student, I want smooth transitions between stages and chips that change color when data origin is altered.
  • As a student, I want performance considerations like on-demand table loading, fast searches, and local auto-save.
  • As a student, I want security features like confirmation before deletion, private history, PDF export, and data deletion options.

4. User Personas

  • Student: A learner engaging with thermodynamics exercises, seeking to understand and solve problems independently.
  • Instructor: A teacher or tutor who may use the system to assign exercises and review student progress.

5. Core User Flows

Student Flow

  1. Access the dashboard to view available exercises.
  2. Select an exercise to begin or continue resolution.
  3. Follow the guided progression: read the statement, input data, make hypotheses, consult tables, choose formulas, and perform calculations.
  4. Receive feedback and make corrections as needed.
  5. Complete the exercise and review the final correction page.
Page 3 of 6

Instructor Flow

  1. Assign exercises to students.
  2. Monitor student progress and provide additional guidance if necessary.

6. Visuals Colors and Theme

  • Technical Blue (#2563EB): Main buttons, active stage.
  • Graphite Gray (#1F2937): Texts, titles, formulas.
  • Found Data Green (#16A34A): Values consulted in tables.
  • Hypothesis Orange (#F97316): Hypotheses and pedagogical alerts.
  • Correction Red (#DC2626): Inconsistencies and errors.
  • Light Background (#F8FAFC): Main area.

7. Signature Design Concept

The system should resemble an intelligent thermodynamics notebook, organizing reasoning and reproducing the teacher's methodology to help students build autonomy.

8. Interaction Model & Motion Direction

  • Smooth transitions between stages.
  • Chips change color when data origin is altered.
  • Alerts with subtle highlights, without blocking the student.
  • Progress bar showing methodological advancement.
  • Discreet checklist animation for corrections.
Page 4 of 6

9. Non-Functional Requirements

  • High performance with on-demand loading and fast searches.
  • Lightweight interface using SVGs and reusable components.
  • Secure and private data handling.

10. Tech Stack

  • Frontend: React.js
  • Backend: Python + FastAPI
  • Database: MySQL with Alembic migrations

11. Assumptions and Constraints

  • The system is designed for mobile-first interaction.
  • Exercises are stored in a database for easy access and management.
  • The system does not automatically solve problems but guides the student through the process.
Page 5 of 6

12. Glossary

  • COP: Coefficient of Performance
  • TBS: Dry Bulb Temperature
  • TBU: Wet Bulb Temperature
  • SVG: Scalable Vector Graphics
  • UX: User Experience

This document serves as a comprehensive guide for the development and implementation of the "Assistente de Termodinâmica" system, ensuring all requirements are met to provide an effective educational tool for students.

Page 6 of 6

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.