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

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

ApresentaçãoApresentação

Hewerson FreitasEstudante de Sistemas de Informação

hewerson.freitas@gmail.com

/hewerson.freitas

SumárioSumário

Navegação

Formulários

Tabelas e listas

Busca, Ordenação e filtragem

Convites

Feedback

Ajuda

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]

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]

NavegaçãoNavegação

Springboard

Grades de 3x3, 2x3, 2x2, 1x2 e são os layouts mais comuns.

Grid layouts for springboards, Fonte: [1]

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]

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]

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]

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]

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]

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]

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]

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]

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]

NavegaçãoNavegação

Lista expandida

Permite que em uma única tela seja acessada para revelar mais informações.

Android Call Log, Fonte: [1]

FormuláriosFormulários

Forms

Sempre precisamos utilizar formulários para diversos tipos de tarefas, desde Logins à Buscas.

Form patterns, Fonte: [1]

FormuláriosFormulários

Login

Logins devem ter o menor número de campos de entrada, para tornar intuitivo.

Photobucket and Groupon, Fonte: [1]

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]

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]

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]

Tabelas e listasTabelas e listas

Tabelas

Utilizados para apresentar dados em vários formatos em aplicativos que necessitem.

Table patterns, Fonte: [1]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

Perguntas?Perguntas?

? ?? ?? ???

Agradecimentos!Agradecimentos!

Imagem: http://linux-blog.org/thank-you-dear-reader/

BibliografiaBibliografia

[1] NEIL, THEREZA. Padrões de design para aplicativos móveis. São paulo: Novatec Editora; Sebastopol, CA: O'Reilly,2012.