Modelli dei controlli comuni per Visual Studio

Controlli comuni

I controlli comuni costituiscono la maggior parte dell'interfaccia utente in Visual Studio. I controlli più comuni usati nell'interfaccia di Visual Studio devono seguire le linee guida per l'interazione con Windows Desktop. Questo argomento è specifico di Visual Studio e illustra situazioni speciali o dettagli che aumentano le linee guida di Windows.

Controlli comuni in questo argomento

• Barre di scorrimento

• Campi di input

• Caselle combinate ed elenchi a discesa

• Caselle di controllo

• Pulsanti di opzione

• Raggruppare fotogrammi

• Controlli di testo

• Pulsanti e collegamenti ipertestuali

• Visualizzazioni albero

Stile visivo

La prima cosa da considerare quando applicare stili ai controlli è se i controlli verranno usati nell'interfaccia utente con tema. I controlli nell'interfaccia utente standard sono un'interfaccia utente non a tema e devono seguire lo stile normale di Windows Desktop, ovvero che non sono ri-modelli e devono essere visualizzati nell'aspetto del controllo predefinito.

• Finestre di dialogo standard (utilità): non con tema. Non rielaborare il modello. Usa le impostazioni predefinite dello stile di controllo di base.

• Finestre degli strumenti, editor di documenti, superfici di progettazione e finestre di dialogo con tema: usare un aspetto a tema specializzato usando il servizio colori.

Barre di scorrimento

Le barre di scorrimento devono seguire modelli di interazione comuni per le barre di scorrimento di Windows, a meno che non siano aumentate con informazioni sul contenuto, ad esempio nell'editor di codice.

Campi di input

Per un comportamento di interazione tipico, seguire le linee guida di Windows Desktop per le caselle di testo.

Stile visivo

• I campi di input non devono essere stiliti nelle finestre di dialogo dell'utilità. Utilizzare lo stile di base intrinseco per il controllo .

• I campi di input con tema devono essere usati solo nelle finestre di dialogo con tema e nelle finestre degli strumenti.

Interazioni specializzate

• I campi di sola lettura avranno uno sfondo grigio (disabilitato), ma il primo piano predefinito (attivo).

• I campi obbligatori devono avere <Obbligatorio> come filigrane all'interno di essi. Non è consigliabile modificare il colore dello sfondo tranne in situazioni rare.

• Convalida degli errori: vedere Notifiche e stato per Visual Studio

• I campi di input devono essere ridimensionati per adattare il contenuto, non per adattare la larghezza della finestra in cui sono visualizzati, né per trovare una corrispondenza arbitraria con la lunghezza di un campo lungo, ad esempio un percorso. La lunghezza potrebbe essere un'indicazione dell'utente delle limitazioni relative al numero di caratteri consentiti nel campo.

  
  Lunghezza del campo di input non corretta: è improbabile che il nome sia lungo.

  
  Lunghezza corretta del campo di input: il campo di input è una larghezza ragionevole per il contenuto previsto.

Caselle combinate ed elenchi a discesa

Per un comportamento di interazione tipico, seguire le linee guida di Windows Desktop per elenchi a discesa e caselle combinate.

Stile visivo

• Nelle finestre di dialogo dell'utilità non rielaborare il controllo. Utilizzare lo stile di base intrinseco per il controllo .

• Nell'interfaccia utente a tema, le caselle combinate e gli elenchi a discesa seguono il tema standard per i controlli.

Layout

Le caselle combinate e gli elenchi a discesa devono essere ridimensionati in modo da adattare il contenuto, non adattare la larghezza della finestra in cui vengono visualizzati, né corrispondere arbitrariamente alla lunghezza di un campo lungo, ad esempio un percorso.

Risposta errata: la larghezza dell'elenco a discesa è troppo lunga per il contenuto che verrà visualizzato.

Risposta esatta: l'elenco a discesa è ridimensionato per consentire la crescita della traduzione, ma non inutilmente lungo.

Caselle di controllo

Per il comportamento di interazione tipico, seguire le linee guida di Windows Desktop per le caselle di controllo.

