Metrix Design Guidelines

Größe: px

Ab Seite anzeigen:

Download "Metrix Design Guidelines"

Gregor Schäfer
vor 7 Jahren
Abrufe

1 s

2 Um einen professionell aussehenden SkinPart zu erstellen musst du auf einige simple Dinge achten. Sofern du diese Regeln beachtest, wirkt das Ergebnis aufgeräumt und übersichtlich, wenn nicht, so gewinnt das Ergebnis zunehmen an Unruhe. Lektion 1: Sektoren Beim Erstellen eines Entwurfs, solltest du den Screen in Sektoren aufteilen. Erstelle Bereiche mit Informationen und vergebe diesen Informationen eine Gewichtung. So sieht man in der Beispielgrafik die InfoBar als Primärsektor dargestellt. Dieser Bereich hat die höchste Gewichtung und sollte dem Endnutzer als erstes auffallen. Im oberen Bereich ist der Sekundärsektor zu sehen, über den optionale Inhalte ersichtlich sind. Der Bereich nimmt hier bereits deutlich weniger Fläche ein und wird damit i.d.r. erst auf dem zweiten Blick wargenommen. Schließlich folgt der Tertiärsektor, welcher ausschließlich den Hintergrund darbietet. Die darin enthaltenen Informationen sind unauffällig dargestellt und sollten sich vom Hintergrund nicht maßgeblich abheben. Sofern mehrere Inhalte im Tertiärsektor dargestellt werden so sollten diese die gleiche Gewichtung erhalten. Anders ist dies im Primär- und Sekundärsektor. Die enthaltenen Daten sollten für sich wiederum in Sektoren eingeteilt werden (siehe Bild 2). 2

3 Lektion 2: Hilfslinien Diese Lektion trägt stark zur Übersichtlichkeit des Resultats bei. Auch wenn der Bildschirm sehr viele Inhalte darstellen soll, so kann man diese mit einem hohen Maß an Parallelität und Symmetrie auflockern. Zuerst solltest du deinen äußeren Rand klar definieren. Dieser Rand sollte später auf keinen Fall mit Informationen befüllt werden (rot dargestellt). Dies gilt natürlich auch hier wieder nicht nur für einen gesamten Screen sondern auch für ein einzelnes Widget. So ist beispielsweise beim ClockWidget ein klar definierter Rand zu erkennen. Die grünen Hilfslinien entsprechen unseren zuvor definierten Sektoren und alle Inhalte werden nun an diesen grünen Hilfslinien ausgerichtet. Gehen wir nun einen weiteren Schritt tiefer, so ist an den gelben Linien zu erkennen, dass alle Grafiken und Texte ebenfalls eine gewisse Parallelität aufweisen. Sie richten sich zum Teil am Randbereich aus, zum anderen Teil geben auch hier höhergewichtete Elemente eine eigene Ausrichtung für niedriger gewichtete Elemente vor. So wird beispielsweise die Sendezeit unten rechts, am Sendungstitel vertikal ausgerichtet. Die horizontale Ausrichtung übernimmt der die rote Randkontur. Bei allen Ausrichtungen sollte zudem auf einheitliche Abstände zu einzelnen Objekten geachtet werden. Dies kann in auch in Relation zur Größe des Elements leicht variieren. 3

4 Das folgende Bild verdeutlicht nochmals das Prinzip von Hilfslinien. Jedoch ist auch zu sehen, das beim ClockWidget die Worte Sonntag und 12. Mai zu hoch positioniert sind und nicht nach der Hilfslinie Verlaufen. Je größer die Grafik, desto unruhiger wirkt diese Verschiebung auf den Endnutzer, ob bewusst oder unbewusst. Die grüne Linie wird Mittellinie genannt. Sie ist im linken Bereich zentriert, alle im Sektor enthaltenen Objekt sind an ihr ausgerichtet. 4

