Elementi grafici

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.

Gli elementi grafici mostrano relazioni, gerarchie ed enfasi visivamente. Includono sfondi, banner, vetro, aggregatori, separatori, ombre e handle.

Esempio con diversi tipi di elementi grafici.

Gli elementi grafici in genere non sono interattivi. Tuttavia, i separatori sono interattivi per il contenuto ridimensionabile e gli handle sono grafici che mostrano l'interattività.

Nota: Le linee guida relative a caselle di gruppo, animazioni, icone e personalizzazione vengono presentate in articoli separati.

Si tratta dell'interfaccia utente corretta?

Mentre gli elementi grafici sono un mezzo visivo sicuro per indicare le relazioni, sovrautilizzarli aggiunge un inclutter visivo e riduce lo spazio disponibile su una superficie. Devono essere usati in modo spaspare.

Una tendenza di progettazione in Microsoft Windows è un aspetto più semplice e pulito eliminando grafica e linee non necessarie.

Per decidere se è necessario un elemento grafico, prendere in considerazione queste domande:

• La presentazione e la comunicazione del design sono così chiare ed efficaci senza l'elemento? In tal caso, rimuoverlo.
• È possibile comunicare in modo efficace le relazioni usando solo il layout? In tal caso, usare invece il layout . È possibile inserire controlli correlati accanto all'altro e inserire spaziatura aggiuntiva tra controlli non correlati. È anche possibile usare il rientro per visualizzare relazioni gerarchici.

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

• La comunicazione è efficace senza testo? In caso contrario, usare una casella di gruppo, un separatore etichettato o un'altra etichetta.

Modelli di utilizzo

Gli elementi grafici hanno diversi modelli di utilizzo:

Elemento	Descrizione
Illustrazioni grafiche usare per comunicare un'idea visivamente.	Le illustrazioni grafiche sono simili alle icone, tranne che possono essere qualsiasi dimensione e in genere non sono interattive. In questo esempio viene usata un'illustrazione grafica per suggerire la natura di una funzionalità.
Sfondi usare per sottolineare o de-enfatizzare diversi tipi di contenuto.	Gli sfondi possono essere usati per evidenziare contenuti importanti. in questo esempio viene usato uno sfondo per evidenziare un'attività importante. gli sfondi possono essere usati anche per de-enfatizzare il contenuto secondario. In questo esempio, le attività secondarie vengono evidenziate de-sottolineate individuandole in un riquadro attività.
Banner usato per indicare lo stato importante.	In contrasto con gli sfondi, i banner sottolineano principalmente una singola stringa di testo. In questo esempio viene usato un banner per indicare che le impostazioni della pagina vengono controllate da Criteri di gruppo.
Vetro usare in modo strategico per ridurre il peso visivo di una finestra.	Il vetro può ridurre il peso di una superficie concentrandosi sul contenuto anziché sulla finestra stessa. In questo esempio, vetro concentra l'attenzione dell'utente sul contenuto anziché sui controlli.
Aggregatori usare per creare una relazione visiva tra controlli fortemente correlati.	in questo esempio viene usato uno sfondo aggregatore per evidenziare la relazione tra i pulsanti indietro e avanti in Explorer. In questo esempio viene usato un aggregatore di limiti per evidenziare la relazione tra i controlli e renderli come un singolo controllo anziché otto.
Separatori usare per separare i controlli correlati o non correlati in modo debole.	I separatori possono essere interattivi o non interattivi. i separatori interattivi tra contenuto ridimensionabile sono noti come splitter. in questo esempio viene usato un separatore interattivo per il contenuto ridimensionabile. In questo esempio il separatore non è interattivo.
Ombreggiature usare per rendere il contenuto visivo in modo visivo sullo sfondo.	In questo esempio, le ombre fanno risaltare l'opera d'arte sullo sfondo.
Selettori usare per indicare che un oggetto può essere spostato o ridimensionato.	Gli handle sono sempre interattivi e il loro comportamento è suggerito dal puntatore del mouse al passaggio del mouse. In questi esempi gli handle indicano che un oggetto può essere ridimensionato.

Indicazioni

Generale

• Non trasmettere informazioni essenziali solo tramite elementi grafici. In questo modo vengono visualizzati problemi di accessibilità per gli utenti con disabilità visive o problemi.

Disegni grafici

• La grafica è più efficace quando rafforzano un'unica idea semplice. Grafica complessa che richiede di interpretare non funziona bene. I gerarchici sono migliori a sinistra per i disegni delle caverne.

  Non corretto:

  

  In questo esempio, un grafico complesso di Windows XP tenta inefficacemente di spiegare una decisione di attendibilità complessa.

