Categorie
2 Design dell'app 2.1 Design generale dell'app Guida lamiaapp.shop Uncategorized

Crea un backup del tuo design

Crea un backup del tuo design

1. Che cos’é un backup?

 
Questa funzionalità ti consente di fare un backup del tuo design.

Il backup NON include:
  • Contenuti CMS (articoli, mappe, video, ecc …)
  • Statistiche
  • Utenti, coupon, business, loyalty 
Dopo aver eseguito un backup, verranno ripristinati solo gli elementi di design del progetto.
Il sistema di backup è disponibile nel menu a scorrimento di sinistra Impostazioni> Backup

2. Crea un backup

 
Non esiste un backup automatico, ma solo manuale.
Per creare un backup è necessario cliccare sul pulsante verde “Crea un backup“.
Durante il processo la dicitura “Backup in corso” apparirà nell’angolo destro della pagina.

3. Ripristina il backup

 
Al termine del processo, verrà visualizzato il backup e sarà possibile ripristinarlo, il che significa che verranno reintegrate tutte le impostazioni di design presenti prima di effettuare il backup.
Puoi anche eliminare questo backup dall’elenco.

4. Eliminare il backup

 
È possibile salvare fino a 3 backup. Possono essere cancellati manualmente.
Se raggiungi il limite, dovrai eliminare manualmente un backup prima di crearne uno nuovo.

Avvertenza: l’eliminazione di un backup è PERMANENTE.
Un backup non può mai essere recuperato una volta eliminato.
 

 

Categorie
2 Design dell'app 2.1 Design generale dell'app Guida lamiaapp.shop Uncategorized

Background

Background dell’app

Le parti di sfondo dell’app sono fisse indipendentemente dalla pagina visualizzata e includono il colore di sfondo, i separatori, i pulsanti, gli effetti e i margini dell’applicazione.

Non confonderlo con lo sfondo di ogni sezione, tenendo presente che la prima pagina corrisponde alla Home page.

Per configurare lo sfondo dell’app:
1. Vai al menu a tendina sinistro La mia app > DESIGN > Design generale
2. Fai clic su “Background” sulla colonna di destra

1. Background

 
1. Aggiungi sempre un colore, anche se scegli di usare un’immagine di sfondo, perché verrà utilizzato per l’opzione “Premere per aggiornare“.
2. Aggiungi un’immagine (opzionale)

Il formato per l’immagine di sfondo è:
– 1242 X 2208 per gli smartphone iOS ed Android
– 1536 X 2048 in portrait e 2048 X 1536 in lanscape per iPad, se hai un’offerta nativa iOS Premium.

– Clicca su “Libreria”, accederai alla libreria Unsplash (licenza Creative Commons Zero). Non esitare ad utilizzarle, sono belle e gratuite. 

Nota:
Ricorda anche che il colore o l’immagine di fondo devono far uscire il tuo contenuto ma allo stesso tempo non infastidirne la lettura, quindi evita i colori accesi. 
Se aggiungi un colore e un’immagine di sfondo, l’immagine sovrascrive il colore.

2. Separatori

 
1. Seleziona il colore dei separatori.
Sarà applicato a tutte le pagine della tua app.
Categorie
2 Design dell'app 2.1 Design generale dell'app Guida lamiaapp.shop Uncategorized

Schermate di avvio

Schermate di avvio | splash screen dell’app (solo piani Nativi)

Gli splash screen sono le immagini che appaiono all’avvio dell’app nativa iOS e Android mentre il contenuto si sta caricando.

Per impostare la schermata di avvio:
1. Vai al menu a scorrimento di sinistra La mia app > DESIGN > Design generale
2. Clicca su “Splash screen” nella colonna di destra

1. Splash screen personalizzati

 
Per adattare l’immagine a varie dimensioni di dispositivi diversi, hai bisogno di formati differenti.
Nota: a seconda del piano a cui sei iscritto, nel tuo back office verranno richieste solo le immagini per le piattaforme disponibili.

1. Clicca sulla scheda “Splash screen
2. Crea i tuoi file splash screen con le seguenti dimensioni *:
– iOS : 1242 x 2688 pixel
– Android : 1440 x 2560 pixel
– Tablet : 2048 X 1536 pixel

* – Tali dimensioni sono il minimo richiesto, se carichi foto più grandi, sarai in grado di ritagliarle.
– La risoluzione consigliata è 72 dpi.
– Sebbene queste immagini siano abbastanza grandi, cerca sempre di ottimizzarle, in particolare il peso, ricorda che la qualità delle reti mobile non è costante.


