274 lines
3.1 KiB
Markdown
274 lines
3.1 KiB
Markdown
# UI/UX Design System — Cloudsy ☁️🎧
|
||
|
||
---
|
||
|
||
# 🧠 Filosofia de Design
|
||
|
||
Cloudsy inspira-se em:
|
||
- leveza (cloud)
|
||
- fluidez (música)
|
||
- simplicidade moderna
|
||
|
||
A interface deve transmitir:
|
||
- suavidade
|
||
- conforto visual
|
||
- elegância tecnológica
|
||
|
||
---
|
||
|
||
# ☁️ Identidade Visual (Cloud Design)
|
||
|
||
## Conceito
|
||
A UI deve refletir uma “nuvem digital”:
|
||
|
||
- Formas arredondadas
|
||
- Elementos suaves
|
||
- Espaçamento confortável
|
||
- Sem arestas agressivas
|
||
|
||
---
|
||
|
||
## 🔵 Cor Principal
|
||
|
||
Primary Color:
|
||
- Azul (Cloud Blue)
|
||
- Exemplo: #3B82F6
|
||
|
||
Uso:
|
||
- Botões principais
|
||
- Elementos interativos
|
||
- Destaques
|
||
|
||
---
|
||
|
||
## 🌗 Sistema de Tema
|
||
|
||
### Default
|
||
- ThemeMode.system
|
||
|
||
### Comportamento
|
||
- Segue automaticamente o tema do dispositivo
|
||
- Atualização em tempo real
|
||
|
||
---
|
||
|
||
## 🎨 Paleta
|
||
|
||
### Light Mode
|
||
- Background: branco suave (#F9FAFB)
|
||
- Cards: branco
|
||
- Texto: preto suave
|
||
|
||
### Dark Mode
|
||
- Background: preto profundo (#0F172A)
|
||
- Cards: cinza escuro (#1E293B)
|
||
- Texto: branco suave
|
||
|
||
---
|
||
|
||
# 🔘 Componentes Base
|
||
|
||
---
|
||
|
||
## ☁️ Botões (Cloud Buttons)
|
||
|
||
### Estilo
|
||
- BorderRadius: MUITO alto (ex: 20–30)
|
||
- Forma: pill / oval
|
||
- Aparência: “nuvem”
|
||
|
||
### Tipos
|
||
|
||
#### Primary Button
|
||
- Fundo azul
|
||
- Texto branco
|
||
- Elevation leve
|
||
|
||
#### Secondary Button
|
||
- Outline azul
|
||
- Fundo transparente
|
||
|
||
#### Icon Button
|
||
- Circular
|
||
- Fundo suave
|
||
|
||
---
|
||
|
||
## 🎵 Music Card
|
||
|
||
### Layout
|
||
- Rounded corners
|
||
- Capa à esquerda
|
||
- Info à direita
|
||
|
||
### Conteúdo
|
||
- Título
|
||
- Artista
|
||
- Mood tag (IA)
|
||
|
||
---
|
||
|
||
## 💬 Chat Bubble
|
||
|
||
### Estilo
|
||
- Bordas arredondadas
|
||
- Cores diferentes:
|
||
- User: azul
|
||
- Clou: cinza
|
||
|
||
---
|
||
|
||
## 🎵 Song Message Card
|
||
|
||
- Pequeno player embutido
|
||
- Capa + título
|
||
- Botão play
|
||
|
||
---
|
||
|
||
# 📱 Layout Geral
|
||
|
||
## Estrutura
|
||
|
||
- Safe area
|
||
- Padding consistente (16px–24px)
|
||
- Espaçamento vertical suave
|
||
|
||
---
|
||
|
||
## 📊 Hierarquia Visual
|
||
|
||
1. Música (principal)
|
||
2. Ações (botões)
|
||
3. Informação secundária
|
||
|
||
---
|
||
|
||
# 🔄 Navegação
|
||
|
||
## Bottom Navigation
|
||
|
||
Tabs:
|
||
- Home
|
||
- Playlists
|
||
- Chat
|
||
- Settings
|
||
|
||
### Estilo:
|
||
- Rounded container
|
||
- Floating effect
|
||
- Azul ativo
|
||
|
||
---
|
||
|
||
# ✨ Animações
|
||
|
||
## Princípios
|
||
- Suaves
|
||
- Rápidas
|
||
- Naturais
|
||
|
||
## Exemplos
|
||
- Fade transitions
|
||
- Scale em botões
|
||
- Progress animations
|
||
|
||
---
|
||
|
||
# ⚡ Estados da UI
|
||
|
||
## Loading
|
||
- Skeleton UI
|
||
- Shimmer effect (opcional)
|
||
|
||
---
|
||
|
||
## Empty
|
||
Mensagens amigáveis:
|
||
- “Ainda não tens músicas ☁️”
|
||
- “Cria a tua primeira playlist”
|
||
|
||
---
|
||
|
||
## Error
|
||
- Mensagens claras
|
||
- Botão retry
|
||
|
||
---
|
||
|
||
# 🧠 UX Guidelines
|
||
|
||
## Simplicidade
|
||
- Evitar clutter
|
||
- Interface limpa
|
||
|
||
## Consistência
|
||
- Mesmos padrões em toda a app
|
||
|
||
## Feedback
|
||
- Sempre mostrar resposta a ações
|
||
|
||
---
|
||
|
||
# 🌍 Localização
|
||
|
||
- Todo texto via keys
|
||
- Layout adaptável a idiomas
|
||
|
||
---
|
||
|
||
# ⚙️ Settings UX
|
||
|
||
## Secções
|
||
|
||
### Perfil
|
||
- Nome
|
||
- Email
|
||
|
||
---
|
||
|
||
### Tema
|
||
- System (default)
|
||
- Light
|
||
- Dark
|
||
|
||
---
|
||
|
||
### Cor
|
||
- Azul default
|
||
- Custom
|
||
|
||
---
|
||
|
||
### Idioma
|
||
- Português
|
||
- English
|
||
|
||
---
|
||
|
||
### Conta
|
||
- Logout
|
||
|
||
---
|
||
|
||
# ☁️ Assinatura Visual Cloudsy
|
||
|
||
## Elementos únicos
|
||
|
||
- Bordas muito arredondadas
|
||
- Layout “leve”
|
||
- Espaçamento respirável
|
||
- Azul suave como base
|
||
|
||
---
|
||
|
||
# 🚀 Conclusão
|
||
|
||
A UI de Cloudsy deve parecer:
|
||
- moderna
|
||
- suave
|
||
- fluida
|
||
- inteligente
|
||
|
||
Como se a música estivesse “na nuvem”.
|