Windows Dev Center

Linee guida per le barre dei comandi

Le barre dei comandi forniscono agli utenti un facile accesso alle azioni e possono essere usate per mostrare i comandi o le opzioni specifiche per il contesto dell'utente, come ad esempio la modalità di selezione delle foto o la modalità disegno. Permettono inoltre di spostarsi tra le pagine o le sezioni dell'app. Le barre dei comandi possono essere usate con qualsiasi modello di spostamento.

Esempio di una barra dei comandi con icone

Le barre dei comandi sono costituite da due componenti: lo spazio delle azioni, per l'inserimento dei comandi o degli elementi di spostamento che devono rimanere visibili, e l'area "Altro", rappresentata sulla barra dei comandi con tre puntini di sospensione [•••]. L'area "Altro" apre un menu a discesa che contiene i comandi e gli elementi di spostamento usati meno frequentemente. Selezionando il pulsante [•••] viene aperto il menu e vengono visualizzate le etichette di testo per ogni elemento nello spazio delle azioni. Se il menu "Altro" non contiene elementi, l'elenco a discesa non si apre, ma le etichette di testo vengono comunque visualizzate per gli elementi nello spazio delle azioni.

Esempio di barra dei comandi con due aree principali con etichette

Posizionamento della barra dei comandi

Le barre dei comandi possono essere posizionate nella parte superiore dello schermo, nella parte inferiore, sia in alto che in basso o in linea.

Esempi di posizionamento della barra dell'app in alto, in basso oppure in alto e in basso nello schermo

  • Per i dispositivi mobili, se pensi di inserire una sola barra dei comandi nell'app, collocala nella parte bassa dello schermo in modo che sia facilmente accessibile. Se l'app contiene delle schede in basso, posiziona la barra dei comandi in alto per non appesantire troppo l'interfaccia utente.
  • Per gli schermi più grandi, se vuoi inserire una sola barra dei comandi, ti consigliamo di collocarla nella parte alta dello schermo.
  • Puoi anche posizionare barre del comando in linea, in modo che le persone possano usarle per azioni contestuali.

Le barre dei comandi possono essere posizionate nelle aree dello schermo seguenti negli schermi con singola visualizzazione (esempio a sinistra) e negli schermi con più visualizzazioni (esempio a destra). Le barre dei comandi in linea possono essere posizionate ovunque nello spazio delle azioni.

Esempi di aree dello schermo in cui è possibile posizionare la barra dell'app

Posizionamento delle azioni

Stabilisci la priorità delle azioni da inserire nella barra dei comandi in base alla loro visibilità.

  • Posiziona i comandi più importanti, quelli che devono rimanere visibili nella barra, nei primi posti dello spazio delle azioni. Negli schermi più piccoli (320 epx di larghezza), tra i 2 e i 4 elementi sono il numero giusto per lo spazio delle azioni della barra dei comandi, a seconda degli altri elementi di interfaccia sullo schermo.
  • Posiziona i comandi meno importanti dopo quelli più importanti nello spazio delle azioni della barra oppure nei primi posti dell'area "Altro". Questi comandi saranno visibili quando sulla barra c'è spazio sufficiente, mentre verranno inclusi nel menu a discesa dell'area "Altro" quando non c'è abbastanza spazio.
  • Posiziona i comandi poco importanti nell'area "Altro". Questi comandi verranno sempre visualizzati nel menu a discesa.

Gli elementi nello spazio delle azioni possono essere visualizzati con icone o pulsanti. Quando usi solo le icone, includi un'etichetta di testo. L'etichetta di testo viene visualizzata sotto l'icona solo quando viene selezionato [•••].

Se un comando è contenuto in tutte le pagine, è consigliabile visualizzarlo sempre nella stessa posizione in modo coerente. Ti consigliamo di posizionare i comandi Accetto, Sì e OK a sinistra dei comandi Non accetto, No e Annulla. La coerenza assicura fiducia agli utenti per gli spostamenti nel sistema e consente di trasferire le loro conoscenze di esplorazione da un'app all'altra.

Anche se puoi inserire tutte le azioni nel menu a discesa "Altro", in modo che sulla barra dei comandi siano visibili solo i puntini di sospensione [•••], tieni presente che nascondere tutte le azioni potrebbe confondere gli utenti.

Riquadri a comparsa e descrizioni comandi nella barra dei comandi

Valuta la possibilità di creare raggruppamenti logici dei comandi, ad esempio inserire i comandi Rispondi, Rispondi a tutti e Inoltra in un menu Rispondi.

Immagine di un riquadro a comparsa e di un menu

Dato che le etichette di testo sono nascoste per le azioni della barra di comando, a meno che non sia selezionato [•••], valuta la possibilità di usare le descrizioni comandi per le icone delle azioni.

Area "Altro"

Esempio di anatomia della barra dell'app, con callout

  • L'invito "Altro" [•••] è il punto di ingresso visibile per il menu e si trova sull'estrema destra della barra degli strumenti adiacente alle azioni principali.
  • Ogni azione nello spazio delle azioni principali è rappresentata da un'icona. La selezione del menu di espansione consente di visualizzare le etichette di testo per ognuna delle azioni nello spazio delle azioni principali.
  • Lo spazio del menu di espansione è allocato per le azioni usate meno di frequente.
  • Le azioni possono essere aggiunte e rimosse tra lo spazio delle azioni principale e il menu di espansione in corrispondenza dei punti di interruzione. Puoi anche designare azioni che rimangono sempre nello spazio delle azioni principale, indipendentemente dalle dimensioni della finestra dell'app o dello schermo.
  • Le azioni usate meno di frequente possono rimanere nel menu di espansione anche quando la barra dell'app è espansa negli schermi più grandi.

Linee guida per il responsive design

  • Lo stesso numero di azioni nella barra dell'app dovrebbe essere visibile sia nell'orientamento verticale che orizzontale, in modo da ridurre il carico cognitivo dell'utente. Il numero di azioni disponibili deve essere determinato dalla larghezza del dispositivo nell'orientamento verticale.
  • Identificando i punti di interruzione, puoi spostare le azioni dentro e fuori dal menu in base alle dimensioni dello schermo o della finestra dell'app.

Argomenti correlati

Nozioni di base sulla progettazione dei comandi

 

 

Mostra:
© 2015 Microsoft