Planejamento de interfaces para Android
Comece o design de aplicativos gratuito para Android com um plano claro de telas
Uma ideia promissora para Android pode se tornar uma interface confusa quando a navegação, as áreas de toque e os controles do sistema são considerados tarde demais. Use o App Design para planejar primeiro as telas e interações. Depois, confira suas escolhas com base nas diretrizes atuais do Android antes do desenvolvimento.
O desafio desse cenário
Um mockup atraente não basta se deixar de fora a ação de voltar, o comportamento do teclado ou o estado exibido quando faltam dados. Comece com uma tarefa e as telas necessárias para concluí-la.
- ideias de design de aplicativos móveis Explore cenários de uso em dispositivos móveis que possam dar um propósito mais específico a um plano de telas para Android.
- modelos gratuitos de design de aplicativos móveis Veja como avaliar um modelo para dispositivos móveis antes de adaptar o layout à sua tarefa.
- como criar o design da interface de um aplicativo Siga um processo tela por tela para transformar uma tarefa em uma interface.
Um plano de design feito no navegador ajuda você a pensar sobre uma interface para Android. Ele não substitui a documentação da plataforma, a implementação nem os testes em um dispositivo.
Não é um aplicativo Android instalável
Um plano de telas ou mockup não é um APK nem um aplicativo publicado. Ele não implementa armazenamento, permissões, notificações ou outros recursos do dispositivo.
O que fazer em vez disso
Trate o design como uma especificação para o desenvolvimento e teste os fluxos implementados em dispositivos Android.
Não há aprovação automática de conformidade com padrões
Uma tela visualmente convincente ainda pode estar em desacordo com as recomendações atuais de navegação, acessibilidade ou barras do sistema do Android.
O que fazer em vez disso
Consulte as diretrizes relevantes do Android e do Material. Depois, verifique o contraste, a legibilidade do texto, as áreas de toque e o comportamento da ação de voltar.
Sem comprovação a partir de uma imagem estática
Um exemplo bem-acabado não mostra se o teclado encobre um botão, se um rótulo longo quebra em outra linha ou se uma tela vazia explica o que fazer em seguida.
O que fazer em vez disso
Documente os estados de interação e valide-os com um protótipo ou uma versão funcional.
3 fluxos de trabalho concretos
Escolha um destes pontos de partida com base no que está menos definido: a jornada, o formulário ou o comportamento do conteúdo em uma tela pequena.
-
1
Mapeie a jornada do primeiro uso
Defina o objetivo do usuário e, em seguida, esboce uma tela de entrada, a ação principal e um estado de conclusão. Indique para onde a navegação de voltar do Android deve levar o usuário. Deixe solicitações opcionais de conta ou permissão fora do fluxo principal, a menos que a tarefa realmente dependa delas.
-
2
Projete uma tarefa de entrada de dados
Liste cada campo, seu tipo de teclado, a mensagem de validação e o comportamento ao salvar antes de organizar os controles. Verifique o que permanece visível quando o teclado abre e ofereça aos usuários uma maneira de corrigir erros sem perder as informações inseridas.
-
3
Adapte uma tela de conteúdo
Comece pelas informações mais importantes e depois planeje os estados de carregamento, tela vazia e erro. Revise textos longos, configurações de fonte maior e larguras estreitas. Decida qual ação deve permanecer em destaque sem depender apenas da cor para explicá-la.
Exemplo de resultado
Considere um aplicativo de acompanhamento de hábitos cuja tela inicial responde a uma pergunta: o que devo fazer hoje? O briefing de design deve abranger mais do que a visualização padrão com conteúdo.
Use este par como ilustração, não como uma transformação verificada nem como um arquivo Android pronto para implementação. Um resultado útil para o aplicativo de acompanhamento de hábitos especificaria uma lista de tarefas de hoje, uma ação de adicionar com nome claro, uma explicação para a tela vazia e o que acontece depois que um hábito é salvo. Também descreveria a navegação de voltar a partir do formulário e o que o usuário vê se ocorrer uma falha ao salvar. Compare essas decisões com as diretrizes atuais da plataforma e teste-as em um protótipo.
Conceito inicialAnálise focada no AndroidObservações sobre conformidade
Antes de tratar qualquer design de aplicativos como uma especificação para Android, consulte a documentação mais recente do Android e do Material sobre navegação, elementos do sistema, acessibilidade e permissões. Sempre que possível, teste com texto ampliado e tecnologias assistivas. App Design oferece um ponto de partida para o planejamento; o destino do link aberto no navegador pode ter seus próprios termos de acesso, e um conceito, por si só, não comprova conformidade.
Leve o planejamento das telas para uma análise da plataforma
- Documente os estados normal, vazio, de carregamento e de erro.
- Verifique a navegação de voltar e o comportamento do teclado.
- Valide a experiência implementada em dispositivos.
Perguntas frequentes sobre o cenário
Você pode começar escrevendo uma descrição das telas e mapeando a tarefa em um fluxo de trabalho no navegador. Não presuma que todos os recursos do destino vinculado estejam disponíveis gratuitamente; confira as condições de acesso atuais antes de contar com eles.
Não. Um design descreve telas e interações, enquanto um aplicativo Android funcional exige implementação, testes em dispositivos e as etapas de publicação aplicáveis. Não confunda o planejamento das telas com o que já foi desenvolvido.
Verifique se a navegação e os controles são adequados à tarefa, em vez de copiar o layout sem alterações. Confira o dimensionamento do texto, as áreas de toque, as barras do sistema e o comportamento do botão Voltar de acordo com as diretrizes atuais do Android.
Comece pela tela inicial, pela tela em que a tarefa principal acontece e por uma tela que mostre claramente o resultado ou a confirmação. Depois, adicione os estados de vazio, carregamento e erro que afetam essa mesma jornada.