Stile visivo

• Nelle finestre di dialogo dell'utilità non rielaborare il controllo. Utilizzare lo stile di base intrinseco per il controllo .

• Nell'interfaccia utente con tema, le caselle di controllo seguono l'tema standard per i controlli.

Interazioni specializzate

• L'interazione con una casella di controllo non deve mai visualizzare una finestra di dialogo o passare a un'altra area.

• Allineare le caselle di controllo con la linea di base della prima riga di testo.

  
  Risposta errata: la casella di controllo è allineata al centro del testo.

  
  Risposta esatta: la casella di controllo è allineata alla prima riga del testo.

Pulsanti di opzione

Per un comportamento di interazione tipico, seguire le linee guida di Windows Desktop per i pulsanti di opzione.

Stile visivo

Nelle finestre di dialogo dell'utilità non applicare lo stile ai pulsanti di opzione. Utilizzare lo stile di base intrinseco per il controllo .

Interazioni specializzate

Non è necessario usare un frame di gruppo per racchiudere le scelte radio, a meno che non sia necessario mantenere la distinzione di gruppo in un layout stretto.

Raggruppare fotogrammi

Per un comportamento di interazione tipico, seguire le linee guida di Windows Desktop per i frame di gruppo.

Stile visivo

Nelle finestre di dialogo dell'utilità non applicare stili ai frame di gruppo. Utilizzare lo stile di base intrinseco per il controllo .

Layout

• Non è necessario usare un frame di gruppo per racchiudere le scelte radio, a meno che non sia necessario mantenere la distinzione di gruppo in un layout stretto.

• Non usare mai un frame di gruppo per un singolo controllo.

• A volte è accettabile usare una regola orizzontale anziché un contenitore di frame di gruppo.

Controlli di testo

Campi di testo statici

Un campo di testo statico presenta informazioni di sola lettura e non può essere selezionato dall'utente. Evitare di usarlo per qualsiasi testo che l'utente potrebbe voler copiare negli Appunti. Tuttavia, il testo statico di sola lettura può cambiare in modo da riflettere una modifica dello stato. Nell'esempio seguente, il testo statico Nome output nel gruppo Informazioni cambia per riflettere le modifiche apportate alla casella di testo Spazio dei nomi radice sopra di essa.

Esistono due modi per visualizzare informazioni sul testo statico.

Il testo statico può essere autonomamente in un dialogo senza alcun contenimento quando non è presente alcun conflitto di raggruppamento. Decidere se le righe aggiuntive di una scatola sono davvero necessarie. Un esempio è la visualizzazione di un percorso di directory in una sezione creata da una riga di gruppo, come illustrato di seguito:

Informazioni sul testo statico nei controlli di testo

In una finestra di dialogo in cui esistono altre aree raggruppate e il contenimento delle informazioni consente la leggibilità e quando una sezione può essere nascosta o visualizzata (come nel riquadro di Finestra Proprietà descrizione) o si vuole essere coerenti con un'interfaccia utente simile, posizionare il testo statico all'interno di una casella. Questa casella di gruppo deve essere una singola regola e colorata con :ButtonShadow

Testo statico nel Finestra Proprietà

Casella di testo di sola lettura

In questo modo l'utente può selezionare il testo all'interno del campo, ma non modificarlo. Queste caselle di testo sono delimitate dal solito chisele 3D con un ButtonShadow riempimento.

Una casella di testo può diventare attiva (modificabile) quando un utente modifica un controllo associato, ad esempio il controllo o l'annullamento della selezione di una casella di controllo o la selezione/disattivazione di un pulsante di opzione. Ad esempio, nella pagina Opzioni strumenti > mostrata di seguito la casella di testo Home Page diventa attiva quando la casella di controllo Usa valore predefinito è deselezionata.

Casella di testo di sola lettura, con stati inattivi e attivi

Uso del testo nelle finestre di dialogo

Linee guida chiave per il testo nei dialoghi:

