Layout

Nota

Questa guida alla progettazione è stata creata per Windows 7 e non è stata aggiornata per le versioni più recenti di Windows. Gran parte delle linee guida si applica ancora in linea di principio, ma la presentazione e gli esempi non riflettono le linee guida correnti sulla progettazione.

Il layout è il ridimensionamento, la spaziatura e il posizionamento del contenuto all'interno di una finestra o di una pagina. Il layout efficace è fondamentale per aiutare gli utenti a trovare rapidamente ciò che cercano, oltre a rendere l'aspetto visivamente attraente. Il layout efficace può fare la differenza tra progetti che gli utenti capiscono immediatamente e quelli che lasciano gli utenti che si sentono puzzle e sopraffatti.

Nota: Le linee guida relative alla gestione delle finestre vengono presentate in un articolo separato. Le dimensioni e la spaziatura specifiche consigliate vengono presentate nei rispettivi articoli di linee guida.

Concetti relativi alla progettazione

Gerarchia visiva

Una finestra o una pagina ha una gerarchia visiva chiara quando l'aspetto indica la relazione e la priorità dei relativi elementi. Senza una gerarchia visiva, gli utenti dovranno capire queste relazioni e priorità.

La gerarchia visiva viene ottenuta combinando con competenza gli attributi seguenti:

  • Concentrarsi. Il layout indica dove gli utenti devono cercare prima.
  • Flusso. L'occhio scorre uniformemente e naturalmente da un percorso chiaro attraverso la superficie, individuando gli elementi dell'interfaccia utente nell'ordine appropriato per il loro uso.
  • Raggruppamento. Gli elementi dell'interfaccia utente correlati logicamente hanno una relazione visiva chiara. Gli elementi correlati vengono raggruppati insieme; gli elementi non correlati sono separati.
  • Enfasi. Gli elementi dell'interfaccia utente vengono sottolineati in base alla loro importanza relativa.
  • Allineamento. Gli elementi dell'interfaccia utente hanno una posizione coordinata, quindi sono facili da analizzare e visualizzare in ordine.

Inoltre, il layout efficace ha questi attributi:

  • Indipendenza del dispositivo. Il layout viene visualizzato come previsto indipendentemente dal carattere di tipo carattere o dimensione, punti per pollice (dpi), display o adattatore grafico.
  • Facile da analizzare. Gli utenti possono trovare il contenuto che stanno cercando a colpo d'occhio.
  • Efficienza. Gli elementi dell'interfaccia utente di grandi dimensioni devono essere grandi e gli elementi di piccole dimensioni funzionano bene.
  • Ridimensionabilità. Se utile, una finestra è ridimensionabile e il relativo layout del contenuto è efficace indipendentemente dalla quantità o dalla piccola superficie.
  • Equilibrio. Il contenuto viene distribuito uniformemente nella superficie.
  • Semplicità visiva. La percezione che un layout non è più complicato di quello che deve essere. Gli utenti non si sentono sopraffatti dall'aspetto del layout.
  • Coerenza. Finestre o pagine simili usano un layout simile, quindi gli utenti si sentono sempre orientati.

Durante il ridimensionamento, la spaziatura e il posizionamento sono concetti semplici, la sfida con il layout consiste nel ottenere la giusta combinazione di questi attributi.

In Windows il layout viene comunicato usando metriche indipendenti dal dispositivo, ad esempio le unità di dialogo (DLL) e i pixel relativi.

Modello di progettazione per la lettura

Gli utenti scelgono cosa leggevano dall'aspetto e dall'organizzazione del contenuto. Per creare un layout efficace, è necessario comprendere quali utenti tendono a leggere e perché.

È possibile prendere decisioni di layout usando questo modello di progettazione per la lettura:

  • Persone letto in un ordine da sinistra a destra, in alto a basso (nelle culture occidentali).

  • Esistono due modalità di lettura: lettura immersiva e analisi. L'obiettivo della lettura immersiva è la comprensione.

    figura della freccia rossa nel modello di lettura zigzag

    Questo diagramma modella la lettura immersiva.

    Al contrario, l'obiettivo dell'analisi è individuare le cose. Il percorso di analisi generale è simile al seguente:

    figura della freccia rossa nel modello di lettura diagonale

    Questa analisi dei modelli di diagramma.

    figura di freccia rossa in un modello giù e arco

    Se il testo è in esecuzione lungo il bordo sinistro di una pagina, gli utenti analizzano prima il bordo sinistro.

  • Quando si usa il software, gli utenti non sono immersi nell'interfaccia utente stessa, ma nel loro lavoro. Di conseguenza, gli utenti in genere non leggeno il testo dell'interfaccia utente che lo analizzano. Leggevano quindi i bit di testo in modo completo solo quando credono che abbiano bisogno di.

  • Gli utenti tendono a ignorare i riquadri di spostamento sul lato sinistro o destro di una pagina. Gli utenti riconoscono che sono presenti, ma esaminano i riquadri di spostamento solo quando vogliono spostarsi.

  • Gli utenti tendono a ignorare grandi blocchi di testo non formattato senza leggerli tutti.

    figura di testo con frecce che mostrano l'analisi del testo

    Gli utenti tendono a ignorare blocchi grandi di testo e riquadri di spostamento quando analizzano.

  • Tutte le cose che sono uguali, gli utenti cercano prima nell'angolo superiore sinistro di una finestra, analizzano nella pagina e terminano la loro analisi nell'angolo inferiore destro. Tendono a ignorare l'angolo inferiore sinistro.

    figura della pagina e della freccia in alto a sinistra in basso a destra

    Tutti gli elementi uguali, gli utenti leggeranno questi numeri nell'ordine seguente: 1, 2, 4 e 3.

  • Ma nell'interfaccia utente interattiva, non tutte le cose sono uguali così diversi elementi dell'interfaccia utente ricevono livelli di attenzione diversi. Gli utenti tendono a esaminare i controlli interattivi specialmente nei controlli in alto a sinistra e al centro della finestra e del testo di primo piano.

figura dello schermo con testo nitido e sfocato

Gli utenti si concentrano sui controlli interattivi principali e sull'istruzione principale principale e esaminano altre cose solo quando devono.

  • Gli utenti tendono a leggere etichette di controllo interattive, soprattutto quelle che appaiono rilevanti per completare l'attività a mano. Al contrario, gli utenti tendono a leggere testo statico solo quando pensano di dover.
  • Elementi che appaiono diversi attirano l'attenzione. Testo grassetto e testo di grandi dimensioni si distingue dal testo normale. Gli elementi dell'interfaccia utente con colore o su uno sfondo colorato si differenziano. Gli elementi con icone si differenziano dagli elementi senza icone.
  • Gli utenti non scorrere a meno che non abbiano un motivo per cui. Se il contenuto sopra la piega non fornisce un motivo per scorrere, non lo farà.
  • Dopo che gli utenti hanno deciso cosa fare, arrestano immediatamente l'analisi e lo fanno.
  • Poiché gli utenti interrompono l'analisi quando pensano che vengano eseguite, tendono a ignorare qualsiasi cosa oltre a ciò che sembra essere il punto di completamento.

