Oficina PROJETO DE INTERFACES PARA APLICATIVOS ANDROID

Juliano [email protected]

4º e-TIC21 a 25 de Outubro de 2013

Instituto Federal Catarinense - Campus Camboriú

Projeto de InterfacesPara Aplicativos Android

Seguindo as diretrizes do Google

mailto:[email protected]


Projeto de Interfaces

Para Aplicativos

Android




Pense em um aplicativo para

desenvolvermos na parte final da oficina.

Introdução

Estilos

Padrões

Blocos deConstrução

Atividade ?Bem Vindos!




Para Aplicativos

Android




ESTILOSIntrodução

Estilos

Padrões


Atividade




Para Aplicativos

Android




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

Introdução

Estilos

Padrões


Atividade




Para Aplicativos

Android




Temas

Introdução

Estilos

Padrões


Atividade

Holo Light Holo Dark Holo Light with dark action bar

Gmail Settings Gtalk



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


Para Aplicativos

Android




Tipografia

Introdução

Estilos

Padrões


Atividade



• Utilize cores primariamente para ênfase.• Escolha cores que combinem com sua

marca e apresentem bom contraste entre os componentes visuais.


Para Aplicativos

Android




Cores

Introdução

Estilos

Padrões


Atividade




Para Aplicativos

Android




Cores

Introdução

Estilos

Padrões


Atividade

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




Para Aplicativos

Android




Iconografia

Introdução

Estilos

Padrões


Atividade

• 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.




Para Aplicativos

Android




Iconografia

Introdução

Estilos

Padrões


Atividade

• O ícone que representa o aplicativo se chama Launcher.

• O Launcher deve ter uma pequena perspectiva tridimensional e uma silhueta distinta.




Para Aplicativos

Android




PADRÕESIntrodução

Estilos

Padrões


Atividade




Para Aplicativos

Android




Estrutura da Aplicação

Introdução

Estilos

Padrões


Atividade

Um aplicativo possui variadas funções, de acordo com a necessidade. Por exemplo:

• 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




Para Aplicativos

Android





• 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.

Introdução

Estilos

Padrões


Atividade




Para Aplicativos

Android





Introdução

Estilos

Padrões


Atividade

Top level/ Página Principal

Visão de categoria

Visão detalhada




Para Aplicativos

Android





Introdução

Estilos

Padrões


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




Para Aplicativos

Android





Introdução

Estilos

Padrões


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 SpinnerGmail




Para Aplicativos

Android





Introdução

Estilos

Padrões


Atividade

Action Bars ( Barra de Ação )

1 - Icone do aplicativo2 - Controle de visão3 - Botões de ação4 - Action overflow




Para Aplicativos

Android





Introdução

Estilos

Padrões


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.




Para Aplicativos

Android





Introdução

Estilos

Padrões


Atividade

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.




Para Aplicativos

Android





Introdução

Estilos

Padrões


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 )




Para Aplicativos

Android





Introdução

Estilos

Padrões


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.




Para Aplicativos

Android




Navegação

Introdução

Estilos

Padrões


Atividade

Back ( Voltar )Ordem Cronologica

Up Ordem Hierárquica




Para Aplicativos

Android




Android PURO

Introdução

Estilos

Padrões


Atividade

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




Para Aplicativos

Android




Android PURO

Introdução

Estilos

Padrões


Atividade

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




Para Aplicativos

Android




Android PURO

Introdução

Estilos

Padrões


Atividade

• Não use barras de guia inferior.




Para Aplicativos

Android




Blocos de Construção

Introdução

Estilos

Padrões


Atividade




Para Aplicativos

Android




Listas

Introdução

Estilos

Padrões


Atividade

• 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.




Para Aplicativos

Android




Botões

Introdução

Estilos

Padrões


Atividade

• 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.




Para Aplicativos

Android




Campos de Texto

Introdução

Estilos

Padrões


Atividade

• 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




Para Aplicativos

Android




Sliders

Introdução

Estilos

Padrões


Atividade

• 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.




Para Aplicativos

Android




Barra de Progresso

Introdução

Estilos

Padrões


Atividade

• 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.




Para Aplicativos

Android




Checkbox

Introdução

Estilos

Padrões


Atividade

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




Para Aplicativos

Android




Radio

Introdução

Estilos

Padrões


Atividade

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




Para Aplicativos

Android




Liga/Desliga

Introdução

Estilos

Padrões


Atividade

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



1-Título 2-Área de conteúdo 3-Botões de ação


Para Aplicativos

Android




Dialogos

Introdução

Estilos

Padrões


Atividade

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

1-Título 2-Área de conteúdo 3-Botões de ação




Para Aplicativos

Android




Alertas

Introdução

Estilos

Padrões


Atividade

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




Para Aplicativos

Android




Popups

Introdução

Estilos

Padrões


Atividade

• 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.




Para Aplicativos

Android




oficina




Para Aplicativos

Android




Pencil = Arrastar e montar

Introdução

Estilos

Padrões


Atividade




Para Aplicativos

Android




Pencil = Arrastar e montar

Introdução

Estilos

Padrões


Atividade




Para Aplicativos

Android




Ícones padrão Android Pencil

Introdução

Estilos

Padrões


Atividade




Para Aplicativos

Android




OFICINA

Introdução

Estilos

Padrões


Atividade

VAMOS PRATICAR?




Para Aplicativos

Android




FIM!

Obrigado!linkedin.com/in/julianotheissfacebook.com/juliano.theiss

Envie os arquivos .ep e .png para

[email protected]









Oficina PROJETO DE INTERFACES PARA APLICATIVOS ANDROID

Technology