Grafikelemente

Grafikelemente Beziehungen, Hierarchien und Hervorhebung visuell darstellen. Sie umfassen Hintergründe, Banner, Glas, Aggregatoren, Trennzeichen, Schatten und Ziehpunkte.

Ein Beispiel mit mehreren Arten von Grafikelementen.

Grafikelemente sind in der Regel nicht interaktiv. Trennzeichen sind jedoch interaktiv für veränderbare Inhalte und Handles sind Grafiken, die Interaktivität zeigen.

Hinweis: Richtlinien für Gruppenfelder, Animationen, Symboleund Branding- werden in separaten Artikeln vorgestellt.

Ist dies die richtige Benutzeroberfläche?

Grafikelemente sind zwar ein starkes visuelles Mittel zur Angabe von Beziehungen, aber das Überbrauchen fügt eine übersichtliche Darstellung hinzu und reduziert den verfügbaren Platz auf einer Oberfläche. Sie sollten sparsam verwendet werden.

Ein Designtrend in Microsoft Windows ist ein einfacheres, übersichtlicheres Erscheinungsbild, da unnötige Grafiken und Linien eliminiert werden.

Um zu entscheiden, ob ein Grafikelement erforderlich ist, sollten Sie die folgenden Fragen in Betracht ziehen:

• Ist die Präsentation und Kommunikation des Designs genauso klar und effektiv ohne das Element? Falls ja, entfernen Sie es.
• Können Sie die Beziehungen mithilfe des Layouts effektiv kommunizieren? Verwenden Sie in diesem Falls stattdessen Layout-. Sie können verwandte Steuerelemente nebeneinander platzieren und zusätzlichen Abstand zwischen nicht verknüpften Steuerelementen platzieren. Sie können auch den Einzug verwenden, um hierarchische Beziehungen anzuzeigen.

In diesem Beispiel wird das Layout allein verwendet, um Steuerelementbeziehungen anzuzeigen.

• Ist die Kommunikation ohne Text wirksam? Verwenden Sie andernfalls ein Gruppenfeld, beschriftetes Trennzeichen oder ein anderes Bezeichnungsfeld.

Verwendungsmuster

Grafikelemente weisen mehrere Verwendungsmuster auf:

Element	Beschreibung
Grafische Illustrationen verwenden, um eine Idee visuell zu kommunizieren.	Grafikabbildungen ähneln Symbolen, mit der Ausnahme, dass sie beliebig groß sein können und in der Regel nicht interaktiv sind. In diesem Beispiel wird eine Grafische Abbildung verwendet, um die Art eines Features vorzuschlagen.
Hintergründe wird verwendet, um verschiedene Arten von Inhalten hervorzuheben oder zu deaktivieren.	Hintergründe können verwendet werden, um wichtige Inhalte hervorzuheben. In diesem Beispiel wird ein Hintergrund verwendet, um eine wichtige Aufgabe hervorzuheben. Hintergründe können auch verwendet werden, um sekundären Inhalt hervorzuheben. In diesem Beispiel werden sekundäre Aufgaben durch Suchen in einem Aufgabenbereich hervorgehoben.
Banner wird verwendet, um den wichtigen Status anzugeben.	Im Gegensatz zu Hintergründen betonen Banner in erster Linie eine einzelne Textzeichenfolge. In diesem Beispiel wird ein Banner verwendet, um anzugeben, dass die Einstellungen der Seite durch Gruppenrichtlinien gesteuert werden.
Glas- verwenden Sie strategisch die visuelle Gewichtung eines Fensters.	Glas kann das Gewicht einer Oberfläche reduzieren, indem sie sich auf den Inhalt anstatt auf das Fenster selbst konzentrieren. In diesem Beispiel konzentriert Glas die Aufmerksamkeit des Benutzers auf den Inhalt anstelle der Steuerelemente.
Aggregatoren wird verwendet, um eine visuelle Beziehung zwischen stark verwandten Steuerelementen zu erstellen.	In diesem Beispiel wird ein Aggregatorhintergrund verwendet, um die Beziehung zwischen den Zurück- und Vorwärtsschaltflächen im Explorer hervorzuheben. In diesem Beispiel wird ein Begrenzungsaggregator verwendet, um die Beziehung zwischen den Steuerelementen hervorzuheben und sie wie ein einzelnes Steuerelement anstelle von acht zu fühlen.
Trennzeichen wird verwendet, um schwach verwandte oder nicht verknüpfte Steuerelemente zu trennen.	Trennzeichen können interaktiv oder nicht interaktiv sein. Interaktive Trennzeichen zwischen veränderbaren Inhalten werden als Splitter bezeichnet. In diesem Beispiel wird ein interaktives Trennzeichen für veränderbare Inhalte verwendet. In diesem Beispiel ist das Trennzeichen nicht interaktiv.
Schatten verwenden, um Inhalte visuell gegenüber dem Hintergrund hervorzuheben.	In diesem Beispiel heben Schatten die Grafik vor dem Hintergrund hervor.
Handles wird verwendet, um anzugeben, dass ein Objekt verschoben oder die Größe geändert werden kann.	Ziehpunkte sind immer interaktiv und ihr Verhalten wird vom Mauszeiger beim Daraufzeigen vorgeschlagen. In diesen Beispielen geben Handles an, dass die Größe eines Objekts geändert werden kann.

