Farbige Fenster!

Sinnvolle Farbgestaltung unter Windows 10
Keine Kommentare

Ein alter Kalauer besagt, dass sich die Welt im Kreis dreht. Im Fall von Farbe im IT-Bereich ist dies definitiv der Fall. Als Palm den IIIc auf den Markt brachte, nutzte man Farbe, wenn überhaupt, zum Hervorheben von besonders interessanten Elementen. Android, Symbian und Co. entfalteten sodann den Farbkrieg, in dem Entwickler versuchten, reale Elemente am Bildschirm nachzubilden.

Seit Windows Phone 7 geht der Trend wieder in die andere Richtung. Microsofts Betriebssystem unterscheidet sich unter anderem deshalb von seinen Kollegen, weil es eine systemweite Farbgebung durchzusetzen versucht. Dies erfolgt über die in EINSTELLUNGEN | PERSONALISIERUNG | FARBEN festlegbare Akzentfarbe. Microsoft stellt hierbei für den Desktop 48 (Abb. 1) und für die Xbox 21 (Abb. 2) von Designern ausgesuchte Farben vor, die von braven Anwendungen sodann in allen Formularen gleichermaßen verwendet werden.

Abb. 1: Diese 48 Farben stehen unter Windows 10 zur Verfügung

Abb. 2: Auf der Xbox ist die Auswahl etwas kleiner

Was Farbe für Sie als Entwickler bedeutet, und was es zum Thema Farbgebung sonst so zu beachten gibt, stellen wir in diesem Artikel im Detail vor.

Farbe, physikalisch

Beginnen wir mit dem Positiven. Das Ende von Windows 10 Mobile hat (vorläufig) dafür gesorgt, dass die einst wichtigen organischen LEDs für den durchschnittlichen Windows-Entwickler wenn überhaupt nur noch über Xamarin von Relevanz sind. Daraus ergibt sich eine wichtige Vereinfachung: Da der Stromverbrauch eines LCDs nicht ansteigt, wenn der Hintergrund weiß ist, müssen Sie heute nur in den seltensten Fällen von Situationen mit schwarzem Hintergrund ausgehen. Das ist nicht nur aus Gründen der Diversitätsreduktion erfreulich: Schwarze Hintergründe neigen im Außeneinsatz stärker zu Reflektionen als ihre weißen Counterparts, was der Usability zugute kommt.

Nebenbei haben wir damit die Besprechung der unbunten Farben abgeschlossen. Es handelt sich dabei um einen Fachbegriff, der die Farben schwarz, weiß und grau beschreibt, Farben, deren Rot-, Grün- und Blauanteile identisch sind. Für Entwickler sind Graustufen übrigens insofern interessant, als sie die meisten Displays stark beanspruchen. Zum Verständnis dieses Phänomens müssen wir einen kurzen Exkurs in die Welt der Darstellung von Farben unternehmen.

 

API Conference 2018

API Management – was braucht man um erfolgreich zu sein?

mit Andre Karalus und Carsten Sensler (ArtOfArc)

Web APIs mit Node.js entwickeln

mit Sebastian Springer (MaibornWolff GmbH)


Die Bildschirme arbeiten nach dem in Abbildung 3 schematisch dargestellten Konzept. Eine Lichtquelle emittiert dabei Photonen, die vom Flüssigkristall mehr oder weniger stark gefiltert werden. Im Regelfall besteht ein Pixel sodann aus einem roten, einem grünen und einem blauen Element, die zusammen die jeweilige Farbe ergeben.

Abb. 3: Farbmanagement setzt auch Verständnis der Hardware voraus

Haben wir nun einen Farbkeil zwischen zwei bunten Farben, kann der Algorithmus zwei oder sogar drei Komponenten variieren. Bei einem Graukeil sind alle drei Komponenten miteinander verbunden. Problematisch wird dies dadurch, dass die Wandlerstufen in den meisten Displays achtbittig sind, also nur 256 verschiedene Helligkeitsintensitäten in Richtung der Flüssigkristalle schicken können. Das bedeutet, dass ein reiner Graukeil stufig erscheint – stellen wir uns beispielsweise ein 30 cm langes Display vor, in dem der Graukeil dann nur eine Farbänderung pro Millimeter erreichen kann. Zur Umgehung dieses Problems könnten Sie auf Dithering und Co. setzen – Themen, die wir an dieser Stelle allerdings aus Platzgründen nicht weiter behandeln wollen.

Das Element im Fokus

