3.8 KiB
3.8 KiB
Wireframes — Cloudsy ☁️🎧
🧠 Objetivo
Definir a estrutura visual, comportamento e fluxo de cada ecrã da aplicação.
Este documento complementa:
- 07_ui_ux.md (design system)
- 01_architecture.md (estrutura)
☁️ Princípios Globais
- UI arredondada (cloud style)
- Botões com bordas suaves
- Azul como cor principal
- Tema automático (system)
- Layout limpo e espaçado
🏠 1. HOME SCREEN
🎯 Objetivo
Mostrar músicas do utilizador + acesso rápido
🧱 Layout
Top Bar
- Logo "Cloudsy"
- Avatar do utilizador
- Botão Settings (⚙️)
Secção principal
Lista de músicas
Cada item:
- Capa (rounded)
- Título
- Artista
- Tag (mood IA)
Floating Action Button (FAB)
- Forma: circular arredondada
- Cor: azul
- Ícone: +
- Ação: Upload música
⚡ Estados
- Loading → skeleton list
- Empty → "Ainda não tens músicas ☁️"
- Error → mensagem + retry
🎧 2. PLAYER SCREEN
🎯 Objetivo
Reprodução completa de música
🧱 Layout
Top
- Botão back
- Nome da playlist
Centro
- Capa da música (grande, rounded)
- Título
- Artista
Barra de progresso
- Linha suave
- Thumb arredondado
Controlos
- Play / Pause (botão principal azul)
- Next / Previous
Ações extra
- Adicionar à playlist
- Ver lyrics
- Partilhar (DM)
✨ UX
- Animação ao trocar música
- Feedback visual nos controlos
📂 3. PLAYLISTS SCREEN
🎯 Objetivo
Gestão de playlists
🧱 Layout
Lista de playlists
Cada item:
- Nome
- Nº de músicas
- Estilo rounded card
Botão criar
- Botão azul arredondado
📂 Dentro da playlist
- Lista de músicas
- Botões:
- remover
- reorder
⚡ Estados
- Empty → “Cria a tua primeira playlist ☁️”
💬 4. CHAT IA (Clou)
🎯 Objetivo
Interação com IA
🧱 Layout
Chat area
- Bolhas arredondadas
- User → azul
- Clou → cinza
Input
- Campo rounded
- Botão enviar
🤖 Funcionalidades
- Perguntas livres
- Recomendações
- Análise de gosto
✨ UX
- Scroll automático
- Loading message (typing...)
👥 5. DMs (Mensagens)
🎯 Objetivo
Comunicação entre utilizadores
🧱 Lista de conversas
- Nome
- Última mensagem
- Timestamp
🧱 Chat individual
Mensagens
- Texto
- Música (card)
Input
- Campo texto
- Botão enviar
- Botão enviar música 🎵
🎵 Mensagem de música
- Capa
- Nome
- Botão play
📤 6. UPLOAD SCREEN
🎯 Objetivo
Adicionar música
🧱 Layout
- Selecionar ficheiro
- Input:
- título
- artista
Botão upload
- Azul
- Rounded
🤖 Após upload
- IA gera:
- género
- mood
⚙️ 7. SETTINGS SCREEN
🎯 Objetivo
Personalização da app
🧱 Layout
☁️ Perfil
- Nome
🎨 Aparência
Tema
- System (default)
- Light
- Dark
Cor
- Azul (default)
- Custom picker
🌍 Idioma
- Português
- English
🎵 Preferências
- Géneros favoritos
- Moods favoritos
🔐 Conta
- Logout
📊 8. ESTADOS GLOBAIS
Loading
- Skeleton
- Shimmer
Empty
- Mensagens amigáveis
- UI leve
Error
- Mensagem clara
- Botão retry
Offline
- Aviso “Sem internet”
🔄 9. FLUXO PRINCIPAL
🎯 Jornada do utilizador
- Login
- Upload música
- IA gera tags
- Música aparece na Home
- Criar playlist
- Ouvir música
- Chat com Clou
- Enviar música via DM
☁️ Assinatura Cloudsy
- UI suave
- Bordas arredondadas
- Azul elegante
- Layout respirável
- Experiência fluida
🚀 Conclusão
Wireframes definem:
- Estrutura
- UX
- Comportamento
E garantem que a app Cloudsy:
- parece moderna
- é intuitiva
- tem identidade única