![Page 1: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/1.jpg)
Padrões de Design para Aplicativos MóveisPadrões de Design para Aplicativos MóveisPadrões de Design para Aplicativos MóveisPadrões de Design para Aplicativos Móveis
Hewerson FreitasHewerson Freitas
![Page 2: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/2.jpg)
ApresentaçãoApresentação
Hewerson FreitasEstudante de Sistemas de Informação
/hewerson.freitas
![Page 3: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/3.jpg)
SumárioSumário
Navegação
Formulários
Tabelas e listas
Busca, Ordenação e filtragem
Convites
Feedback
Ajuda
![Page 4: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/4.jpg)
NavegaçãoNavegaçã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]
![Page 5: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/5.jpg)
NavegaçãoNavegação
Springboard
Servem como plataforma de partida, que se utiliza como ponto de partida para as aplicações
Facebook Springboard and Ovi Maps, Fonte: [1]
![Page 6: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/6.jpg)
NavegaçãoNavegação
Springboard
Grades de 3x3, 2x3, 2x2, 1x2 e são os layouts mais comuns.
Grid layouts for springboards, Fonte: [1]
![Page 7: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/7.jpg)
NavegaçãoNavegaçã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]
![Page 8: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/8.jpg)
NavegaçãoNavegaçã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]
![Page 9: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/9.jpg)
NavegaçãoNavegaçã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]
![Page 10: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/10.jpg)
NavegaçãoNavegaçã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]
![Page 11: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/11.jpg)
NavegaçãoNavegaçã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]
![Page 12: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/12.jpg)
NavegaçãoNavegação
Megamenu
É um grande painel sobreposto com formatação e agrupamento personalizados das opções de menu.
Facebook webOS and Walmart Android, Fonte: [1]
![Page 13: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/13.jpg)
NavegaçãoNavegaçã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]
![Page 14: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/14.jpg)
NavegaçãoNavegaçã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]
![Page 15: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/15.jpg)
NavegaçãoNavegaçã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]
![Page 16: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/16.jpg)
NavegaçãoNavegação
Lista expandida
Permite que em uma única tela seja acessada para revelar mais informações.
Android Call Log, Fonte: [1]
![Page 17: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/17.jpg)
FormuláriosFormulários
Forms
Sempre precisamos utilizar formulários para diversos tipos de tarefas, desde Logins à Buscas.
Form patterns, Fonte: [1]
![Page 18: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/18.jpg)
FormuláriosFormulários
Login
Logins devem ter o menor número de campos de entrada, para tornar intuitivo.
Photobucket and Groupon, Fonte: [1]
![Page 19: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/19.jpg)
FormuláriosFormulá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]
![Page 20: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/20.jpg)
FormuláriosFormulá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]
![Page 21: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/21.jpg)
FormuláriosFormulá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]
![Page 22: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/22.jpg)
Tabelas e listasTabelas e listas
Tabelas
Utilizados para apresentar dados em vários formatos em aplicativos que necessitem.
Table patterns, Fonte: [1]
![Page 23: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/23.jpg)
Tabelas e listasTabelas 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]
![Page 24: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/24.jpg)
Tabelas e listasTabelas 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]
![Page 25: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/25.jpg)
Tabelas e listasTabelas 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]
![Page 26: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/26.jpg)
Tabelas e listasTabelas 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]
![Page 27: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/27.jpg)
Tabelas e listasTabelas 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árquica
WineSpectator, Fonte: [1]
![Page 28: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/28.jpg)
Buscas, ordenação e filtragemBuscas, 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]
![Page 29: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/29.jpg)
Buscas, ordenação e filtragemBuscas, 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]
![Page 30: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/30.jpg)
Buscas, ordenação e filtragemBuscas, 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]
![Page 31: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/31.jpg)
Buscas, ordenação e filtragemBuscas, 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]
![Page 32: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/32.jpg)
Buscas, ordenação e filtragemBuscas, 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]
![Page 33: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/33.jpg)
ConvitesConvites
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]
![Page 34: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/34.jpg)
ConvitesConvites
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]
![Page 35: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/35.jpg)
FeedbackFeedback
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]
![Page 36: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/36.jpg)
FeedbackFeedback
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]
![Page 37: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/37.jpg)
AjudaAjuda
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]
![Page 38: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/38.jpg)
Perguntas?Perguntas?
? ?? ?? ???
![Page 39: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/39.jpg)
Agradecimentos!Agradecimentos!
Imagem: http://linux-blog.org/thank-you-dear-reader/
![Page 40: Apresentação de Padrões de Design para Aplicativos Móveis](https://reader035.vdocuments.net/reader035/viewer/2022081716/54940d8fac79590e2e8b4ad1/html5/thumbnails/40.jpg)
BibliografiaBibliografia
[1] NEIL, THEREZA. Padrões de design para aplicativos móveis. São paulo: Novatec Editora; Sebastopol, CA: O'Reilly,2012.