• Le etichette per caselle di testo, caselle di riepilogo e frame in dialoghi non visualizzati iniziano con un verbo, hanno un maiuscolo iniziale solo per la prima parola e terminano con due punti.

  I controlli di testo nelle finestre di dialogo a tema seguono le linee guida dell'esperienza utente desktop di Windows e non accettano la punteggiatura finale, ad eccezione dei punti interrogativi nei collegamenti della Guida.

• Le etichette per caselle di controllo e pulsanti di opzione iniziano con un verbo, una maiuscola iniziale solo sulla prima parola e non hanno punteggiatura finale.

• Le etichette per pulsanti, menu, voci di menu e schede hanno maiuscole iniziali in ogni parola (maiuscole/minuscole del titolo).

• La terminologia delle etichette deve essere coerente con etichette simili in altre finestre di dialogo.

• Se possibile, chiedere a un writer/editor di scrivere o approvare il testo prima di passare allo sviluppatore per l'implementazione.

• Tutti i controlli devono avere etichette tranne in circostanze particolari in cui la tabulazione è sufficiente. Usare il testo helper quando appropriato.

Testo helper

Incluso nei dialoghi per aiutare l'utente a comprendere lo scopo del dialogo o a indicare quale azione eseguire. Il testo helper deve essere usato solo quando necessario per evitare dialoghi semplici. Le due varianti di testo helper sono finestre di dialogo e filigrana.

Seguire le posizioni comuni per il testo helper ed essere selettivi nell'introduzione di nuove aree. Gli scenari comuni per il testo helper sono:

• Testo helper nei dialoghi, per fornire indicazioni aggiuntive su come interagire con un dialogo complesso.

• Testo della filigrana in finestre o finestre di dialogo vuote, per spiegare perché nessun contenuto è visibile.

• Riquadro della descrizione, ad esempio nella parte inferiore della Finestra Proprietà.

• Testo della filigrana in un editor vuoto, per spiegare l'azione che l'utente deve eseguire per iniziare.

Testo di supporto della finestra di dialogo

Un progettista dell'esperienza utente può aiutare a determinare quando il testo helper è appropriato. La finestra di progettazione può definire la posizione in cui viene visualizzato il testo helper e il relativo contenuto generale. L'assistenza utente può scrivere/modificare il testo effettivo.

Filigrane

Le finestre di dialogo traggono vantaggio da linee guida per filigrane leggermente diverse. Poiché una finestra di dialogo può essere occupata con molti elementi dell'interfaccia utente (etichette, testo hint, pulsanti e altri controlli contenitore con testo), in particolare quando vengono visualizzati in nero, le filigrane si distinguono meglio in grigio scuro (VSColor: ButtonShadow). In genere, una filigrana viene visualizzata all'interno di un controllo come una casella di riepilogo con uno sfondo bianco (VSColor: Window).

• Il testo viene visualizzato in grigio scuro (VSColor: ButtonShadow). Tuttavia, se la filigrana viene visualizzata su uno sfondo di colore medio o grigio medio (VSColor: ButtonFace) e c'è preoccupazione per la leggibilità, andare con testo nero (VSColor: WindowText).

• Le filigrane possono essere centrate o scaricate a sinistra. Applicare regole di progettazione standard quando si effettuano decisioni di allineamento. La filigrana non può essere selezionata sullo sfondo.

Esempio di testo filigrana

Testo specifico del contesto (dinamico)

Il testo dinamico può essere usato in due modi in un dialogo o in un'interfaccia utente senza modalità: come etichetta dinamica o come contenuto dinamico.

• Etichetta dinamica: un uso comune del testo dinamico si trova in pannelli descrittivi che offrono altre informazioni per l'elemento selezionato, ad esempio in una finestra di dialogo che contiene un elenco di elementi e proprietà per tali elementi visualizzati in una griglia a destra. L'etichetta per la griglia delle proprietà può essere dinamica in modo che, quando un elemento viene selezionato a sinistra, la griglia a destra mostra informazioni per tale elemento specifico.

