Modelli compositi per Visual Studio

I modelli compositi combinano elementi di interazione e progettazione in configurazioni distinte. Alcuni dei modelli compositi più importanti in Visual Studio per quanto riguarda la coerenza includono:

• Visualizzazione dei dati

• Interfaccia utente su oggetti e pekeking

• Modelli di selezione

• Persistenza e salvataggio delle impostazioni

• Input tocco

Effetto di visualizzazione dei dati

I grafici sono un modo visivo per aggregare e visualizzare i dati per migliorare il processo decisionale. Possono aiutare gli utenti a dover affrontare un sacco di dati, ma poco significato vedere cosa merita attenzione e cosa potrebbe richiedere un'azione.

L'utente trarrà vantaggio da un grafico se una delle condizioni seguenti è vera:

• Il grafico aiuterà gli utenti a identificare le attività su cui possono agire?

• Il grafico consentirà agli utenti di prevedere le conseguenze delle potenziali modifiche?

• Il grafico aiuterà gli utenti a individuare le tendenze e identificare i modelli?

• Il grafico consentirà agli utenti di prendere decisioni migliori?

• Il grafico risponderà a una domanda specifica che gli utenti potrebbero avere nel contesto specificato?

Regole generali per i grafici

• Etichettare chiaramente i dati. Le illustrazioni senza spiegazione sono solo belle immagini.

• Iniziare gli assi a zero per evitare proporzioni asimmetrie. Le dimensioni della linea e della barra sono importanti segnali visivi per comprendere le relazioni tra i punti dati.

• Creare grafici, non infografici. Le infografiche sono rappresentazioni artistiche dei dati e il loro obiettivo principale è la narrazione visiva. I grafici possono (e dovrebbero) essere visivamente accattivanti, ma lasciare che i dati parlino per se stesso.

• Evitare skeumorism, grafici a barre pictoriali, segni hash di contrasto e altri tocchi infografici.

• Non usare effetti 3D come elemento decorativo. Usarli solo se sono realmente integrali alla capacità dell'utente di comprendere le informazioni.

• Evitare di usare più linee e riempimenti, poiché più di due colori possono rendere questo tipo di grafico difficile da leggere e interpretare correttamente.

• Non usare un grafico (o alcuna illustrazione) come unico mezzo per comprendere un concetto o interagire con i dati. Ciò presenta difficoltà per gli utenti con problemi visivi.

• Non usare grafici come elementi gratuiti o decorativi in una pagina. In altre parole, se un grafico non aggiunge alcun valore o aiuta gli utenti a risolvere un problema, non usarlo.

Tipi di grafico

I tipi di grafici usati in Visual Studio includono grafici a barre, grafici a linee, un grafico a torta modificato noto come grafico a anello o "grafico ad anello", sequenze temporali, tracciati a dispersione (detti anche "grafici cluster") e diagrammi di Gantt. Ogni tipo di grafico è utile per comunicare un tipo diverso di informazioni.

Altre considerazioni sulla creazione di grafici

Colore

È disponibile una tavolozza specifica dei colori di grafico definiti per l'uso in Visual Studio. La tavolozza è accessibile per i principali tipi di cecità dei colori e i colori possono essere differenziati anche se usati come sezioni molto strette di colore. È possibile usare questi colori in qualsiasi combinazione per qualsiasi tipo di grafico o grafico nell'interfaccia utente. Non è necessario usare tutti e sette i colori se non è necessario che molti colori distinti. Questi colori non sono stati progettati per essere usati con alcun elemento di primo piano, quindi non posizionare testo o glifi sopra questi colori. Queste tonalità devono essere hardcoded ed esposte alla personalizzazione dell'utente in Opzioni strumenti > (vedere Esposizione dei colori per gli utenti finali).

Swatch	Hex	RGB
	#71B252	113,178,82
	#BF3F00	191,63,0
	#FCB714	252,183,20
	#903F8B	144,63,139
	#117AD1	17,122,209
	#79D7F2	121,215,242
	#B5B5B5	181,181,181

Interfaccia utente su oggetti e pekeking

Questa sezione fornisce il contesto per l'anteprima, nota anche come visualizzazione a comparsa del codice, un tipo di interfaccia utente su oggetti univoca per Visual Studio.

• L'interfaccia utente on-object deve fornire all'utente maggiori informazioni o interattività senza sottrarre l'attività principale.

• Il modello principale per l'interfaccia utente su oggetti in Visual Studio è noto come "informazioni al momento dell'attenzione".

• L'interfaccia utente su oggetti in Visual Studio è inline o mobile e durevole o temporanea.

  • La visualizzazione a comparsa del codice, un tipo di interfaccia utente su oggetti in Visual Studio, è inline e durevole.

  • CodeLens, un tipo di interfaccia utente su oggetti in Visual Studio, è mobile e temporaneo

  Comprendere il funzionamento di un frammento di codice o trovare dettagli su tale codice, spesso richiede uno sviluppatore di cambiare contesto e passare ad altri contenuti o a un'altra finestra. Questi cambiamenti di contesto possono comportare interruzioni, perché gli utenti possono perdere lo stato attivo sull'attività originale se lasciano la finestra principale. Inoltre, il recupero del contesto originale può essere difficile, soprattutto se il cambio di finestre ha causato l'oscuramento del codice originale da parte di altre interfacce utente.

  L'interfaccia utente su oggetti segue un modello denominato "informazioni al momento dell'attenzione". Questi messaggi, finestre popup e finestre di dialogo offrono agli utenti informazioni aggiuntive e pertinenti che aggiungono chiarimenti o interattività senza perdere lo stato attivo sull'attività principale. Esempi di interfaccia utente su oggetti includono finestre popup visualizzate quando un utente posiziona il puntatore del mouse su un'icona nell'area di notifica, la sottolineatura rossa ondulata sotto una parola digitata in modo non digitato e la visualizzazione a comparsa introdotta in Visual Studio 2013.