schermata delle opzioni della tastiera

Gli utenti interrompono l'analisi quando pensano che siano stati eseguiti.

Naturalmente, ci saranno eccezioni a questo modello generale. I dispositivi di rilevamento oculare indicano che il comportamento degli utenti reali è piuttosto erratico. L'obiettivo di questo modello è quello di aiutare a prendere decisioni e compromessi ottimali, non a modellare il comportamento dell'utente in modo accurato. Ma come hai letto questo elenco, spero che tu abbia riconosciuto anche molti dei tuoi modelli di lettura.

Progettazione per l'analisi

Gli utenti non leggono, analizzano in modo da progettare le superfici dell'interfaccia utente per l'analisi. Non presupporre che gli utenti leggeranno il testo come scritto in un ordine da sinistra a destra, in alto a destra, ma piuttosto che esaminino gli elementi dell'interfaccia utente che attirano la loro attenzione.

Per progettare per l'analisi:

  • Si supponga che gli utenti inizino rapidamente a analizzare l'intera finestra, quindi leggere gli elementi dell'interfaccia utente in modo approssimativo l'ordine seguente:
    • Controlli interattivi nel centro
    • Pulsanti di commit
    • Controlli interattivi trovati altrove
    • Istruzione principale
    • Spiegazioni supplementari
    • Testo visualizzato con un'icona di avviso
    • Titolo finestra
    • Altro testo statico nel corpo principale
    • Note a piè di pagina
  • Posizionare gli elementi dell'interfaccia utente che avviano un'attività nell'angolo superiore sinistro o in alto al centro.
  • Posizionare gli elementi dell'interfaccia utente che completano un'attività nell'angolo inferiore destro.
  • Quando possibile, inserire testo cruciale nei controlli interattivi anziché in testo statico.
  • Evitare di inserire informazioni cruciali nell'angolo inferiore sinistro o nella parte inferiore di un controllo o di una pagina scorrevole lungo.
  • Non presentare grandi blocchi di testo. Eliminare il testo non necessario. Usare lo stile di presentazione a piramide invertito .
  • Se fai qualcosa per attirare l'attenzione degli utenti, assicurati che l'attenzione sia garantita.

Quando possibile, lavorare con questo modello invece di combatterlo; ma ci saranno momenti in cui è necessario enfatizzare o deselezionare determinati elementi dell'interfaccia utente.

Per evidenziare gli elementi principali dell'interfaccia utente:

  • Inserire gli elementi principali dell'interfaccia utente nel percorso di analisi.

  • Inserire qualsiasi interfaccia utente per avviare un'attività nell'angolo superiore sinistro o in alto al centro.

  • Inserire i pulsanti commit nell'angolo inferiore destro.

  • Posizionare l'interfaccia utente primaria rimanente al centro.

  • Usare controlli che attirano attenzione, ad esempio pulsanti di comando, collegamenti di comando e icone.

  • Usa testo prominente, tra cui testo grande e testo in grassetto.

  • Inserire testo che gli utenti devono leggere nei controlli interattivi o con icone o banner.

  • Usa il testo scuro su uno sfondo chiaro.

  • Circondare gli elementi con spazio generoso.

  • Non richiedere alcuna interazione, ad esempio puntamento o passaggio del mouse, per visualizzare l'elemento sottolineato.

    screenshot delle opzioni di attivazione di Windows

    Questo esempio mostra molti modi per evidenziare gli elementi principali dell'interfaccia utente.

Per annullare l'accento sugli elementi secondari dell'interfaccia utente:

  • Inserire gli elementi secondari dell'interfaccia utente all'esterno del percorso di analisi.

  • Inserire qualsiasi elemento che gli utenti in genere non devono vedere nell'angolo inferiore sinistro o nella parte inferiore della finestra.

  • Usare controlli che non attirano l'attenzione, ad esempio i collegamenti alle attività anziché i pulsanti di comando.

  • Usa testo normale o grigio.

  • Usa testo chiaro su uno sfondo scuro. Il testo bianco su sfondo grigio scuro o blu funziona bene.

  • Racchiudere gli elementi con spazio minimo.

  • È consigliabile usare la divulgazione progressiva per nascondere gli elementi secondari dell'interfaccia utente.

    screenshot di elementi di interfaccia grandi e piccoli

    Questo esempio mostra molti modi per annullare l'accento sugli elementi secondari dell'interfaccia utente.

Uso efficace dello spazio sullo schermo

L'uso efficace dello spazio dello schermo richiede di bilanciare diversi fattori: usare troppo spazio e una finestra sembra pesante e sprecata, e anche difficile da usare in base alla legge di Fitts.

Non corretto:

screenshot che mostra troppi spazi vuoti

In questo esempio la finestra è troppo grande per il relativo contenuto.

D'altra parte, usare troppo poco spazio e una finestra si sente angusto, scomodo, e intimidito, e difficile da usare se richiede lo scorrimento e altre manipolazioni da utilizzare.

Non corretto:

screenshot con troppi controlli

In questo esempio la finestra è troppo piccola per il relativo contenuto.

Anche se l'interfaccia utente critica deve adattarsi alla risoluzione effettiva minima supportata, non presupporre che l'uso dello spazio dello schermo in modo efficace significa che le finestre devono essere il più piccole possibile. Il layout efficace ha rispetto per lo spazio aperto e non tenta di arginare tutto nello spazio più piccolo possibile. Gli schermi moderni hanno uno spazio dello schermo significativo e ha senso usare questo spazio in modo efficace quando è possibile. Di conseguenza, errare sul lato di usare troppo spazio sullo schermo anziché troppo poco. In questo modo le finestre si sentono più leggere e più approcciabili.

Si sa che un layout usa lo spazio sullo schermo in modo efficace quando:

  • Non è necessario ridimensionare windows, riquadri delle finestre e controlli per poterli usare. Se la prima cosa che gli utenti fanno è ridimensionare una finestra, un riquadro o un controllo, la dimensione è errata.
  • I dati non vengono troncati. La maggior parte dei dati nelle visualizzazioni elenco e nelle visualizzazioni albero non ha puntini di sospensione e i dati in altri controlli non vengono ritagliati a meno che la lunghezza dei dati non sia insolitamente grande. I dati che devono essere letti per eseguire un'attività non devono essere troncati.
  • Le finestre e i controlli vengono ridimensionati in modo appropriato per eliminare lo scorrimento non necessario. Ci sono poche barre di scorrimento orizzontali e nessuna barra di scorrimento verticale non necessaria.
  • I controlli usano principalmente le dimensioni standard. Cercare di ridurre il numero di dimensioni dei controlli, ad esempio usando solo una o due larghezze del pulsante di comando su una superficie.
  • La superficie dell'interfaccia utente è bilanciata. Non sono presenti aree dello schermo inutilizzate di grandi dimensioni.

