Apresentação de Padrões de Design para Aplicativos Móveis.

3.668 visualizações

Publicada em

Palestra baseada no Livro Padrões de Design para Padrões de Design para Aplicativos Móveis.
NEIL, THEREZA. Padrões de design para aplicativos móveis. São
paulo: Novatec Editora; Sebastopol, CA: O'Reilly,2012.

Publicada em: Design
0 comentários
13 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
3.668
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
222
Comentários
0
Gostaram
13
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Apresentação de Padrões de Design para Aplicativos Móveis.

  1. 1. Padrões de Design para Aplicativos MóveisHewerson Freitas
  2. 2. Apresentação Hewerson Freitas Estudante de Sistemas de Informação hewerson.freitas@gmail.com /hewerson.freitas
  3. 3. Sumário Navegação Formulários Tabelas e listas Busca, Ordenação e filtragem Convites Feedback Ajuda
  4. 4. Navegação Padrões primários de navegação Aplicativos com boa navegação simplesmente são intuitivos e facilitam a realização de qualquer tarefa Primary Navigation Patterns, Fonte: [1]
  5. 5. Navegação Springboard Servem como plataforma de partida, que se utiliza como ponto de partida para as aplicaçõesFacebook Springboard and Ovi Maps, Fonte: [1]
  6. 6. Navegação SpringboardGrades de 3x3, 2x3, 2x2, 1x2 e são os layouts mais comuns.Grid layouts for springboards, Fonte: [1]
  7. 7. Navegação Menu de lista Menu de listas são bastante similares ao Springboard, contendo suas variações de menus com listas avançadas, personalizadas.Enhanced list, Amazon MP3; grouped list, Stratus, Fonte: [1]
  8. 8. Navegação Abas A navegação não se torna neutra em termos de SO, uma vez que cada Sistema Operacional tem sua forma de localização e design de abas.Jamie Oliver Recipes and Molome, bottom tabs, Fonte: [1]
  9. 9. Navegação Galeria Este padrão exibe itens de conteúdo individuais para navegação. Funciona melhor com conteúdo atualizado frequentemente, que as pessoas desejam navegar.BBC and PULSE, Fonte: [1]
  10. 10. Navegação Dashboard Fornecem um resumo de indicadores principais de desempenho. Cada métrica pode ser examinada para informações adicionais.Mint and ego dashoards, Fonte: [1]
  11. 11. Navegação Metáfora Este padrão se caracteriza por uma landing page modelada para refletir a metáfora do aplicativo. Utilizado principalmente em jogos.DoItTomorrow and TripJournal, Fonte: [1]
  12. 12. Navegação Megamenu É um grande painel sobreposto com formatação e agrupamento personalizados das opções de menu.Facebook webOS and Walmart Android, Fonte: [1]
  13. 13. Navegação Navegação secundária Os padrões primários de navegação podem ser combinados para padrões secundários de navegação.Secondary navigations patterns, Fonte: [1]
  14. 14. Navegação Carrossel de páginas Utilizado para uma navegação rapidinha em um conjunto discreto de paginas, utilizando o arrastar do dedo.Nigella Quick Collection and Zappos, Fonte: [1]
  15. 15. Navegação Carrossel de imagens Utilizado em dimensões 2D ou coverflow (uma interface tridimensional para navegação em bibliotecas), para exibir filmes, imagens em destaque.Tap’n’Scrap, The Photo Cookbook, Fonte: [1]
  16. 16. Navegação Lista expandida Permite que em uma única tela seja acessada para revelar mais informações.Android Call Log, Fonte: [1]
  17. 17. Formulários Forms Sempre precisamos utilizar formulários para diversos tipos de tarefas, desde Logins à Buscas.Form patterns, Fonte: [1]
  18. 18. Formulários Login Logins devem ter o menor número de campos de entrada, para tornar intuitivo.Photobucket and Groupon, Fonte: [1]
  19. 19. Formulários Registro Igualmente ao login o registro deve ter o menor número de campos de entrada, para tornar intuitivo. Ofereça feedback para melhor aproveitamento.PageOnce and Gowalla, Fonte: [1]
  20. 20. Formulários Checkout Ofereça um mecanismo para um checkout mais rápido em visitas posteriores, com informações de login ou para checkout.Checkout: Apple and Zappos, Fonte: [1]
  21. 21. Formulários Busca Como outros padrões de formulário, os critérios de busca devem ser limitados somente a campos essenciais.Kayak and Open Table, Fonte: [1]
  22. 22. Tabelas e listas Tabelas Utilizados para apresentar dados em vários formatos em aplicativos que necessitem.Table patterns, Fonte: [1]
  23. 23. Tabelas e listas Tabela básica Está é só uma tabela padrão com cabeçalhos de coluna fixos e um layout em grade.MicroStrategy Mobile and FanGraphs Baseball, Fonte: [1]
  24. 24. Tabelas e listas Tabela sem cabeçalho A tabela sem cabeçalho é caracterizada por linhas de grossas apresentam múltiplas variáveis ​ sobre um objeto, e não rótulos de coluna.REALTOR.com and Bank of America, Fonte: [1]
  25. 25. Tabelas e listas Visão geral de dados O padrão geral mais dados refere-se a um resumo ou sumário do conteúdo da tabela exibida acima das linhas de dados individuais.Discover SpendAnalyzer, Fonte: [1]
  26. 26. Tabelas e listas Listas agrupadas O agrupamento de linhas pode tornar os dados de uma tabela mais fáceis de resumir.Mint and MicroStrategy, Fonte: [1]
  27. 27. Tabelas e listas Listas em cascatas Por razões óbvias, uma tabela de árvore seria muito complicado em uma tela do telefone, mas uma lista em cascata pode fornecer a mesma estrutura hierárquicaWineSpectator, Fonte: [1]
  28. 28. Buscas, ordenação e filtragem Busca autocompletar Digitar irá exibir automaticamente um conjunto de resultados possíveis, bastando tocar em um para selecioná-lo, e a busca será realizada.Android Marketplace and Netflix, Fonte: [1]
  29. 29. Buscas, ordenação e filtragem Busca salvas e recentes Para respeitar o esforço dos usuários utilizamos salvas e recentes fazem isso tornando mais fácil selecionar a partir de buscas anteriores.eBay and Walmart, Fonte: [1]
  30. 30. Buscas, ordenação e filtragem Formulário de ordenação Utilizado para “Refinar” as pesquisas pode-se tornar trabalhoso pois requer interação direta do usuário, confirmando sua ação.Target and Awesome Note, Fonte: [1]
  31. 31. Buscas, ordenação e filtragem Filtragem na tela A filtragem na tela é exibida com os resultados ou lista de objetivos. Onde o filtro é aplicado com apenas um toque.HeyZap and Google, Fonte: [1]
  32. 32. Buscas, ordenação e filtragem Formulário de filtro Utilizado para pesquisas mais avançadas e refinadas, onde alguns aplicativos podem se beneficiar com isto.Kayak and Zappos, Fonte: [1]
  33. 33. Convites Dica Dica pode ser utilizada em qualquer lugar da tela, pode ser exibida em qualquer local da tela não necessariamente no inicio.eBay and Android OS, Fonte: [1]
  34. 34. Convites Transparência Normalmente visto em tela inicial, uma transparência é uma camada a qual pode-se ver, com um diagrama de uso posicionado sobre o conteúdo da tela real.Pulse and Phoster, Fonte: [1]
  35. 35. Feedback Mensagem de erro Mensagens de erro devem ser expressas em linguagens simples, indicar precisamente o problema e sugerir construtivamente uma solução.TaxCaster and Mint, Fonte: [1]
  36. 36. Feedback Confirmação A confirmação deve ser fornecida quando uma ação é tomada. Procure uma maneira de fornecer feedback sem interromper o fluxo do usuário.Android Marketplace, Fonte: [1]
  37. 37. Ajuda Tour Umas da melhores soluções pois oferecem um contato ao primeiro uso mostrando as ferramentas e utilidades do aplicativo de forma interativa.Adidas miCoach, Fonte: [1]
  38. 38. Perguntas?? ? ? ?? ? ? ?
  39. 39. Agradecimentos!Imagem: http://linux-blog.org/thank-you-dear-reader/
  40. 40. Bibliografia [1] NEIL, THEREZA. Padrões de design para aplicativos móveis. São paulo: Novatec Editora; Sebastopol, CA: OReilly,2012.

×