• Testo dinamico: può essere utile nelle istanze in cui è necessario visualizzare informazioni specifiche e non informazioni generali in questo modo, ma prestare attenzione a non sovraccaricare.

Se si vuole che gli utenti abbiano la possibilità di copiare le informazioni, il testo dinamico deve trovarsi in un campo di testo di sola lettura.

Pulsanti e collegamenti ipertestuali

I pulsanti e i controlli di collegamento (collegamenti ipertestuali) devono seguire le linee guida di base di Windows Desktop sui collegamenti ipertestuali per l'utilizzo, la formulazione, il ridimensionamento e la spaziatura.

Scelta tra pulsanti e collegamenti

Tradizionalmente, i pulsanti sono stati usati per azioni e collegamenti ipertestuali sono stati riservati per la navigazione. I pulsanti possono essere usati in tutti i casi, ma il ruolo dei collegamenti è stato espanso in Visual Studio in modo che i pulsanti e i collegamenti siano più intercambiabili in alcune condizioni.

Quando usare i pulsanti di comando:

• Comandi primari

• Visualizzazione delle finestre usate per raccogliere input o effettuare scelte, anche se sono comandi secondari

• Azioni distruttive o irreversibili

• Pulsanti impegno all'interno di procedure guidate e flussi di pagina

Evitare pulsanti di comando nelle finestre degli strumenti o se sono necessarie più di due parole per l'etichetta. I collegamenti possono avere etichette più lunghe.

Quando usare i collegamenti:

• Navigazione in un'altra finestra, documento o pagina Web

• Situazioni che richiedono un'etichetta o una frase breve più lunga per descrivere la finalità dell'azione

• Spazi stretti in cui un pulsante sovraccarica l'interfaccia utente, purché l'azione non sia distruttiva o irreversibile

• De-enfatizzare i comandi secondari in situazioni in cui sono presenti molti comandi

Esempi

Collegamenti ai comandi usati in InfoBar dopo un messaggio di stato

Collegamenti usati nel popup CodeLens

Collegamenti usati per i comandi secondari in cui i pulsanti attirano troppa attenzione

Pulsanti comuni

Testo

Seguire le linee guida per la scrittura nel testo e nella terminologia dell'interfaccia utente.

Stile visivo

Standard (senza errori)

La maggior parte dei pulsanti in Visual Studio verrà visualizzata nelle finestre di dialogo dell'utilità e non deve essere stile. Devono riflettere l'aspetto standard dei pulsanti come determinato dal sistema operativo.

Tema

In alcuni casi, i pulsanti possono essere usati all'interno dell'interfaccia utente in stile e questi pulsanti devono essere stiliti in modo appropriato. Per informazioni sui controlli con tema, vedere Finestre di dialogo .

Pulsanti speciali

Sfoglia... Pulsanti

[Sfoglia...] i pulsanti vengono usati nelle griglie, nei dialoghi e nelle finestre degli strumenti e in altri elementi dell'interfaccia utente senza modalità. Visualizzano una selezione che aiuta l'utente a compilare un valore in un controllo. Esistono due varianti di questo pulsante, long e short.

Pulsante lungo [Sfoglia...]

Il pulsante con i puntini di sospensione breve [...]

Quando usare il pulsante breve con i puntini di sospensione:

• Se è presente più di un pulsante [Sfoglia...] lungo in una finestra di dialogo, ad esempio quando diversi campi consentono l'esplorazione. Usare il pulsante [...] breve per ognuno per evitare le chiavi di accesso confuse create da questa situazione (&Sfoglia e B&rowse nella stessa finestra di dialogo).

• In un dialogo stretto, o quando non c'è posto ragionevole per mettere il pulsante lungo.

• Se il pulsante verrà visualizzato in un controllo griglia.

Linee guida per l'uso del pulsante:

• Non usare una chiave di accesso. Per accedervi tramite la tastiera, l'utente deve tabularsi dal controllo adiacente. Assicurarsi che l'ordine di tabulazione sia tale che qualsiasi pulsante sfoglia venga riempito immediatamente dopo il campo che verrà riempito. Non usare mai un carattere di sottolineatura inferiore al primo punto.