Scegli dimensioni finestra che sono abbastanza grandi per soddisfare bene il loro scopo. E se la finestra è ridimensionabile, questo obiettivo si applica alle dimensioni predefinite. Una combinazione di dati troncati o barre di scorrimento e un sacco di spazio disponibile sullo schermo è un chiaro segno di layout inefficace.

Ridimensionamento dei controlli

In genere, il primo passaggio nell'uso dello spazio sullo schermo consiste nel determinare le dimensioni corrette per i vari elementi dell'interfaccia utente. Fare riferimento alla tabella di dimensionamento dei controlli, nonché al dimensionamento consigliato negli articoli sulle linee guida di controllo specifiche.

La legge di Fitts afferma che il più piccolo è un bersaglio, più tempo ci vuole per acquisirlo con il mouse. Inoltre, per i computer che usano Tecnologia Windows per Tablet PC, il "mouse" potrebbe effettivamente essere una penna o il dito dell'utente, quindi è consigliabile prendere in considerazione dispositivi di input alternativi quando si determinano le dimensioni per i controlli di piccole dimensioni. Una dimensione del controllo di 16x16 pixel relativi è una buona dimensione minima per qualsiasi dispositivo di input. Al contrario, i pulsanti di controllo di selezione pixel relativi 15x9 standard sono troppo piccoli per essere usati efficacemente dalle penne.

Spaziatura

Fornire spazio generoso (ma non eccessivo) rende il layout più confortevole e facile da analizzare. Lo spazio effettivo non è uno spazio inutilizzato che svolge un ruolo importante per migliorare la capacità degli utenti di analizzare e aggiunge anche un aspetto visivo della progettazione. Per linee guida, vedere la tabella Spaziatura.

Per i computer che usano Tecnologia Windows per Tablet PC, anche in questo caso il "mouse" potrebbe essere effettivamente una penna o il dito dell'utente. La destinazione è più difficile quando si usa una penna o un dito come dispositivo di puntamento, con conseguente tocco degli utenti all'esterno della destinazione prevista. Quando i controlli interattivi vengono posizionati molto vicini, ma non toccano effettivamente, gli utenti possono fare clic sullo spazio inattivo tra i controlli. Poiché il clic su spazio inattivo non ha alcun risultato o feedback visivo, gli utenti sono spesso incerti su ciò che è andato storto. Se i controlli di piccole dimensioni sono troppo distanziati, l'utente deve toccare con precisione per evitare di toccare l'oggetto errato. Per risolvere questi problemi, le aree di destinazione dei controlli interattivi devono essere toccate o avere almeno 3 DLL (5 pixel relativi) di spazio tra di esse.

Si sa che un layout ha una spaziatura ottimale quando:

  • In generale, la superficie dell'interfaccia utente si sente confortevole e non si sente angusta.
  • Lo spazio appare uniforme e bilanciato.
  • Gli elementi correlati sono vicini e gli elementi non correlati sono relativamente distanti.
  • Non vi è spazio morto tra i controlli che devono essere uniti, ad esempio i pulsanti della barra degli strumenti.

Finestre ridimensionabili

Le finestre ridimensionabili sono anche un fattore importante nell'uso dello spazio dello schermo in modo efficace. Alcune finestre sono costituite da contenuto fisso e non traggono vantaggio dal ridimensionamento, ma le finestre con contenuto ridimensionabile devono essere ridimensionabili. Naturalmente, il motivo per cui gli utenti ridimensionano una finestra consiste nell'occupare avanzate dello spazio aggiuntivo dello schermo, quindi il contenuto deve espandersi di conseguenza dando più spazio agli elementi dell'interfaccia utente che ne hanno bisogno. Windows con contenuto dinamico, documenti, immagini, elenchi e alberi traggono vantaggio dalle finestre ridimensionabili.

screenshot del controllo ridimensionato che ottiene la barra di scorrimento

In questo esempio, il ridimensionamento della finestra ridimensiona il controllo visualizzazione elenco.

Detto questo, le finestre possono essere estese troppo ampie. Ad esempio, molte pagine del pannello di controllo diventano difficili quando il contenuto è più ampio di 600 pixel relativi. In questo caso, è preferibile non ridimensionare l'area del contenuto oltre questa larghezza massima o modificare l'origine del contenuto man mano che la finestra viene ridimensionata di dimensioni maggiori. Mantenere invece una larghezza massima e un'origine superiore sinistra fissa.

Il testo diventa difficile da leggere man mano che aumenta la lunghezza della riga. Per i documenti di testo, prendere in considerazione una lunghezza massima di 80 caratteri per semplificare la lettura del testo. I caratteri includono lettere, punteggiatura e spazi.

Non corretto:

schermata della finestra di messaggio wide con testo lungo

In questo esempio la lunghezza lunga del testo rende difficile la lettura.

Infine, le finestre ridimensionabili devono anche usare lo spazio dello schermo in modo efficace quando sono ridotte, rendendo il contenuto ridimensionabile più piccolo e rimuovendo lo spazio dagli elementi dell'interfaccia utente che possono funzionare in modo efficace senza di esso. A un certo punto, la finestra o i relativi elementi dell'interfaccia utente diventano troppo piccoli da usare, quindi devono essere assegnate una dimensione minima o alcuni elementi devono essere rimossi completamente.

schermata della finestra con barra multifunzione alta e intrusiva

schermata della finestra senza barra multifunzione

In questo esempio, il riquadro ha una dimensione minima.

Alcuni programmi traggono vantaggio dall'uso di una presentazione completamente diversa per rendere il contenuto utilizzabile in dimensioni inferiori.

schermata dei pulsanti del lettore multimediale centrale

In questo esempio, Lettore multimediale Windows modifica il formato quando la finestra diventa troppo piccola per il formato standard.

Focus

Un layout ha lo stato attivo quando c'è un luogo ovvio per guardare prima. Lo stato attivo è importante per mostrare agli utenti dove avviare l'analisi della finestra o della pagina. Senza uno stato attivo chiaro, l'occhio dell'utente verrà vagato senza scopo. Il punto focale deve essere un aspetto importante che gli utenti devono trovare e comprendere rapidamente, e dovrebbero avere l'enfasi visiva più grande. L'angolo superiore sinistro è il punto focale naturale per la maggior parte delle finestre.

Dovrebbe esserci un solo punto focale. Come nella vita reale, l'occhio può concentrarsi solo su una cosa alla volta, gli utenti non possono concentrarsi su più posizioni simultaneamente.