Leitlinien

Allgemein

• Vermitteln Sie wichtige Informationen nicht allein durch Grafikelemente. Dadurch werden Barrierefreiheitsprobleme für Benutzer mit Sehbehinderungen oder Beeinträchtigungen angezeigt.

Grafikdesigns

• Grafiken sind am effektivsten, wenn sie eine einzelne einfache Idee verstärken. Komplexe Grafiken, für die eine Interpretation erforderlich ist, funktionieren nicht gut. Hieroglyphics sind am besten für Höhlenzeichnungen links.

  Falsch:

  

  In diesem Beispiel versucht eine komplexe Grafik von Windows XP ineffektiv, eine komplexe Vertrauensentscheidung zu erläutern.

• Verwenden Sie keine Pfeile, Chevrons, Schaltflächenrahmen oder andere Angebote, die interaktiven Steuerelementen zugeordnet sind. Dadurch werden Benutzer aufgefordert, mit Ihren Grafiken zu interagieren.

• Vermeiden Sie in Ihren Designs Reines Rot, Gelb und Grün. Um Verwirrung zu vermeiden, reservieren Sie diese Farben, um den Status zu kommunizieren. Wenn Sie diese Farben für einen anderen Wert als status verwenden müssen, verwenden Sie stummgeschaltete Töne anstelle von reinen Farben.

• Verwenden Sie kulturneutrale Designs. Was in einem Land, einer Region oder einer Kultur eine bestimmte Bedeutung haben kann, hat möglicherweise nicht dieselbe Bedeutung in einem anderen.

• Vermeiden Sie die Verwendung von Personen, Gesichtern, Geschlecht oder Körperteilen sowie religiösen, politischen und nationalen Symbolen. Solche Bilder können nicht einfach übersetzt werden oder anstößig sein.

• Wenn Sie Personen oder Benutzer darstellen müssen, stellen Sie sie generisch dar; realistische Darstellungen vermeiden.

Hintergründe und Banner

• Um Inhalte hervorzuheben, verwenden Sie dunklen Text auf einem hellen Hintergrund. Schwarzer Text auf einem hellgrauen oder gelben Hintergrund funktioniert gut.

  

  In diesem Beispiel erhält der Link die Aufmerksamkeit des Benutzers, da er sich auf einem gelben Hintergrund befindet.

• Verwenden Sie hellen Text auf einem dunklen Hintergrund, um inhalte hervorzuheben. Weißer Text auf einem dunkelgrauen oder blauen Hintergrund funktioniert gut.

  

  In diesem Beispiel hebt der dunkle Hintergrund den Inhalt auf.