• Non usare frecce, chevroni, fotogrammi di pulsanti o altre offerte associate ai controlli interattivi. In questo modo gli utenti possono interagire con la grafica.

• Evitare lewath di puro rosso, giallo e verde nei tuoi disegni. Per evitare confusione, riservare questi colori per comunicare lo stato. Se è necessario usare questi colori per un elemento diverso dallo stato, usare toni disattivati anziché colori pure.

• Usare disegni culturalmente neutrali. Ciò che può avere un certo significato in un paese, un'area o una cultura potrebbe non avere lo stesso significato in un altro.

• Evitare di usare persone, visi, sesso o parti del corpo, nonché simboli religiosi, politici e nazionali. Tali immagini potrebbero non essere facilmente tradotte o potrebbero essere offensive.

• Quando è necessario rappresentare persone o utenti, illustrarli in modo generico; evitare rappresentazioni realistiche.

Sfondi e banner

• Per evidenziare il contenuto, usare testo scuro su uno sfondo chiaro. Il testo nero su uno sfondo grigio chiaro o giallo funziona bene.

  

  In questo esempio il collegamento ottiene l'attenzione dell'utente perché si trova su uno sfondo giallo.

• Per enfatizzare il contenuto, usare testo chiaro su uno sfondo scuro. Il testo bianco su uno sfondo grigio scuro o blu funziona bene.

  

  In questo esempio lo sfondo scuro de-sottolinea il contenuto.

• Se viene usata una sfumatura, assicurarsi che il colore del testo abbia un buon contrasto nell'intera sfumatura.

• Usare sempre un'icona a 16x16 pixel per attirare l'attenzione sul banner. I banner sono troppo facili da ignorare in caso contrario. Per altre linee guida ed esempi, vedere Icone standard.

• Usare sfondi e banner con attenzione. Anche se la finalità dello sfondo o del banner può essere di sottolineare il contenuto, spesso i risultati sono l'opposto di un fenomeno noto come "cecità banner".

Vetro

• Prendere in considerazione l'uso di vetro in aree piccole che toccano la cornice della finestra senza testo. In questo modo, un programma può dare un aspetto più semplice, più leggero e più coeso facendo apparire l'area come parte della cornice.
• Non usare vetro in situazioni in cui uno sfondo di finestra normale sarebbe più attraente o più facile da usare.

Separatori

• Usare linee verticali e orizzontali per i separatori. Assicurarsi di avere spazio sufficiente tra i separatori e il contenuto separato.
• Per i separatori tra contenuto sizable (splitters), visualizzare il puntatore di ridimensionamento sul passaggio del mouse.

In questi esempi, i puntatori di ridimensionamento vengono visualizzati al passaggio del mouse.

Ombreggiature

• Usare solo per rendere il contenuto o gli oggetti più significativi del programma trascinati visivamente sullo sfondo. Prendere in considerazione le ombreggiature per essere un elemento visivo in altre circostanze.

Supporto dpi elevato

• Supportare 96 e 120 punti per pollice (dpi) modalità video. Rilevare la modalità dpi all'avvio e gestire gli eventi di modifica dpi. Windows è ottimizzato per 96 e 120 dpi e usa 96 dpi per impostazione predefinita.
• Preferisce fornire bitmap separate di cui è stato eseguito il rendering in modo specifico per 96 e 120 dpi rispetto al ridimensionamento della grafica. Almeno fornire 96 e 120 versioni dpi per le bitmap più importanti, visibili e centro o ridimensionare gli altri. Tali applicazioni sono considerate "con riconoscimento con dpi elevati" e offrono un'esperienza visiva migliore rispetto ai programmi che vengono automaticamente ridimensionati da Windows.
  • Sviluppatori: è possibile dichiarare un programma con riconoscimento di dpi elevati (e impedire il ridimensionamento automatico) impostando il flag di riconoscimento dpi nel manifesto del programma o chiamando l'API SetProcessDPIAware() durante l'inizializzazione del programma. È possibile usare le macro per semplificare la selezione della grafica corretta. Per le bitmap Win32, è possibile usare SS_CENTERIMAGE al centro o SS_REALSIZECONTROL per ridimensionare.
• Controllare il programma sia in 96 che in 120 dpi per:
  • Grafica troppo piccola o troppo grande.
  • Grafica ritagliata, sovrapposta o in caso contrario non adattata correttamente.
  • Grafica scarsamente estesa ("pixilato").
  • Testo ritagliato o non appropriato in sfondi grafici.

Testo

• Per l'accessibilità e la localizzazione, non usare testo nella grafica. Creare eccezioni solo per rappresentare la personalizzazione e il testo come concetto astratto.