Per rendere un elemento dell'interfaccia utente il punto focale, è possibile assegnargli un'enfasi visiva:

  • Posizionarlo nella parte superiore sinistra o superiore della superficie.
  • Uso di controlli interattivi importanti e facilmente comprensibili.
  • Uso di testo di rilievo, ad esempio un'istruzione principale.
  • Assegnare ai controlli la selezione predefinita e lo stato attivo dell'input iniziale.
  • Posizionare i controlli in uno sfondo colorato diverso.

Prendere in considerazione Windows Search. Il punto focale per Windows Search deve essere la casella Di ricerca perché è il punto di partenza per l'attività. Tuttavia, si trova nell'angolo in alto a destra per essere coerenti con il posizionamento standard della casella di ricerca. La casella di ricerca ha lo stato attivo di input, ma dato il suo percorso nel percorso di analisi, tale indizio da solo non è sufficiente.

Per risolvere questo problema, esiste un'istruzione di rilievo nella parte superiore centrale della finestra per indirizzare gli utenti alla posizione corretta.

Accettabile:

schermata della finestra di dialogo di ricerca con testo utile

In questo esempio, un'istruzione di rilievo nella parte superiore centrale della finestra indirizza gli utenti alla casella Di ricerca.

Senza le istruzioni, la finestra non avrebbe un punto focale ovvio.

Non corretto:

schermata della finestra di dialogo di ricerca senza testo

Questo esempio non ha alcun punto focale ovvio. Gli utenti non sanno dove cercare.

Se si dà un'enfasi visiva dell'elemento dell'interfaccia utente, assicurarsi che l'attenzione sia garantita. Nell'esempio precedente di Windows Search errato, il pulsante All evidenziato si trova nell'angolo superiore sinistro e ha l'enfasi più visiva, ma non è il punto focale previsto. Gli utenti potrebbero rimanere bloccati guardando questo pulsante cercando di capire cosa fare con esso.

Non corretto:

schermata di tutti i pulsanti evidenziati

Senza l'istruzione principale come punto focale, il pulsante Tutto evidenziato è un punto focale non intenzionale.

Flusso

Un layout ha un flusso quando gli utenti vengono guidati senza problemi e naturalmente da un percorso chiaro attraverso la sua superficie, individuando gli elementi dell'interfaccia utente nell'ordine appropriato per l'uso. Dopo che gli utenti identificano il punto focale, devono determinare come completare l'attività. La posizione degli elementi dell'interfaccia utente trasmette la relazione e deve eseguire il mirroring dei passaggi per eseguire l'attività. In genere, questo significa che i passaggi dell'attività devono scorrere naturalmente in un ordine da sinistra a destra, in alto a basso (nelle culture occidentali).

Si sa che un layout ha un buon flusso quando:

  • Il posizionamento degli elementi dell'interfaccia utente riflette i passaggi necessari agli utenti per eseguire l'attività.
  • Gli elementi dell'interfaccia utente che avviano un'attività si trovano nell'angolo superiore sinistro o nel centro superiore.
  • Gli elementi dell'interfaccia utente che completano un'attività si trovano nell'angolo inferiore destro.
  • Gli elementi dell'interfaccia utente correlati sono insieme; gli elementi non correlati sono separati.
  • I passaggi necessari si trovano nel flusso principale.
  • I passaggi facoltativi sono esterni al flusso principale, possibilmente de-sottolineati usando uno sfondo o una divulgazione progressiva adatta.
  • Gli elementi usati di frequente vengono visualizzati prima degli elementi usati raramente nel percorso di analisi.
  • Gli utenti sanno sempre cosa fare di seguito. Non ci sono salti imprevisti o interruzioni nel flusso dell'attività.

Non corretto:

schermata del layout della finestra di dialogo confusa

In questo esempio gli utenti non sanno cosa fare di seguito. Ci sono salti imprevisti e interruzioni nel flusso di attività.

Corretto:

schermata di una finestra di dialogo ben pianificata

In questo esempio la presentazione degli elementi dell'interfaccia utente riflette i passaggi per eseguire l'attività.

Raggruppamento

Un layout ha raggruppamento quando gli elementi dell'interfaccia utente correlati logicamente hanno una relazione visiva chiara. I gruppi sono importanti perché è più facile per gli utenti comprendere e concentrarsi su un gruppo di elementi correlati rispetto agli elementi singolarmente. I gruppi rendono un layout più semplice e più semplice da analizzare.

È possibile visualizzare il raggruppamento nei modi seguenti (in aumento della pesantezza):

  • Layout. È possibile raggruppare i controlli correlati accanto all'altro e inserire spaziatura aggiuntiva tra controlli non correlati.

    figura di quattro icone che mostrano quattro gruppi di attività

    In questo esempio viene usato solo il layout per visualizzare le relazioni di controllo.

  • Separatori. Un separatore è una linea orizzontale o verticale che unifica un gruppo di controlli. I separatori offrono un aspetto più semplice e pulito. Tuttavia, a differenza delle caselle di gruppo, funzionano meglio quando si estendono sulla superficie completa.

    schermata di tre icone e tre separatori

    In questo esempio vengono usati separatori etichettati per visualizzare le relazioni di controllo.

  • Aggregatori. Un aggregatore è un elemento grafico che crea una relazione visiva tra controlli fortemente correlati.

    schermata dei controlli all'interno di una linea ellittica

    In questo esempio viene usato un aggregatore di limiti per evidenziare la relazione tra i controlli e renderli come un singolo controllo anziché otto.

  • Caselle di gruppo. Una casella di gruppo è una cornice rettangolare etichettata che circonda un set di controlli correlati.

    schermata delle caselle di controllo in un bordo rettangolare

    In questo esempio una casella di gruppo circonda e etichette un set di controlli correlati.

  • Sfondi. È possibile usare sfondi per sottolineare o de-enfatizzare diversi tipi di contenuto.

    schermata del lato sinistro del pannello di controllo

    In questo esempio viene usato il riquadro attività del pannello di controllo per raggruppare le attività correlate e gli elementi del pannello di controllo.

    Per evitare il disordine visivo, il raggruppamento di pesi più chiaro che fa il lavoro bene è la scelta migliore. Per altre informazioni, vedere Caselle di gruppo, schede, separatori e sfondi.

Indipendentemente dallo stile di raggruppamento, è possibile usare il rientro per visualizzare la relazione dei controlli all'interno di un gruppo. I controlli che sono peer tra loro devono essere allineati a sinistra e i controlli dipendenti sono rientro di 12 DLL o 18 pixel relativi.

schermata di tre livelli di controlli con rientro

I controlli dipendenti hanno un rientro di 12 DLUS o 18 pixel relativi, che per impostazione predefinita è la distanza tra caselle di controllo e pulsanti di opzione dalle etichette.

Si sa che un layout ha un buon raggruppamento quando:

  • La finestra o le pagine hanno al massimo 7 gruppi.
  • Lo scopo di ogni gruppo è ovvio.
  • La relazione dei controlli all'interno di ogni gruppo è ovvia, in particolare la dipendenza del controllo.
  • Il raggruppamento semplifica il contenuto anziché renderlo più complesso.

