Come progettare il menu di un sito web
Opzioni di progettazione del menu, personalizzazione, suggerimenti ed esempi
Esplorate 7 design di menu per siti web, imparate a personalizzarli e scoprite come utilizzarli.
Questa guida si concentra sulla progettazione del menu: come si presenta e come funziona. Se volete imparare a progettare un menu per il sito web, a visualizzarlo su ogni pagina del vostro sito o a creare un menu di navigazione per una particolare pagina web, vi consigliamo di leggere un'altra guida:
Il menu di navigazione è un elenco di link che conducono a varie pagine del sito web o a sezioni specifiche all'interno di una determinata pagina web. Aiuta i visitatori a navigare tra le pagine del sito o tra le diverse sezioni di una pagina specifica.
Consigli generali
>
Il menu deve aiutare i visitatori del sito a trovare le informazioni in modo rapido e semplice.
>
Il menu deve essere conciso
>
Mantenere il numero di voci di menu al minimo
>
Aggiungete non più di cinque voci di menu a una barra di navigazione.
>
Le voci di menu non devono essere più lunghe di una parola
>
È meglio se la parola è breve
>
Non progettate in modo eccessivo la barra di navigazione del menu, perché non deve distrarre l'utente dal contenuto del vostro sito web.
Esempi di buoni design di menu
OPZIONI DI PROGETTAZIONE DEL MENU
Menu statico trasparente sopra la copertina
Come si presenta:
Un menu di questo tipo è appuntato nella parte superiore della pagina per non distrarre i visitatori del sito web dal contenuto, e possono trovarlo facilmente quando necessario perché è fissato in un punto specifico della pagina.
Un menu di questo tipo è appuntato nella parte superiore della pagina per non distrarre i visitatori del sito web dal contenuto, e possono trovarlo facilmente quando necessario perché è fissato in un punto specifico della pagina.
Come configurarlo:
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Impostazioni principali → Comportamento della posizione del menu: Assoluto.
Sfondo del menu → Opacità dello sfondo del menu: 0%.
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Impostazioni principali → Comportamento della posizione del menu: Assoluto.
Sfondo del menu → Opacità dello sfondo del menu: 0%.
Fare clic qui per visualizzare un esempio di menu statico trasparente sul sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Menu fisso
Come si presenta:
Un menu di questo tipo è sempre visibile sulla pagina e vi si può accedere facilmente da qualsiasi punto della pagina. Di solito ha uno sfondo trasparente nella parte superiore della pagina (sulla copertina) che diventa opaco durante lo scorrimento.
Un menu di questo tipo è sempre visibile sulla pagina e vi si può accedere facilmente da qualsiasi punto della pagina. Di solito ha uno sfondo trasparente nella parte superiore della pagina (sulla copertina) che diventa opaco durante lo scorrimento.
Come configurarlo:
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Impostazioni principali → Comportamento della posizione del menu: Fisso su scorrimento.
Sfondo del menu → Colore dello sfondo del menu. Scegliereun colore.
Sfondo del menu → Opacità dello sfondo del menu: 0%.
Sfondo del menu → Opacità dello sfondo del menu durante lo scorrimento: 80%.
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Impostazioni principali → Comportamento della posizione del menu: Fisso su scorrimento.
Sfondo del menu → Colore dello sfondo del menu. Scegliereun colore.
Sfondo del menu → Opacità dello sfondo del menu: 0%.
Sfondo del menu → Opacità dello sfondo del menu durante lo scorrimento: 80%.
Cliccare qui per visualizzare un esempio di menu fisso sul sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Menu fisso in cima alla pagina,
Menu che appare durante lo scroll
Menu che appare durante lo scroll
Come si presenta:
Questo menu è simile a quello descritto in precedenza. Ciò che lo rende diverso è un altro menu che appare a scorrimento e che presenta un numero ancora maggiore di voci. Ad esempio, il menu di navigazione superiore contiene un logo, alcune voci di menu che conducono a diverse pagine del sito e alcuni link ai social media. Quando l'utente scorre la pagina, appare un'altra barra di menu, con un logo, un invito all'azione e un pulsante di richiamo.
Questo menu è simile a quello descritto in precedenza. Ciò che lo rende diverso è un altro menu che appare a scorrimento e che presenta un numero ancora maggiore di voci. Ad esempio, il menu di navigazione superiore contiene un logo, alcune voci di menu che conducono a diverse pagine del sito e alcuni link ai social media. Quando l'utente scorre la pagina, appare un'altra barra di menu, con un logo, un invito all'azione e un pulsante di richiamo.
Come configurarlo:
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Menu Uno (situato nella parte superiore della pagina)
Impostazioni principali → Comportamento della posizione del menu: Assoluto.
Sfondo del menu → Opacità dello sfondo del menu: 0%.
Menu Due (che appare durante lo scorrimento)
Impostazioni principali → Comportamento della posizione del menu: Fisso su scorrimento.
Impostazioni principali → Rivela il menu quando la pagina viene fatta scorrere in basso in pixel: 600px.
Sfondo del menu → Colore dello sfondo del menu. Scegliere un colore.
Sfondo del menu → Opacità dello sfondo del menu: 70%.
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Menu Uno (situato nella parte superiore della pagina)
Impostazioni principali → Comportamento della posizione del menu: Assoluto.
Sfondo del menu → Opacità dello sfondo del menu: 0%.
Menu Due (che appare durante lo scorrimento)
Impostazioni principali → Comportamento della posizione del menu: Fisso su scorrimento.
Impostazioni principali → Rivela il menu quando la pagina viene fatta scorrere in basso in pixel: 600px.
Sfondo del menu → Colore dello sfondo del menu. Scegliere un colore.
Sfondo del menu → Opacità dello sfondo del menu: 70%.
Cliccare qui per visualizzare gli esempi di questi menu su un sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Menu Hamburger
Come si presenta:
Il menu hamburger è costituito dalle tre linee orizzontali nella parte superiore dello schermo. Quando l'utente fa clic su di esso, si apre per rivelare un menu di navigazione.
Per cosa si può usare:
Questo menu è perfetto per il vostro sito web se volete che i visitatori si concentrino sul contenuto senza essere distratti da altri elementi di design. Il menu hamburger viene solitamente utilizzato in una versione mobile del sito web. È possibile impostare la visualizzazione del menu su diversi dispositivi.
Ad esempio, si può scegliere di far apparire un menu normale solo sulla versione desktop del sito e di rendere visibile il menu hamburger solo sui dispositivi mobili.
Il menu hamburger è costituito dalle tre linee orizzontali nella parte superiore dello schermo. Quando l'utente fa clic su di esso, si apre per rivelare un menu di navigazione.
Per cosa si può usare:
Questo menu è perfetto per il vostro sito web se volete che i visitatori si concentrino sul contenuto senza essere distratti da altri elementi di design. Il menu hamburger viene solitamente utilizzato in una versione mobile del sito web. È possibile impostare la visualizzazione del menu su diversi dispositivi.
Ad esempio, si può scegliere di far apparire un menu normale solo sulla versione desktop del sito e di rendere visibile il menu hamburger solo sui dispositivi mobili.
Come configurarlo:
Aggiungere un blocco ME401/402/403/404/405 alla pagina, impostare il comportamento della posizione del menu, il colore dell'icona del menu e il colore del testo della voce di menu.
Ad esempio, si possono applicare le seguenti impostazioni:
Impostazioni principali → Comportamento della posizione del menu: Fissa su scorrimento.
Voce di menu → Colore. Scegliere il nero.
Sfondo del menu → Colore dello sfondo del menu collassato. Rendilo trasparente.
Sfondo del menu → Colore dello sfondo del menu espanso . Scegliere il bianco.
Aggiungere un blocco ME401/402/403/404/405 alla pagina, impostare il comportamento della posizione del menu, il colore dell'icona del menu e il colore del testo della voce di menu.
Ad esempio, si possono applicare le seguenti impostazioni:
Impostazioni principali → Comportamento della posizione del menu: Fissa su scorrimento.
Voce di menu → Colore. Scegliere il nero.
Sfondo del menu → Colore dello sfondo del menu collassato. Rendilo trasparente.
Sfondo del menu → Colore dello sfondo del menu espanso . Scegliere il bianco.
Fare clic qui per visualizzare un esempio di menu per hamburger sul sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Menu multilivello
Come si presenta:
Quando si fa clic su una voce di menu, viene visualizzato un menu a discesa.
Per cosa si può usare:
Siti web di grandi dimensioni con una struttura avanzata.
Quando si fa clic su una voce di menu, viene visualizzato un menu a discesa.
Per cosa si può usare:
Siti web di grandi dimensioni con una struttura avanzata.
Come configurarlo:
Aggiungere il blocco ME301 alla pagina, impostare un menu simile a quello descritto sopra, quindi aggiungere sottovoci nel pannello Contenuto del blocco.
1. Aprire il pannello Contenuto del blocco → Voci di menu → Aggiungere sottovoci.Aprire il pannello Contenuto del blocco → Voci di menu → Aggiungere sottovoci.
2.Fare clic sull'icona più accanto a una voce. Fare clic sull'icona più accanto a una voce, inserire un titolo per la sottovoce e assegnare un collegamento. Ripetere l'operazione fino a quando non sono state aggiunte tutte le sottovoci necessarie.
3. Aprire il pannello Impostazioni del blocco → Impostazioni del sottomenu. Selezionare la casella di controllo "Visualizza l'icona del menu di secondo livello".
Si noti che la voce del menu principale non sarà cliccabile. Se si desidera renderla cliccabile, creare una sottovoce duplicata nel menu a discesa.
Aggiungere il blocco ME301 alla pagina, impostare un menu simile a quello descritto sopra, quindi aggiungere sottovoci nel pannello Contenuto del blocco.
1. Aprire il pannello Contenuto del blocco → Voci di menu → Aggiungere sottovoci.Aprire il pannello Contenuto del blocco → Voci di menu → Aggiungere sottovoci.
2.Fare clic sull'icona più accanto a una voce. Fare clic sull'icona più accanto a una voce, inserire un titolo per la sottovoce e assegnare un collegamento. Ripetere l'operazione fino a quando non sono state aggiunte tutte le sottovoci necessarie.
3. Aprire il pannello Impostazioni del blocco → Impostazioni del sottomenu. Selezionare la casella di controllo "Visualizza l'icona del menu di secondo livello".
Si noti che la voce del menu principale non sarà cliccabile. Se si desidera renderla cliccabile, creare una sottovoce duplicata nel menu a discesa.
Fare clic qui per visualizzare un esempio di menu multilivello sul sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Schede
Come si presenta:
Una scheda attiva consente agli utenti di sfogliare i contenuti ad essa collegati senza lasciare la pagina web.
A cosa serve:
Le schede consentono di mostrare diverse categorie dello stesso tipo di contenuto, ad esempio diverse categorie di lavori all'interno di un portfolio.
Una scheda attiva consente agli utenti di sfogliare i contenuti ad essa collegati senza lasciare la pagina web.
A cosa serve:
Le schede consentono di mostrare diverse categorie dello stesso tipo di contenuto, ad esempio diverse categorie di lavori all'interno di un portfolio.
Come configurarlo:
Aggiungere un blocco ME602 o ME603 alla pagina. È possibile utilizzare questi blocchi per creare schede e mostrare contenuti quando l'utente fa clic su una scheda all'interno della stessa pagina. Di seguito, è necessario aggiungere i blocchi in una sequenza che cambierà quando l'utente fa clic su una determinata scheda.
Come funziona:
1. Aggiungere i titoli delle schede nel pannello Contenuto del blocco ME602 o ME603.
2. Aggiungere gli ID dei blocchi che devono essere visibili quando si fa clic sulla scheda (separandoli con una virgola, senza spazi).
Nota: è possibile copiare l'ID del blocco nel pannello Impostazioni del blocco.
Aggiungere un blocco ME602 o ME603 alla pagina. È possibile utilizzare questi blocchi per creare schede e mostrare contenuti quando l'utente fa clic su una scheda all'interno della stessa pagina. Di seguito, è necessario aggiungere i blocchi in una sequenza che cambierà quando l'utente fa clic su una determinata scheda.
Come funziona:
1. Aggiungere i titoli delle schede nel pannello Contenuto del blocco ME602 o ME603.
2. Aggiungere gli ID dei blocchi che devono essere visibili quando si fa clic sulla scheda (separandoli con una virgola, senza spazi).
Nota: è possibile copiare l'ID del blocco nel pannello Impostazioni del blocco.
Fare clic qui per visualizzare un esempio di questo menu sul sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Menu con carrello, ricerca e preferiti
Come si presenta:
Mostra gli articoli nel carrello, gli articoli aggiunti ai preferiti e un widget di ricerca nel menu vicino alla sezione di navigazione.
Per cosa può essere utilizzato:
Il menu è utile per il Catalogo prodotti per visualizzare in modo conciso il carrello, il widget di ricerca del sito e i Preferiti.
Mostra gli articoli nel carrello, gli articoli aggiunti ai preferiti e un widget di ricerca nel menu vicino alla sezione di navigazione.
Per cosa può essere utilizzato:
Il menu è utile per il Catalogo prodotti per visualizzare in modo conciso il carrello, il widget di ricerca del sito e i Preferiti.
Come configurarlo:
Aggiungere il blocco ME401 alla pagina → scheda Contenuto → Carrello, Ricerca e Preferiti → selezionare le caselle di controllo per mostrare le icone necessarie nel menu.
Selezionare la casella di controllo "Non mostrare i pulsanti nativi dei widget" per visualizzare le icone solo nel menu.
Aggiungere il blocco ME401 alla pagina → scheda Contenuto → Carrello, Ricerca e Preferiti → selezionare le caselle di controllo per mostrare le icone necessarie nel menu.
Selezionare la casella di controllo "Non mostrare i pulsanti nativi dei widget" per visualizzare le icone solo nel menu.
Quindi aggiungere il blocco carrello ST100, il blocco widget di ricerca T985 e il blocco Preferiti ST110 e pubblicare la pagina.
Fatto.
Questa funzione funziona per tutti i blocchi di menu numerati ME4XX.
Questa funzione funziona per tutti i blocchi di menu numerati ME4XX.
Fare clic qui per visualizzare un esempio di questo menu sul sito web
Opzioni di visualizzazione:
Se si desidera mostrare sia le icone che il pulsante del widget Preferiti nel menu, deselezionare "Non mostrare i pulsanti del widget nativo" nella scheda Contenuto del blocco ME401.
Se si desidera mostrare sia le icone che il pulsante del widget Preferiti nel menu, deselezionare "Non mostrare i pulsanti del widget nativo" nella scheda Contenuto del blocco ME401.
È possibile nascondere l'icona del widget per i blocchi ST100 Carrello e T985 Ricerca nella scheda "Altre impostazioni" delle Impostazioni del blocco, selezionando la casella di controllo "Non mostrare il pulsante del widget". Pubblicare la pagina.
Fatto! Nel menu vengono visualizzate tre icone e un widget separato per i Preferiti. È possibile configurare la visibilità del widget del carrello o della ricerca in modo analogo.
Fare clic qui per visualizzare un esempio di questo menu sul sito web
Ecco alcune opzioni chiave per il design dei menu. Se avete nuove idee e volete condividerle, inviate via e-mail il link al vostro sito web a team@tilda.cc con "Menu design" nell'oggetto. Grazie!
In bocca al lupo per i vostri esperimenti di design!
In bocca al lupo per i vostri esperimenti di design!
Il sito web che stavate sognando inizia proprio qui.
