Layout per Visual Studio

La maggior parte delle finestre di dialogo di Visual Studio è il layout della finestra di dialogo Utilità, che sono i dialoghi non visualizzati che seguono i principi standard del layout della finestra di dialogo di Windows Desktop. Quando Visual Studio si sposta per aggiornare l'interfaccia utente, alcune delle finestre di dialogo più importanti hanno una nuova progettazione che li definisce come esperienze di definizione del prodotto. Questi layout del dialogo con tema hanno un aspetto a tema.

Layout della finestra di dialogo utilità

• Tutti i controlli all'interno di una finestra di dialogo dell'utilità devono iniziare in alto/a sinistra e scorrere verso il basso.

• Non centrare mai i controlli di una finestra di dialogo per riempire un'area di grandi dimensioni.

• Usare il tipo di carattere dell'ambiente per tutto il testo della finestra di dialogo. Quando si scrive una specifica di oggetto visivo, specificare il tipo di carattere dell'ambiente anziché selezionare un tipo di carattere e una dimensione specifici. Vedere Il tipo di carattere dell'ambiente.

• Utilizzare la spaziatura e la posizionamento coerenti del controllo per supportare l'obiettivo di qualità artigianale.

• I dialoghi possono diventare più complessi da un numero maggiore di controlli, una giustaxtaposition univoca dei controlli o entrambi. Per queste situazioni complesse, consentire uno spazio adeguato tra i raggruppamenti di controlli per fornire all'utente un flusso logico da analizzare.

Esempi di layout della finestra di dialogo dell'utilità

Tutte le dimensioni sono espresse come pixel.

Figura 08.01-a: Linee guida per la spaziatura per le finestre di dialogo di utilità con etichette precedenti ai controlli

Figura 08.01-b: Linee guida per la spaziatura per le finestre di dialogo di utilità con etichette a sinistra dei controlli

Dettagli layout

Margini

• Tutti i dialoghi devono avere un bordo di 12 pixel intorno a tutti i bordi.

• I margini all'interno di un frame di gruppo devono essere 9 pixel dal bordo del frame.

• I margini all'interno di un controllo struttura a schede devono essere di 6 pixel dal bordo del controllo struttura a schede.

Pulsanti di comando

• I pulsanti di comando operano sulla cornice della finestra di dialogo, non sul contenuto. Devono essere posizionati in basso a destra e devono avere spazio variabile sufficiente sopra per impostare i pulsanti distintamente separati.

• Se sono presenti pulsanti orizzontali che operano all'interno della finestra di dialogo, la configurazione del pulsante di comando alternativo è uno stack verticale in alto a destra. Vedere Pulsanti di comando interni di seguito.

• Lo spazio a sinistra dei pulsanti di comando (in basso a sinistra/al centro del dialogo) viene considerato parte del "gruppo" dei controlli dell'operazione di dialogo. L'unica cosa che dovrebbe intrudere su tale spazio è un collegamento della Guida rilevante per l'attività o la finestra di dialogo complessiva.

• I pulsanti di comando devono essere 75x23 pixel.

• I pulsanti di comando devono essere separati da 6 pixel.

  

  Figura 08.01-c: Allineamento dei pulsanti di base

Etichette

• Allinea a sinistra tutte le etichette.

• Per le etichette che si trovano sopra un controllo, devono allinearsi con precisione al controllo sotto di esso e la parte inferiore dell'etichetta deve essere di 5 pixel sopra la parte superiore dell'altro controllo (ad esempio, una casella combinata).

• Per le etichette che si trovano a sinistra dei controlli, la larghezza minima tra l'etichetta e il controllo di input è di 10 pixel. Per allineare le caselle di testo, le caselle combinate o altri controlli, è necessario stabilire una seconda colonna implicita.

• Le etichette sono maiuscole e minuscole e sono seguite da due punti. Vedere Stile testo.

Distanza tra i controlli

Controlli stack ragionevolmente. Non esiste alcuna linea guida assoluta per la spaziatura tra i controlli in pila. La stretta tra i controlli può variare leggermente tra i dialoghi. La spaziatura consigliata è di 20 pixel per le coppie di controllo/etichetta verticali e 9 pixel per le coppie di controllo/etichetta orizzontali. La spaziatura minima dei controlli per le coppie orizzontali è di 6 pixel.