Allineamento

L'allineamento è il posizionamento coordinato degli elementi dell'interfaccia utente. L'allineamento è importante perché rende il contenuto più semplice da analizzare e influisce sulla percezione della complessità visiva degli utenti.

Esistono diversi obiettivi da considerare per determinare l'allineamento:

  • Facilità di scansione orizzontale. Gli utenti possono leggere orizzontalmente e trovare elementi correlati l'uno accanto all'altro, senza spazi imbarazzanti.
  • Facilità di scansione verticale. Gli utenti possono analizzare colonne di elementi correlati e trovare immediatamente ciò che cercano, con un movimento orizzontale minimo.
  • Complessità visiva minima. Gli utenti percepiscono un layout per essere visivamente complesso se ha linee di griglia di allineamento verticale non necessarie.

Allineamento orizzontale

Allineamento a sinistra

A causa dell'ordine di lettura da sinistra a destra, l'allineamento sinistro funziona correttamente per la maggior parte del contenuto. L'allineamento sinistro semplifica l'analisi verticale dei dati a colonne.

Allineamento a destra

L'allineamento a destra è la scelta migliore per i dati numerici, in particolare per le colonne di dati numerici. L'allineamento a destra funziona anche bene per i pulsanti di commit e i controlli allineati con il bordo destro della finestra.

screenshot del pulsante freccia giù per la ricerca avanzata

In questo esempio, il controllo di divulgazione progressiva di ricerca avanzata è allineato a destra perché viene posizionato sul bordo destro della finestra.

Allineamento al centro

L'allineamento al centro è preferibile per le situazioni in cui l'allineamento sinistro o destro non è appropriato o viene visualizzato sbilanciato.

screenshot dei controlli del lettore multimediale centrati

In questo esempio, il controllo lettore multimediale è centrato per dare un aspetto bilanciato.

Non centrare il contenuto della finestra solo per riempire lo spazio.

Non corretto:

screenshot di una finestra con troppo spazio vuoto

In questo esempio, il contenuto viene centrato erroneamente in una finestra ridimensionabile per riempire lo spazio.

Allineamento verticale

Elementi superiori

A causa dell'ordine di lettura dall'alto verso il basso, l'allineamento superiore funziona correttamente per la maggior parte del contenuto. L'allineamento superiore semplifica l'analisi orizzontale degli elementi dell'interfaccia utente.

Linee di base del testo

Quando si allineano in verticale i controlli con il testo, allineare le linee di base del testo per fornire un flusso di lettura orizzontale uniforme.

Corretto:

screenshot del pulsante e del testo dell'etichetta allineato

Non corretto:

schermata del pulsante e del testo dell'etichetta non allineati

Nell'esempio corretto, il controllo e la relativa etichetta sono allineati verticalmente in base alle linee di base del testo.

Si sa che un layout ha un buon allineamento quando:

  • È facile eseguire la scansione sia orizzontalmente che verticalmente.
  • Ha un aspetto visivo semplice.

Allineamento delle etichette

Le regole di allineamento generali si applicano alle etichette di controllo, ma è un problema comune degno di attenzione specifica. L'allineamento delle etichette ha questi obiettivi:

  • Facilità di scansione verticale per trovare il controllo corretto.
  • Facilitare l'analisi orizzontale per associare le etichette ai controlli.
  • Facilità di localizzazione, gestione delle etichette che differiscono in base alle diverse lingue.
  • Funziona bene con una combinazione di lunghezze di etichetta diverse.
  • Usa in modo efficiente lo spazio disponibile evitando il testo troncato.

L'obiettivo generale è quello di ridurre la quantità di movimento oculare necessario per individuare gli utenti che probabilmente cercano, ma la natura dei controlli e ciò che gli utenti stanno cercando dipendono dal contesto.

Esistono quattro stili comuni di posizionamento e allineamento delle etichette, ognuno dei quali offre i vantaggi seguenti:

  • Etichette giustificate a sinistra sopra i controlli
  • Etichette giustificate a sinistra dei controlli
  • Etichette giustificate a sinistra a sinistra dei controlli, controlli non allineati a sinistra
  • Etichette giustificate a destra a sinistra dei controlli

Etichette giustificate a sinistra sopra i controlli

Questo stile è il più semplice da localizzare perché il layout non dipende dalla lunghezza delle etichette, ma richiede lo spazio più verticale.

elenco con due colonne di etichette sopra i controlli

Questo stile occupa lo spazio più verticale, ma è più semplice da localizzare. È una scelta migliore per l'etichettatura di controlli per lo più interattivi.

Ideale quando:

  • I controlli etichettati sono interattivi (non solo testo).
  • L'interfaccia utente verrà localizzata. Questo stile spesso consente di raddoppiare o persino triplicare la lunghezza dell'etichetta.
  • L'interfaccia utente usa una tecnologia di layout fissa ,ad esempio Win32.
  • Ci sono dieci o meno controlli. Con più controlli, le etichette sono difficili da analizzare.
  • Lo spazio verticale è sufficiente per contenere le etichette.
  • Il layout deve essere in formato libero, non solo le colonne.

Etichette giustificate a sinistra dei controlli

Questo stile è il più semplice da analizzare verticalmente e funziona anche bene quando le etichette differiscono notevolmente in lunghezza, ma è più difficile associare l'etichetta al relativo controllo. Questo stile può usare etichette su più righe, se necessario.

elenco con quattro colonne di etichette a sinistra dei controlli

Questo stile funziona bene. Tuttavia, sono presenti due colonne, ma visivamente sembra che siano presenti quattro elementi che rendono i dati più complessi.

Ideale quando:

  • È probabile che gli utenti analizzino verticalmente per trovare etichette specifiche.
  • È probabile che gli utenti non leggano le etichette e i controlli in modo da sinistra a destra, dall'alto verso il basso.
  • Lo spazio orizzontale è sufficiente per contenere le etichette.
  • Le etichette variano in modo significativo in lunghezza.
  • Esistono molti controlli, ad esempio con i moduli.
  • Sono presenti poche colonne. Visivamente, le etichette e i controlli vengono visualizzati come due singole colonne.

Etichette giustificate a sinistra a sinistra dei controlli, controlli non allineati a sinistra

Questo stile semplifica la scansione verticale delle etichette e delle etichette e dei controlli orizzontalmente ed è molto efficiente nello spazio; ma è più difficile analizzare i controlli verticalmente. I controlli sono giustificati a destra per sfruttare appieno lo spazio disponibile.

elenco di due colonne di etichette con controlli non allineati

Questo stile è compatto e facile da leggere, ma è difficile analizzare i controlli verticalmente.

