Boas práticas para aplicativos android

Boas práticas para aplicativos

Android

Boas práticas para aplicativos Android

1. Usabilidade e acessibilidade2. Orientações e feedbacks3. Navegação4. Componentes

Usabilidade e acessibilidade

É importante que a

navegação seja

simples e intuitiva.

Sempre trabalhar com as

informações mais

importante primeiro.

Deixar sempre uma área de toque de

48 x 48dp.

Importante respeitar os

espaçamentos dos

elementos de até

Possibilitar que todas as

funcionalidades disponíveis pelo teclado seja

acessível no

mobile.

Com as interações

básicas de gestos.

Orientações e feedbacks

Faça os controles de

navegação de uma forma

clara e intuitiva.

Projete de uma forma que

todo tipo de interação com

o usuário indique seu

objetivo.

Quando nomear

elementos seja

consistente na

terminologia.

Sempre que possível,

fornecer textos alternativos para todas

as imagens e ícones.

Oferecer orientações e

ajuda.

Oferecer ajuda contextual

rápida e de fácil acesso de como o usuário poderá

acessar uma determinada informação.

Dê um significado para os

links específicos. Evitar usar

termos genéricos.

Legibilidade

Garantir que o app seja

visualizado em fontes grande.

Garantir que as

fontes do seu app tenha

bastante contraste.

Ofereça opções para que os

usuários daltônicos possam acessar as informações.

Combine as cores com outros elementos.

Fornecer legendas ocultas, uma transcrição ou outra alternativa

visual para elementos de

áudio ou alertas sonoros do sistema.

Navegação

Action Bar

Podemos pensar a barra de ação como um topo de um

site web.

Um espaço reservado para

logotipo, título da página e itens de

navegação.

Pode ser usado também para

notificações de itens novos, alertas em geral e trocas de

modo de visualização quando existe essa função.

Botão UP dos aplicativos

O botão UP dentro do aplicativo é

usado para voltar para uma tela

relacionada de

nível acima da atual.

Faz o usuário voltar da tela

filha para a tela pai.

Botão BACK do aparelho

O botão BACK do

aparelho ou virtual

volta para a última tela em ordem cronológica.

Reflete sempre o histórico

de navegação do aparelho

como um todo e não especificamente dentro de um app.

Fixed Tab

É um conceito de deixar os itens do

menu sempre visíveis e facilitar a navegação do usuário,

tornando-a muito mais rápida.

Ideal para quando você espera

que o usuário alterne sempre

entre um conteúdo e outro frequentemente.

Atenção:• Há uma diferença de tamanho para cada tipo de aparelho e isto faz com

que as abas fixas acomodem confortavelmente 3 itens.

Scrollable Tab

Semelhante as abas anteriores, com a difereça de fazer

swipe para a esquerda e visualizar mais opções. O ideal é usar

de 5 a 7 itens no máximo.

Navigation Drawer

Quando não há um

espaço suficiente para as

abas, a navegação lateral é uma boa alternativa.

Navegação lateral pode

mostrar mais itens de uma vez. Fica oculto esperando uma ação

do usuário.

Aplicativos com uma página inicial que poderá ser

acessada várias vezes pelo usuário e precisa ficar no topo da lista.

Recomendações:• Apps com muitos níveis de navegação;

• Navegação entre itens diferente;• Estruturas profundas de navegação;

• Reduzir a visibilidade dos destinos pouco frequente;

Nasted Navigation

Usado quando há múltiplos níveis de

navegação.

No desktop, o segundo nível de navegação deve ser alinhado com a

navegação em

camadas.

Recomendações:• Estruturas de navegação com muitas visualizações.

• Permitindo navegação rápida entre pontos de vista diferente.

Expanding navigation

drawer

Se você tem uma

hierarquia de navegação

profunda, você pode

expandir a navegação dentro do menu.

Depois da seleção de um

nível, o segundo nível é revelado abaixo.

Componentes

Bottom sheets

Há dois tipos de botões:

• Modal bottoms – são alternativas para menu ou diálogos simples. Pode conter conteúdos de outros aplicativos.

• Persistent bottoms – sempre presente no conteúdo.

Persistent bottoms:• Continuam ativos mesmo quando não é acionado pelo usuário.

• Aparecem no mesmo nível do conteúdo.

Recomendações:• Apresentar novo conteúdo em uma mesma tela.

• Apresentar conteúdo de importância equivalente ao conteúdo principal.

Modal bottoms:• Pode ser alternativa para o menu ou diálogos simples.• Podem apresentar links com conteúdo de outros apps.

Recomendações:• Apresentar ações em uma lista ou em grid é uma alternativa para o menu.

• Mostrar um menu contextual, onde não há uma ligação obvia entre os links.• Prioriza a visualização dos elementos de dentro do modal.

Tipo de botões

Há três tipos de botões:

• Floating action button – formato circular que mostra uma ação ao ser pressionado. • Raised button – Um botão retangular que mostra uma ação ao ser pressionado.

• Flat button – sempre presente no conteúdo.

Use os botões flats em caixas de diálogos para unificar a ação do

botão com o

conteúdo.

Botões em diálogos

