Suggerimenti utili

Data di pubblicazione: 28 febbraio 2014

Migliora l'esperienza utente della tua applicazione con i seguenti suggerimenti.

Sfarfallio durante il caricamento dell'applicazione

Hai mai notato un lampo in bianco e nero quando un'applicazione viene caricata con una WebView? Questo potrebbe essere causato dal caricamento del colore di sfondo della finestra dell'app, solitamente impostato nel tema, seguito dal lampo bianco dello sfondo di WebView. Ciò avviene prima che WebView carichi i contenuti, incluso il CSS.

Per rimuovere il flash bianco, imposta il colore di sfondo di WebView. L'unico ritardo nella visualizzazione di questo colore si verifica nell'app mobile per disegnare WebView.

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

Su Android, è buona norma definire i valori di colore in un res/values/colors.xml file, come descritto nella guida alle risorse per le app Android. Se scegli un colore definito nelle risorse dell'applicazione, il codice potrebbe avere il seguente aspetto:

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

Feedback al tocco

Una differenza tra le applicazioni mobile e web è la mancanza di feedback tocco in molte app web.

Per risolvere il problema, utilizza la pseudo classe :active.

Ad esempio, se hai un pulsante con il seguente stile:

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

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

Lo stato premuto potrebbe avere il seguente aspetto:

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

In questo modo, il colore di sfondo e il colore del bordo si scuriscono leggermente e le dimensioni del bordo diminuiscono, dando l'impressione che il pulsante si inserisca nella pagina. La proprietà top modifica la posizione per bilanciare il bordo più piccolo.

Se utilizzi Sass, puoi usare i mixin darken e lighten per modificare i colori degli elementi senza dover conoscere il valore esadecimale esatto. In alternativa, puoi utilizzare strumenti online come hexcolortool.com.

Momenti salienti del sistema

Molti user agent aggiungono una forma di feedback tocco agli elementi, il che evita di dover definire stili specifici. In WebView potresti notare un colore arancione sugli elementi o un anello arancione intorno a link ed elementi.

Se aggiungi feedback personalizzati per tocco e messa a fuoco, puoi sostituire i valori predefiniti con le seguenti proprietà CSS:

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

E imposta i tuoi colori:

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;
}

In questo modo, il colore del pulsante cambia in base allo stato, incluso uno stato predefinito, attivo e attivo (o "premuto").

Oltre ai pulsanti, ti consigliamo di impostare queste proprietà sui campi di immissione e sui tag di ancoraggio.