Punti decisionali

In Visual Studio esistono diversi modi per usare questo modello di informazioni al momento dell'attenzione. Scegliere il meccanismo corretto e implementarlo in modo coerente e prevedibile è essenziale per l'esperienza complessiva. In caso contrario, gli utenti potrebbero essere presentati con un'esperienza confusa o incoerente che sottrae lo stato attivo dal contenuto stesso.

Relazioni tra contenuto master e dettaglio

Le informazioni al momento dell'attenzione vengono usate per visualizzare una relazione tra il contenuto su cui l'utente è incentrato (il contenuto "master") e il contenuto correlato aggiuntivo (il contenuto "dettagli"). In questo modello, il contenuto dei dettagli è chiaramente correlato al contenuto con cui l'utente sta lavorando e può essere visualizzato vicino al contenuto master. Le informazioni supplementari o le informazioni che non possono essere riepilogate senza sovraccaricare il contenuto master devono seguire un altro modello, ad esempio una finestra degli strumenti.

• Visualizzare sempre il contenuto dei dettagli in prossimità del contenuto master.

• Assicurarsi sempre che il contenuto dettagliato consenta comunque a un utente di rimanere incentrato sul contenuto master. Spesso, il modo migliore per ottenere questo risultato consiste nel rendere il contenuto dettagliato il più vicino possibile al contenuto master. Questa operazione può essere eseguita eseguendo il rendering del contenuto dettagliato in una finestra popup accanto al contenuto master o eseguendo il rendering del contenuto dettagliato inline sotto il contenuto master.

• Non usare mai le informazioni al punto di attenzione che allontana l'utente dal contenuto master. Se gli utenti devono visualizzare separatamente il contenuto dei dettagli, esporre un'azione esplicita che consente all'utente di eseguire questa operazione.

Dettagli di progettazione

Dopo aver stabilito che l'interfaccia utente su oggetti è la scelta giusta, esistono quattro considerazioni principali sulla progettazione:

1. Persistenza: si prevede che il contenuto sia durevole o temporaneo? Gli utenti vogliono mantenere le informazioni visibili per fare riferimento o interagire con? Oppure gli utenti vogliono esaminare rapidamente le informazioni e quindi continuare con l'attività principale?

2. Tipo di contenuto: il contenuto sarà informativo, interattivo o di navigazione? L'utente necessita di dettagli aggiuntivi sul contenuto master? L'utente deve completare un'attività che influisce sul contenuto master? Oppure l'utente deve essere indirizzato a un'altra risorsa?

3. Tipo di indicatore: un indicatore di ambiente ha senso? Le informazioni possono essere riepilogate in modo utile e visualizzate senza sovraccaricare il contenuto master?

4. Movimenti: quali movimenti verranno usati per richiamare e ignorare l'interfaccia utente? In che modo l'utente visualizzerà il contenuto dei dettagli e lo invierà? Esiste un valore nell'aggiunta di un movimento, ad esempio l'aggiunta per passare da uno stato temporaneo a uno stato durevole?

   Ognuno di questi quattro punti decisionali avrà un impatto sui componenti principali dell'interfaccia utente su oggetti.

Componenti dell'interfaccia utente su oggetti

1. Tipo contenitore (relatore di contenuto)

   • Virgola mobile

   • Incorporato

2. Content type

   • Informativo: dati che potrebbero essere statici o dinamici

   • Praticabile: comandi che modificano il contenuto master

   • Navigazione: collegamenti che portano l'utente a un'altra finestra o a un'altra applicazione, ad esempio MSDN

3. Gesti

   • Chiamata

   • Licenziamento

   • Appuntare

   • Altre interazioni

4. Modello di persistenza e commit

   • Temporaneo

   • Durevole

   • Automatico

   • Al bisogno

5. Indicatori di ambiente (facoltativo)

   • Sottolineatura ondulata

   • Icona smart tag

   • Altri indicatori di ambiente

Tipo contenitore (relatore di contenuto)

Sono disponibili due opzioni principali per presentare il contenuto al momento dell'attenzione:

1. Inline: un relatore inline, ad esempio la visualizzazione a comparsa introdotta nell'editor di codice di Visual Studio 2013, rende spazio per il nuovo contenuto spostando il contenuto esistente.

   • Preferire relatori inline se si prevede che gli utenti vogliano dedicare una quantità significativa di tempo a cui fare riferimento o interagire con il contenuto presente.

   • Evitare relatori inline se si prevede che gli utenti vogliano dare un'occhiata alle informazioni presenti, quindi continuare con l'attività principale con interruzioni minime.

2. Mobile: un relatore mobile viene posizionato il più vicino possibile al contenuto selezionato, ma non modifica il layout del contenuto esistente. È possibile usare varie strategie, ad esempio la visualizzazione di un pannello di contenuto mobile sullo spazio vuoto più vicino disponibile al simbolo selezionato.

   • Preferire relatori mobili se si prevede che gli utenti vogliano dare un'occhiata alle informazioni presenti, quindi continuare con l'attività principale con interruzioni minime.

   • Evitare relatori mobili se si prevede che gli utenti vogliano dedicare molto tempo a fare riferimento o interagire con il contenuto presente.

Content type

Esistono tre tipi principali di contenuto che possono essere visualizzati all'interno di qualsiasi contenitore dell'interfaccia utente su oggetti. È possibile visualizzare qualsiasi combinazione di questi tipi di informazioni. I tre tipi sono:

1. Informativo: la maggior parte dei contenitori dell'interfaccia utente su oggetti visualizzerà un certo tipo di contenuto informativo. Il contenuto può rappresentare informazioni sullo stato attuale dell'ambiente oppure può rappresentare informazioni su un potenziale stato futuro dell'ambiente. Ad esempio, può essere usato per mostrare l'effetto di un particolare comando, ad esempio un refactoring, nel codice esistente.

   • Usare sempre la rappresentazione canonica delle informazioni visualizzate. Ad esempio, il codice dovrebbe essere simile al codice, completo dell'evidenziazione della sintassi e deve rispettare qualsiasi tipo di carattere e altre impostazioni dell'ambiente impostate dall'utente.

   • Considerare sempre il supporto di qualsiasi azione sul contenuto informativo che sarebbe possibile se tali informazioni vengano presentate come contenuto master. Ad esempio, se si presenta codice esistente all'interno di un contenitore dell'interfaccia utente su oggetti, è consigliabile supportare la possibilità di esplorare e modificare il codice.

   • Valutare sempre l'uso di un colore di sfondo diverso se si presenta contenuto informativo che rappresenta un potenziale stato futuro.

2. Praticabile: alcuni contenitori dell'interfaccia utente su oggetti offrono la possibilità di eseguire alcune azioni sul contenuto master, ad esempio l'esecuzione di un'operazione di refactoring.

   • Posizionare sempre i comandi interattivi separatamente dal contenuto informativo.

   • Abilitare e disabilitare sempre le azioni quando appropriato.

   • Fare sempre riferimento alle linee guida standard per la rappresentazione dei comandi all'interno delle finestre di dialogo.

   • Mantenere sempre il numero di azioni esposte in un contenitore dell'interfaccia utente su oggetti a un minimo assoluto. L'interazione con l'interfaccia utente su oggetti deve essere un'esperienza leggera e veloce. L'utente non deve dover spendere energia per la gestione del contenitore dell'interfaccia utente su oggetti stesso.

   • Considerare sempre come e quando un contenitore dell'interfaccia utente su oggetti verrà chiuso o ignorato. Come procedura consigliata, qualsiasi azione che conclude il dialogo tra il contenuto master e dettagliato deve anche chiudere il contenitore dell'interfaccia utente sull'oggetto quando tale azione viene richiamata.

3. Navigazione: alcuni contenitori dell'interfaccia utente su oggetti includono collegamenti che portano l'utente a un'altra finestra o applicazione, ad esempio l'apertura di un articolo MSDN nel Web browser dell'utente.

   • Anteporre sempre qualsiasi collegamento di spostamento con "Apri" in modo che gli utenti non vengano sorpresi dal passaggio ad altri contenuti.

   • Separa sempre i collegamenti di spostamento da collegamenti interattivi.

Indicatori di ambiente (facoltativo)

Gli indicatori di ambiente possono essere sottili, incluso il testo presentato in un colore a contrasto dal resto del codice, o ovvio, inclusi simboli tickler, ad esempio sottolineature ondulate e icone smart tag. Gli indicatori di ambiente comunicano la disponibilità di informazioni aggiuntive rilevanti. Idealmente, forniscono informazioni utili anche senza richiedere all'utente di interagire con loro.

• Posizionare sempre un indicatore di ambiente in modo che non distragga o sovraccarici l'utente. Se non è possibile posizionare un indicatore di ambiente in modo tale, prendere in considerazione un'altra soluzione.

• Posizionare sempre l'indicatore di ambiente il più vicino possibile al contenuto a cui è correlato.

• Provare sempre a creare un indicatore che riepiloga le informazioni che rende disponibili. Valutare la possibilità di fornire un conteggio del numero di elementi di dati disponibili (ad esempio, "3 riferimenti" anziché semplicemente "Riferimenti") o pensare a un altro modo per riepilogare i dati.

  • Nei casi in cui i dati per un indicatore non possono sempre essere calcolati e visualizzati, valutare immediatamente la possibilità di fornire feedback progressivo man mano che vengono calcolati i valori. Si consideri, ad esempio, l'animazione delle modifiche che riflettono gli aggiornamenti dei dati disponibili, in modo analogo al modo in cui il riquadro live della posta elettronica in Windows Telefono viene aggiornato man mano che aumenta il numero di messaggi di posta elettronica non letti.

• Non aggiungere mai più indicatori di quanto un utente possa ragionevolmente accettare per una determinata parte di contenuto. Gli indicatori di ambiente devono essere utili senza richiedere alcuna interazione da parte dell'utente. Gli indicatori perdono l'atmosfera se richiedono overflow e altri controlli di gestione per visualizzarli.

Gesti

Un aspetto chiave di consentire all'utente di mantenere lo stato attivo sul contenuto master consiste nel supportare i movimenti corretti per aprire e ignorare il contenuto di dettagli aggiuntivo.

• Richiedere sempre all'utente di eseguire un gesto esplicito per aprire il contenuto aggiuntivo. I movimenti aperti comuni includono:

  • Passaggio del mouse: descrizioni comando o contenuto informativo non interattivo

  • Comando esplicito: relatore inline

  • Fare doppio clic sull'indicatore di ambiente: finestra popup CodeLens

• Ignorare sempre il contenuto dei dettagli ogni volta che l'utente preme il tasto ESC.

• Considerare sempre il contesto dell'interfaccia utente su oggetti. Per i relatori di contenuto che consentono l'interazione all'interno del contenitore, valutare attentamente se visualizzare informazioni aggiuntive al passaggio del mouse, che è probabile che si verifichi un'interruzione del flusso di lavoro dell'utente.

• Non visualizzare mai il contenuto al passaggio del mouse che sembra essere modificabile o invita l'interazione dell'utente. Questo comportamento può frustrare gli utenti se tentano di spostare il cursore sul contenuto dei dettagli, perché il comportamento standard per una descrizione comando consiste nell'ignorare immediatamente quando il cursore non è più sul contenuto master che lo ha prodotto.

Modelli di selezione

