Boas práticas para aplicativos android
-
Upload
juliana-akemi -
Category
Design
-
view
523 -
download
1
Transcript of Boas prá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
Boas práticas para aplicativos Android
É importante que a
navegação seja
simples e intuitiva.
Boas práticas para aplicativos Android
Sempre trabalhar com as
informações mais
importante primeiro.
Boas práticas para aplicativos Android
Deixar sempre uma área de toque de
48 x 48dp.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Importante respeitar os
espaçamentos dos
elementos de até
8dp.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Possibilitar que todas as
funcionalidades disponíveis pelo teclado seja
acessível no
mobile.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Com as interações
básicas de gestos.
Boas práticas para aplicativos Android
Orientações e feedbacks
Boas práticas para aplicativos Android
Faça os controles de
navegação de uma forma
clara e intuitiva.
Boas práticas para aplicativos Android
Projete de uma forma que
todo tipo de interação com
o usuário indique seu
objetivo.
Boas práticas para aplicativos Android
Quando nomear
elementos seja
consistente na
terminologia.
Boas práticas para aplicativos Android
Sempre que possível,
fornecer textos alternativos para todas
as imagens e ícones.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Oferecer orientações e
ajuda.
Boas práticas para aplicativos Android
Oferecer ajuda contextual
rápida e de fácil acesso de como o usuário poderá
acessar uma determinada informação.
Boas práticas para aplicativos Android
Dê um significado para os
links específicos. Evitar usar
termos genéricos.
Boas práticas para aplicativos Android
Legibilidade
Boas práticas para aplicativos Android
Garantir que o app seja
visualizado em fontes grande.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Garantir que as
fontes do seu app tenha
bastante contraste.
Boas práticas para aplicativos Android
Ofereça opções para que os
usuários daltônicos possam acessar as informações.
Combine as cores com outros elementos.
Boas práticas para aplicativos Android
Fornecer legendas ocultas, uma transcrição ou outra alternativa
visual para elementos de
áudio ou alertas sonoros do sistema.
Navegação
Action Bar
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Podemos pensar a barra de ação como um topo de um
site web.
Boas práticas para aplicativos Android
Um espaço reservado para
logotipo, título da página e itens de
navegação.
Boas práticas para aplicativos Android
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
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
O botão UP dentro do aplicativo é
usado para voltar para uma tela
relacionada de
nível acima da atual.
Boas práticas para aplicativos Android
Faz o usuário voltar da tela
filha para a tela pai.
Botão BACK do aparelho
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
O botão BACK do
aparelho ou virtual
volta para a última tela em ordem cronológica.
Boas práticas para aplicativos Android
Reflete sempre o histórico
de navegação do aparelho
como um todo e não especificamente dentro de um app.
Fixed Tab
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
É 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.
Boas práticas para aplicativos Android
Ideal para quando você espera
que o usuário alterne sempre
entre um conteúdo e outro frequentemente.
Boas práticas para aplicativos Android
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
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
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
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Quando não há um
espaço suficiente para as
abas, a navegação lateral é uma boa alternativa.
Boas práticas para aplicativos Android
Navegação lateral pode
mostrar mais itens de uma vez. Fica oculto esperando uma ação
do usuário.
Boas práticas para aplicativos Android
Aplicativos com uma página inicial que poderá ser
acessada várias vezes pelo usuário e precisa ficar no topo da lista.
Boas práticas para aplicativos Android
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
Boas práticas para aplicativos Android
Usado quando há múltiplos níveis de
navegação.
Boas práticas para aplicativos Android
No desktop, o segundo nível de navegação deve ser alinhado com a
navegação em
camadas.
Boas práticas para aplicativos Android
Recomendações:• Estruturas de navegação com muitas visualizações.
• Permitindo navegação rápida entre pontos de vista diferente.
Boas práticas para aplicativos Android
Expanding navigation
drawer
Boas práticas para aplicativos Android
Se você tem uma
hierarquia de navegação
profunda, você pode
expandir a navegação dentro do menu.
Boas práticas para aplicativos Android
Depois da seleção de um
nível, o segundo nível é revelado abaixo.
Boas práticas para aplicativos Android
Componentes
Bottom sheets
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Persistent bottoms:• Continuam ativos mesmo quando não é acionado pelo usuário.
• Aparecem no mesmo nível do conteúdo.
Boas práticas para aplicativos Android
Recomendações:• Apresentar novo conteúdo em uma mesma tela.
• Apresentar conteúdo de importância equivalente ao conteúdo principal.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Modal bottoms:• Pode ser alternativa para o menu ou diálogos simples.• Podem apresentar links com conteúdo de outros apps.
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Tipo de botões
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
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
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
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
Boas práticas para aplicativos Android
Botões em linhas
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Botões de rodapé fixo
Boas práticas para aplicativos Android
Botões em relevo
Esses botões enfatizam as informações em espaços
ocupados e larguras maiores.
Boas práticas para aplicativos Android
Botões em relevo
Boas práticas para aplicativos Android
Botões flats
Use botões flat para barras de
ferramentas e caixas de
diálogos para evitar o excesso de informações.
Boas práticas para aplicativos Android
Botões flats
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Atenção:• Nunca use cores para os botões fixos de rodapé;
Botões fixos de rodapé
Boas práticas para aplicativos Android
Botões fixos de rodapé
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Botões com sombras
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Requisitos:• Ter pelo menos três opções em um grupo;
• Ter um título, um ícone ou ambos;
Botões de alterância
Boas práticas para aplicativos Android
Combinações recomendadas:
• Múltiplos e desmarcada;• Exclusivo e desmarcada;
• Exclusivo apenas;
Botões de alterância
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Botões dropdown
Os estados disponíveis podem ser
representados com cores, ícones ou textos.
Boas práticas para aplicativos Android
Botões dropdown
Boas práticas para aplicativos Android
Botões dropdown
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Botões floating action
Boas práticas para aplicativos Android
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;
Botões floating action
Boas práticas para aplicativos Android
Botões floating action
Boas práticas para aplicativos Android
Botões floating action
Use para ações
positivas como: criar, favoritar, compartilhar, navegar e
explorar.
Boas práticas para aplicativos Android
Botões floating action
Boas práticas para aplicativos Android
Botões floating action
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.
Boas práticas para aplicativos Android
Botões floating action
Boas práticas para aplicativos Android
Botões floating action
● 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;
Boas práticas para aplicativos Android
Botões floating action
Cards
Boas práticas para aplicativos Android
Essa estrutura pode ser uma boa composição para conteúdos diferente.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
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;
Boas práticas para aplicativos Android
Conteúdo
A forma de cards oferece uma melhor diagramação para tipos
variados de conteúdos.
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Conteúdo
Boas práticas para aplicativos Android
Conteúdo
Boas práticas para aplicativos Android
Cada bloco pode conter:
● Header opcional;● Título primário;● Mídia interativa;● Texto de apoio;
● Ações;
Boas práticas para aplicativos Android
Conteúdo
Boas práticas para aplicativos Android
Comportamento
Os cards possuem uma largura fixa e uma altura variável. O valor máximo para a altura depende do
tamanho do dispositivo.
Boas práticas para aplicativos Android
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
Chips
Boas práticas para aplicativos Android
Este componente contém uma foto, um texto curto e uma breve
informação. Podem conter ícones.
Conteúdo
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Ao tocar no elemento chips
informações detalhadas se abrem, semelhante ao
comportamento dos cards.
Dialogs
Boas práticas para aplicativos Android
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
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
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
Boas práticas para aplicativos Android
Os alertas são
mensagens
ininterruptas, que informam ao usuário sobre uma
situação importante.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
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;
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Simple menus
Boas práticas para aplicativos Android
Menu simples exibem opções com
ações objetivas.
Boas práticas para aplicativos Android
Simple dialogs
Boas práticas para aplicativos Android
Confirmation dialogs
Boas práticas para aplicativos Android
Full Free Dialogs
Boas práticas para aplicativos Android
Divisões
Boas práticas para aplicativos Android
Uma linha fina que divide visualmente os tipos de
conteúdos em uma tela.
Boas práticas para aplicativos Android
Listas
Boas práticas para aplicativos Android
As listas são mais adequadas
para apresentar um tipo de dado conjunto, tais como imagens e textos.
Conteúdo
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
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;
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Microinterações:● Checkbox;
● Ligar e desligar;● Reorganizar;
● Expandir e colapsar;● Leave-behinds;
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Pickers
Boas práticas para aplicativos Android
Os pickers possibilitam
uma seleção simples de valores pré-determinados.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Progresso e atividade
Boas práticas para aplicativos Android
O progresso determinado indica
quanto tempo a operação irá durar quando a
porcentagem completa é detectada.
Boas práticas para aplicativos Android
Quando o progresso não é determinado. O elemento indica que o
usuário deve esperar algo terminar sem a necessidade de
indicar o tempo.
Boas práticas para aplicativos Android
Tipos de progressos:
● Linear;● Circular;
● Circular com integração;
Boas práticas para aplicativos Android
Um progresso linear indica sempre
uma linha 0% até 100% e nunca diminui no valor.
Linear
Boas práticas para aplicativos Android
É representado por uma barra que
aparece e desaparece.
Linear
Controles de seleção
Boas práticas para aplicativos Android
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
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Tipos de sliders:● Sliders continuo;● Slider discreto;
Boas práticas para aplicativos Android
Snack bars & Toats
Boas práticas para aplicativos Android
Snackbars fornece um feedback sobre uma operação, mostrando uma
mensagem curta no topo da tela.
As mensagens podem conter uma ação.
Boas práticas para aplicativos Android
Mostre apenas uma mensagem por tela. Elas aparecem sobre a maioria dos elementos. Podem
desaparecer automaticamente ou com um toque na tela.
Uso
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
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
Boas práticas para aplicativos Android
Elas não podem ser persistentes e nem empilhar na tela.
Comportamento
Boas práticas para aplicativos Android
Steps
Boas práticas para aplicativos Android
Mostra uma sequência lógica de passos para
completar uma ação.
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Os passos podem ser:
● Editável;● Não editável;
● Opcional;
Tabs
Boas práticas para aplicativos Android
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.
Boas práticas para aplicativos Android
Use as tabs para
organizar conteúdos em um nível acima, por exemplo, para
apresentar seções diferentes de um jornal.
Quando usar
Boas práticas para aplicativos Android
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
Boas práticas para aplicativos Android
Boas práticas para aplicativos Android
Tipos de tabs:● Fixas;
● Scrollable tabs;
Toolbars
Boas práticas para aplicativos Android
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.
Uso
Boas práticas para aplicativos Android
Tool tips
Boas práticas para aplicativos Android
Tooltips aparecem quando pressionados ou clicado.
Contém textos contextuais dos elementos em questão.
Conteúdo
Boas práticas para aplicativos Android
Conteúdo retirado do Google Material Design.