5 Lektion 3: Ebenen Eine weitere Möglichkeit verschiedenen Sektoren eine unterschiedliche Gewichtung zu geben, ist die Einteilung in Ebenen. Mit dieser Technik ist es zudem Möglich freie Bereiche zu minimieren, mehr Inhalt auf einem Bildschirm darzustellen und dennoch die Übersichtlichkeit zu erhalten. Dies wird in MetrixHD generell über einen kleineren verknüpften Bereich mit einer sekundären Hintergrundfarbe verwirklicht. Weiterhin sollte der Kontrast zwischen Vorder- und Hintergrundfarbe auf einer sekundären Ebene geringer sein als bei einer primären Ebene. Optisch muss die Sekundärebene immer zwingend kleiner sein als die Primärebene. Durch die Kombination aus Kontrastverhältnis und Formfaktor tritt der Ebeneneffekt ein und Endbenutzer nimmt die Bereiche bewusst oder unbewusst räumlich dar. Im folgenden Bild ist die primäre Ebene in Grün und die sekundäre Ebene in Gelb dargestellt. Die Bereiche sind unmittelbar miteinander verbunden, jedoch wirkt das Gesamtbild aufgeräumt. Die zweite Grafik stellt den Ebeneneffekt in einer verdeutlichenden 3D-Ansicht dar. 5

6 Lektion 4: Farben Der gesamte Skin sollte einem einheitlichem Farbschema folgen. Dazu sollte man gezielt Farben ebenenorientiert zu einer Palette zuordnen. Dazu sollte das Schema mit möglichst wenigen Farben auskommen. MetrixHD verwendet eine primäre Vordergrundfarbe die für Informationen verwendet wird, welche im jeweiligen Sektor zuerst wargenommen werden sollen. Dies sind meist die am meisten benötigten Informationen. Weiterhin sind im Skin zwei Akzentfarben enthalten. Diese besitzen eine geringere Gewichtung und sollten vom Benutzer weniger wargenommen werden. Jedoch sollte der Kontrast auch bei Akzentfarben groß genug sein um die Inhalte vom Hintergrund unterscheiden zu können. Eine weitere Farbe ist der Hintergrundtext. Diese Farbe ist weniger für den Vordergrund gedacht. Sie findet Platz im Tertiärsektor und sollte höchst unauffällig gehalten werden. Sie wird am besten mit einer hohen Transparenz verwirklicht. Der Hintergrund beschränkt sich auf den primären Hintergrund der den höchsten Kontrast zum Vordergrund bieten sollte sowie den sekundären Hintergrund. Dieser wird in häufig Sekundärsektoren einzelner Widgets oder Bereiche verwendet. Der Kontrast ist niedriger und enthaltene Inhalt unauffälliger. Letztlich gehört noch eine Selektionsfarbe auf unsere Farbpalette. Diese sollte Auffällig sein, da diese den Fokus auf sich ziehen soll. Es bietet sich an, diese Farbe im Bereich der Sekundärhintergrundfarbe anzusiedeln, jedoch kontrastreicher zu gestalten. Die Farbpalette kann der Endnutzer im MyMetrix-Plugin frei wählen, dennoch spielen beim Entwickeln die Kontrastverhältnisse eine große Rolle. Lektion 5: Schriften Man sollte sich auf maximal zwei bis verschiedene Schriften in einem Projekt festlegen. MetrixHD verwendet serifenlose Schriften, dies wirkt aufgeräumt, modern und ist auf digitalen Anzeigen leicht ablesbar. Als primäre Schriftware verwenden wir ein Segoe-UI-Äquivalent in der Light-Variante. Sie zeichnet sich durch eine hohe Grazilität aus, sprich die einzelnen Linien sind sehr dünn und fein. Dies ermöglicht es uns die darzustellenden Informationen mit hoher Gewichtung besonders groß zu schreiben ohne damit den Bildschirm zu überfüllen. Durch die dünne Strichführung wirkt es übersichtlich und die Größe trägt dazu bei, dass diese Informationen zuerst wargenommen werden. Die zweite Schriftart heißt OpenSans in der Regular-Variante. Die Strichführung ist dicker, wodurch sie problemlos kleinen Text darstellen kann. Sie dient als Sekundärschriftart und besitzt eine niedrigere Gewichtung, sofern sie nicht zu groß geschrieben wird. Die Sekundärschriftart darf die Größe der Primärschriftart niemals überschreiten. In MetrixHD ist eine weitere Schriftart implementiert, welche nicht auf den ersten Blick als solche zu identifizieren ist. Der Meteocons genannte Font stellt die Icons des Wetter-Widgets dar. 6

Ähnliche Dokumente

Um Werte und deren Verlauf in einer Grafik darzustellen, benutzen wir eine Tabellenkalkulation wie Excel oder das Tabellendokument von Open Office.

Erstellen einer Grafik mit Open Office oder Excel Um Werte und deren Verlauf in einer Grafik darzustellen, benutzen wir eine Tabellenkalkulation wie Excel oder das Tabellendokument von Open Office. Als