Aula 12 - UX e Material Design 3 🎨

💄 O que é Material Design?

O sistema de design do Google.

Criado em 2014.
Inspirado em papel e tinta.
Agora na versão 3: Material You.

🌸 Material You (M3)

A personalização elevada ao máximo.

Cores Dinâmicas: O app suga as cores do papel de parede do usuário.
Acessibilidade: Foco em contraste e tamanhos de toque.
Expressividade: Formas orgânicas e arredondadas.

📐 O Grid de 8dp

No Android, medimos tudo em múltiplos de 8.

8, 16, 24, 32, 40...
Isso garante alinhamento harmônico em qualquer tela.
Regras de margem e padding seguem esse padrão.

🔘 Componentes Modernos

1. FAB (Floating Action Button)

O botão que "flutua" sobre o conteúdo.

Representa a ação principal.
Ex: Criar novo e-mail, Adicionar tarefa.

2. Cards 🃏

Agrupam informações relacionadas.

Elevação (sombras).
Bordas arredondadas (12dp a 28dp).

Navegação principal ao alcance do polegar.

Entre 3 e 5 destinos.
Ideal para uso com uma mão só.

🌑 Dark Mode: Não é opcional!

O usuário ama o tema escuro.

Economia de bateria (telas OLED).
Descanso visual à noite.
Como fazer: Pasta values-night/colors.xml.

🆚 Material (Android) vs HIG (iOS)

Característica	Android (Material)	iOS (HIG)
Foco	Elevação / Camadas	Transparência / Blur
Botões	FAB / Sombreados	Flat / Bordas finas
Navegação	Drawer / Bottom Nav	Tab Bar Superior/Inferior
Espírito	Papel e Tinta	Vidro e Minimalismo

🔡 Tipografia: Roboto e Além

A fonte oficial do Android.

Use pesos variados para criar hierarquia.
Título: Bold / Grande.
Corpo: Regular / 14sp ou 16sp.

🌊 Feedback Visual (Ripples)

"O app está me ouvindo?"

Sempre que o usuário tocar, algo deve acontecer.
Efeito Ripple (Onda) é o padrão.

🛠️ Prática: Estilizando com M3

No build.gradle, use Material 1.9.0+.
No XML, troque Button por MaterialButton.
Teste o atributo app:cornerRadius e veja a mudança.

🧬 Mermaid: Camadas UI

graph TD
    A[Barra de Status]
    B[Barra de App - TopAppBar]
    C[Conteúdo - RecyclerView]
    D[Botão Flutuante - FAB]
    E[Barra Inferior - BottomNav]
    A --> B
    B --> C
    C --> D
    D --> E

🧠 UX: Experiência do Usuário

UX não é só "bonito", é "funcional".

Velocidade: Carregamento rápido.
Clareza: Icons autoexplicativos.
Prevenção: Não deixe o usuário errar (validações).

🏁 Conclusão

Design ruim mata apps bons.
Siga o grid de 8dp.
Pense sempre na acessibilidade (Content Description!).