Evita caratteri  piccoli nella parte inferiore dell’immagine, perché sono spesso illeggibili sullo schermo di uno smartphone.
Per adattarsi a tutti i diversi modelli, gli splash-screen mobile verranno ritagliati, se necessario, per adattarsi perfettamente allo schermo dell’utente senza distorcere l’immagine.
La demo qui sotto mostra la stessa immagine su tutti i diversi prototipi.
Le bande rosse indicano dove è stata ritagliata l’immagine.

2. Procedura guidata

 
Usa la Procedura guidata per creare i tuoi splash screen direttamente dal back office.
1. Clicca sulla scheda Procedura guidata
2. Crea le tue icone direttamente dal back office:
– Aggiungi un testo o un’immagine
– Imposta il carattere, il colore e gli effetti del tuo titolo e della tua baseline (nell’esempio sopra, il titolo è “Welcome“, la baseline é “Loading your app now”)
– Seleziona un colore per lo sfondo o aggiungi un’immagine di sfondo
3. Clicca su “Genera
Se hai già impostato le schermate di avvio:
– Clicca “Continua” nell’avviso in rosso, per generare automaticamente tutti i formati necessari per la tua app.
Il tuo splash screen é stato creato!
Categorie
2 Design dell'app 2.1 Design generale dell'app Guida lamiaapp.shop Uncategorized

Le icone principali dell’app

Le icone principali dell’app

La fase Icona è obbligatoria per generare le tue applicazioni native ed evidenziare il tuo marchio.
Dovresti integrare un’icona che illustrerà la tua Progressive Web App (PWA) e le tue app native.

L’icona è un elemento visivo chiave della tua app. I browser Web la usano come una favicon, viene visualizzata nelle notifiche push per identificare il mittente e viene mostrata nella schermata principale del telefono.

A seconda del piano al quale sei iscritto/a, verranno richieste solo le immagini per le piattaforme disponibili nel tuo back office.

Per configurare le tue icone:
1. Vai al menu a scorrimento di sinistra La mia app > DESIGN > Design generale
2. Clicca su “Icona” nella colonna di destra

1. Icone personalizzate

 
1. Clicca sulla scheda personalizzata
2. Crea le tue icone seguendo le giuste dimensioni ed il formato specificato. Assicurati di avere i file sul tuo computer
3. Caricali nel tuo back office

* Dimensioni e formato:
PWA: 
– Logo del sito: 512 X 512 px (.jpg, .jpeg o .png)
– Icona Apple Touch : 192 X 192 px (.jpg, .jpeg o .png)
– Icona Push : 72 X 72 px (.jpg, .jpeg o .png) – Attenzione, questa icona dev’essere file .png monocromatico su sfondo trasparente.
– Favicon: 48 X 48 px (.jpg, .jpeg or .png)

