GoodBarber 4.5 - Gestisci il design della tua app

Questo menu è interamente dedicato all'header della tua applicazione, che contiene pulsanti d'azione ed ovviamente il titolo della tua applicazione.

La prima parte del menu è l'icona Menu, presente nell'header per consentire all'utente di aprire la modalità di navigazione principale dell'applicazione. Qui, puoi personalizzare l’icona e scegliere il colore.
In seguito, giunge il momento di passare al titolo della tua applicazione. Può essere composto da un semplice testo, per il quale sarai in grado di scegliere il carattere, la dimensione ed il colore.
In alternativa, puoi optare per un logo, ed importare semplicemente l'immagine di tua scelta nel formato 600 x 148 px. Una volta aggiunto il titolo, tutto ciò che devi fare è scegliere il suo allineamento centrato o allineato a sinistra.
Troverai anche la possibilità di personalizzare lo sfondo del tuo header grazie a diverse opzioni:
- utilizza un colore
- utilizza una sfumatura di colore
- utilizza immagini di tua scelta, rispettando le dimensioni indicate, in modo che si adattino a qualsiasi tipo di schermo

Per personalizzare il tuo header ancora più a fondo ed organizzare minuziosamente l'esperienza utente che desideri offrire, la parte successiva del menu consente di aggiungere collegamenti all'header visualizzabili alla destra del titolo. Seleziona la destinazione del link, l'icona ed il colore ed il gioco è fatto! Nell'esempio seguente abbiamo deciso di aggiungere un collegamento al profilo utente ed alla pagina contatto dell'applicazione. Scegli in base al concetto della tua app! Non dimenticare che è possibile attivare l'opzione "Mostra titolo", che consentirà la visualizzazione del titolo del link accanto alla sua icona, su tablet e versioni desktop dell'applicazione.
Infine, proprio come per l'icona Menu, è possibile personalizzare l'icona "torna indietro" che sarà visibile nelle pagine “ più profonde” della tua applicazione.

Qui è dove creerai i primi elementi che saranno visibili ai tuoi utenti.
Per l'icona o la schermata d'avvio, sono disponibili due opzioni:

- Utilizza la procedura guidata di creazione o wizard
- Importa le tue immagini
Nell'esempio seguente, abbiamo creato l'icona dell'applicazione con la procedura guidata; vedrai che questo processo ti consente di creare i tuoi elementi senza alcuna difficoltà.
Per iniziare, vai direttamente all'anteprima dell'icona e modifica il testo dell'icona, così come il titolo dell'app, appena sotto, che apparirà nella schermata iniziale dei dispositivi dei tuoi utenti.

In seguito, nel pannello di destra, avrai la possibilità di cambiare il design dell'icona scegliendo il carattere, il colore e gli effetti da applicare al testo dell'icona. Infine, tutto ciò che devi fare è personalizzare lo sfondo della tua icona applicando una delle seguenti opzioni:

- un colore 
- una sfumatura di colore
- un'immagine di tua scelta, da importare nel formato indicato.

Tuttavia, per gli splash screen, abbiamo scelto di mostrare l'opzione personalizzata, che significa l'aggiunta diretta dell'immagine. Per importare la tua immagine, è facile: il riquadro a destra mostra tutte le dimensioni dell'immagine, necessarie per una visualizzazione ottimale degli splash screen su qualsiasi tipo di schermo.

Qui entreremo nella parte equivalente del menu Contenuto che ti abbiamo presentato. Troverai un elenco di tutte le pagine della tua applicazione all’interno delle quali puoi impostare ciascuna opzione di design.

Nell'esempio seguente, abbiamo scelto di mostrarti l'implementazione del design di una sezione Articolo. È possibile progettare diverse parti delle pagine Articolo:

1) La lista degli articoli:
Qui puoi scegliere il template di presentazione per la tua lista di articoli. Definisci i colori e i caratteri utilizzati, nonché le informazioni che appaiono nell'elenco (miniatura, data di pubblicazione, riepilogo dell'articolo, autore, ecc.).
Infine, scegli la miniatura da usare di default per i tuoi articoli, il formato e l'allineamento.

2) Articoli:
Proprio come per la lista degli articoli, puoi scegliere il template di visualizzazione, i colori e i caratteri utilizzati.
Puoi anche personalizzare la barra degli strumenti per visualizzare o meno le seguenti funzionalità:
- Commenti
- Condivisione
- Dimensione del carattere
- Preferiti
- Vai al prossimo articolo
Hai anche la possibilità di modificare il codice HTML strutturando il template della pagina tramite i tag [TITLE], [DATE], [AUTHOR] e [CONTENT].
 
3) Categorie e commenti:
Se hai abilitato la categorizzazione dei tuoi articoli, qui puoi personalizzare il modo in cui i tuoi utenti vedranno queste categorie. Basta selezionare i template del menu che desideri utilizzare e scegliere i colori. Semplice!

Allo stesso modo, da questo menu, puoi personalizzare l'aspetto della pagina dei commenti.

Da questo nuovo menu Design, puoi creare la tua Home e organizzare un ulteriore livello di navigazione. Tutti i dettagli riguardanti la creazione della Home puoi trovarli qui.

Il menu Design contiene anche il menu Stile Globale  (di cui abbiamo parlato qualche settimana fa) che ti consente di gestire il design generale della tua app ma anche di creare il backup dei tuoi temi.

Infine, non perdere l'opportunità di impostare la modalità di navigazione della tua app che abbiamo presentato qui.