Un modello di selezione è il meccanismo usato per indicare e confermare le operazioni su uno o più oggetti di interesse all'interno dell'interfaccia utente. Questo argomento illustra i modelli di interazione di selezione all'interno degli editor di documenti di Visual Studio: editor di testo, superfici di progettazione e superfici di modellazione.

Gli utenti devono avere un modo per indicare a Visual Studio cosa stanno lavorando e Visual Studio deve rispondere in modo prevedibile con commenti e suggerimenti agli utenti su ciò che funziona. Le differenze o una comunicazione errata tra l'utente e l'interfaccia utente possono comportare un'azione che può avere conseguenze impreviste. Spesso, l'errore passa inosservato fino a quando l'utente non vede che qualcosa è mancante o è stato modificato. I modelli di selezione sono quindi uno dei componenti più critici della progettazione dell'interfaccia utente. Anche se i modelli di selezione in Visual Studio sono coerenti con Windows, esistono lievi variazioni.

In Visual Studio, come in Windows, i modelli di selezione variano a seconda del contesto in cui si verifica l'interazione. Le selezioni possono verificarsi in quattro tipi di oggetti:

• Testo

• Oggetti grafici

• Elenchi e alberi

• Griglie

  All'interno di questi oggetti sono disponibili tre tipi di selezioni:

• Contigui

• Disgiunto

• Area

Ambito

Il componente più importante della selezione è garantire che l'utente sappia in quale finestra funziona (attivazione) e dove si trova lo stato attivo (selezione). Visual Studio estende la funzionalità di gestione delle finestre in Windows, ma lo schema di attivazione è lo stesso: l'interazione con una finestra porta lo stato attivo alla finestra. Visual Studio ha due indicatori per l'attivazione: uno per le finestre dei documenti e uno per le finestre degli strumenti.

Per le finestre dei documenti, la finestra attiva è indicata da una scheda della finestra del documento che arriva davanti e ne modifica il colore di sfondo:

Selezione scheda attiva

Per le finestre degli strumenti, la finestra attiva è indicata da una modifica nel colore dell'area della barra del titolo della finestra degli strumenti:

Finestra degli strumenti attiva che mostra la selezione primaria di un nodo

Finestra degli strumenti inattiva che mostra la selezione latente del nodo

Quando una finestra è attiva, lo stato attivo è indicato in base ai modelli di selezione descritti in questa sezione delle linee guida.

Contesto

Visual Studio è stato progettato per mantenere un concetto forte di contesto, tenendo traccia della posizione in cui l'utente sta lavorando. È attiva una sola finestra, indipendentemente dal fatto che si tratti di uno strumento o di una finestra del documento. Tuttavia, la finestra del documento più in alto mantiene sempre una selezione latente. Anche se lo stato attivo potrebbe trovarsi in una finestra degli strumenti, la finestra del documento che è stata l'ultima attiva visualizza una selezione, anche in uno stato inattivo. Questa operazione viene eseguita per mantenere il contesto dell'utente nel documento che stava modificando, mostrando che Visual Studio ha mantenuto il proprio stato in modo da poter tornare e spostarsi facilmente tra finestre degli strumenti e finestre dei documenti.

Selezione del testo

Gli editor di Visual Studio strettamente testuali, ad esempio l'editor di testo predefinito, usano lo stesso modello di selezione del testo e l'aspetto descritti nella pagina Mouse e puntatori delle Linee guida per l'interazione dell'esperienza utente di Windows su MSDN. Lo stato attivo di input nell'editor di testo è indicato da una barra verticale denominata punto di inserimento. Il punto di inserimento è un singolo pixel spesso e colorato come l'inverso di ciò che appare dietro di esso. Lampeggia in base alla frequenza impostata dall'impostazione Frequenza di lampeggiatura cursore nella scheda Velocità dell'applet tastiera in Pannello di controllo.

Selezione contigua e non contigua

La selezione all'interno dell'editor di testo è contigua. Le selezioni di testo non contigue non sono consentite, ma devono essere indirizzate negli editor di oggetti grafici. Quando il puntatore del mouse dell'utente si trova su un'area di testo, il cursore passa a un raggio I. Un singolo clic posiziona il punto di inserimento nell'editor di testo nella posizione di clic. Tenendo premuto il pulsante del mouse si avvia un'evidenziazione della selezione e il rilascio del pulsante del mouse termina l'evidenziazione della selezione.

Selezione dell'area (selezione casella)

Visual Studio supporta le selezioni di aree nell'editor di testo e viene chiamata selezione casella. La selezione della casella consente all'utente di selezionare un'area di testo che non segue il normale flusso di testo. Come per la selezione di testo standard, la selezione deve essere contigua. La selezione della casella viene avviata tenendo premuto ALT durante il trascinamento con il mouse. La selezione della casella può essere avviata anche tenendo premuti i tasti ALT e MAIUSC mentre si usano i tasti di direzione per indicare l'area di selezione. La selezione casella usa l'evidenziazione di selezione normale e mostra il cursore del punto di inserimento lampeggiante alla fine dell'area di selezione.

Selezione area (casella) in Visual Studio

Aspetto selezione testo

I colori utilizzati per la selezione attiva e inattiva nell'editor possono essere personalizzati. Per personalizzare l'aspetto visivo dell'editor, un utente può passare a Opzioni strumenti > e quindi cercare in Editor di testo Tipi di carattere e colori > dell'ambiente>.

Selezione grafica

Interazione

La selezione di oggetti grafici può essere complessa e dipende da diversi fattori:

• Modello di selezione principale dell'editor. Gli editor che contengono oggetti grafici possono essere usati anche per modificare il testo o le griglie. Ad esempio, l'editor potrebbe essere un editor basato su testo che supporta anche il posizionamento di oggetti grafici, ad esempio la finestra di progettazione XAML di Visual Studio. Il supporto di più tipi di oggetto può influire sul modo in cui l'utente seleziona i gruppi costituiti da diversi tipi di oggetti.

