363 lines
3.8 KiB
Markdown
363 lines
3.8 KiB
Markdown
# 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
|
|
- Email
|
|
|
|
---
|
|
|
|
### 🎨 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
|
|
|
|
1. Login
|
|
2. Upload música
|
|
3. IA gera tags
|
|
4. Música aparece na Home
|
|
5. Criar playlist
|
|
6. Ouvir música
|
|
7. Chat com Clou
|
|
8. 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
|