• Wenn ein Farbverlauf verwendet wird, stellen Sie sicher, dass die Textfarbe über den gesamten Farbverlauf einen guten Kontrast aufweist.

• Verwenden Sie immer ein Symbol mit 16 x 16 Pixeln, um die Aufmerksamkeit auf das Banner zu lenken. Banner sind ansonsten zu einfach zu übersehen. Weitere Richtlinien und Beispiele finden Sie unter Standardsymbole.

• Verwenden Sie Hintergründe und Banner mit Vorsicht. Obwohl der Zweck des Hintergrunds oder Banners sein kann, Inhalte hervorzuheben, sind die Ergebnisse oft das Gegenteil eines Phänomens, das als "Bannerblindheit" bezeichnet wird.

Glas

• Erwägen Sie die strategische Verwendung von Glas in kleinen Bereichen, die den Fensterrahmen ohne Text berühren. Auf diese Weise kann ein Programm ein einfacheres, helleres, einheitliches Aussehen verleihen, indem die Region als Teil des Rahmens erscheint.
• Verwenden Sie kein Glas in Situationen, in denen ein einfacher Fensterhintergrund attraktiver oder einfacher zu verwenden wäre.

Trennzeichen

• Verwenden Sie vertikale und horizontale Linien für Trennzeichen. Achten Sie darauf, dass genügend Platz zwischen den Trennzeichen und dem getrennten Inhalt vorhanden ist.
• Zeigen Sie für Trennzeichen zwischen größebarem Inhalt (Splittern) den Mauszeiger für die Größenänderung beim Daraufzeigen an.

In diesen Beispielen werden beim Daraufzeigen Zeiger die Größenänderung angezeigt.

Schatten

• Verwenden Sie nur, um die wichtigsten Inhalte oder Objekte ihres Programms visuell vor dem Hintergrund hervorzuheben. Erwägen Sie, Schatten in anderen Fällen visuell unübersichtlich zu sein.

Unterstützung für hohe DPI-Werte

• Unterstützen Sie die Videomodi 96 und 120 Punkte pro Zoll (dpi). Erkennen des DPI-Modus beim Start und Behandeln von DPI-Änderungsereignissen. Windows ist für 96 und 120 DPI optimiert und verwendet standardmäßig 96 DPI.
• Stellen Sie lieber separate Bitmaps bereit, die speziell für die Skalierung von Grafiken mit 96 und 120 DPI gerendert werden. Stellen Sie mindestens 96 und 120 DPI-Versionen für die wichtigsten, sichtbaren Bitmaps bereit, und skalieren Sie die anderen. Solche Anwendungen gelten als "high-dpi aware" und bieten eine bessere visuelle Erfahrung als Programme, die von Windows automatisch skaliert werden.
  • Entwickler: Sie können ein Programm mit hohem DPI-Wert deklarieren (und die automatische Skalierung verhindern), indem Sie das dpi-fähige Flag im Manifest des Programms festlegen oder die SetProcessDPIAware()-API während der Programminitialisierung aufrufen. Sie können Makros verwenden, um die Auswahl der richtigen Grafiken zu vereinfachen. Für Win32-Bitmaps können Sie SS_CENTERIMAGE zum Zentrieren oder SS_REALSIZECONTROL zum Skalieren verwenden.
• Überprüfen Sie Ihr Programm in 96 und 120 dpi für:
  • Grafiken, die zu klein oder zu groß sind.
  • Grafiken, die abgeschnitten, überlappend oder anderweitig nicht ordnungsgemäß passen.
  • Grafiken, die schlecht gestreckt sind ("pixilated").
  • Text, der in Grafikhintergründe abgeschnitten oder nicht passt.

Text

• Verwenden Sie für Barrierefreiheit und Lokalisierung keinen Text in Grafiken. Ausnahmen nur, um Branding- und Text als abstraktes Konzept darzustellen.