Linee guida per le impostazioni dell'app

Le impostazioni dell'app sono le parti personalizzabili dall'utente dell'app Windows, accessibili tramite una pagina delle impostazioni dedicata. Ad esempio, un'app per la lettura delle notizie può consentire all'utente di specificare le nuove fonti da visualizzare o il numero di articoli da visualizzare sullo schermo, mentre un'app meteo può consentire all'utente di scegliere tra gradi Celsius o Fahrenheit. Questo articolo fornisce consigli e procedure consigliate per la creazione e la visualizzazione delle impostazioni dell'app nelle app WinUI.

Quando fornire una pagina di impostazioni

Ecco alcuni esempi di opzioni dell'app che appartengono a una pagina delle impostazioni dell'app:

• Opzioni di configurazione che influiscono sul comportamento dell'app e non richiedono modifiche frequenti, ad esempio la scelta tra Celsius o Fahrenheit come unità predefinite per la temperatura in un'app meteo, la modifica delle impostazioni dell'account per un'app di posta elettronica, le impostazioni per le notifiche o le opzioni di accessibilità.
• Opzioni che dipendono dalle preferenze dell'utente, ad esempio musica, effetti audio o temi di colore.
• Informazioni sull'app a cui non si accede molto spesso, ad esempio informativa sulla privacy, guida, versione dell'app o informazioni sul copyright.

I comandi che fanno parte del flusso di lavoro tipico dell'app (ad esempio, la modifica delle dimensioni del pennello in un'app grafica) non devono trovarsi in una pagina delle impostazioni. Per altre informazioni sul posizionamento dei comandi, vedere Nozioni di base sulla progettazione dei comandi.

Raccomandazioni generali

• Mantenere semplici le pagine delle impostazioni e usare controlli binari (on/off). Un interruttore a levetta è generalmente il miglior controllo per un'impostazione binaria.
• Per le impostazioni che consentono agli utenti di scegliere un elemento da un insieme di massimo 5 opzioni correlate e mutuamente esclusive, usa i pulsanti di scelta radio.
• Creare un punto di ingresso per tutte le impostazioni dell'app nella pagina delle impostazioni dell'app.
• Mantenere le impostazioni semplici. Definire le impostazioni predefinite intelligenti e mantenere minimo il numero di impostazioni.
• Quando un utente modifica un'impostazione, l'app deve riflettere immediatamente la modifica.
• Non includere comandi che fanno parte del flusso di lavoro comune dell'app.

Punto di accesso

Il modo in cui gli utenti accedono alla pagina delle impostazioni dell'app devono essere basati sul layout dell'app.

Riquadro di spostamento

Per un layout NavigationView , le impostazioni dell'app devono essere l'ultimo elemento nell'elenco delle scelte di spostamento e essere aggiunte alla parte inferiore. NavigationView fornisce un elemento di impostazioni predefinito per questo scopo: impostare la proprietà IsSettingsVisible su true per visualizzare automaticamente una voce Impostazioni nella parte inferiore del riquadro di spostamento.

Barra dei comandi

Se si usa una barra di comando o una barra degli strumenti, posizionare il punto di ingresso delle impostazioni come una delle ultime voci nel menu extra "Altro". Se la facilità di individuazione del punto di ingresso per le impostazioni è importante per la tua app, posiziona il punto di ingresso direttamente sulla barra dei comandi e non all'interno del menu a discesa.

Impaginazione

La pagina delle impostazioni dell'app dovrebbe aprire a schermo intero e riempire l'intera finestra. Usa un layout scorrevole con una larghezza massima vincolata (circa 1000-1100 px) in modo che il contenuto rimanga leggibile su schermi wide. Raggruppare le impostazioni correlate sotto le intestazioni di sezione usando lo stile di testo BodyStrong.

Usare i controlli SettingsCard e SettingsExpander da Windows Community Toolkit per creare la pagina delle impostazioni. Questi controlli forniscono un layout coerente e accessibile con un'intestazione, una descrizione, un'icona e un controllo azione allineato al lato destro della scheda.

Per esempi di implementazione completi, vedere la pagina delle impostazioni di WinUI Gallery e l'esempio Windows Community Toolkit SettingsControls.

SettingsCard

Usare un SettingsCard per le singole impostazioni. Ogni scheda ha un'intestazione, una descrizione facoltativa, un headerIcon facoltativo e un controllo azione (ad esempio ToggleSwitch, ComboBoxo Button) inserito come contenuto della scheda. L'impostazione della IsClickEnabled proprietà su true rende l'intera scheda cliccabile, utile per le voci in stile navigazione.