Nachdem wir uns bisher mit unbunten Farben beschäftigt haben, wollen wir als Nächstes die in der Systemsteuerung auszuwählenden Highlights besprechen. Sie sind im Prinzip das, was man von ihrem Namen her erwarten würde – Farben, die das Hervorheben einzelner Elemente im Benutzerinterface ermöglichen. Dahinter steht die Ausnutzung einer Kontrastart, die immer dann auftritt, wenn eine bunte Farbe auf einer unbunten Farbe zu liegen kommt. Interessant ist hier auch die Frage, warum die Abbildungen 1 und 2 kein Gelb enthalten und warum die Farbschemata für die Xbox weniger sehr helle Farbschattierungen enthalten. Die Ursache dafür ist, dass beispielsweise Gelb auf weißem Hintergrund zum „Absaufen“ neigt, was der Sichtbarkeit des Gesamtsystems nicht unbedingt zuträglich ist.

Microsoft stellt in den bereitliegenden Guidelines eine Vielzahl von Richtlinien zum Thema Farbe vor. Den URL sollten Sie prinzipiell im Hinterkopf behalten, es gibt dort nämlich auch eine Vielzahl von anderen Hinweisen zu dazugehörenden Themen der grafischen Gestaltung.

Aus der Logik folgt, dass es vernünftig ist, die Wünsche des Benutzers bei der Implementierung Ihres GUIs zu berücksichtigen. Der GUI-Stack von Windows 10 nimmt Ihnen hierbei einen Gutteil der Arbeit ab, da die ausgewählte Akzentfarbe automatisch zum Einfärben mancher Steuerelemente verwendet wird. Falls Sie hausgemachte Elemente haben, können Sie stattdessen auf Themenressourcen zurückgreifen. Als Beispiel dafür folgendes XAML-Snippet, das ein in der gerade aktuellen Akzentfarbe erscheinendes Rechteck realisiert:
<Rectangle Width="200" Height="200">
<Rectangle.Fill>
<SolidColorBrush Color="{ThemeResource SystemAccentColor}" />
</Rectangle.Fill>
</Rectangle>

SystemAccentColor ist hierbei ein gewöhnliches ThemeResource-Objekt. Es handelt sich dabei um eine Ressourcenwörterbuch, das von der XAML Runtime bereitgestellt wird und das Betriebssystem permanent an den gerade aktuellen Betriebszustand des GUI-Stacks anpasst. Für Sie als Entwickler bedeutet das, dass Sie bei der Nutzung der jeweiligen Ressourcen keine weiteren Gedanken darauf verwenden müssen, das Aussehen ihrer grafischen Benutzerschnittstelle an die neue Situation anzupassen.

An dieser Stelle präsentiert sich eine weitere interessante Frage: In der Theorie spricht nichts dagegen, die Highlight-Farbe als Hintergrund für Textfelder und Symbole von hoher Bedeutung zu verwenden. Microsoft wünscht dies laut den Design Guidelines explizit nicht; die Formulierung lautet, dass man dieses Einsatzszenario nach Möglichkeit vermeiden sollte: „Avoid using the user‘s accent color as a background, especially for text and icons. Because the accent color can change, if you must use it as a background, additional work must be done to ensure that foreground text is easy to read.“

Ist es trotz allem nicht vermeidbar, empfiehlt Microsoft die Analyse der Vordergrundfarben. Dazu dient folgendes Codesnippet, das als Vorgabe aus dem Hause Microsoft zu werten ist:

void accentColorUpdated(FrameworkElement elementWithText) {
var uiSettings = new Windows.UI.ViewManagement.UISettings();
Windows.UI.Color c = uiSettings.GetColorValue(UIColorType.Accent);
bool colorIsDark = (5 * c.G + 2 * c.R + c.B) <= 8 * 128;
if (colorIsDark) {
elementWithText.RequestedTheme = ElementTheme.Light;
}
else {
elementWithText.RequestedTheme = ElementTheme.Dark;
}
}

Die dahinterstehende Idee ist vergleichsweise einfach. Wir beschaffen im ersten Schritt die Intensität der Farbe. Dabei werden die grünen, die roten und die blauen Komponenten zusammengezählt und gewichtet. Die Gewichtung ist insofern wichtig, als sich die Wahrnehmung der drei Primärfarben bei identischer Helligkeit aufgrund von Differenzen im Aufbau des menschlichen Auges unterscheidet.

Gib mir mehr!