Ideale quando:

  • L'interfaccia utente usa una tecnologia di layout variabile , ad esempio Windows Presentation Foundation.
  • È probabile che gli utenti analizzino verticalmente per trovare etichette specifiche.
  • È probabile che gli utenti leggano le etichette e i controlli in modo da sinistra a destra, dall'alto verso il basso.
  • È probabile che gli utenti non analizzino i controlli verticalmente.
  • Il testo del controllo varia in lunghezza e probabilmente verrà troncato se venisse usato un altro stile.
  • I controlli sono di sola lettura, ad esempio caselle di testo di sola lettura. Per altri controlli, questo allineamento avrà un aspetto sloppy. Tuttavia, i controlli possono diventare modificabili su clic.
  • Esistono molte colonne, ma pochi controlli in una colonna.

Etichette giustificate a destra a sinistra dei controlli

Questo stile è più semplice da leggere orizzontalmente per associare le etichette ai relativi controlli, ma è difficile analizzare le etichette verticalmente e non funziona correttamente quando etichetteList con etichette con rientro e controlli differiscono notevolmente in lunghezza.

elenco con etichette e controlli con rientro

Questo stile consente una facile analisi verticale dei controlli, ma rende difficile analizzare le etichette verticalmente.

Uso ottimale quando:

  • Gli utenti potrebbero leggere le etichette e i controlli in modo da sinistra a destra, in alto a basso.
  • Gli utenti non sono probabilmente in grado di analizzare verticalmente per trovare etichette specifiche, possibilmente perché:
    • Ci sono pochi controlli.
    • Le etichette sono ben note.
    • I controlli sono principalmente autoesplicativi e raramente vuoti (possibilmente con valori predefiniti per evitare controlli vuoti).
  • Lo spazio orizzontale è sufficiente per ospitare le etichette.
  • Le etichette non variano significativamente in lunghezza.
  • Sono presenti molte colonne. Visivamente le etichette e i controlli vengono visualizzati come una singola colonna.

Prima di adottare uno di questi stili, tuttavia, prendere in considerazione due fattori:

  • Preferisce uno stile che è possibile usare in modo coerente nel programma.
  • Le etichette giustificate a sinistra sopra i controlli a sinistra dei controlli sono gli stili più comuni, quindi devono essere assegnati preferenza.

Balance

Una finestra o una pagina ha un equilibrio quando il contenuto viene distribuito uniformemente nella sua superficie. Se la superficie ha fisicamente lo stesso peso di quello che ha visivamente, un layout bilanciato non avrebbe suggerimenti su un lato.

Il problema di equilibrio più comune è avere troppo contenuto sul lato sinistro di una finestra o di una pagina. È possibile creare un equilibrio nei modi seguenti:

  • Usando margini più grandi sul lato sinistro rispetto a destra.
  • Inserimento degli elementi dell'interfaccia utente usati per completare un'attività a destra.
  • Inserimento di elementi dell'interfaccia utente usati in tutto l'attività nel centro.
  • Lunghezza dei controlli ridimensionabili o multilinea.
  • Uso dell'allineamento centrale in modo strategico.

schermata della stampante a sinistra e testo a destra

Questo layout di pagina della procedura guidata ben bilanciato mostra un margine sinistro maggiore rispetto a destra per migliorare l'equilibrio.

Se queste tecniche non ottengono un equilibrio, è consigliabile ridurre la larghezza della finestra o della pagina in modo che corrisponda meglio al contenuto.

Per le superfici ridimensionabili, non centro il contenuto solo per ottenere l'equilibrio. Mantenere invece un'origine superiore sinistra fissa, definire un'area di superficie massima e bilanciare il contenuto all'interno dello spazio usato.

Griglie

Una griglia è un sistema di allineamento sottostante invisibile. Le griglie possono essere simmetriche, ma le griglie asimmetriche funzionano anche. Quando viene usato da una singola finestra o da una singola pagina, le griglie consentono di organizzare il contenuto all'interno di una superficie. Quando viene riutilizzata, le griglie creano un layout coerente tra le superfici.

Il numero di linee della griglia influisce sulla percezione della complessità visiva. Un layout con meno linee di griglia risulta più semplice di un layout con più linee di griglia.

Complesso visivamente:

schermata della finestra di dialogo incluttered

Visivamente semplice:

schermata della finestra di dialogo organizzata

Le linee della griglia non necessarie creano complessità visiva.

Si sa che un layout usa in modo efficace le griglie quando:

  • Windows o pagine con contenuto o funzione simili hanno un layout simile.
  • Gli elementi di progettazione ripetuti vengono visualizzati in posizioni simili tra finestre e pagine.
  • Non sono necessarie linee verticali e orizzontali di allineamento.

Semplicità visiva

La semplicità visiva è la percezione che un layout non sia più complicato di quanto debba essere.

Si sa che un layout ha semplicità visiva quando è:

  • Elimina i livelli non necessari di chrome della finestra.
  • Presenta il contenuto usando al massimo sette gruppi facilmente identificabili.
  • Usa raggruppamenti leggeri, ad esempio layout e separatori anziché caselle di gruppo.
  • Usa controlli leggeri, ad esempio collegamenti anziché pulsanti di comando per i comandi secondari e elenchi a discesa anziché elenchi per le scelte.
  • Riduce il numero di linee di allineamento verticale e orizzontale.
  • Riduce il numero di dimensioni del controllo, ad esempio usando solo una o due larghezze del pulsante di comando su una superficie.
  • Usa la divulgazione progressiva per nascondere gli elementi dell'interfaccia utente finché non sono necessari.
  • Usa spazio sufficiente in modo che la finestra o la pagina non si sente stretta.
  • Dimensioni finestre e controlli in modo appropriato per eliminare lo scorrimento non necessario.
  • Usa un singolo tipo di carattere con un numero ridotto di dimensioni e colori di testo.

Come regola generale, se un elemento di layout può essere eliminato senza danneggiare l'efficacia dell'interfaccia utente, probabilmente dovrebbe essere.

Indicazioni

Risoluzione dello schermo e dpi

  • Supportare la risoluzione minima di Windows effettiva di 800x600 pixel. Per le interfacce utente critiche che devono funzionare in modalità sicura, supporta una risoluzione efficace di 640x480 pixel. Assicurarsi di tenere conto dello spazio utilizzato dalla barra delle applicazioni riservando 48 pixel verticali relativi per le finestre visualizzate con la barra delle applicazioni.
  • Ottimizzare i layout delle finestre ridimensionabili per una risoluzione effettiva di 1024x768 pixel. Ridimensionare automaticamente queste finestre per le risoluzioni dello schermo inferiore in modo che sia ancora funzionale.
  • Assicurarsi di testare le finestre in 96 punti per pollice (dpi) (a 800x600 pixel), 120 dpi (a 1024x768 pixel) e 144 dpi (a 1200x900 pixel) modalità. Verificare la presenza di problemi di layout, ad esempio ritagli di controlli, testo e finestre e estensione delle icone e delle bitmap.
  • Per i programmi con scenari di utilizzo del tocco e per dispositivi mobili, ottimizzare per 120 dpi. Gli schermi ad alta dpi sono attualmente diffusi su PC mobili e touch.

