Dieses Dokument beschreibt ausschließlich das Konzept eines UI-Systems zur konsistenten Gestaltung von Farben, Flächen-Hervorhebung und visueller Hierarchie. Es beschreibt bewusst keine Umsetzung.
EPIC besteht aus vier Pfeilern:
- Emphasis und Prominence sind Konzepte der Darstellung (Nomen).
- Interact und Consume sind Kategorien aus Sicht des Nutzers (Verben): Was macht der Nutzer mit dem, was er sieht?
Ziel #
Das System soll:
- visuelle Hierarchie konsistent abbilden (Makro und Mikro)
- Verschachtelung sauber unterstützen (Bereiche in Bereichen, Komponenten in Bereichen)
- Komponenten einfach und portierbar halten (keine verstreute Systemlogik)
- Bedeutung (Priorisierung) und Darstellung (Look) trennen
1) Emphasis (Makro-Hierarchie durch Fläche) #
Emphasis beschreibt, wie stark ein Bereich (Container, Abschnitt, Block) durch Fläche hervorgehoben wird.
- Emphasis ordnet Bereiche gegeneinander: Welche Sektion oder Karte tritt aus der Umgebung hervor?
- Emphasis wirkt „ambient“: Kinder befinden sich im Rahmen der Emphasis ihres Bereichs.
Wichtige Eigenschaften:
- Scope: Bereich / Container / Abschnitt
- Makro-Hierarchie: ordnet große Strukturen (Bereich vs Bereich)
- Umgebungszustand: Eine Komponente innerhalb eines Bereichs mit
emphasis=strongverhält sich so, als wäreemphasis=strongfür sie lokal gesetzt. - Überschreibbar: Eine Komponente kann lokal eine andere Emphasis setzen und damit einen neuen Rahmen definieren.
Emphasis ist ordinal (Stufen), aber die konkrete visuelle Richtung (hell/dunkel) ist nicht Teil der Bedeutung.
2) Prominence (Mikro-Hierarchie durch Priorisierung) #
Prominence beschreibt, wie stark ein Element innerhalb seines aktuellen Bereichs hervortritt.
- Prominence ordnet Optionen innerhalb eines Bereichs: Welche Handlung oder Information ist wichtiger als Alternativen?
- Prominence ist besonders relevant, wenn Elemente konkurrieren:
- zwei Buttons nebeneinander
- Button vs Link (beides sind Handlungsoptionen)
- mehrere Links oder Optionen in einer Gruppe
Wichtige Eigenschaften:
- Scope: Element
- Mikro-Hierarchie: ordnet Elemente innerhalb eines Bereichs (Option vs Option)
- Lokal, nicht vererbend: Eine Komponente in einem Parent mit
prominence=highverhält sich so, als wäre für sieprominence=normalgesetzt (Prominence „kriecht“ nicht nach unten). - Relativ: Prominence ist eine Priorisierung im Vergleich zu Alternativen im selben Kontext, nicht eine absolute Eigenschaft.
Prominence ist ein Darstellungskonzept: Es beschreibt, wie stark etwas visuell hervortritt, ohne festzulegen, wie (z.B. Farbe, Gewicht, Rahmen).
3) Interact (Nutzer interagiert) #
Interact beschreibt die Kategorie von Elementen, mit denen der Nutzer interagiert.
- Beispiele: Buttons, Links, Inputs, Tabs, Toggles, Chips
- Interact-Elemente sollen klar erkennbar sein und ihre Prominence besonders gut ausdrücken können, weil sie häufig konkurrierende Handlungsoptionen darstellen.
Interact beschreibt keine Optik, sondern den Nutzungszweck: „Der Nutzer kann hier handeln“.
4) Consume (Nutzer konsumiert) #
Consume beschreibt die Kategorie von Elementen, die der Nutzer konsumiert (wahrnimmt, liest, versteht).
- Beispiele: Text, Überschriften, Beschreibungen, Listen, Hinweise, Metadaten, Karteninhalt
- Consume-Elemente müssen primär gut lesbar und strukturiert sein. Prominence wird hier oft genutzt, um Lesefluss und Gewichtung zu steuern (z.B. Nebeninfo vs Kernaussage).
Consume beschreibt keine Optik, sondern den Nutzungszweck: „Der Nutzer nimmt Information auf“.
Zusammenspiel der vier Pfeiler #
Emphasis setzt den Rahmen, Prominence priorisiert im Rahmen #
- Emphasis erzeugt Makro-Hierarchie (Bereiche).
- Prominence erzeugt Mikro-Hierarchie (Optionen innerhalb eines Bereichs).
Interact und Consume sind Kategorien, die Prominence unterschiedlich nutzen #
- Interact-Elemente nutzen Prominence oft zur Priorisierung von Handlungen.
- Consume-Elemente nutzen Prominence oft zur Gewichtung von Information.
Scope-Regeln (entscheidend) #
- Emphasis wirkt als Umgebungszustand: innerhalb eines Bereichs gilt die gleiche Emphasis, bis sie lokal überschrieben wird.
- Prominence ist lokal: Prominence am Parent macht Kinder nicht automatisch prominenter; Kinder starten implizit auf „normal“.
Variant (Farbwelt) als Grundlage #
Das EPIC-Modell benötigt eine Farbwelt als Basis:
- Variant wählt die Palette (z.B.
neutral,primary,accent,success,danger,alert) - Variant beantwortet: Welche Farbwelt?
Variant ist unabhängig von EPIC, wird aber verwendet, um Emphasis und Prominence visuell auszudrücken.
Variant-Policy: Theme vs Status (Guardrail) #
Varianten können unterschiedliche Rollen haben:
Theme-Varianten #
Für Bereiche/Flächen geeignet (z.B. neutral, primary, optional accent).
Status-Varianten #
Für Signale und Akzente geeignet (z.B. success, danger, alert), typischerweise innerhalb neutraler Flächen.
Policy:
- Status-Varianten werden bevorzugt für Prominence von Interact- oder Consume-Elementen genutzt, nicht als flächige Emphasis eines ganzen Bereichs.
Diese Policy ist ein Guardrail, kein Dogma: Ausnahmen sind möglich, sollen aber bewusst sein.
Merksätze #
- Emphasis ordnet Bereiche (Makro-Hierarchie).
- Prominence ordnet Optionen und Gewichtung innerhalb eines Bereichs (Mikro-Hierarchie).
- Nutzer Consume Information und Interact mit Handlungsoptionen.
- Komponenten bleiben portierbar, wenn sie EPIC als Konzept respektieren: Emphasis als Rahmen, Prominence als lokale Priorisierung.