Linee guida per le impostazioni dell'appGuidelines for app settings

Le impostazioni dell'app sono le parti personalizzabili dall'utente di un'app di Windows, accessibili tramite un'apposita pagina.App settings are the user-customizable portions of your Windows app accessed through an app settings page. 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.For example, a news reader app might let the user specify which news sources to display or how many columns to display on the screen, while a weather app could let the user choose between Celsius and Fahrenheit. Questo articolo fornisce raccomandazioni e procedure consigliate per la creazione e la visualizzazione delle impostazioni di un'app.This article provides recommendations and best practices for creating and displaying app settings.

Quando fornire una pagina di impostazioniWhen to provide a settings page

Ecco alcuni esempi delle opzioni da includere in una pagina di impostazioni per l'app:Here are examples of app options that belong in an app settings page:

  • Opzioni di configurazione che incidono sul comportamento dell'app e che non richiedono modifiche frequenti, ad esempio la scelta tra gradi Celsius o Fahrenheit come unità predefinita per la temperatura in un'app meteo, la modifica delle impostazioni dell'account per un'app e-mail, le impostazioni per le notifiche o le opzioni sull'accessibilità.Configuration options that affect the behavior of the app and don't require frequent readjustment, like choosing between Celsius or Fahrenheit as default units for temperature in a weather app, changing account settings for a mail app, settings for notifications, or accessibility options.
  • Opzioni che dipendono dalle preferenze dell'utente, come musica, effetti audio o combinazioni di colori.Options that depend on the user's preferences, like music, sound effects, or color themes.
  • Informazioni dell'app a cui non si accede con particolare frequenza, come l'informativa sulla privacy, la Guida, la versione dell'app o le note sul copyright.App information that isn't accessed very often, such as privacy policy, help, app version, or copyright info.

I comandi che fanno parte del flusso di lavoro tipico di un'app (ad esempio, la modifica della dimensione del pennello in un'app grafica) non dovrebbero essere inseriti nella pagina delle impostazioni.Commands that are part of the typical app workflow (for example, changing the brush size in an art app) shouldn't be in a settings page. Per altre informazioni sul posizionamento dei comandi, vedi Nozioni di base sulla progettazione dei comandi.To learn more about command placement, see Command design basics.

Indicazioni generaliGeneral recommendations

  • Mantieni semplici le pagine delle impostazioni e usa controlli binari (attivato/disattivato).Keep settings pages simple and make use of binary (on/off) controls. Un interruttore è in genere il controllo migliore per un’impostazione binaria.A toggle switch is usually the best control for a binary setting.
  • Usa i pulsanti di opzione per le impostazioni che consentono agli utenti di scegliere un elemento da un set di un massimo di cinque opzioni correlate che si escludono a vicenda.For settings that let users choose one item from a set of up to 5 mutually exclusive, related options, use radio buttons.
  • Crea un punto di ingresso per tutte le impostazioni dell'app nella pagina delle impostazioni.Create an entry point for all app settings in your app setting's page.
  • Mantieni semplici le impostazioni.Keep your settings simple. Definisci valori predefiniti ragionevoli e mantieni al minimo il numero delle impostazioni.Define smart defaults and keep the number of settings to a minimum.
  • Quando un utente modifica un'impostazione, l'app deve immediatamente riflettere la modifica.When a user changes a setting, the app should immediately reflect the change.
  • Non includere comandi che fanno parte del flusso di lavoro comune dell'app.Don't include commands that are part of the common app workflow.

Punto di ingressoEntry point

Il modo in cui gli utenti accedono alla pagina di impostazioni della tua app deve essere basato sul layout dell'app.The way that users get to your app settings page should be based on your app's layout.

Riquadro di spostamentoNavigation pane

Per un layout con riquadro di spostamento, le impostazioni dell'app dovrebbero essere l'ultimo elemento nell'elenco di scelte ed essere aggiunte in basso.For a nav pane layout, app settings should be the last item in the list of navigational choices and be pinned to the bottom:

Punto di ingresso delle impostazioni dell'app per il riquadro di spostamento

Barra dell'appApp bar

Se si usa una barra dell'app o una barra degli strumenti, posizionare il punto di ingresso delle impostazioni come una delle ultime voci nel menu extra "Altro".If you're using an app bar or tool bar, place the settings entry point as one of the last items in the "More" overflow menu. Se la facilità di individuazione del punto di ingresso per le impostazioni è importante per la tua app, posiziona il punto di ingresso direttamente nella barra dell'app e non all'interno del menu extra.If greater discoverability for the settings entry point is important for your app, place the entry point directly on the app bar and not within the overflow.

Punto di ingresso delle impostazioni dell'app per la barra dell'app

HubHub

Se usi un layout hub, il punto di ingresso per le impostazioni dell'app dovrebbe essere inserito nel menu extra "Altro" di una barra dell'app.If you're using a hub layout, the entry point for app settings should be placed inside the "More" overflow menu of an app bar.

Schede/pivotTabs/pivots