Dimensioni finestra

  • Scegliere una dimensione predefinita della finestra appropriata per il relativo contenuto. Non aver paura di usare dimensioni di finestra iniziali più grandi se è possibile usare lo spazio in modo efficace.
  • Usare un'altezza bilanciata per la larghezza delle proporzioni. Un rapporto di aspetto compreso tra 3:5 e 5:3 è preferibile, anche se è possibile usare un rapporto di aspetto pari a 1:3 per le finestre di dialogo dei messaggi, ad esempio errori e avvisi.
  • Usare finestre ridimensionabili ogni volta che è pratico per evitare barre di scorrimento e dati troncati. Windows con contenuto dinamico, documenti, immagini, elenchi e alberi traggono vantaggio dalla maggior parte delle finestre ridimensionabili.
  • Per i documenti di testo, prendere in considerazione una lunghezza massima di 80 caratteri per semplificare la lettura del testo. I caratteri includono lettere, punteggiatura e spazi.
  • Finestre di dimensioni fisse:
    • Le finestre di dimensioni fisse devono essere interamente visibili e ridimensionate per adattarsi all'interno dell'area di lavoro.
  • Finestre ridimensionabili:
    • Le finestre ridimensionabili possono essere ottimizzate per risoluzioni più elevate, ma ridimensionate in base alle esigenze in fase di visualizzazione alla risoluzione effettiva dello schermo.

    • Le dimensioni delle finestre più grandi in modo progressivo devono visualizzare progressivamente altre informazioni. Assicurarsi che almeno una parte o un controllo della finestra disponga di contenuto ridimensionabile.

    • Mantenere l'origine superiore sinistra del contenuto fisso quando la finestra viene ridimensionata. Non spostare l'origine per bilanciare il contenuto quando cambia la dimensione della finestra.

    • Impostare una dimensione massima del contenuto se il contenuto può essere troppo esteso. Se il contenuto diventa unwieldy, non ridimensionare l'area del contenuto oltre la larghezza massima o modificare l'origine del contenuto in quanto la finestra viene ridimensionata più grande. Mantenere invece una larghezza massima e un'origine superiore sinistra fissa.

    • Impostare una dimensione minima della finestra se è presente una dimensione inferiore alla quale il contenuto non è più utilizzabile. Per i controlli ridimensionabili, impostare le dimensioni minime degli elementi ridimensionabili alle dimensioni funzionali più piccole, ad esempio le dimensioni minime delle colonne funzionali nelle visualizzazioni elenco. Gli elementi dell'interfaccia utente facoltativi devono essere rimossi completamente.

    • Valutare la possibilità di modificare la presentazione per rendere utilizzabile il contenuto con dimensioni inferiori.

      screenshot dei controlli del lettore multimediale

      In questo esempio, Lettore multimediale Windows modifica il relativo formato quando la finestra diventa troppo piccola per il formato standard.

Dimensioni del controllo

  • Rendere tutti i controlli interattivi almeno 16x16 pixel relativi. Questa operazione funziona bene per tutti i dispositivi di input, tra cui Tecnologia Windows per Tablet PC.

  • Controlli di dimensioni per evitare dati troncati. Non troncare i dati che devono essere letti per eseguire un'attività. Dimensioni colonne della visualizzazione elenco per evitare dati troncati.

  • Controlli di dimensioni per eliminare lo scorrimento non necessario. Rendere i controlli leggermente più grandi se si esegue questa operazione elimina una barra di scorrimento. Dovrebbero essere presenti poche barre di scorrimento verticali e nessuna barra di scorrimento orizzontale non necessaria.

    screenshot delle dimensioni dell'elenco per evitare una barra di scorrimento

    In questo esempio l'elenco a discesa viene ridimensionato per eliminare la barra di scorrimento.

  • Ridurre il numero di dimensioni dei controlli in una superficie. Preferire l'uso delle dimensioni di controllo consigliate standard e, quando necessario, usare alcuni controlli di dimensioni maggiori o minori in modo coerente. Provare a usare una larghezza singola per caselle di riepilogo e visualizzazioni albero e non più di tre larghezze per i pulsanti di comando e gli elenchi a discesa. Tuttavia, la casella di testo e la larghezza della casella combinata dovrebbero suggerire la lunghezza dell'input più lungo o previsto.

    screenshot della finestra di dialogo con elenchi e pulsanti

    In questo esempio viene usata in modo coerente una casella di riepilogo e una dimensione del pulsante di comando.

  • Per i controlli ridimensionati in base al testo, includere un ulteriore 30% (fino al 200% per testo più breve) per qualsiasi testo localizzato. Questa linea guida presuppone che il layout sia progettato usando il testo in inglese. Si noti anche che questa linea guida si riferisce al testo localizzato, non ai numeri.

  • Estendere i controlli di testo statici, le caselle di controllo e i pulsanti di opzione alla larghezza massima che verrà adattata al layout. In questo modo si evita il troncamento dal testo a lunghezza variabile e dalla localizzazione.

    Non corretto:

    screenshot del controllo dello stato di avanzamento e del testo parziale

    In questo esempio il testo del controllo viene troncato inutilmente.

Spaziatura dei controlli

  • Se i controlli non toccano, hanno almeno 3 DLL (5 pixel relativi) di spazio tra di esse. In caso contrario, gli utenti possono fare clic sullo spazio inattivo tra i controlli. Poiché il clic su spazio inattivo non ha alcun risultato o feedback visivo, gli utenti sono spesso incerti su ciò che è andato storto.

Selezione host

  • Disporre gli elementi dell'interfaccia utente all'interno di una superficie per fluire naturalmente in un ordine da sinistra a destra, dall'alto verso il basso (nelle impostazioni cultura occidentali). Il posizionamento degli elementi dell'interfaccia utente trasmette la relazione e deve rispecchiare i passaggi per eseguire l'attività.
  • Posizionare gli elementi dell'interfaccia utente che avviano un'attività nell'angolo superiore sinistro o in alto al centro. Dare all'elemento dell'interfaccia utente che gli utenti devono esaminare per prima cosa l'enfasi visiva più grande.
  • Posizionare gli elementi dell'interfaccia utente che completano un'attività nell'angolo inferiore destro.
  • Posizionare gli elementi dell'interfaccia utente correlati e separare gli elementi non correlati.
  • Inserire i passaggi necessari nel flusso principale.
  • Inserire passaggi facoltativi all'esterno del flusso principale, possibilmente de-enfatizzati usando uno sfondo appropriato o una divulgazione progressiva.
  • Posizionare gli elementi usati di frequente prima degli elementi usati raramente nel percorso di analisi.