Das Vorhandensein einer Textfarbe, einer Akzentfarbe und einer Hintergrundfarbe ist insofern problematisch, da Sie damit auf zwei oder maximal drei Informationsebenen beschränkt sind. In komplexeren Applikationen kann es wünschenswert sein, die verschiedenen Elemente auch farblich voneinander abzusetzen – der Nutzer könnte so beispielsweise sehen, welches Element am wichtigsten ist, welches relativ wichtig ist und welches fast in der Bedeutungslosigkeit versinkt.

Farbkontraste
Ein Gutteil der Farbenlehre geht auf die Arbeiten von Johannes Itten zurück. Bei Wikipedia findet sich eine Auflistung seiner sieben Kontrastarten, die als Basis für eigene Literaturrecherchen dienen kann.

Ein Weg zur Lösung dieses Problems ist der Qualitätskontrast. Es handelt sich dabei um eine Zusammenstellung von mehreren Farbfeldern, die den gleichen Farbton aufweisen, sich aber in der Sättigung der jeweiligen Farbe unterscheiden. Dabei tritt ein seit längerer Zeit bekanntes physiologisches Phänomen auf: Das menschliche Auge bzw. die menschliche Wahrnehmung gehen davon aus, dass stärker gesättigte Farben im Vordergrund liegen, während weniger stark gesättigte Farben weiter im Hintergrund sind.

Theoretiker gehen davon aus, dass es sich dabei um einen aus der Erfahrung entstandenen Effekt handelt – die zwischen dem Auge und einen weiter entfernten Gegenstand befindlichen Luftschichten lassen diesen gräulicher und weniger gesättigt erscheinen. Die Lernfähigkeit des Menschen sorgt dann dafür, dass Objekte auch bei physikalisch identischer Entfernung als verschieden weit entfernt wahrgenommen werden. Zur weiteren Erforschung wollen wir UiColorType ansehen:

