http://www.moolab.com.br/#playground

http://www.moolab.com.br/#playground

HelloAndroid Design

http://developer.android.com/design/index.html

Flexibilidade

Android Design

Flexibilidade

Seu layout fica bem no meu dispositivo?

Flexibilidade

E quando está em landscape?

Flexibilidade

Meu smartphone possui QWERTY!

Flexibilidade

E quando meu tablet está em portrait?

Flexibilidade

Tenho que desenvolver para todos os dispositivos agora?

Flexibilidade

TALVEZ

Flexibilidade

O seu app é utilizado em quais ocasiões?

Desenvolvendo para o seu público alvo!

Flexibilidade

Começando pelos dispositivos de tamanhos medianos

Aborde o maior número de usuários!

Flexibilidade

Seja escalonável!

Fragments

\dimens

\drawable-xxhdpi

\values-sw720dp-land

\values-v14

Flexibilidade

Supporting Multiple Screenshttp://developer.android.com/guide/practices/screens_support.html

Navegação

Navegação

Qual a melhor navegação entre telas para um determinado

aparelho?

Navegação

News

Multi-pane Layouts

Navegação

News

Navegação

News

Navegação

News

Navegação

Up vs Back

Navegação

Tela inicial não deve possuir um Upbutton

Up vs Back

Navegação

Back button em outros comportamentos

• Dismiss em janelas flutuantes (popup, dialogs)

• Dismiss em action bars de contexto (CAB)

• Remover uma highlight de itens selecionados

• Esconder o keyboard (IME)

Up vs Back

Navegação

Telas com chamadas múltiplas, quando quebramos a hierarquia de navegação.

Up button e o back button devem voltar para a atividade de origem

Por exemplo: Tela de configurações

Up vs Back

Navegação

Modificando a tela na mesma atividade

• Utilização de tabs

• Utilização de páginas

• Filtrando uma lista

• Ordenando uma lista

• Fazendo Zoom e modificando caractéres e etc

Up vs Back

Navegação

O que fazer quando a navegação vem de widgets e notificações?

A tela de destino costuma ser chamada por uma lista?

Costuma ser chamada a partir de um único contexto?

Up vs Back

Navegação

News

NavigationDrawer

Navegação

News

Navegação

Respeite os limites: 240dp – 320dp

News

Action Bar

Action Bar

1. ícone do aplicativo

2. Controle de views

3. Botões de ações

4. Ações secundarias

Action Bar

Action Bar

1. Main Action Bar

2. Top Bar

3. Bottom Bar

Nem todas as açõessão iguais, algumas são

mais importantes!

Action Bar

Flexibilidade

Defina Antes!

Flexibilidade

Quais funcionalidadesdevem estar

sempre em primeiro plano?

Action Bar

Action Buttons

Frequentemente usadoUsuários utilizaram pelos menos de 7 a 10 vezes por tela?Será que eles vão usar várias vezes seguidas?Será que colocar no overflow button é muito custo?

ImportantesTipicamente usado

Action Bar

Action Buttons

Frequentemente usadoImportantesVocê deseja que todo mundo visualize esta ação? Porque?Ela é muito legal? Ajuda na hora de vender?É algo que precisa ser fácil nos raros casos em que é necessário?

Tipicamente usado

Action Bar

Action Buttons

Frequentemente usadoImportantesTipicamente usadoÉ geralmente apresentado da mesma forma em outros aplicativos?As pessoas se surpreenderiam se ele fosse colocado em overflow?

Action Bar

Action Buttons

Sua ação se encaixa em algo do FIT?Frequente, Importante, Típico

Action Bar

Action Barde

Contexto (CAB)

SEMPRE

Action Bar

RevisandoAo planejar sua Action Bar, pergunte-se coisas do tipo:

Action Bar

Quais ações devem estar visíveis?

Utilize o esquema FIT para tomar a sua decisão. Se a quantidade de ações não couber na top action bar, utilize o sistema de split para a bottom bar.

Revisando

Action Bar

A navegação é muito importante?

Se a navegação entre conteúdos é importante, então coloque tudo em um mesmo contexto e utilize dos recursos de abas e paginação.

Revisando

Action Bar

O que mais deve estar visível?

1. Número de mensagens não lidas

2. Exibição do que esta tocando em um music player

3. Qualquer informação que esteja executando em segundo plano

Revisando

Otimize Layouts

Otimize layouts

Otimize layouts

Encantando

Encante

Qualidade de imagens

Encante

Animações em ações:Cliques em imagens, adicionando e removendo elementos

Encante

Efeitos sonoros leves

Encante

Objetos “vivos” são mais interessantes!

Encante

Promova customizações de estilos, mas forneça um ótimo por padrão

Encante

Conheça o seu usuárioNão fique repetindo sempre as mesmas perguntas

Encante

TOUCH Feedback

Encante

TOUCH Feedback

Notificações

Notificações

NotificaçõesAnatômicas:

• Ícone ou foto• Título ou nome• Preview de mensagem• Quando isto aconteceu?• Ícone secundário

Notificações

Expandedlayouts

Notificações

Ações rápidas

Deixe mais pessoal

Notificações

Notificações Múltiplas

Não faça assim:

Notificações

Notificações Múltiplas

Faça assim:

Notificações

Notificações importantes envolvem pessoas

Notificações

Quando eu nãodevo notificar?

Notificações

Interagindo com as notificaçõesPara serviços em execução

Ícone que permita identificação

MetricsGrids

Typography

Metrics

Porque 48 dp?

Grids

Typography

Simplifique!

Simplifique

Fizeram Skip nas suas mensagens?Use frases curtas, pessoas costuma fazer skip em perguntas longas!

Simplifique

Imagens x PalavrasImagens são mais rápidas do que mensagens!

Simplifique

Decida pelo usuárioMas a decisão final sempre deve ser dele

Simplifique

Mostre o necessárioQuando necessário!

Simplifique

Sempre me diga onde estou!Em que contexto o usuário se encontra

Use efeitos de transações para mostrar relações entre telas

Simplifique

A quanto anda aquilo mesmo?Exiba o progress bar de processamento em background, sempre!

Simplifique

Nunca perca minhas coisas!Sincronize sempre que possível

Simplifique

Não me deixe sem bateria!Utilize Push Notification

Simplifique

Estou sempre ocupadoSó interrompa se for necessário!

I have the power

Poder para o usuário

Truques que funcionam em todos os lugaresEventos como swipe, long press, menu do dispositivo, sempre devem

responder.

Poder para o usuário

Não fui eu!

Poder para o usuário

Seja gentil ao me apresentar um problema

Não fui eu!

Poder para o usuário

Quero me sentir inteligente ao utilizar o aplicativo

Não fui eu!

Poder para o usuário

Instruções simples e completasDiva por parte para mim

Não fui eu!

Poder para o usuário

Se resolver por mimMelhor ainda!

Não fui eu!

Poder para o usuário

Faça você os trabalhos pesados!

Poder para o usuário

Novatos devem se sentir inteligentes

Faça você os trabalhos pesados

Poder para o usuário

Habilite funcionalidadesque eu nunca iria encontrar

Faça você os trabalhos pesados

P&D

Android Design in Actionhttp://www.youtube.com/user/androiddevelopers

Welcome to Android Designhttp://developer.android.com/design/index.html

Style – Look great on any deviceshttp://developer.android.com/design/style/index.html