Dicas sobre interface visual para desenvolvedores mobile

| android , mobile , ui , ux , mobile | Reading time 3 min

Aprenda alguns macetes para deixar seus aplicativos Android mais atraentes em um passe de mágica.

Bem, já vou começar dizendo que não sou nenhuma especialista em design e muito menos que lí inúmeros livros que tratam do assunto. Isso me torna uma pessoa totalmente sem credibilidade? Não necessariamente, mas vou deixar este julgamento a você caro leitor.

Para construir a interface visual do meu app de Cálculo de Tributos PJ, me embasei na aplicação BoaLista, pois na minha opinião ela tem uma interface muito agradável além de uma usabilidade muito boa.

Basicamente eu segui as seguintes ideias:

  • Usar poucas bordas e que elas sejam finas.
  • Cores claras é uma boa ideia (51 !?).
  • Cantos arredondados, mas nem tanto.
  • Campos de entrada de informações devem visualmente estar na mesma separação visual label e valor digitado, e ainda há aquela possibilidade de ao começar a digitação, sumir com o label, o tal do android:hint.
  • Não criar muitas separações visuais pois quando se divide um espaço e vários sub-espaços, dá a impressão que o espaço é menor do que ele realmente é. Tem também a questão de que criar divisões, por si só só já ocupa espaço == as bordas.

Os demais apps que estou desenvolvendo, costumo dar uma olhada antes no site AndroidNiceties.tumblr.com que lista os melhores design mobile do momento!! Lá é possível observar os apps e achar padrões de design e se você não é expert no assunto como eu e também é desenvolvedor, pelo menos de "pattern" você entende :)

Abaixo mostro um comparativo do design de telas das primeiras versões da Calculadora de Tributos PJ e da última, que está hoje na PlayStore. Exatamente a esquerda temos a versão 2 e a direita temos a versão 6.

CalcPJ Versão 2 CalcPJ Versão 6

Ambas as imagens foram extraídas do app sendo executado no mesmo device, um Samsung Galaxy Note. É possível observar que:

  • A versão 6 usa cores  mais claras;
  • Não possui bordas explícitas como a borda amarela da versão 2;
  • A fonte é um pouco menor;
  • A tabela que contém o cálculo usa intercalação de cores para melhor guiar os olhos do usuário para ver o valor algum imposto e possui bordas arredondadas
  • O design do botão está mais dentro da paleta de cores do app;
  • Introduzido o patter layout de menu do Android;
  • O label do campo e a parte de digitação estão no mesmo espaço visual;

Por fim, ainda há muito o que melhorar, no entanto, para a versão 6 foram feitas uma série de mudanças que aos meus olhos soam melhores do que as versões anteriores.

O feedback dos usuários quanto a nova versão foi muito positivo, é possível ver nos comentários do app na PlayStore.

Referências