public enum UIColorType {
AccentDark3 = 2,
AccentDark2 = 3,
AccentDark1 = 4,
Accent = 5,
AccentLight1 = 6,
AccentLight2 = 7,
AccentLight3 = 8,
. . .

Microsoft implementiert mit AccentDark und AccentLight zwei Dictionaries, die nach Helligkeitswerten abgestufte Farbvariationen der Akzentfarbe zur Verfügung stellen. Da das textuelle Beschreiben des Verhaltens dieser Elemente etwas haarig ist, wollen wir stattdessen etwas XAML einsetzen:

<Rectangle . . . Fill="{ThemeResource SystemAccentColorLight1}">
<Rectangle . . . Fill="{ThemeResource SystemAccentColorLight2}">
<Rectangle . . . Fill="{ThemeResource SystemAccentColorLight3}">
<Rectangle . . . Fill="{ThemeResource SystemAccentColor}">
<Rectangle . . . Fill="{ThemeResource SystemAccentColorDark3}">
<Rectangle . . . Fill="{ThemeResource SystemAccentColorDark2}">
<Rectangle . . . Fill="{ThemeResource SystemAccentColorDark1}">

Aus programmiertechnischer Sicht handelt es sich hierbei um keine Raketenwissenschaft. Wir erzeugen sieben übereinanderliegende Rechtecke, die jeweils eine der im ResourceDictionary befindlichen Farben zugewiesen bekommen. Zur Laufzeit präsentiert sich das Ergebnis wie in den Abbildungen 4 und 5 gezeigt.

Abb. 4 Sowohl in Grün …

Abb. 5 … als auch in Blau ansprechend

Dunkel, wo hell genügt

Auch wenn der Untergang organischer LEDs dafür gesorgt hat, dass es keinen nennenswerten Grund für schwarze Hintergründe gibt – es gibt immer wieder Wahnsinnige, die Labormäntel mit Lebensmittelfarbe einfärben. Aufgrund der Erfahrungen mit Windows Phone 7 – alte Windows-Mobile-Nutzer schrien ob fehlender Features Zeter und Mordio – implementiert Microsoft nach wie vor einen Farbauswahlschalter. Unter Windows 10 verbirgt er sich in der Option COLOR SETTINGS. Abbildung 6 zeigt die eigentlichen Steuerelemente.

Abb. 6: Und das, obwohl sich das LCD des ThinkPads vom schwarzen Hintergrund unbeeindruckt zeigt …

Um Entwicklern das Verwenden der diversen Farbschemata zu erleichtern, werden auch diese über eine Gruppe von XAML-Attributen exponiert. Microsoft spricht hier in der Dokumentation von Farbrampen, die schematisch in den Abbildungen 7 und 8 gezeigt sind. Aus Platzgründen zeigen wir hier nur einen Teil der Rampe – wer sich den erwähnten Wikipedia-Eintrag zu Kontrasten nach Itten ansieht, bekommt weitere Informationen.

Abb. 7: Ein- und dieselbe Rampe sieht auf weißem … (Quelle: Microsoft)

Abb. 8: … und auf schwarzem Background komplett anders aus (Quelle: Microsoft)

Wichtig ist für uns hierbei der Zusammenbau der Namen, die die eigentlichen Werte realisieren. Hierbei kommt die Formel System[Simple Light/Dark Name]Color zum Einsatz.

Neben den gewöhnlichen hellen und dunklen Farbschemata bietet Windows auch noch einen als High Contrast bezeichneten Sonderbetriebsmodus an. In diesem Modus benutzt der GUI-Stack zur Darstellung von Steuerelementen die in Tabelle 1 namentlich aufgeführten Farbwerte.

SystemColorButtonFaceColor: Hintergrund von Knöpfen etc.
SystemColorButtonTextColor Vordergrund von Knöpfen etc.
SystemColorGrayTextColor Grauer Text für deaktivierte Widgets
SystemColorHighlightColor Hintergrund von selektiertem Text
SystemColorHighlightTextColor Vordergrund von selektiertem Text
SystemColorHotlightColor Hyperlinks
SystemColorWindowColor Hintergrund
SystemColorWindowTextColor Text

Farbcode Kommt zum Einsatz bei … SystemColorButtonFaceColor Hintergrund von Knöpfen etc. SystemColorButtonTextColor Vordergrund von Knöpfen etc. SystemColorGrayTextColor Grauer Text für deaktivierte Widgets SystemColorHighlightColor Hintergrund von selektiertem Text SystemColorHighlightTextColor Vordergrund von selektiertem Text SystemColorHotlightColor Hyperlinks SystemColorWindowColor Hintergrund SystemColorWindowTextColor Text

Wir drucken an dieser Stelle absichtlich keine Äquivalenzfarben ab: Die High-Contrast-Betriebsmodi sind für Personen mit visuellen Beeinträchtigungen vorgesehen. Da jede visuelle Beeinträchtigung mit spezifischen Einschränkungen im Bereich der Farbwiedergabe einhergeht, ist es nicht sinnvoll, für alle Nutzer eine Farbtabelle vorzugeben. Wer in die Rubrik ACCESSIBILITY | HIGH CONTRAST wechselt und den Modus freischaltet, sieht, dass das Betriebssystem eine Vielzahl verschiedener Farbschemata anbietet.

Wie dem auch sei: Die Verwendung der jeweiligen Farben erfolgt, indem Sie ein Steuerelement mit einem Farbattribut ausstatten, das den genannten String als Parameter enthält. Dabei gibt es allerdings ein kleines Problem, zu dessen Demonstration wir abermals auf ein kleines XAML-Snippet zurückgreifen wollen:

<Rectangle . . . Fill="{ThemeResource SystemControlChromeLowAcrylicElementBrush}">
<Rectangle . . . Fill="{ThemeResource SystemChromeWhiteColor}">
<Rectangle . . . Fill="{ThemeResource SystemChromeBlackHighColor}">
<Rectangle . . . Fill="{ThemeResource SystemControlChromeLowAcrylicWindowBrush}">

Aus technischer Sicht unterscheidet sich dieses Snippet nur wenig von seinem Vorgänger: Wir legen abermals eine Gruppe verschiedenfarbiger Tiles an. Interessant ist nur, was bei einer Veränderung des Themes passiert (Abb. 9 und 10).

Abb. 9: Bei weißem Hintergrund saufen die White-Elemente ab …

Abb. 10: … während sich das Beispielprogramm – im Großen und Ganzen – vom schwarzen Hintergrund unbeeindruckt zeigt

Von besonderer Bedeutung für Entwickler ist an dieser Stelle nur, dass manche Attribute dazu neigen, bei hellen oder dunklen Themes im Hintergrund abzusaufen. Spezifisch ist es empfehlenswert, all jene zu vermeiden, deren Name den String white oder black enthält.

Eine Frage der Farbauswahl!

Als Palm OS 3.5 auf den Markt brachte, führte man unter anderem einen Farbwähler ein. Er bot 255 verschiedene Farben an, die man durch Anklicken von Kästchen auswählen konnte – da der Palm IIIc nur 8-Bit-Farbdarstellung beherrschte, gab es an dieser Stelle kein Problem.

Wer heute unter Windows an einem Grafikprogramm arbeitet, sollte davon ausgehen, dass die Benutzer pro Farbkanal 8 Bit an Auflösung erwarten. Das vernünftige Realisieren ebendieser ist schwieriger als es auf den ersten Blick erscheint. Es spricht nicht viel dafür, einfach drei Eingabefelder für R, G und B zu präsentieren und den Benutzer mit der additiven Farbmischung allein zu lassen.

Da Entwickler auf das Fehlen eines ähnlichen Steuerelements im Windows-GUI-Stack mit der Erzeugung diverser zueinander inkompatibler Steuerelemente reagierten, führte das Creators Update eine universelle Farbauswahlkomponente ein, die wir in den folgenden Schritten ausprobieren möchten. Gleich zu Beginn sei allerdings angemerkt, dass Microsoft die Nutzung des Widgets im Zusammenspiel mit stiftgetriebenen Applikationen verbietet – wenn Sie ein Programm realisieren, das mit dem vom Surface und anderen Geräten bekannten Eingabestift arbeitet, müssen Sie die von Microsoft bereitgestellten Steuerelemente verwenden.

Für einen ersten Versuch nutzen wir folgendes XAML-Markup, was zur Laufzeit zum in Abbildung 11 gezeigten Verhalten führt: <ColorPicker ColorSpectrumShape=“Ring“>.

Abb. 11: RGB-Farbkreis

Das gezeigte Diagramm – im Internet findet sich zudem eine Vielzahl weiterer – geht auf die Theorie des Farbmodells zurück. Im Grunde genommen ist ein Farbmodell ein Denkmodell, das die Anordnung von Farben in einem geometrischen Raum (Stichwort Farbraum) beschreibt. Hier gab es im Laufe der letzten Jahrzehnte eine Unmenge von Konzepten: Das eine setzt auf die Grundfarben Rot, Grün und Blau, während das andere mit Rot, Gelb und Blau arbeitet. Von Bedeutung ist dies nicht – wichtig ist nur, dass die an einem Projekt arbeitenden Entwickler gemeinsam ein Farbmodell einsetzen.

RGB, vulgo additive Farbmischung, ist dabei insofern einfach, als es von der in Abbildung 3 gezeigten Darstellung abgeleitet und entsprechend intuitiv verständlich ist. Beim Ausdrucken von Farben bekommen Sie es stattdessen mit CMYK zu tun – ein analoges Schema, das als Grundfarben die ausdruckbaren Farben Cyan, Magenta, Yellow und Black nutzt.

Beide Modelle sind auf den ersten Blick komfortabel einsetzbar, leiden aber darunter, dass es vergleichsweise schwer ist, Komplementärfarben zu finden. Als Alternative dazu gibt es die Modelle HSV, HSB und HSL. Die drei verhalten sich im Großen und Ganzen ähnlich, unterscheiden sich jedoch im Bereich der Berechnung der Helligkeit. Ihnen allen liegt ein Farbkreis zu Grunde, der wie in Abbildung 12 gezeigt aussieht.

Abb. 12: Farbkreis für HSV, HSB und HSL

Die Aufgabe des Kreises ist hierbei die Festlegung des Grund- bzw. Bunttons, der in den folgenden Schritten durch Helligkeit und Sättigung verfremdet wird. Im nächsten Schritt folgt die Einführung der Sättigung. Dabei wird der in Abbildung 12 gezeigte Kreis nach innen erweitert. Auf der Innenseite findet sich bei den Modellen HSL und HSV Weiß, während bei HSB in der Mitte ein neutrales Grau liegt. Zu guter Letzt folgt noch die Helligkeit. Dabei gilt die Regel, dass das Reduzieren der Helligkeit dafür sorgt, dass die Farbe in Schwarz absäuft.

Fazit

In der Anfangszeit der Computertechnik galt die Regel, dass der Entwickler nur ein Programm bauen muss und die User dann schon von selbst auftauchen. In der heutigen Zeit ist die Situation anders. Wer sein Programm nicht optimal an die Bedürfnisse der Nutzer anpasst, erleidet schneller Schiffbruch als ihm Recht ist.

Die Beschäftigung mit Farbtheorie ist allerdings nicht nur aus Marketingsicht interessant. Wer sich mit Farben auskennt, hat bei der Gestaltung der Umgebung und sogar beim Kauf und Verkauf von Immobilien Vorteile. Zudem ist die Farbenlehre ein faszinierendes Thema, mit dem man viel Zeit totschlagen kann.

Windows Developer

Windows DeveloperDieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -