Oficina PROJETO DE INTERFACES PARA APLICATIVOS ANDROID

2,331 views
2,234 views

Published on

Oficina apresentada durante o 4º e-TIC – Encontro de Tecnologia e Informação do Instituto Federal Catarinense – Campus Camboriú. ( http://www.ifc-camboriu.edu.br/e-tic/2013/ )
O foco da oficina é apresentar algumas das design guidelines do android, e instigar a criatividade dos participantes para na segunda parte criarem um mockup de aplicativo para smartphone.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,331
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
115
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Oficina PROJETO DE INTERFACES PARA APLICATIVOS ANDROID

  1. 1. 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
  2. 2. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  3. 3. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Introdução Estilos Padrões Blocos de Construção ESTILOS Atividade Juliano Theiss juliano.theiss@gmail.com
  4. 4. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  5. 5. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  6. 6. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  7. 7. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  8. 8. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  9. 9. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  10. 10. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  11. 11. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Introdução Estilos Padrões Blocos de Construção PADRÕES Atividade Juliano Theiss juliano.theiss@gmail.com
  12. 12. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  13. 13. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Introdução Estilos Padrões Blocos de Construção Atividade Estrutura da Aplicação • 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 juliano.theiss@gmail.com
  14. 14. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Introdução Estrutura da Aplicação Top level/ Página Principal Estilos Padrões Blocos de Construção Visão de categoria Atividade Visão detalhada Juliano Theiss juliano.theiss@gmail.com
  15. 15. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Introdução Estilos Padrões Blocos de Construção Atividade Estrutura da Aplicação 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 juliano.theiss@gmail.com
  16. 16. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Introdução Estilos Padrões Blocos de Construção Atividade Estrutura da Aplicação 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 juliano.theiss@gmail.com
  17. 17. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Estrutura da Aplicação 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 juliano.theiss@gmail.com
  18. 18. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Introdução Estilos Padrões Blocos de Construção Atividade Estrutura da Aplicação 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 juliano.theiss@gmail.com
  19. 19. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Introdução Estilos Padrões Blocos de Construção Estrutura da Aplicaçã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 juliano.theiss@gmail.com
  20. 20. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Introdução Estilos Padrões Blocos de Construção Atividade Estrutura da Aplicação 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 juliano.theiss@gmail.com
  21. 21. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Introdução Estilos Padrões Blocos de Construção Atividade Estrutura da Aplicação 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 juliano.theiss@gmail.com
  22. 22. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  23. 23. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  24. 24. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  25. 25. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  26. 26. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Introdução Estilos Blocos de Padrões Blocos de Construção Atividade Construção Juliano Theiss juliano.theiss@gmail.com
  27. 27. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  28. 28. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  29. 29. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  30. 30. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  31. 31. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  32. 32. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  33. 33. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  34. 34. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  35. 35. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  36. 36. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  37. 37. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú 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 juliano.theiss@gmail.com
  38. 38. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android oficina Juliano Theiss juliano.theiss@gmail.com
  39. 39. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Pencil = Arrastar e montar Introdução Estilos Padrões Blocos de Construção Atividade Juliano Theiss juliano.theiss@gmail.com
  40. 40. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Pencil = Arrastar e montar Introdução Estilos Padrões Blocos de Construção Atividade Juliano Theiss juliano.theiss@gmail.com
  41. 41. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android Ícones padrão Android Pencil Introdução Estilos Padrões Blocos de Construção Atividade Juliano Theiss juliano.theiss@gmail.com
  42. 42. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android OFICINA Introdução Estilos Padrões Blocos de Construção VAMOS PRATICAR? Atividade Juliano Theiss juliano.theiss@gmail.com
  43. 43. 4º e-TIC 21 a 25 de Outubro de 2013 Instituto Federal Catarinense - Campus Camboriú Projeto de Interfaces Para Aplicativos Android FIM! Envie os arquivos .ep e .png para juliano.theiss@gmail.com Obrigado! linkedin.com/in/julianotheiss facebook.com/juliano.theiss Juliano Theiss juliano.theiss@gmail.com

×