Per un layout con schede o pivot, sconsigliamo di posizionare il punto di ingresso per le impostazioni dell'app come uno degli elementi principali nella struttura di spostamento.For a tabs or pivots layout, we don't recommended placing the app settings entry point as one of the top items within the navigation. Il punto di ingresso per le impostazioni dell'app dovrebbe essere invece inserito nel menu extra "Altro" di una barra dell'app.Instead, the entry point for app settings should be placed inside the "More" overflow menu of an app bar.

Master/dettagliMaster-details

Invece di nascondere il punto di ingresso per le impostazioni dell'app in un riquadro master/dettagli, impostalo come ultimo elemento aggiunto nel primo livello del riquadro master.Instead of burying the app settings entry point deeply within a master-details pane, make it the last pinned item on the top level of the master pane.

LayoutLayout

La finestra delle impostazioni dell'app dovrebbe aprirsi a schermo intero e occupare l'intera finestra.The app settings window should open full-screen and fill the whole window. Se il menu di impostazioni dell'app è composto da un massimo di quattro gruppi di primo livello, i gruppi dovrebbero essere visualizzati a catena verso il basso di una colonna.If your app settings menu has up to four top-level groups, those groups should cascade down one column.

Layout per la pagina delle impostazioni dell'app in dispositivi desktop

Impostazioni "Modalità colore""Color mode" settings

Se l'app consente agli utenti di scegliere la modalità colore dell'app, presenta queste opzioni usando i pulsanti di opzione o una casella combinata con l'intestazione "Scegli una modalità per l'app".If your app allows users to choose the app's color mode, present these options using radio buttons or a combo box with the header "Choose an app mode". Le opzioni dovrebbero essere:The options should read

  • LeggeroLight
  • DarkDark
  • Predefinito di WindowsWindows default

È anche consigliabile aggiungere un collegamento ipertestuale alla pagina Colori dell'app Impostazioni di Windows, in cui gli utenti possono accedere alla modalità dell'app predefinita e modificarla.We also recommend adding a hyperlink to the Colors page of the Windows Settings app where users can access and modify the current default app mode. Usa la stringa "Impostazioni di colore di Windows" per il collegamento ipertestuale.Use the string "Windows color settings" for the hyperlink text.

Sezione "Scegli una modalità"

Sezione Informazioni su e pulsante Invia feedbackAbout section and Feedback button

È consigliabile inserire la sezione "Informazioni su questa app" nell'app come pagina dedicata o in una sezione specifica.We recommend placing "About this App" section in your app either as a dedicated page or in its own section. Se vuoi aggiungere un pulsante "Invia feedback", posizionalo nella parte inferiore della pagina "Informazioni su questa app".If you want a "Send Feedback" button, place that toward the bottom of the "About this App" page.

In un sottotitolo "Note legali" inserisci elementi come "Condizioni per l'utilizzo" e "Informativa sulla privacy" (dovrebbero essere pulsanti con collegamenti ipertestuali con testo a capo), nonché informazioni legali aggiuntive, ad esempio sul copyright.Under a "Legal" subheader, place any "Terms of Use" and "Privacy Statement" (should be hyperlink buttons with wrapping text) as well as additional legal information, such as copyright.

Sezione "Informazioni su questa app" con pulsante "Invia feedback"