Escolha botões em relevo ou

flat dependendo do seu layout. Adicionar espaçamento em volta do

botão flat para o usuário encontrar facilmente.

Botões em linhas

Botões de rodapé fixo

Se o seu app exigir um botão

fixo e visível para o usuário, considere usar o botão

flutuante.

Botões de rodapé fixo

Botões em relevo

Esses botões enfatizam as informações em espaços

ocupados e larguras maiores.

Botões em relevo

Botões flats

Use botões flat para barras de

ferramentas e caixas de

diálogos para evitar o excesso de informações.

Botões flats

Botões fixos de rodapé

Se o seu aplicativo necessita de

um botão fixo e que fique sempre

visível para o usuário, considere usar esta opção.

Atenção:• Nunca use cores para os botões fixos de rodapé;

Botões com sombras

Estes botões adicionam

uma dimensão para o layout flat. Enfatizam as funções em

espaços vazios ou ocupados.

Botões com sombras

Botões de alterância

Estes botões são usados para um grupo de opções

relacionadas. Organizar o layout de uma maneira que os botões façam parte de um grupo de

informações.

Requisitos:• Ter pelo menos três opções em um grupo;

• Ter um título, um ícone ou ambos;

Combinações recomendadas:

• Múltiplos e desmarcada;• Exclusivo e desmarcada;

• Exclusivo apenas;

Botões dropdown

Este tipo de botão seleciona uma

entre várias opções. O botão exibe o estado atual com uma

seta para baixo.

Botões dropdown

Os estados disponíveis podem ser

representados com cores, ícones ou textos.

Botões dropdown

Botões floating action

São usados para promover uma ação. Eles se diferenciam pela

sua forma de círculo com ícones no meio.

Atenção:• Nem todas as aplicações precisam desse botão. Um botão de floating action

representa a ação primária;• Apenas um botão primário é recomendado por tela, representando a ação mais

comum;

Use para ações

positivas como: criar, favoritar, compartilhar, navegar e

explorar.

Este botão não contém ícones da barra de ação ou

status de notificação. Não colocar elementos sobre o botão.

● O botão floating pode se tornar uma barra de ferramentas;● Podem aparecer outros itens a partir do floating;

● Podem se tornar parte de uma estrutura;● Podem se tornar uma página toda, por cima de um conteúdo;

Essa estrutura pode ser uma boa composição para conteúdos diferente.

Quando usar:• Múltiplas datas com imagens, vídeos e textos;

• Não exige comparação direta de conteúdos semelhantes;• Oferece suporte para conteúdo vertical variável;

• Pode conter conteúdos variáveis, botão e comentários;

Conteúdo

A forma de cards oferece uma melhor diagramação para tipos

variados de conteúdos.

Conteúdo

O formato pode conter um conjunto de dados únicos, como um

checklist com uma ação, uma anotação com uma ação ou uma

foto com um descritivo.

Conteúdo

Cada bloco pode conter:

● Header opcional;● Título primário;● Mídia interativa;● Texto de apoio;

● Ações;

Conteúdo

Comportamento

Os cards possuem uma largura fixa e uma altura variável. O valor máximo para a altura depende do

tamanho do dispositivo.

Gestos:• O movimento de Swipe deve ser usado de uma maneira que o movimento não

sobreponha outros gestos. Exemplo: Um card com swipe não deve conter uma galeria de imagens.

Comportamento

Este componente contém uma foto, um texto curto e uma breve

informação. Podem conter ícones.

Conteúdo

Ao tocar no elemento chips

informações detalhadas se abrem, semelhante ao

comportamento dos cards.

Dialogs

As caixas de diálogos contém textos e controles focados em uma tarefa específica. Elas informam

aos usuários sobre informações

críticas, que precisam de uma decisão.

Conteúdo

Use os diálogos com

moderação, porque eles

são ininterruptos, eles forçam o usuário a parar a sua tarefa para

focar no diálogo.

Caixas de diálogos devem sempre

manter o foco e ocupar a tela por completo, até que o usuário faça uma

ação para fechar.

Alerts

Os alertas são

mensagens

ininterruptas, que informam ao usuário sobre uma

situação importante.

Atenção:● A maioria dos alertas não precisam de títulos;

● Sempre começam com uma pergunta ao usuário;● Os botões de continuar devem deixar claro o que o usuário irar decidir;

Use títulos somente em situações de risco, como por exemplo

uma perda de conectividade. Os usuários devem entender a mensagem

com o texto e os botões de ação.

Simple menus

Menu simples exibem opções com

ações objetivas.

Simple dialogs

Confirmation dialogs

Full Free Dialogs

Divisões

Uma linha fina que divide visualmente os tipos de

conteúdos em uma tela.

Listas

As listas são mais adequadas

para apresentar um tipo de dado conjunto, tais como imagens e textos.

Conteúdo

Quando não usar:● Se o conteúdo ocupar mais de 3 linhas de texto, use o formato card;

● Se a maioria do conteúdo consiste em imagens, use grids.

Especificações:● Espaço do título de uma lista deve ser dedicado para uma ação primária;