• Supporto per gli stati di selezione primaria e secondaria. Un editor può fornire stati di selezione primari e secondari in modo che gli oggetti possano essere modificati all'unisono, allineati tra loro, ridimensionati insieme e così via.

• Supporto per la modifica sul posto. Gli editor possono anche consentire la modifica del contenuto degli oggetti grafici. Ad esempio, una forma rettangolo può contenere anche testo all'interno che può essere modificato dall'utente. Inoltre, il testo potrebbe essere centrato o giustificato. La modifica sul posto implica un livello più dettagliato di interazione dell'utente e pertanto richiede un set appropriato di segnali visivi per la presentazione delle informazioni sullo stato all'utente.

Interazione del mouse

Input	Risultato
Fare clic su un oggetto non selezionato	Seleziona l'oggetto e visualizza una linea tratteggiata e i quadratini di selezione, se l'oggetto è ridimensionabile.
Fare clic su un oggetto selezionato	Attiva la modifica sul posto se l'oggetto lo supporta. Facendo clic all'esterno dell'oggetto viene disattivata la modalità di modifica sul posto.
Fare doppio clic su un oggetto	Apre il code-behind dell'oggetto per la modifica e potrebbe inserire un gestore eventi predefinito, se appropriato.
Puntare a un oggetto	Modifica il puntatore al cursore di spostamento. L'aspetto dell'oggetto, ad esempio la luminosità o il colore, potrebbe cambiare.
Puntare a un handle di selezione	Modifica il puntatore al cursore di ridimensionamento. Per gli oggetti che supportano la rotazione, alcuni handle di selezione potrebbero modificare il puntatore in un cursore di rotazione mentre il puntatore viene posizionato in modo diverso (ad esempio, spostato più lontano) rispetto all'handle di selezione.
Trascinare	Anche se l'oggetto non è selezionato in precedenza, modifica il puntatore al cursore di spostamento e sposta l'oggetto.
L'editor perde lo stato attivo	Disattiva la modalità di modifica sul posto, anche se l'oggetto mantiene il contenuto e l'aspetto che aveva durante l'ultima operazione/stato di selezione.
Selezione di oggetti	Indicato da un bordo, da una linea punteggiata o da un altro trattamento visivamente distinto per evidenziare il limite dell'oggetto.
Ridimensionare un oggetto selezionato	Indicato dagli handle di selezione. Un oggetto ridimensionabile ha otto handle, che rappresentano ogni direzione in cui può essere ridimensionata. È possibile utilizzare meno handle se l'oggetto può essere ridimensionato solo in determinate direzioni. Quando l'utente ridimensiona un oggetto fino a dove otto handle non sarebbero interattivi, è possibile usare quattro handle. Le dimensioni dell'handle devono essere associate al bordo della finestra e alle metriche dei bordi con la funzione API GetSystemMetrics in modo che le dimensioni siano proporzionalmente alla risoluzione dello schermo.
Ruotare un oggetto selezionato

Interazione tramite tastiera

Input	Risultato
Tab	Sposta l'indicatore dello stato attivo tra l'ordine logico degli oggetti nell'editor. Questo può essere da sinistra a destra o dall'alto verso il basso a seconda del valore della proprietà TabIndex (o equivalente), dell'ordine di creazione dell'oggetto e dello scopo complessivo dell'editor. MAIUSC+TAB inverte la direzione dell'indicatore di stato attivo.
Barra spaziatrice	Attiva la modalità di panoramica mentre viene mantenuta la sequenza di tasti. Per eseguire la panoramica della posizione del riquadro di visualizzazione, è necessario un input aggiuntivo del mouse.
CTRL+BARRA SPAZIATRICE	Attiva la modalità zoom mentre viene mantenuta la sequenza di tasti. È necessario un input aggiuntivo del mouse per aumentare e ridurre il fattore di zoom.
CTRL+ALT+Segno meno	Riduce il fattore di zoom di un livello.
CTRL+ALT+SEGNO PIÙ	Aumenta il fattore di zoom di un livello.
MAIUSC O CTRL	Aggiunge l'oggetto al gruppo di selezione. Ctrl consente anche di rimuovere gli oggetti singolarmente dal gruppo di selezione.
INVIO	Esegue il comando predefinito per l'oggetto (in genere Apri o Modifica).
F2	Attiva la modifica sul posto per l'oggetto .
Tasti di direzione	Sposta gli oggetti selezionati nella direzione del tasto freccia premuto, in piccoli incrementi (ad esempio, 1 pixel alla volta)
Ctrl+tasti di direzione	Sposta gli oggetti selezionati nella direzione del tasto freccia premuto, con incrementi maggiori (ad esempio, 10 pixel alla volta)
MAIUSC+tasti freccia	Ridimensiona gli oggetti selezionati nella rispettiva direzione, in piccoli incrementi (ad esempio, 1 pixel alla volta)
CTRL+MAIUSC+tasti di direzione	Ridimensiona gli oggetti selezionati nella rispettiva direzione, in incrementi maggiori (ad esempio, 10 pixel alla volta)

Quando gli utenti modificano i controlli sul posto, potrebbe essere opportuno che gli oggetti vengano ridimensionati automaticamente con l'input dell'utente. Ad esempio, se l'utente modifica un controllo etichetta, l'etichetta dovrebbe aumentare per visualizzare il testo appena digitato dall'utente. In caso contrario, l'utente deve ridimensionare manualmente il controllo dopo la modifica del testo. Se l'utente ha un sacco di controlli, diventa un'attività rote e unproductive.

Contenitori grafici