Focus

  • Scegliere un singolo elemento dell'interfaccia utente che gli utenti devono prima esaminare per essere il punto focale. Il punto focale deve essere qualcosa di importante che gli utenti devono trovare e comprendere rapidamente.
  • Posizionare il punto focale nell'angolo superiore sinistro o in alto al centro.
  • Assegnare al punto focale la massima enfasi visiva, ad esempio testo prominente, selezione predefinita o stato attivo iniziale dell'input.

Allineamento

  • In genere, usare l'allineamento a sinistra.
  • Usare l'allineamento corretto per i dati numerici, in particolare le colonne di dati numerici.
  • Usare l'allineamento a destra per i pulsanti di commit, nonché i controlli allineati al bordo destro della finestra.
  • Usa l'allineamento al centro quando l'allineamento a sinistra o a destra non è appropriato o viene visualizzato sbilanciato.
  • Quando si allineano in verticale i controlli con il testo, allineare le linee di base del testo per fornire un flusso di lettura orizzontale uniforme.
  • Per l'allineamento delle etichette, vedere la sezione Allineamento etichette in Concetti di progettazione.

Accessibilità

  • Non usare il layout come unico mezzo per trasmettere informazioni importanti su un'interfaccia utente. Gli utenti con problemi visivi potrebbero non essere in grado di interpretare questa presentazione. Ad esempio, assicurarsi che i controlli etichette comunichino la relazione con altri elementi.

  • Non incorporare controlli subordinati all'interno delle etichette di controllo per creare una frase o una frase. Tali associazioni si basano esclusivamente sul layout e non sono gestite correttamente dalla navigazione da tastiera o dalle tecnologie di assistive technology di accessibilità. Inoltre, questa tecnica non è localizzabile perché la struttura delle frasi varia con la lingua.

    Non corretto:

    screenshot di una casella di testo al centro di una frase

    In questo esempio la casella di testo viene inserita erroneamente all'interno dell'etichetta della casella di controllo.

    Corretto:

    screenshot di una casella di testo alla fine di una frase

    In questo caso, la casella di testo viene inserita dopo l'etichetta della casella di controllo.

  • Rendere accessibile il raggruppamento. I gruppi definiti da riquadri delle finestre, caselle di gruppo, separatori, etichette di testo e aggregatori vengono gestiti automaticamente dagli strumenti di accessibilità. Tuttavia, i gruppi definiti solo dal posizionamento e dagli sfondi non sono e devono essere definiti a livello di codice per l'accessibilità.

Per altre linee guida, vedere Accessibilità.

Ridimensionamento dei controlli

La tabella seguente elenca le dimensioni consigliate (larghezza x altezza o altezza se un singolo numero) per gli elementi comuni dell'interfaccia utente (per 9 pt. Segoe UI a 96 dpi). Le larghezze in base all'elemento più lungo in inglese aggiungono il 30% per la localizzazione (fino al 200% per testo più breve) per qualsiasi testo (ma non numeri) localizzati.

Esempio Control Unità di dialogo Pixel relativi
screenshot delle caselle di controllo e delle relative etichette
Caselle di controllo
10
17
screenshot della casella combinata
Caselle combinate
larghezza dell'elemento più lungo + 30% x 14
larghezza dell'elemento più lungo + 30% x 23
screenshot di un pulsante di comando
Pulsanti di comando
50 x 14
75 x 23
screenshot di uno dei due collegamenti di comando selezionati
Collegamenti ai comandi
25 (una riga) o 35 (due righe)
41 (una riga) o 58 (due righe)
screenshot di un elenco a discesa
Elenchi a discesa
larghezza dei dati validi più lunghi + 30% x 14
larghezza dell'elemento più lungo + 30% x 23
screenshot di una casella di riepilogo
Caselle di riepilogo
larghezza dell'elemento più lungo + 30% x un numero integrale di elementi (minimo 3 elementi)
screenshot di un elenco di file immagine
Visualizzazioni elenco
larghezza delle colonne che evitano il troncamento dei dati x un numero integrale di elementi
screenshot di un indicatore di stato
Barre di stato
107 o 237 x 8
160 o 355 x 15
screenshot dei pulsanti di opzione
Pulsanti di opzione
10
17
screenshot del controllo dispositivo di scorrimento
Dispositivi di scorrimento
15
24
screenshot del testo: 'select time zone'
Testo (statico)
8
13
screenshot della casella di testo vuota
Caselle di testo
larghezza dell'input più lungo o previsto + 30% x 14 (una riga) + 10 per ogni riga aggiuntiva
larghezza dei dati validi più lunghi + 30% x 23 pixel relativi (una riga) + 16 per ogni riga aggiuntiva
screenshot delle cartelle annidate in Esplora risorse
Visualizzazioni albero
larghezza dell'elemento più lungo + 30% x un numero integrale di elementi (minimo 5 elementi)

Spaziatura

La tabella seguente elenca la spaziatura consigliata tra gli elementi comuni dell'interfaccia utente (per 9 pt. Segoe UI a 96 dpi).

  Elemento Unità di dialogo Pixel relativi
Immagine che mostra la spaziatura nei margini della finestra di dialogo
Margini della finestra di dialogo
7 su tutti i lati
11 su tutti i lati
Immagine che mostra la spaziatura tra etichette e controlli
Tra le etichette di testo e i relativi controlli associati (ad esempio caselle di testo e caselle di riepilogo)
3
5
Immagine che mostra la spaziatura tra i controlli correlati
Tra i controlli correlati
4
7
Immagine che mostra la spaziatura tra controlli non correlati
Tra controlli non correlati
7
11
Immagine che mostra la spaziatura del primo controllo in un gruppo
Primo controllo in una casella di gruppo
11 giù dalla parte superiore della casella di gruppo; allinea verticalmente al titolo della casella di gruppo
16 giù dalla parte superiore della casella di gruppo; allinea verticalmente al titolo della casella di gruppo
Aa511279.between-related(en-us,MSDN.10).jpg
Tra i controlli in una casella di gruppo
4
7
Immagine che mostra la spaziatura tra i pulsanti
Tra pulsanti disposti orizzontalmente o verticalmente
4
7
Immagine che mostra la spaziatura dell'ultimo controllo in un gruppo
Ultimo controllo in una casella di gruppo
7 sopra la parte inferiore della casella di gruppo
11 sopra la parte inferiore della casella di gruppo
Immagine che mostra la spaziatura dal bordo sinistro della casella di gruppo
Dal bordo sinistro di una casella di gruppo
6
9
Immagine che mostra la spaziatura dell'etichetta di testo accanto al controllo
Etichetta di testo accanto a un controllo
3 giù dalla parte superiore del controllo
5 verso il basso dalla parte superiore del controllo
Immagine che mostra la spaziatura tra paragrafi di testo
Tra paragrafi di testo
7
11
Spazio più piccolo tra i controlli interattivi
3 o nessuna spazio
5 o nessuna spazio
Spazio più piccolo tra un controllo non interattivo e qualsiasi altro controllo
2
3