Boas práticas para aplicativos android

Boas práticas para
aplicativos
Android

Boas práticas para aplicativos Android
1. Usabilidade e acessibilidade
2. Orientações e feedbacks
3. Navegação
4. Componentes

É importante que a
navegaçãoseja
simples e intuitiva.

Sempretrabalhar com as
informaçõesmais
importanteprimeiro.

Deixar sempre uma área de toque de
48 x 48dp.

Importante respeitar os
espaçamentosdos
elementosde até
8dp.

Possibilitar que todas as
funcionalidades
disponíveis pelo teclado seja
acessívelno
mobile.

Com as interações
básicasde gestos.

Faça os controlesde
navegaçãode uma forma
clarae intuitiva.

Projetede uma forma que
todo tipo de interaçãocom
o usuário indiqueseu
objetivo.

Quando nomear
elementosseja
consistentena
terminologia.

Sempre que possível,
fornecer textos
alternativospara todas
as imagens e ícones.

Oferecer orientaçõese
ajuda.

Oferecer ajudacontextual
rápidae de fácil acesso de
como o usuário poderá
acessaruma determinada
informação.

Dê um significadopara os
linksespecíficos. Evitar usar
termos genéricos.

Garantir que o appseja
visualizado em fontes
grande.

Garantirque as
fontes do seu apptenha
bastante contraste.

Ofereça opçõespara que os
usuários daltônicos
possam acessar as informações.
Combine as corescom outros
elementos.

Fornecer legendasocultas,
uma transcrição ou outra alternativa
visualpara elementos de
áudioou alertas sonoros do
sistema.

Podemos pensar a barra de
ação como um topode um
site web.

Um espaçoreservado para
logotipo, títuloda
página e itens de
navegação.

Pode ser usado também para
notificaçõesde itens
novos, alertas em geral e trocas de
modo de visualização quando existe
essa função.

O botão UPdentro do aplicativo é
usado para voltarpara uma tela
relacionadade
nívelacima da atual.

Faz o usuáriovoltar da tela
filhapara a tela pai.

O botão BACKdo
aparelhoou virtual
volta para a últimatela em
ordem cronológica.

Reflete sempre o histórico
de navegaçãodo aparelho
como um todoe não
especificamente dentro de um app.

É um conceito de deixar os itens do
menusempre 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 alternesempre
entre um conteúdoe 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.

Semelhanteas abas
anteriores, com a difereça de fazer
swipepara a esquerda e
visualizar mais opções. O ideal é usar
de 5 a 7 itens no máximo.

Quando nãohá um
espaçosuficiente para as
abas, a navegação lateralé
uma boa alternativa.

Navegação lateralpode
mostrar maisitensde 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;

Usado quando há múltiplos
níveisde
navegação.

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

Recomendações:
• Estruturas de navegação com muitas visualizações.
• Permitindo navegação rápida entre pontos de vista diferente.

Se você tem uma
hierarquiade navegação
profunda, você pode
expandira navegação
dentro do menu.

Depois da seleçãode um
nível, o segundonível
é revelado abaixo.

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.

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 flatsem caixas de
diálogos para unificar a ação do
botãocom o
conteúdo.
Botões em diálogos

Escolha botões em relevoou
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 em linhas

Botões de rodapé fixo
Se o seu appexigir um botão
fixoe visível para o usuário,
considere usar o botão
flutuante.

Botões de rodapé fixo

Botões em relevo
Esses botões enfatizamas
informações em espaços
ocupadose larguras
maiores.

Botões em relevo

Botões flats
Use botões flat para barras de
ferramentase caixas de
diálogospara evitar o
excesso de informações.

Botões flats

Botões fixos de rodapé
Se o seuaplicativo necessita de
um botão fixoe que fique sempre
visívelpara 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ãopara 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áriasopçõ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írculocom í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
positivascomo:
criar, favoritar, compartilhar, navegar e
explorar.

Este botão não contém
íconesda 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 cardsoferece uma
melhor diagramação para tipos
variados de conteúdos.

Conteúdo
O formato pode conter um conjunto de
dados únicos, como um
checklistcom 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;

Comportamento
Os cardspossuem 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çõesdetalhadas
se abrem, semelhante ao
comportamento
dos cards.

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 focoe ocupar a tela por
completo, até que o usuário faça uma
açãopara fechar.

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ítulossomente 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.

Menu simples exibem
opções com
açõesobjetivas.

Uma linha finaque divide
visualmente os tipos de
conteúdosem uma tela.

As listassã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;

Os pickers possibilitam
uma seleção simplesde
valores pré-determinados.

O progresso determinado indica
quanto tempoa
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 permite o usuário
selecionar opções
de ações.
Existem três tipos: checkboxes, radio
buttons e switches on/off.

Os sliders permitem aos usuários
selecionar valoresdentro 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
escolhapara configurações
que refletem o nível de intensidades
como volume, brilho, cor ou saturação.

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

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 umamensagem
por tela. Elas aparecem sobre a
maioria dos elementos. Podem
desaparecer automaticamente ou
com um toque na tela.
Uso

As snackbars saemda 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 podemser
persistentes e nem empilhar na tela.
Comportamento

Mostra uma sequência
lógicade 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.

Useas tabs para
organizar conteúdos em
um nível acima, por exemplo, para
apresentar seções diferentes de um
jornal.
Quando usar

Não useas 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;

Barra de ferramentas ficam no
topo do lado
esquerdoda tela e quando
o conteúdo aparece, a barra nunca
passa para o lado oposto.
Uso

Tooltipsaparecem 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

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (10)

Semelhante a Boas práticas para aplicativos android

Semelhante a Boas práticas para aplicativos android (20)

Boas práticas para aplicativos android