In alcuni casi, gli editor grafici forniscono contenitori per altri oggetti grafici, ad esempio il controllo Pannello Windows Form o il controllo Layout griglia nella finestra di progettazione HTML. Se l'editor fornisce contenitori per altri oggetti grafici, è consigliabile usare il modello di selezione seguente solo per il contenitore (gli oggetti all'interno del contenitore seguono il modello standard come descritto in precedenza):

Input	Risultato
Fare clic con un solo clic sul contenitore	Seleziona l'oggetto contenitore senza selezionare direttamente uno degli oggetti contenuti. Il contenitore può essere spostato e/o ridimensionato con input standard del mouse e della tastiera (come descritto sopra). Gli oggetti contenuti vengono spostati in relazione al contenitore, ma gli oggetti contenuti non vengono ridimensionati a meno che non vengano selezionati direttamente.
Passare il puntatore del mouse sull'area limite del contenitore	Trasforma il mouse nel cursore di spostamento, a indicare che il contenitore può essere spostato.
Trascinare l'area limite del contenitore	Modifica il mouse sul cursore di spostamento e sposta il contenitore (e gli oggetti contenuti all'interno). Il contenitore non può essere spostato senza prima essere selezionato con un solo clic.
Fare clic su un oggetto all'interno del contenitore	Deseleziona il contenitore (se selezionato) e seleziona solo l'oggetto selezionato.
MAIUSC+clic su OR CTRL+clic su un oggetto indipendente e/o contenitore	Aggiunge l'oggetto selezionato a un gruppo di selezione o selezione esistente. Se l'oggetto selezionato è già membro del gruppo di selezione, viene rimosso dal gruppo di selezione.

Gli oggetti contenuti devono rispettare il modello di selezione di base come descritto nella sezione precedente. Dal test dell'usabilità della finestra di progettazione Windows Form, gli utenti si aspettavano un accesso trasparente agli oggetti contenuti senza intervenire (imposto dall'oggetto di contenimento).

Selezioni di area e disgiunte

Gli editor di oggetti grafici devono supportare selezioni non contigue. Si noti che questo grafico non mostra l'aspetto del controllo per Visual Studio. Per informazioni dettagliate sulle specifiche visive, vedere Aspetto della selezione di oggetti grafici.

Selezione non contigua

Gli editor grafici devono anche fornire selezioni di area con un indicatore di selezione del tipo di selezione del riquadro di selezione. Se l'editor grafico supporta altri tipi di oggetto (ad esempio testo), le selezioni di aree potrebbero non essere possibili a seconda dei vincoli di tali altri tipi di oggetto.

Selezione del riquadro di selezione

Selezioni primarie e secondarie

Alcuni editor di oggetti grafici consentono all'utente di modificare o allineare oggetti in gruppi. In questo caso, è necessario introdurre il concetto di selezione primaria e secondaria. La selezione primaria è l'oggetto a cui rispondono tutti gli altri oggetti per le operazioni di gruppo. L'oggetto selezionato dall'utente diventa prima il controllo primario e le selezioni successive diventano le selezioni secondarie. La selezione primaria ha un trattamento visivo distinto dalle selezioni secondarie per indicare quale oggetto è primario:

Selezione primaria con due selezioni secondarie

Aspetto della selezione dell'oggetto grafico

I quadratini di selezione sono quadrati disegnati in un motivo rettangolare intorno al rettangolo delimitatore dell'oggetto. Il grafico seguente mostra esempi dei vari stati che un oggetto grafico può avere con handle, ridimensionamento e aspetto di modifica sul posto. Le dimensioni degli handle devono essere associate alle metriche del bordo della finestra e dei bordi usando l'API GetSystemMetrics .

Provincia	Aspetto	Dettagli dell'oggetto visivo
Deselezionata	Valori predefiniti
Selezione primaria	Ridimensionabile
Selezione primaria	Non ridimensionabile
Selezione primaria	Bloccato
Selezione secondaria	Ridimensionabile
Selezione secondaria	Non ridimensionabile
Selezione secondaria	Bloccato
Interfaccia utente attiva	Valori predefiniti

Visualizzare i modelli di selezione

Visualizzazione ad albero

La selezione in una visualizzazione albero viene visualizzata con un'evidenziazione semplice. Se l'utente fa clic sul nome di un nodo o su un'icona del nodo, il nodo diventa selezionato. I glifi triangolari a sinistra del nodo espandono o commettono il controllo albero, ma non influiscono sulla selezione dell'utente, con un'eccezione: quando si comprime un nodo padre quando la selezione si trova su un elemento figlio di tale nodo, la selezione passa all'elemento padre.

Visualizzazione albero tipica in Visual Studio

Le visualizzazioni albero possono supportare selezioni contigue e non contigue, anche in più livelli nell'albero. È necessario eseguire selezioni multiple contigue o disgiunte nei nodi dell'albero visibili. Se un nodo è compresso, la selezione non contigua viene persa e il nodo compresso ottiene la selezione. In questo modo, l'utente può visualizzare i nodi interessati da un'operazione. Quando i nodi vengono compressi, non è chiaro quali nodi potrebbero essere interessati.

Quando viene selezionato un nodo padre, l'operazione deve essere applicata all'elemento padre, anche se in alcuni casi può essere opportuno applicare un'operazione all'elemento padre e a tutti i relativi elementi figlio. In questo caso, fornire un'interfaccia utente aggiuntiva durante l'operazione, ad esempio una casella di controllo o una finestra di dialogo di conferma per rendere esplicita l'opzione "applica a tutti gli elementi figlio" all'utente.

Ridenominazione