● Posicione o conteúdo da ação primária para o lado esquerdo da lista;● Posicione as ações secundárias para o lado direito;

Microinterações:● Checkbox;

● Ligar e desligar;● Reorganizar;

● Expandir e colapsar;● Leave-behinds;

Pickers

Os pickers possibilitam

uma seleção simples de valores pré-determinados.

Progresso e atividade

O progresso determinado indica

quanto tempo a operação irá durar quando a

porcentagem completa é detectada.

Quando o progresso não é determinado. O elemento indica que o

usuário deve esperar algo terminar sem a necessidade de

indicar o tempo.

Tipos de progressos:

● Linear;● Circular;

● Circular com integração;

Um progresso linear indica sempre

uma linha 0% até 100% e nunca diminui no valor.

Linear

É representado por uma barra que

aparece e desaparece.

Linear

Controles de seleção

Controles de seleção permite o usuário

selecionar opções de ações.

Existem três tipos: checkboxes, radio buttons e switches on/off.

Sliders

Os sliders permitem aos usuários

selecionar valores dentro de

um intervalo. O menor valor fica do lado esquerdo e o maior do

lado direito.

A interação natural dos sliders faz com

que seja uma ótima escolha para configurações que refletem o nível de intensidades

como volume, brilho, cor ou saturação.

Tipos de sliders:● Sliders continuo;● Slider discreto;

Snack bars & Toats

Snackbars fornece um feedback sobre uma operação, mostrando uma

mensagem curta no topo da tela.

As mensagens podem conter uma ação.

Mostre apenas uma mensagem por tela. Elas aparecem sobre a maioria dos elementos. Podem

desaparecer automaticamente ou com um toque na tela.

As snackbars saem da tela automaticamente. Por questões de

usabilidade, não pode ser apenas um único caminho para acessar uma

determinada ação.

Comportamento

Elas não podem ser persistentes e nem empilhar na tela.

Comportamento

Mostra uma sequência lógica de passos para

completar uma ação.

Os passos podem ser:

● Editável;● Não editável;

● Opcional;

As tabs fornecem uma indicação para

exibir um conteúdo agrupado.

A nomenclatura deve descrever de uma maneira sucinta o que é aquele

grupo de conteúdo.

Use as tabs para

organizar conteúdos em um nível acima, por exemplo, para

apresentar seções diferentes de um jornal.

Quando usar

Não use as tabs em conteúdos que suportam o gesto

swipe, porque este movimento é usado para navegacão entre as abas.

Quando não usar

Tipos de tabs:● Fixas;

● Scrollable tabs;

Toolbars

Barra de ferramentas ficam no

topo do lado esquerdo da tela e quando

o conteúdo aparece, a barra nunca passa para o lado oposto.

Tool tips

Tooltips aparecem quando pressionados ou clicado.

Contém textos contextuais dos elementos em questão.

Conteúdo

Conteúdo retirado do Google Material Design.

Espero ter ajudado! :)

Traduzido por Juliana Akemi

Boas práticas para aplicativos android

Design

Transcript of Boas práticas para aplicativos android

Aplicativos Móveis iOS + Android. Splash Enquanto o aplicativo é carregado, a tela de splash é exibida.

€¦ · Web viewUso de aplicativos Android para gerenciar e otimizar o trabalho - I. Uso de aplicativos Android para gerenciar e otimizar o trabalho - II. Microsoft Word Básico

Desenvolvendo Aplicativos Android Matadores

Desenvolvimento de websites boas práticas

Palestra Iniciando o desenvolvimento de aplicativos com o Club do Android

Boas Práticas Para SEO Local

MotoX GSG pt 68017757021A.fm Page 1 Tuesday, July 22, 2014 ... · filmes, livros, aplicativos e jogos Android. Localize: Aplicativos > Play Store Nota: o conteúdo pode não estar

Ataques MITM a aplicativos android: abusando da confiança dos desenvolvedores

Estudo de métricas de código fonte no sistema Android e ... · Marcos Ronaldo Pereira Júnior Estudo de métricas de código fonte no sistema Android e seus aplicativos/ Marcos

Capítulo de Amostra Desenvolvimento de Aplicativos Android Para Leigos

Boas práticas internacionais no turismo

Uma abordagem de teste para aplicativos Android utilizando ...

DESENVOLVIMENTO DE APLICATIVOS CR CAMPEIRO MÓBILE - … · Réquia, Gustavo Heydt Desenvolvimento de aplicativos CR Campeiro Móbile - Caso de teste: Sistema Operacional Android

Boas Práticas em Design de Interfaces

Começando a desenvolver aplicativos para Android

Desenvolvimento de Aplicativos Android

Desenvolvimento de Aplicativos Mobile...Ambientes de desenvolvimento ANDROID IOS WINDOWS PHONE Outras ferramentas para criar Apps Ferramentas Online Fábrica de Aplicativos AppMachine

Tipos de Aplicativos - Afropython Conf · Tipos de Aplicativos ... Interações avançadas UI Native Look and Feel Usabilidade Novas Features São eles: Android (Java), iOS (Swift),

BAM - Usabilidade e melhores práticas - André Venâncio

aplicativos para Android Gerenciamento de