Oficina PROJETO DE INTERFACES PARA APLICATIVOS ANDROID

4º e-TIC

21 a 25 de Outubro de 2013
Instituto Federal Catarinense - Campus Camboriú

Projeto de Interfaces
Para Aplicativos Android
Seguindo as diretrizes do Google

Juliano Theiss
juliano.theiss@gmail.com

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Bem Vindos!
Pense em um
aplicativo para
desenvolvermos na
parte final
da oficina.

?
Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção

ESTILOS

Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Temas
• Temas são o mecanismo utilizado para
aplicar um estilo consistente em um
aplicativo.
• Use um tema do sistema que melhor se
aproxime a sua necessidade.
• Os temas possuem uma base solida onde
você pode implementar seletivamente
seus estilos visuais

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Temas

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Holo Light
Gmail

Holo Dark
Settings

Holo Light with
dark action bar
Gtalk
Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos

Tipografia
• O Android utiliza a fonte Roboto, criada
especificamente para os requerimentos de
UI e telas de alta resolução.

Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões

Cores
• Utilize cores primariamente para ênfase.
• Escolha cores que combinem com sua
marca e apresentem bom contraste entre
os componentes visuais.

Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos

Cores
• Cada cor possui tons mais claros e mais
escuros que podem ser usados como
complemento.

Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões

Iconografia
• Um icone é um grafico que usa uma
pequena porção da tela e apresenta uma
representação rápida e intuitiva de uma
ação, um status ou um aplicativo.

Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção

Iconografia
• O ícone que representa o aplicativo se
chama Launcher.
• O Launcher deve ter uma pequena
perspectiva tridimensional e uma silhueta
distinta.

Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção

PADRÕES

Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução

Estrutura da Aplicação
Um aplicativo possui variadas funções, de
acordo com a necessidade. Por exemplo:

Estilos
Padrões
Blocos de
Construção
Atividade

• Calculadora ou Camera, possuem foco em apenas
uma atividade e uma tela;
• Aplicativo de telefone que precisa alternar entre
diferentes telas sem profunda navegação;
• Gmail ou Play Store que combinam uma grande
quantidade de dados com muita navegação
Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

• Um aplicativo típico consiste de top/level
( tela principal ) e visão detalhada. Se a
hierarquia é complexa, visões de categoria
conectam a tela principal com a visão
detalhada.

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução

Top level/ Página
Principal

Estilos
Padrões
Blocos de
Construção

Visão de categoria

Atividade

Visão detalhada

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Action Bars ( Barra de Ação ) para navegação e ações
• Todas as telas devem mostrar barras de ação para
promover uma navegação consistente e exibir ações
importantes;
• Na tela inicial, use a barra de ação para exibir o ícone e
nome do seu aplicativo;
• Se o seu aplicativo permitir que o usuário crie conteúdo,
considere fazer acessível direto pelo nível mais alto.
• Se o seu aplicativo possuir busca, a inclua na barra de
ação para que as pessoas possam achar conteudo mais
facilmente
Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Action Bars ( Barra de
Ação ) para navegação e
ações
• Se a sua página
principal consistir em
multiplas seções,
tenha certeza que é
fácil para o usuário
navegar entre elas
utilizando View
Controls ( Controles de
visão ) na sua barra de
ações.

Controle de visão do tipo Spinner
Gmail

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Action Bars ( Barra de Ação )

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

1 - Icone do aplicativo
2 - Controle de visão
3 - Botões de ação
4 - Action overflow

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Controles de Visão.
O nível superior de seu aplicativo, muitas vezes vai
levar o usuário para as principais áreas funcionais.
Nesta página inicial, você precisa ter certeza que o
usuário possa navegar entre elas de forma
eficiente. O android suporta uma série de controles
de visão para esta tarefa, Use o controle que
melhor corresponda as necessidades do seu
aplicativo.

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção

Abas Fixas
• Se você espera que seu usuário alterne entre as visões
frequentemente
• Se você tem um número máximo de 3 visões de nível
mais alto.
• Se você quer que o usuário esteja altamente consciente
das multiplas visões.

Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Spinners
• Se você não quer perder
espaço vertical na tela.
• Se o usuário está
alternando visões
diferentes dos mesmos
dados ( ex: calendario
visto por dia, semana ou
mes) ou datas do mesmo
tipo ( como conteudo
para duas contas
diferentes )
Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Navigation Drawers
( Gavetas)
• Se você nao quer abrir
mão do espaço vertical;
• Se você tem um número
grande de visões de tela
principal.
• Se você quer promover
navegação rápida entre
visões que não possuem
relação entre si.
Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução

Navegação
Back ( Voltar )
Ordem Cronologica

Up
Ordem Hierárquica

Estilos
Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução

Android PURO
• Não imite os elementos de interface do usuário de outras
plataformas.

Estilos
Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Android PURO
• Não utilize icones específicos de outras plataformas.

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Android PURO
• Não use barras de guia inferior.

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos

Blocos de

Padrões
Blocos de
Construção
Atividade

Construção
Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Listas
• As listas
apresentam
vários itens de
linha em um
arranjo vertical.
Eles podem ser
utilizados para a
selecção de
dados, bem como
de pesquisa de
navegação.

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos
Padrões

Botões
• Um botão consiste em um texto e / ou uma imagem que
comunica claramente que a ação irá ocorrer quando o
usuário toca. O Android suporta dois tipos diferentes de
botões: botões básicos e botões sem bordas. Ambos
podem conter textos e / ou imagens.

Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos

Campos de Texto
• Os campos de texto permitem ao usuário digitar um
texto em seu aplicativo. Eles podem ser uma única
linha ou várias linhas. Tocar um campo de texto exibe
automaticamente o teclado

Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução

Sliders
• Os sliders interativos permitem selecionar um valor de
um intervalo contínuo ou discreto de valores. O menor
valor é para a esquerda, o maior para a direita.

Estilos
Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos

Barra de Progresso
• As barras de progresso são para situações em que a
porcentagem concluída pode ser determinada. Eles dão
aos usuários uma sensação rápida de quanto tempo a
operação vai demorar.

Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução

Checkbox
• Permitem que o usuário selecione múltiplas opções a
partir de um conjunto.

Estilos
Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução

Radio
• Os botões de rádio permitem que o usuário selecione
uma opção de um conjunto.

Estilos
Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução

Liga/Desliga
• Os botões de liga e desliga alternam o estado de uma
única opção de configuração.

Estilos
Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução

Dialogos
• Diálogos solicitam ao usuário as decisões ou
informações adicionais exigidas pelo aplicativo para
continuar a tarefa.

Estilos
Padrões
Blocos de
Construção
Atividade

1-Título
1-Título

2-Área de conteúdo
2-Área de conteúdo

3-Botões de ação
3-Botões de ação
Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução

Alertas
• Alertas informam o usuário sobre uma situação que
exige a sua confirmação ou aceitação antes de
prosseguir.

Estilos
Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Introdução
Estilos

Popups
• Popups não tem tem botões explícitos que aceitem ou
cancelem a operação. Em vez disso, fazer uma seleção
avança o fluxo de trabalho, e simplesmente tocar fora
do popup o descarta.

Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

oficina
Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Pencil = Arrastar e montar

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

Ícones padrão Android Pencil

Introdução
Estilos
Padrões
Blocos de
Construção
Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

OFICINA

Introdução
Estilos
Padrões
Blocos de
Construção

VAMOS
PRATICAR?

Atividade

Juliano Theiss

4º e-TIC

Projeto de
Interfaces
Para
Aplicativos
Android

FIM!

Envie os arquivos .ep e .png
para

Obrigado!
linkedin.com/in/julianotheiss
facebook.com/juliano.theiss
Juliano Theiss

Oficina PROJETO DE INTERFACES PARA APLICATIVOS ANDROID

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (19)

Último

Último (6)

Oficina PROJETO DE INTERFACES PARA APLICATIVOS ANDROID