Dopo aver creato un elenco di elementi che vuoi includere nella pagina di impostazioni della tua app, tieni conto di queste linee guida:Once you have a list of items that you want to include in your app settings page, consider these guidelines:

  • Usa un'etichetta per raggruppare impostazioni simili o correlate.Group similar or related settings under one settings label.

  • Cerca di non specificare più di 4 o 5 impostazioni in totale.Try to keep the total number of settings to a maximum of four or five.

  • Visualizza le stesse impostazioni indipendentemente dal contesto dell'app.Display the same settings regardless of the app context. Se alcune impostazioni non sono pertinenti in un determinato contesto, disabilitale nel riquadro a comparsa delle impostazioni dell'app.If some settings aren't relevant in a certain context, disable those in the app settings flyout.

  • Usa etichette descrittive di una sola parola per le impostazioni.Use descriptive, one-word labels for settings. Ad esempio, usa il nome "Account" invece di "Impostazioni account" per le impostazioni relative agli account.For example, name the setting "Accounts" instead of "Account settings" for account-related settings. Se vuoi avere una sola opzione per le impostazioni e le impostazioni non si prestano a un'etichetta descrittiva, usa "Opzioni" o "Predefinite".If you only want one option for your settings and the settings don't lend themselves to a descriptive label, use "Options" or "Defaults."

  • Se un’impostazione è collegata direttamente al Web invece che a un riquadro a comparsa, informa l’utente con un indizio visivo, ad esempio "Guida (online)" o "Forum Web", formattato come collegamento ipertestuale.If a setting directly links to the web instead of to a flyout, let the user know this with a visual clue, such as "Help (online)" or "Web forums" styled as a hyperlink. Considera l'idea di raggruppare più link al Web in un riquadro a comparsa con una sola impostazione.Consider grouping multiple links to the web into a flyout with a single setting. Ad esempio, un'impostazione "Informazioni su" potrebbe aprire un riquadro a comparsa con link alle condizioni per l'utilizzo, all'informativa sulla privacy e al supporto per l'app.For example, an "About" setting could open a flyout with links to your terms of use, privacy policy, and app support.

  • Raggruppa le impostazioni meno usate in una singola voce, in modo che le impostazioni più comuni possano avere ognuna una voce propria.Combine less-used settings into a single entry so that more common settings can each have their own entry. Inserisci contenuto o link di carattere puramente informativo in un'impostazione "Informazioni su".Put content or links that only contain information in an "About" setting.

  • Non duplicare la funzionalità nel riquadro "Autorizzazioni".Don't duplicate the functionality in the "Permissions" pane. Windows fornisce questo riquadro per impostazione predefinita e non puoi modificarlo.Windows provides this pane by default and you can't modify it.

  • Aggiungere il contenuto delle impostazioni ai riquadri a comparsa ImpostazioniAdd settings content to Settings flyouts

  • Presenta il contenuto dall'alto al basso in un'unica colonna, che sia possibile scorrere se necessario,Present content from top to bottom in a single column, scrollable if necessary. ma limita lo scorrimento a un massimo di due volte l'altezza dello schermo.Limit scrolling to a maximum of twice the screen height.

  • Usa i controlli seguenti per le impostazioni dell'app:Use the following controls for app settings:

    • Interruttori: per permettere agli utenti di attivare e disattivare i valori.Toggle switches: To let users set values on or off.
    • Pulsanti di opzione: per permettere agli utenti di scegliere un elemento da un set di un massimo di cinque opzioni correlate che si escludono a vicenda.Radio buttons: To let users choose one item from a set of up to 5 mutually exclusive, related options.
    • Casella di input di testo: per permettere agli utenti di immettere testo.Text input box: To let users enter text. Usa il tipo di casella di input di testo corrispondente al tipo di testo che devi ottenere dall'utente, ad esempio email o password.Use the type of text input box that corresponds to the type of text you're getting from the user, such as an email or password.
    • Collegamenti ipertestuali: per permettere agli utenti di accedere a un'altra pagina all'interno dell'app o a un sito Web esterno.Hyperlinks: To take the user to another page within the app or to an external website. Quando un utente fa clic su un collegamento ipertestuale, il riquadro a comparsa Impostazioni si chiude.When a user clicks a hyperlink, the Settings flyout will be dismissed.
    • Pulsanti: per permettere agli utenti di avviare un'azione immediata senza chiudere il riquadro a comparsa Impostazioni corrente.Buttons: To let users initiate an immediate action without dismissing the current Settings flyout.
  • Aggiungi un messaggio descrittivo se uno dei controlli è disabilitato.Add a descriptive message if one of the controls is disabled. Posiziona questo messaggio sopra il controllo disabilitato.Place this message above the disabled control.

  • Rendi animati il contenuto e i controlli come un singolo blocco dopo l'animazione del riquadro a comparsa Impostazioni e dell'intestazione.Animate content and controls as a single block after the Settings flyout and header have animated. Rendi animato il contenuto usando le animazioni enterPage o EntranceThemeTransition con un offset sinistro di 100px.Animate content using the enterPage or EntranceThemeTransition animations with a 100px left offset.

  • Usa intestazioni di sezione, paragrafi ed etichette per facilitare l'organizzazione e la comprensione del contenuto, se necessario.Use section headers, paragraphs, and labels to aid organize and clarify content, if necessary.

  • Se devi ripetere le impostazioni, usa un ulteriore livello di interfaccia utente o un modello di espansione/compressione, ma evita gerarchie con più di due livelli.If you need to repeat settings, use an additional level of UI or an expand/collapse model, but avoid hierarchies deeper than two levels. Ad esempio, un'app meteo che fornisce impostazioni per città potrebbe elencare le città e consentire all'utente di toccare la città per aprire un nuovo riquadro a comparsa o espandere la visualizzazione per visualizzare le impostazioni.For example, a weather app that provides per-city settings could list the cities and let the user tap on the city to either open a new flyout or expand to show the settings options.

  • Se per caricare i controlli o il contenuto Web è necessario del tempo, usa un controllo di stato indeterminato per indicare agli utenti che le informazioni sono in fase di caricamento.If loading controls or web content takes time, use an indeterminate progress control to indicate to users that info is loading. Per altre info, vedi Linee guida per i controlli di stato.For more info, see Guidelines for progress controls.

  • Non usare pulsanti per la navigazione o per il commit delle modifiche.Don't use buttons for navigation or to commit changes. Usa dei collegamenti ipertestuali per passare ad altre pagine e, invece di inserire un pulsante per il commit delle modifiche, salva automaticamente le modifiche relative alle impostazioni dell'app quando un utente chiude il riquadro a comparsa Impostazioni.Use hyperlinks to navigate to other pages, and instead of using a button to commit changes, automatically save changes to app settings when a user dismisses the Settings flyout.