• Impostare la proprietà Microsoft Active Accessibility (MSAA) Name su Browse... (inclusi i puntini di sospensione) in modo che le utilità per la lettura dello schermo leggano come "Sfoglia" e non "dot-dot-dot" o "period-period-period-period". Per i controlli gestiti, ciò significa impostare la proprietà AccessibleName.

• Non usare mai un pulsante con i puntini di sospensione [...] ad eccezione di un'azione di esplorazione. Ad esempio, se è necessario un pulsante [Nuovo...] ma non si dispone di spazio sufficiente per il testo, la finestra di dialogo deve essere riprogettata.

Ridimensionamento e spaziatura

Ridimensionamento dei pulsanti [Sfoglia...]

Spaziatura dei pulsanti [Sfoglia...]

Pulsanti grafici

Alcuni pulsanti devono sempre usare un'immagine grafica e non includere mai testo per risparmiare spazio ed evitare problemi di localizzazione. Questi vengono spesso usati nelle selezione campi e in altri elenchi ordinabili.

Nota

Gli utenti devono tabularsi su questi pulsanti (non ci sono tasti di scelta), quindi posizionarli in un ordine ragionevole. Eseguire il mapping della name proprietà del pulsante all'azione eseguita in modo che le utilità per la lettura dello schermo interpretino correttamente l'azione del pulsante.

Funzione	Pulsante
Add
Rimuovi
Aggiungi tutto
Rimuovi tutto
Sposta su
Sposta giù
Elimina

Ridimensionamento e spaziatura

Il ridimensionamento per i pulsanti grafici è uguale a quello della versione breve del pulsante [Sfoglia...] (26x23 pixel):

Aspetto di un'immagine grafica sul pulsante, con e senza colore trasparente

Collegamenti ipertestuali

I collegamenti ipertestuali sono particolarmente adatti alle azioni basate sullo spostamento, ad esempio l'apertura di un argomento della Guida, una finestra di dialogo modale o una procedura guidata. Se per un comando viene usato un collegamento ipertestuale, deve sempre visualizzare una modifica visibile e evidente all'interfaccia utente. In generale, le azioni che eseguono il commit in un'azione ,ad esempio Salva, Annulla ed Elimina, vengono comunicate meglio usando un pulsante.

Stile di scrittura

Seguire il materiale sussidiario di Windows Desktop per il testo dell'interfaccia utente. Non usare la formulazione "Altre informazioni", "Dimmi altre informazioni" o "Ottieni assistenza con questo". Al contrario, il testo del collegamento della Guida della frase in termini di domanda principale a cui ha risposto il contenuto della Guida. Ad esempio, "Ricerca per categorie aggiungere un server a Esplora server?"

Stile visivo

• I collegamenti ipertestuali devono usare sempre il servizio VSColor. Se un collegamento ipertestuale non è in stile corretto, lampeggia in rosso quando attivo o mostra un colore diverso dopo essere stato visitato.

• Non includere sottolineature nello stato di riposo del controllo, a meno che il collegamento non sia un frammento di frase all'interno di una frase completa, ad esempio in una filigrana.

• Le sottolineature non dovrebbero essere visualizzate al passaggio del mouse. Al contrario, il feedback dell'utente che il collegamento è attivo è una leggera modifica del colore e il cursore di collegamento appropriato.

Visualizzazioni albero

Le visualizzazioni albero consentono di organizzare elenchi complessi in gruppi padre-figlio. Un utente può espandere o comprimere i gruppi padre per rivelare o nascondere gli elementi figlio sottostanti. È possibile selezionare ogni elemento all'interno di una visualizzazione albero per fornire ulteriori azioni.

Stile di visualizzazione struttura ad albero

Espansori

I controlli visualizzazione albero devono essere conformi alla progettazione dell'espansore usata da Windows e Visual Studio. Ogni nodo usa un controllo expander per rivelare o nascondere gli elementi sottostanti. L'uso di un controllo expander garantisce coerenza per gli utenti che potrebbero riscontrare visualizzazioni ad albero diverse in Windows e Visual Studio.

