Zurück zur Übersicht

Information und Status

Aktivitätsindikator

Aktivitätsindikator  

Aktivitätsindikator

Der Aktivitätsindikator wird im umgebenenden Element horizontal und vertikal zentriert.

Die Abstände betragen in Höhe und Breite jeweils 5,8 rem.

Die Grundfarbe des Aktivitätsindikators ist #66686E. Die Anwendung modifiziert die Grundfarbe für die einzelnen Lamellen und lässt sie rotieren.

Zurück nach oben

Splash-Screen

Splash-Screen  

Abstände Splash-Screen

Ein Splash-Screen wird zum Start einer App angezeigt.

Das Logo steht zentriert auf dem Bildschirm. Der Anwendungstitel steht links zentriert zum Logo.

Die Schrift basiert auf FontDefault mit folgenden Ausnahmen:

  • Größe: 2 rem
  • Zeilenhöhe: nicht definiert, da Text nur einzeilig möglich ist
Zurück nach oben
BeschreibungWert: SmartphoneWert: Tablet
Logobreite (a)21,1 rem41,5 rem
Abstand oben (b)11 rem13 rem
Abstand zwischen Logo und Anwendungstitel (c)11,5 rem16,5 rem

Textelemente

Textelemente  

Abstände Textelemente

Text Elemente werden untereinander kombiniert. Folgende Kombinationen sind bei der Gestaltung explizit berücksichtigt worden:

  • Fließtext
  • Headline und Fließtext oder Bild oder Formular
  • Headline und Sub-Headline und Fließtext oder Bild oder Formular
  • Titel und Headline und Sub-Headline und Fließtext
  • Headline und Fließtext und Sub-Headline und Fließtext oder Bild oder Formular und Sub-Headline und Fließtext oder Bild oder Formular
Zurück nach oben
ElementBeschreibung
Titel
  • Abstand oben (A): 1,9 rem
  • Breite: variabel, per Default 100 %
  • Schrift: Headline H2, basierend auf FontHeadline
Headline
  • Abstand oben (A): 1,9 rem
  • Abstand unten (B): 1 rem
  • Breite: variabel, per Default 100 %
  • Schrift: Headline H2, basiert auf FontHeadline
Sub-Headline
  • Abstand oben und unten (A): 1 rem
  • Breite: variabel, per Default 100 %
  • Schrift: Sub-Headline H3, basiert auf FontDefault
Fließtext

Für aufeinanderfolgende Absätze werden mehrere Textelemente untereinander angeordnet. Zusätzlich können Textelemente durch horizontale Trennlinien voneinander abgegrenzt werden.

  • Abstand oben (A): 1,9 rem
  • Abstand unten (B) 1,5 rem
  • Breite: variabel, per Default 100 %
  • Schrift: RunningText, basiert auf FontDefault
Aufzählungspunkte

Der Aufzählungspunkt wird durch das Unicode-Zeichen • (Code 0x2022) dargestellt, gefolgt von einem Leerzeichen. Diese beiden Zeichen definieren die Breite des Bereichs.

Rechts vom Aufzählungspunkt-Container sitzt ein Fließtext-Container. Die Ausrichtung von umgebrochenem Text erfolgt linksbündig, sodass eine einheitliche Flucht entsteht.

  • Schrift: BulletPoints, basieren auf FontDefault mit einer Zeilenhöhe (mehrzeiliger Text) von 2 rem
Description-List

Eine Description-List strukturiert Inhalt in Listen. Anstelle von Aufzählungspunkten oder Ordnungszahlen wird ein Begriff vorangestellt. Dem Begriff folgt ein Inhalt:

Links steht ein Label oder Begriff. Rechts sitzt ein Fließtext-Container.

  • Abstand oben (A): 1,4 rem
  • Abstand unten (B): 1,55 rem
  • Abstand zum Label (C): Inhalt mindestens 1,5 rem

Wenn mehrere Elemente einer Description-List untereinander stehen, dann sind die Inhalte linksbündig zueinander ausgerichtet.

  • Schrift: basiert auf FontDefault.

Vorteilskommunikation

Vorteilskommunikation  

Abstände Vorteilskommunikation

Mit der Vorteilskommunikation können Sie eine Aufzählung erstellen.

Die Schrift basiert auf FontDefault. Die Vorteilskommunikation verwendet Icons als Ressource.

  • Breite gesamt (a): variabel, per Default 100 %
  • Höhe gesamt (B): variabel, abhängig von Zeilenanzahl
  • Icon Abstand oben (C): 0,5 rem
  • Abstand des Icons zum Text (d): 0,5 rem
  • Höhe und Breite des Icons: 2,4 rem
  • Text Abstand oben (E): 1,2 rem
  • Text Abstand unten (F): 1,15 rem
Zurück nach oben

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect

Weitere Informationen