SettingsExpander

Usare SettingsExpander quando un'impostazione include opzioni secondarie che devono essere visualizzate su richiesta. L'espansore mostra un controllo dell'azione principale nella riga di intestazione e elementi aggiuntivi SettingsCard all'interno della Items collezione. In questo modo la pagina rimane compatta mentre si esplorano le opzioni avanzate. Non annidare espansori più in profondità di un livello.

Impostazioni del tema dell'app

Se l'app consente agli utenti di scegliere la modalità colore dell'app, presenta queste opzioni usando una casella combinata all'interno di un SettingsCard. Le opzioni devono essere lette:

• Leggero
• Scuro
• Usare l'impostazione di sistema

È anche possibile aggiungere un collegamento ipertestuale alla pagina Colori di Windows Impostazioni in cui gli utenti possono accedere e modificare la modalità dell'app predefinita corrente. Usare la stringa "impostazioni colore Windows" per il testo del collegamento ipertestuale e ms-settings:colors per l'URI.

Sezione Informazioni

È consigliabile inserire una sezione About nella parte inferiore della pagina delle impostazioni usando un oggetto SettingsExpander. La riga di intestazione compressa dovrebbe mostrare il nome, l'icona e il numero di versione dell'app. L'area espansa può includere:

• Collegamento al repository o al sito Web dell'app.
• Collegamento per segnalare bug o richiedere funzionalità.
• Elenco di dipendenze e riferimenti come controlli HyperlinkButton .
• Informazioni legali, ad esempio un'informativa sul copyright, condizioni per l'utilizzo e collegamenti all'informativa sulla privacy.

Contenuto consigliato per la pagina

Dopo aver creato un elenco di elementi che vuoi includere nella pagina delle impostazioni dell'app, prendi in considerazione queste linee guida:

• Raggruppare impostazioni simili o correlate in un'intestazione di sezione.

• Provare a mantenere il numero totale di impostazioni su un massimo di quattro o cinque.

• Visualizzare le stesse impostazioni indipendentemente dal contesto dell'app. Se alcune impostazioni non sono rilevanti in un determinato contesto, disabilitare l'impostazione SettingsCard impostando IsEnabled su false.

• Usare etichette descrittive con una parola per le intestazioni delle impostazioni. Ad esempio, denominare l'impostazione "Account" anziché "Impostazioni account" per le impostazioni correlate all'account.

• Se un'impostazione si collega direttamente al Web, usare un'icona selezionabile SettingsCard con IsClickEnabled="True" e un'icona di azione appropriata per indicare la navigazione esterna.

• Combinare le impostazioni meno usate in un oggetto SettingsExpander in modo che le impostazioni comuni possano avere un proprio SettingsCard. Inserire contenuto o collegamenti che contengono solo informazioni in una sezione "About".

• Presentare contenuto dall'alto verso il basso in una singola colonna, scorrevole, se necessario.

• Usare i controlli seguenti per le impostazioni dell'app:

  • Toggle switches: per permettere agli utenti di attivare e disattivare i valori.
  • Radio buttons: per permettere agli utenti di scegliere un elemento da un set di un massimo di cinque opzioni correlate che si escludono a vicenda.
  • Menu a discesa: per consentire agli utenti di scegliere da un insieme di opzioni in un elenco a discesa compatto.
  • Caselle di testo: per permettere agli utenti di inserire testo. Usare il tipo di casella di input di testo corrispondente al tipo di testo ottenuto dall'utente, ad esempio un messaggio di posta elettronica o una password.
  • Hyperlinks: per permettere agli utenti di accedere a un'altra pagina all'interno dell'app o a un sito Web esterno.
  • Pulsanti: per consentire agli utenti di avviare un'azione immediata.

• Aggiungere un messaggio descrittivo se uno dei controlli è disabilitato. Utilizzare la proprietà Description di SettingsCard per spiegare perché l'impostazione non è disponibile.

• Quando un utente modifica un'impostazione, l'app deve riflettere immediatamente la modifica, non richiede un pulsante di conferma.

Articoli correlati

• SettingsCard e SettingsExpander (Windows Community Toolkit)
• Nozioni di base sulla progettazione dei comandi
• Linee guida per i controlli del progresso
• Archiviare e recuperare i dati dell'app