Figura 08.01-d: Consigli per la distanza tra i controlli

Rientro del controllo

Quando i controlli sono annidati, allineare orizzontalmente i controlli interni al bordo sinistro del controllo precedente, in genere l'etichetta.

Figura 08.01-e: Allineamento del controllo annidato

Larghezza controllo

La larghezza di una casella di testo o di altri controlli simili non deve essere più dell'input medio per il campo. La parola in inglese media è di cinque caratteri. Ad esempio, una casella di testo che richiede un nome di percorso lungo deve essere a condizione che il layout orizzontale consenta, mentre un elenco a discesa per i nomi della piattaforma deve essere solo una lunghezza che consenta la voce più lunga.

Testo helper

• Una finestra di dialogo può visualizzare il testo helper che fornisce altre informazioni sullo scopo della finestra di dialogo. In genere si trova nella parte superiore e può essere di 1-2 frasi.

• La lunghezza della linea deve essere una larghezza comoda per consentire all'utente di analizzare e leggere. Una finestra di dialogo media non deve avere una larghezza superiore a 550 pixel.

Pulsanti di comando interni

Nei dialoghi più complessi, un controllo interno potrebbe avere pulsanti correlati, che potrebbero influire sulla posizione dei pulsanti di commit della finestra di dialogo.

• Usare un allineamento verticale (colonna) dei pulsanti interni quando OK/Annulla è orientato orizzontalmente nell'angolo inferiore destro.

• Usa un allineamento orizzontale (riga) di pulsanti interni quando OK/Cancel è orientato verticalmente nell'angolo superiore destro. Questa situazione è meno comune.

• Le dimensioni del pulsante interno devono essere destinate alle dimensioni standard del pulsante di 75x23 pixel, corrispondenti alle dimensioni dei pulsanti OK/Annulla quando possibile. Se un'etichetta del pulsante supera le dimensioni standard del pulsante, gli altri pulsanti in tale set devono essere allineati a tale dimensione più ampia.

  

  Figura 08.01-f: Pulsanti interni verticali con OK orizzontale/Annulla

  

  Figura 08.01-g: Pulsanti interni orizzontali con OK verticale/Annulla

[Sfoglia...] Pulsante

[Sfoglia...] pulsanti che seguono una casella di testo devono specificare "Sfoglia..." in pieno, inclusi i puntini di sospensione. Se lo spazio è stretto o ci sono più pulsanti [Sfoglia...] sullo schermo, il pulsante può essere ridotto solo ai puntini di sospensione.

Layout della finestra di dialogo con tema

Le finestre di dialogo con tema in Visual Studio hanno un aspetto più chiaro e offrono più spazio vuoto. La tipografia offre maggiore enfasi e interesse, offrendo una spaziatura linea più aperta e una variazione di dimensioni e pesi del carattere. Se possibile, le barre del riquadro e del titolo sono state ridotte o rimosse. Il layout di questi dialoghi deve seguire questo modello di base:

1. Lo sfondo del dialogo è bianco.

2. Il bordo di una regola a 1 pixel è in grigio medio.

3. Il titolo della finestra di dialogo non si trova più in una barra del titolo, ma fornisce interesse visivo ed enfasi in dimensioni di punti maggiori. Vedere la sezione dimensioni del carattere in Stile testo.

4. Le etichette abbinate a testo aggiuntivo, ad esempio una descrizione, devono essere Carattere ambiente + Grassetto.

5. Le colonne interne sono separate da una regola di 1 pixel in grigio chiaro.

6. I collegamenti predefiniti non hanno caratteri di sottolineatura. Gli stati premuti e al passaggio del mouse hanno una modifica del colore più il carattere di sottolineatura.

7. I pulsanti commit (ad esempio OK/Annulla) siedono nell'angolo in basso a destra.

Esempi di layout della finestra di dialogo con tema

Figura 08.01-h: Finestra di dialogo con tema

Figura 08.01-i: Finestra di dialogo con tema - Dimensioni

Figura 08.01-j: Finestra di dialogo con tema - Tipi di carattere

Figura 08.01-k: Finestra di dialogo con tema - Colori

Vedi anche

• Modelli delle applicazioni per Visual Studio
• Controlli (Windows)
• Finestre di dialogo (Windows)