Se i nodi nell'albero supportano la ridenominazione, la ridenominazione deve essere eseguita sul posto. L'operazione sul posto deve essere lo standard in tutti i controlli albero in Visual Studio. Specificare un comando di ridenominazione che attiva immediatamente la modalità di modifica sul posto, con la selezione di testo che copre l'intero nome del nodo, pronto per accettare l'input dell'utente. Se il nodo rappresenta un file, il nome file deve contenere l'estensione. L'evidenziazione della selezione deve includere solo il corpo del nome file e non l'estensione.

Input	Risultato
Tasto INVIO	Esegue il commit dell'operazione di ridenominazione
Tasto ESC	Annulla l'operazione di ridenominazione
Clic all'esterno dell'area di modifica sul posto	Esegue il commit dell'operazione di ridenominazione
Annulla	Fornire un semplice annullamento per annullare l'operazione di ridenominazione

Selezione all'interno di elenchi e controlli griglia

Il concetto chiave nella selezione dell'elenco è che è basato su righe, ovvero quando viene effettuata una selezione l'intera riga viene selezionata come unità. Al contrario, le griglie possono consentire l'selezione di celle specifiche senza influire su altri aspetti della riga. Le griglie possono contenere anche una gerarchia di righe nidificate (ad esempio in un TreeGrid) che consentono di selezionare e deselezionare interi rami della gerarchia intere tramite l'interazione con le righe padre. La selezione negli elenchi viene visualizzata da un semplice colore di evidenziazione sull'intera riga di dati. Lo stato attivo viene visualizzato da un bordo punteggiato a singolo pixel intorno alla riga o alla cella modificabile corrente (riga se tutte le celle sono di sola lettura).

Nota

Lo stato attivo e la selezione sono concetti diversi. Lo stato attivo indica quale elemento dell'interfaccia utente è destinato a ricevere l'input non indirizzato in modo esplicito a un altro oggetto, mentre la selezione fa riferimento allo stato dell'inclusione di un oggetto in un set di oggetti su cui possono verificarsi operazioni successive.

Le selezioni negli elenchi possono essere contigue, disgiunte o di area. Quando sono consentite più selezioni, la selezione contigua e non contigua deve essere sempre supportata, mentre il supporto per le selezioni di area (casella) è facoltativo. Le selezioni di aree vengono avviate trascinando nello spazio vuoto del corpo dell'elenco.

Object	Selezione
List	Contigui
List	Disgiunto
List	Area

Facendo clic una volta su un elenco viene selezionata la riga in cui si è verificato il clic. Se l'utente fa clic in una cella di elenco che supporta la modifica sul posto, la cella viene attivata immediatamente per la modifica sul posto. In caso contrario, l'intera riga viene immediatamente selezionata e mostra un'evidenziazione.

Il trascinamento nel corpo dell'elenco esegue una delle tre operazioni seguenti:

• Avvia una selezione di un'area se l'elenco lo supporta e il mouse verso il basso è nello spazio vuoto

• Avvia un'operazione di trascinamento della selezione se la cella o la riga dell'elenco supporta l'origine di trascinamento

• Seleziona la riga corrente

Modifica sul posto

Quando è consentita la modifica sul posto, sono disponibili due modelli di base: controllo di modifica semplice e selezione proprietà. Con un semplice controllo di modifica, il contenuto viene evidenziato e pronto per l'input dell'utente non appena viene attivata la modifica sul posto. Quando viene implementata una selezione proprietà, il pulsante che richiama la selezione proprietà viene visualizzato una volta attivata la modalità di modifica sul posto e la selezione corrente non è evidenziata. Il pulsante di selezione deve essere giustificato a destra nella cella. Per esempi di modifica sul posto, vedere finestra Proprietà ed Elenco attività in Visual Studio.

Supporto per la tastiera

Il supporto della tastiera per la selezione in elenchi e griglie segue le convenzioni standard di Windows:

• I tasti di direzione esplorano l'elenco, selezionando ogni riga/cella mentre viene spostato lo stato attivo.

• Maiusc + freccia esegue una selezione contigua nella direzione dei tasti di direzione.

• Ctrl + freccia seguita da Barra spaziatrice consente di alternare l'aggiunta e la rimozione di elementi elenco dalla selezione, creando una selezione non contigua.

• Per le griglie che contengono gerarchie nidificate, il tasto freccia destra espande una riga padre e il tasto freccia sinistra ne comprime uno.

• Il tasto TAB sposta lo stato attivo tra le celle della riga corrente se le celle sono modificabili.

• Il tasto INVIO esegue il comando predefinito per l'elemento nell'elenco (spesso Apri).

• Il tasto F2 attiva la modifica sul posto per la cella attualmente selezionata.

Persistenza e salvataggio delle impostazioni

Anche se ogni componente software in Visual Studio è in genere responsabile del proprio stato e persistenza, Visual Studio salva automaticamente le impostazioni in alcuni casi, ad esempio con dimensioni e posizioni della finestra. La tabella seguente è una combinazione di impostazioni salvate automaticamente e impostazioni che richiedono l'esecuzione di un'azione esplicita dell'utente o programmata.

Object	Cosa salvare	Quando salvare	Dove salvare
Oggetto selezionabile (ad esempio, una riga di codice)	Punto di interruzione in una riga di codice Collegamento utente associato alla riga di codice	Quando il progetto viene salvato	File di opzioni utente (con estensione suo) per il progetto
Dialog	Posizione del dialogo, se è stato spostato Visualizzazione dell'ultimo utilizzo dell'utente nella finestra di dialogo	Quando il dialogo viene chiuso Al termine della sessione di Visual Studio	In memoria Registro di sistema in HKEY_Current_User
Window	Dimensioni e posizione della finestra	Quando la finestra si chiude Quando la modalità di Visual Studio cambia Al termine della sessione di Visual Studio	File di opzioni utente (con estensione suo) per il progetto File di opzioni personalizzato per le impostazioni della finestra
Documento	Selezione corrente nel documento Visualizzazione del documento Gli ultimi luoghi in cui l'utente ha visitato	Quando il documento viene salvato	File di opzioni utente (con estensione suo) per il progetto
Project	Riferimenti ai file Riferimenti alle directory su disco Riferimenti ad altri software Componenti Informazioni sullo stato del progetto stesso	Quando il progetto viene salvato	File di progetto
Soluzione	Riferimenti ai progetti Riferimenti ai file	Quando il progetto o la soluzione viene salvata	File della soluzione (con estensione sln)
Impostazioni in Opzioni strumenti >	Personalizzazioni della tastiera Personalizzazioni della barra degli strumenti Combinazioni di colori	Quando la finestra di dialogo Opzioni strumenti > viene chiusa Al termine della sessione di Visual Studio	Registro di sistema in HKEY_Current_User

