Dicas e sugestões

Publicado em 28 de fevereiro de 2014

Melhore a experiência do usuário do seu app com as dicas a seguir.

Piscar quando o aplicativo é carregado

Já notou um flash em preto e branco quando um aplicativo é carregado com uma WebView? Isso pode ser causado pelo carregamento da cor de plano de fundo da janela do app, que geralmente é definido no tema, seguido pelo flash branco do plano de fundo da WebView. Isso ocorre antes que a WebView carregue qualquer conteúdo, incluindo o CSS.

Para remover o flash branco, defina a cor de plano de fundo da WebView. O único atraso na exibição dessa cor está no app para dispositivos móveis para desenhar a WebView.

mWebView.setBackgroundColor(Color.parseColor("#3498db"));

No Android, é recomendável definir valores de cor em um arquivo res/values/colors.xml, conforme descrito no Guia de recursos de apps Android. Se você escolher uma cor definida nos recursos do aplicativo, o código poderá ser parecido com este:

mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name));

Feedback por toque

Uma diferença entre os aplicativos para dispositivos móveis e da Web é a falta de feedback tátil em muitos apps da Web.

Para resolver esse problema, use a pseudoclasse :active.

Por exemplo, se você tiver um botão com o seguinte estilo:

.btn {
  display: inline-block;
  position: relative;
  background-color: #f39c12;
  padding: 14px;

  border-radius: 5px;
  border-bottom-style: solid;
  border-width: 4px;
  border-color: #DA8300;
}

O estado pressionado pode ser semelhante a este:

.btn:active {
  background-color: #E68F05;
  border-color: #CD7600;
  border-width: 2px;
  top: 2px;
}

Isso escurece um pouco a cor do plano de fundo e da borda e diminui o tamanho da borda para que pareça que o botão está afundando na página. A propriedade top ajusta a posição para equilibrar a borda menor.

Se você usa o Sass, pode usar os mixins de escurecimento e clareamento para alterar as cores dos elementos sem precisar saber o valor hexadecimal exato. Ou você pode usar ferramentas on-line, como hexcolortool.com.

Destaques do sistema

Muitos user agents adicionam alguma forma de feedback tátil aos elementos, o que evita a necessidade de definir estilos específicos. Na WebView, você pode notar uma cor laranja nos elementos ou um anel laranja ao redor de links e elementos.

Se você adicionar um feedback personalizado de toque e foco, poderá substituir os padrões com as seguintes propriedades CSS:

-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
outline: none;

E defina suas próprias cores:

button {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0,0,0, 0.0);
}

button:focus {
  background-color: #E68F05;
  border-color: #DA8300;
}

button:active {
  background-color: #FFA91F;
  border-color: #E68F05;
}

Isso muda a cor do botão com base no estado, incluindo um estado padrão, de foco e ativo (ou "pressionado").

Além dos botões, considere definir essas propriedades em campos de entrada e tags âncora.