oficina projeto de interfaces para aplicativos android

Juliano Theissjuliano.theiss@gmail.com

4º e-TIC21 a 25 de Outubro de 2013

Instituto Federal Catarinense - Campus Camboriú

Projeto de InterfacesPara Aplicativos Android

Seguindo as diretrizes do Google

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

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

Introdução

Estilos

Padrões

Atividade

Para Aplicativos

Android

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

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

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

Envie os arquivos .ep e .png para

juliano.theiss@gmail.com

oficina projeto de interfaces para aplicativos android

Technology

facebook e aplicativos

aplicativos para mobile

oficina: integração das estratégias de combate à...

categorias de softwares programas aplicativos para...

universidade federal do cearÁ bacharelado em … ·...

lottus7 aplicativos

[ aplicativos ] erp

aplicativos webonesystem

resultados - oficina projeto de interfaces para aplicativos...

aplicativos gm

[ aplicativos ] crm

hica49v4.0 ejemplos aplicativos

[ aplicativos ] business intelligence

l - regionamazonas.gob.pe · oficina de comunicaciones y...

gerenciamento de aplicativos

juegos aplicativos

issn 1983-6708 revista cientÍfica do itpacrevista … ·...

pasta de aplicativos

portfolio de aplicativos

portfólio aplicativos