Tutorial
Indietro

Come impostare lo stile globale della tua app


Oggi parleremo di uno strumento potentissimo per il design della tua app, il menu Stile Globale.

Il Stile Globale ti permette di gestire il design generale della tua app da un unico menu.
I colori, i caratteri e gli effetti scelti in questo menu vengono applicati ad ogni sezione dell'app.
Ma fai attenzione! Ogni modifica fatta da questo menu sarà applicata a TUTTE le sezioni della tua app.

Vediamo come appare.
Vado nel menu La mia applicazione > Design > Design globale
Clicco su Stile globale.

La prima cosa da fare è scegliere un tema di colori. 
Un tema è una combinazione di colori che si abbinano armoniosamente. Global Style offre una libreria di temi di colori.  
Per scegliere dalla libreria, clicco su "Cambia tema di colori".
Come puoi vedere, ho una scelta.
Se invece voglio modificare il mio tema attuale, clicco su Modifica, poi in fondo alla pagina, clicco su Crea un nuovo tema. 

Devo solo selezionare i miei colori; 
Ora, passiamo alla parte tipografica.
C'è una gerarchia per la visualizzazione del testo nell'app. 
Utilizziamo 8 livelli per visualizzare titoli, sottotitoli e testo dei paragrafi.
Definisco la dimensione del carattere.
Il font per ogni livello.
A seconda dei font scelti, posso anche scegliere l'opzione.

Passiamo ai pulsanti.
Per le sezioni della tua app che richiedono agli utenti di eseguire azioni, seleziono la forma dei pulsanti che voglio applicare. 

Posso vedere un'anteprima del risultato cliccando qui.

Ci sono diversi livelli di gerarchia per quanto riguarda i pulsanti nella tua app. Il design dei pulsanti dipende dal tema di colori dell'app. Per rispettare l'armonia, vengono proposte diverse varianti per ogni tema.
Ecco i diversi tipi di design per ogni livello di gerarchia:
- Livello 1: sfondo del pulsante colorato, nessun contorno.
- Livello 2: sfondo pulsante trasparente, contorno colorato e testo.
- Livello 3: sfondo del pulsante trasparente, nessun contorno.

Poi, gli effetti hover sulle immagini (presenti solo su PWA desktop)
E infine, gli elementi aggiuntivi come l'icona back che appare nell'header durante la navigazione nell'app. Puoi anche impostare questa icona quando progetti l’header.
Qui, applico le mie modifiche.

Non dimenticare che queste modifiche sostituiranno tutto il design attuale del tuo negozio, comprese le sezioni a discesa! 

Penso che la mia app sia perfetta così! E tu?
A presto per un nuovo tutorial! 
 

Video simili