Le operazioni eseguite dall'utente e, quando lo fanno, determinano se un'impostazione viene salvata in memoria (durante la sessione), salvata su disco (tra le sessioni come impostazione del Registro di sistema), come parte del file di progetto o soluzione stessa, come parte del file di opzioni della soluzione (con estensione suo) o come file di impostazioni personalizzato che solo tale componente software conosce. La tabella precedente mostra diversi eventi in cui è possibile salvare le impostazioni. Tuttavia, esistono altri casi in cui è possibile salvare lo stato:

• Quando l'utente cambia posizione all'interno di una finestra di dialogo o di una finestra

• Quando l'utente trasferisce lo stato attivo a un'altra finestra

• Quando l'utente passa dalla progettazione alla modalità di debug

• Quando l'utente si disconnette dal proprio account

• Quando il computer entra in ibernazione o si arresta

• Quando il computer/disco rigido sta per essere riformattato e configurato di nuovo

Configurazioni delle finestre

Una configurazione della finestra è la presentazione di base dell'ambiente di sviluppo: è uno schema costituito dall'elenco delle finestre degli strumenti presenti e dal modo in cui sono disposti. Per le finestre gestite dall'IDE (finestre IDE), le informazioni sul layout vengono rese persistenti per utente, quindi quando un utente avvia l'IDE, il layout della finestra viene visualizzato come all'ultima uscita da Visual Studio. Lo stato e la posizione delle finestre dell'IDE vengono mantenuti in un file di opzioni personalizzato in formato XML. Le finestre degli strumenti create dai pacchetti caricati nell'IDE mantengono le informazioni sullo stato nel Registro di sistema e possono essere o meno per utente.

Layout specifici del profilo

Ogni profilo include layout della finestra degli strumenti, organizzati in modo familiare a utenti di sviluppatori specifici (gli sviluppatori di Visual C++ prevedono di visualizzare il Esplora soluzioni a sinistra dell'IDE, mentre gli sviluppatori C# si aspettano di visualizzare il Esplora soluzioni a destra). I layout di finestra specifici del profilo vengono caricati dopo che l'utente sceglie un profilo all'avvio. Un autore del pacchetto deve determinare il layout della finestra più adatto per l'esperienza del cliente, sapendo che le modifiche apportate dall'utente alla configurazione della finestra verranno quindi mantenute.

Input tocco

Gli utenti usano sempre più prodotti di sviluppo Microsoft nei dispositivi touch. Tuttavia, esistono barriere che rendono difficile l'uso degli strumenti di sviluppo nei dispositivi touch. Gli utenti si aspettano che i nostri prodotti forniscano un'esperienza di tocco affidabile e precisa. Lo scopo di queste linee guida è quello di informare le decisioni sulle funzionalità di tocco da incorporare e incoraggiare un'esperienza di tocco coerente in Visual Studio e nei prodotti correlati.

Livelli di esperienza

I livelli di esperienza seguenti sono destinati a fungere da guida per aiutare i team a decidere quali funzionalità di tocco offrire in base al livello desiderato di interesse per gli investimenti in contatto.

• L'esperienza di base è destinata ai team che vogliono fornire funzionalità di tocco, in modo che non ci siano dead-end durante il loro lavoro.

• L'esperienza ottimizzata è destinata ai team che vogliono fornire le funzionalità di tocco più comuni, ad esempio quelle in genere disponibili nelle applicazioni browser Internet.

• L'esperienza con privilegi elevati è destinata ai team che vogliono aggiungere funzionalità come movimenti o altre funzionalità facoltative che possono rendere il tocco dell'applicazione intuitivo.

	Esperienza di base	Esperienza ottimizzata	Esperienza con privilegi elevati
Consente agli utenti di ...	Correzione del codice e della lettura a livello di progetto/soluzione senza terminazioni non recapitabili	Eseguire attività di manutenzione, refactoring e navigazione	Operare in un'esperienza coerente, intuitiva e fluida con fiducia
Editor	Panoramica del tocco e selezione Tocco della barra di scorrimento per saltare e premere+trascinamento	Zoom avvicinamento delle dita Scorrimento rapido Selezione Facile uso del menu di scelta rapida
Finestre degli strumenti principali	Panoramica elenco Selezione degli elementi Tocco della barra di scorrimento per saltare e premere+trascinamento	Scorrimento e selezione di elementi semplici
Windowing		Ridimensiona finestra Accesso rapido
Area documento		Navigazione semplice tra file aperti
Movimenti		Assicurarsi che i movimenti comuni funzionino nell'IDE	Azioni basate sui movimenti Supportare il trascinamento della selezione e le finestre di progettazione
Altre considerazioni			Tastiera su schermo personalizzata

Gesti

I movimenti forniscono agli utenti un collegamento ai comandi che potrebbero altrimenti richiedere un'interazione più complessa. Fare riferimento alle linee guida di Windows sui movimenti di tocco comuni per le applicazioni desktop e seguire queste indicazioni per la maggior parte dei movimenti, inclusi gesti semplici come la panoramica e lo zoom.