Risposta esatta: stile corretto del nodo di visualizzazione albero con un controllo expander

Risposta errata: stile non corretto del nodo della visualizzazione albero

Selezione

Quando un nodo viene selezionato all'interno della visualizzazione albero, l'evidenziazione deve espandersi fino alla larghezza intera del controllo visualizzazione albero. In questo modo gli utenti identificano chiaramente l'elemento selezionato. I colori di selezione devono riflettere il tema corrente di Visual Studio.

Risposta esatta: l'evidenziazione del nodo selezionato corrisponde all'intera larghezza del controllo visualizzazione albero.

Risposta errata: l'evidenziazione del nodo selezionato non rientra nell'intera larghezza del controllo visualizzazione albero.

Icone

Le icone devono essere usate solo nei controlli della visualizzazione albero se aiutano a identificare visivamente le differenze tra gli elementi. In generale, le icone devono essere usate solo in elenchi eterogenei in cui le icone contengono informazioni per distinguere i tipi di elementi. In un elenco omogeneo che utilizza le icone può essere spesso visto come rumore e deve essere evitato. In tal caso, l'icona del gruppo (padre) può comunicare il tipo di elementi al suo interno. L'eccezione a questa regola sarebbe se l'icona è dinamica e viene usata per indicare lo stato.

Barre di scorrimento

Le barre di scorrimento devono essere sempre nascoste se il contenuto rientra nel controllo visualizzazione albero. È accettabile che le barre di scorrimento siano nascoste o semitrasparente in una finestra scorrevole e vengano visualizzate quando la finestra contenente la visualizzazione albero ha lo stato attivo o al passaggio del mouse della visualizzazione albero stessa.

Le barre di scorrimento verticali e orizzontali vengono visualizzate perché il contenuto ha superato i limiti del controllo visualizzazione albero.

Interazioni con la visualizzazione albero

Menu di scelta rapida

Un nodo di visualizzazione albero può rivelare le opzioni del sottomenu in un menu di scelta rapida. In genere, questo si verifica quando un utente ha fatto clic con il pulsante destro del mouse su un elemento o ha premuto il tasto Menu su una tastiera di Windows con l'elemento selezionato. È importante che il nodo acquisisca lo stato attivo ed è selezionato. Ciò consente all'utente di identificare l'elemento a cui appartiene il sottomenu.

L'elemento che ha generato il menu di scelta rapida ottiene lo stato attivo per notificare all'utente quale elemento è stato selezionato.

Tastiera

La visualizzazione albero deve offrire la possibilità di selezionare gli elementi e espandere/comprimere i nodi usando la tastiera. Ciò garantisce che la navigazione soddisfi i requisiti di accessibilità.

Controllo visualizzazione albero

I controlli albero di Visual Studio devono seguire lo spostamento tramite tastiera comune:

• Freccia SU: selezionare gli elementi spostando verso l'alto l'albero

• Freccia GIÙ: selezionare gli elementi spostando verso il basso l'albero

• Freccia destra: espandere un nodo nell'albero

• Freccia sinistra: comprimere un nodo nell'albero

• Immettere la chiave: Avviare, caricare, eseguire l'elemento selezionato

Trid (visualizzazione albero e visualizzazione griglia)

Un controllo trid è un controllo complesso che contiene una visualizzazione albero all'interno di una griglia. L'espansione, la compressione e l'esplorazione dell'albero devono rispettare gli stessi comandi della tastiera di una visualizzazione albero, con le aggiunte seguenti:

• Freccia destra: espandere un nodo. Dopo aver espanso il nodo, deve continuare a passare alla colonna più vicina a destra. La navigazione deve terminare alla fine della riga.

• Tab: passa alla cella più vicina a destra. Alla fine della riga, lo spostamento continua con la riga successiva.

• MAIUSC + TAB: consente di passare alla cella più vicina a sinistra. All'inizio della riga, lo spostamento continua con la cella più a destra nella riga precedente.

Controllo trid in Visual Studio