Android:
– Google Play : 512 X 512 px (.jpg, .jpeg o .png)
-Schermata iniziale : 192 X 192 px (.jpg, .jpeg o .png)
– Icona push : 72 x 72 px – Attenzione, l’icona dev’essere un file png, di colore bianco (#FFFFFF) su sfondo trasparente ( non verrà accettato nessun altro colore, questo per rispettare le normative previste da Android).

 iOS:

– App Store : 1024 X 1024 px, (.png) Attenzione, png trasparenti non sono ammesse da Apple.
– Schermata iniziale : 180 X 180 px (.jpg, .jpeg o .png)

2. Procedura guidata

 
Usa la Procedura guidata per creare le tue icone direttamente dal back office.
1. Clicca sulla scheda Procedura guidata
2. Crea le tue icone direttamente dal back office:
– Aggiungi un testo o un’immagine
– Seleziona un colore per lo sfondo o aggiungi un’immagine di sfondo
– Imposta il carattere, il colore e gli effetti del tuo testo
3. Clicca su “Genera
4. Se hai già impostato le icone, conferma cliccando su “Continua” nell’avviso in rosso, per generare automaticamente tutti i formati necessari per la tua app.

3. Il titolo

 
Se hai caricato un’icona personalizzata o l’hai creato con lo strumento di Procedura guidata:
Nella schermata principale sotto l’anteprima dell’icona, inserisci un titolo per la tua app.

Questo titolo apparirà sotto l’icona della tua app una volta installata sui dispositivi degli utenti.
Per questo motivo, é meglio non inserire un titolo lungo. In questo esempio, il titolo é “My App”.
Categorie
2 Design dell'app 2.1 Design generale dell'app Guida lamiaapp.shop Uncategorized

Stile Globale

Stile Globale

Il menu Stile globale gestisce il design generale della tua app da un singolo menu.
Colori, caratteri ed effetti scelti in questo menu sono applicati a tutte le sezioni della tua app.

AVVISO! Molto importante: quando applichi lo stile globale alla tua app. Se in precedenza hai già configurato alcune impostazioni di design all’interno di una determinata sezione dell’app, tali impostazioni andranno perse e saranno sostituite da quelle nuove impostate in Stile globale.
Ogni modifica apportata in questo menu verrà applicata a tutte le sezioni della tua app.

Per configurare il tuo stile globale:
1. Vai al menu a scorrimento di sinistra La mia app > DESIGN > Design generale
2. Clicca su “Stile globale” nella colonna di destra.

Per modificare il design di una sezione specifica, per una personalizzazione approfondita, leggi questa guida.

1. Combinazione di colori

 
Una combinazione di colori * è un mix di colori che vanno bene insieme. Lo stile globale offre una libreria di combinazioni di colori.
1. Seleziona una combinazione di colori tra quelli disponibili
2. Per modificare un tema di colori esistente, leggi il punto 7

* Quando scegli una combinazione di colori, i colori di cui è composta vengono applicati a diversi elementi della tua app.
Una volta scelta la combinazione di colori, viene applicata ovunque nell’app.

2. Tipografia

 
Esiste una gerarchia per la visualizzazione del testo nell’applicazione. 8 livelli sono usati per visualizzare titoli, sottotitoli e testo nei paragrafi:
1. Imposta le dimensioni del testo usando il cursore
Lo stile globale calcola automaticamente le dimensioni di ciascun livello per rispettare questa gerarchia.
2. Seleziona il carattere per ogni livello
Tutti i tipi di carattere nella libreria di caratteri di Google sono disponibili, così come i caratteri nativi disponibili per impostazione predefinita sui dispositivi degli utenti.
3. Per ogni carattere seleziona la sua misura

3. Pulsanti

 
Per le pagine della tua app che richiedono agli utenti di eseguire un’azione, ci sono 3 livelli di pulsanti.
Ogni livello corrisponde a diverse azioni in diversi widget Sezioni / Home.
GoodBarber assegna automaticamente il livello giusto al pulsante, a seconda dell’azione e della posizione in cui è visualizzato nell’app.

Il design del pulsante di livello 1 sarà sempre pieno.
Il design del pulsante di livello 2 sarà sempre delineato.
Il design del pulsante di livello 3 è solo un link in formato testo.

1. Impostare la forma dei pulsanti nel menu Stile globale.

Avvertimento:
– I colori del pulsante si basano sulla combinazione di colori dell’app. Puoi cambiare il colore di un particolare pulsante, in ogni sezione: pannello del design o impostazioni del widget.
– Il livello del pulsante non può essere modificato.

4. Effetti opacitá (solo Desktop PWA)

 
1. Seleziona gli effetti che appaiono quando passi il mouse sopra un elemento.
Sono applicati su immagini e collegamenti ipertestuali.

5. Navigazione

 
Ti consente di scegliere il design delle schede nelle pagine: Ricerca, Profilo, Utenti e Carta fedeltà.

6. Elementi aggiuntivi

 
1. Seleziona l’icona del menu visualizzata in tutti gli header dell’app
2. Seleziona il pulsante Indietro visualizzato in tutti gli header dell’app

7. Modificare il colore di un tema

 
Crea fino a 3 temi colore personalizzati
1. Clicca su Modifica sopra il tema corrente:
2. Scorri verso il basso fino alla fine della pagina
3. Clicca sul pulsante verde “Crea una combinazione di colori“.
4. Modifica il nome del tema personalizzato cliccando sulla matita accanto ad esso.
5. Imposta i colori del tema personalizzato per zona:
Area del titolo
Questi colori verranno applicati all’header.
Colori principali
Questi colori verranno applicati alla parte principale della tua app (titolo, testo e sfondo delle pagine degli articoli o colore del testo nella modalità di navigazione, ad esempio)
Colori secondari
Questi colori verranno applicati quando sono presenti alcuni bordi o separatori per il colore sinistro, il colore sulla destra verrà applicato come sfondo del widget o sfondo di schede, ad esempio.
App e sfondo del Menu
Questi colori verranno applicati all’app  e al colore di sfondo del menu
Pulsanti
Questi colori verranno applicati al testo e al colore di sfondo dei pulsanti.
6. Clicca su “Applica” * per applicare il nuovo stile globale personalizzato.

* Ogni modifica apportata in questo menu verrà applicata a tutte le sezioni della tua app.
Fai molta attenzione, quando applichi il tuo stile globale alla tua app, se hai già fatto alcune configurazioni di design all’interno di una determinata pagina della tua app, queste impostazioni andranno perse e saranno sostituite da quelle nuove impostate nello Stile globale personalizzato.
Categorie
2 Design dell'app 2.1 Design generale dell'app Guida lamiaapp.shop Uncategorized

Logo e Titolo

Logo & Titolo

L’intestazione (logo e titolo) è la parte superiore dell’app che è sempre visibile e accessibile da tutte le sezioni.

L’intestazione ha 3 scopi:

  • per dare alla sezione un titolo
  • per mostrare shortcuts (scorciatoie)
  • per navigare nell’app

Per configurare il tuo Logo & Titolo:
1. Vai al menu a tendina sinistro La mia app > DESIGN > Disegn generale
2. Fai clic su “Logo e titolo” nella colonna di destra

Nota: questa guida in linea copre la gestione delle impostazioni predefinite dell’intestazione, note anche come header generale.
Per personalizzare il design dell’intestazione di una sezione specifica, seguire le istruzioni di questo aiuto online.

1. Logo & Titolo

 

La parte centrale dell’header permette di dare un titolo alla pagina. Questo titolo può consistere in un testo oppure un logo (immagine).

 Testo: clicca sul testo per modificarlo.
– Logo: seleziona il pulsante “Logo” per aggiungere un’immagine* nella posizione del testo.
*Rispetta i requisiti minimi di dimensione di 600 x 148 px.

2. Impostazioni avanzate

 

Fai clic su “Impostazioni avanzate” per modificare più a fondo il design della tua intestazione.
Sono disponibili diverse impostazioni, puoi accedervi scorrendo verso il basso nella colonna di destra.

A – Icona del menu:
La parte sinistra dell’intestazione viene utilizzata per visualizzare le azioni di navigazione, quando necessario.

Accesso alla navigazione principale  (pulsante menu)
I menu di navigazione Swipe, Little Swipe, Grid, Slate e From Scratch forniscono un pulsante menu visualizzato nell’intestazione che consente di accedere al contenuto.
Per i menu di navigazione TabBar e No menu, questo pulsante non verrà visualizzato.

1. Fare clic su “Modifica l’icona” per cambiare l’icona
2. Fare clic su “Colore icona” per cambiarne il colore.

B – Logo:
1. Modifica il colore e il carattere del testo
2. Seleziona l’allineamento orizzontale dell’immagine o del testo

C – Sfondo header:
1. Definire il colore dello sfondo dell’intestazione e il bordo inferiore o scegliere di applicare un’immagine di sfondo*.

* È possibile scegliere un’immagine di sfondo diversa in base al dispositivo su cui viene visualizzata l’app. Assicurati di rispettare le dimensioni. Le dimensioni sono date in riferimento ai dispositivi iOS, ma le stesse immagini verranno utilizzate in dispositivi Android di dimensioni equivalenti.
– Immagine di sfondo: minimo 640 x 128 px
– iPhone 7: minimo 750 x 128 px
– iPhone 7 Plus: minimo 1242 x 192 px
– Tablet e desktop: minimo 2048 x 128 px

D – Azione:
Per creare shortucts (scorciatoie)* sul lato destro dell’header:
1. Fare clic sul pulsante verde “Aggiungi un’azione“.
*È possibile aggiungere un massimo di 6 shortcuts:
– da 1 a 2 shortcuts: accesso diretto dall’header
– Più di 2 shortcuts: il primo è direttamente accessibile, gli altri sono accessibili da un ulteriore menu a comparsa.

2. Seleziona il link dello shortcut (destinazione shortcut) dal menu a comparsa
3. Seleziona l’icona del tuo shortcut
4. Visualizza un titolo *(visualizzato solo su tablet e desktop)
5. Attiva “Visualizza lo shorcut sotto forma di un pulsante” (opzionale, solo per Desktop)

*I titoli degli shortcuts che appartengono al menu a comparsa aggiuntivo vengono sempre visualizzati, indipendentemente dal dispositivo utilizzato.

E – Altri elementi dell’header
Imposta il design del pulsante “Indietro” utilizzato per tornare alle sezioni precedenti all’interno della tua app.
1. Fare clic su “Modifica l’icona” per cambiare l’icona
2. Fai clic su “Colore” per cambiarne il colore.
3. Scegli di applicare uno tra i seguenti effetti sul tuo header:
– nessun effetto
– trasparenza
– sfocatura (disponibile solo per iOS. Per le versioni Android e Web, verrà applicato l’effetto di trasparenza)
– nascondi