Zurück zur Übersicht

Navigation

Navigationsleiste

Navigationsleiste  

Navigationsleiste

Die Icons in der Navigationsleiste sind vertikal zentriert. Sie dürfen nicht mit Text überlappen. Auf Smartphones wird daher nur ein Icon auf jeder Seite verwendet. Der Text wird abgeschnitten. Die Icons reagieren auf Antippen oder Klicken. Sie haben daher folgende Zustände:

  • Normal: Das Icon reagiert in diesem Zustand auf Nutzeraktionen.
  • Aktiv: Als Feedback, dass Nutzer dieses Element gedrückt haben, wird der Aktiv-Zustand angezeigt. Er bleibt solange gesetzt, bis der Finger entweder wieder von Touchscreen entfernt wird, oder wenn Nutzer den Finger aus dem klickbaren Bereich entfernt.
  • Checked: Bei Icons, die zwischen zwei Zuständen wechseln (z. B. An/Aus). Das Icon zum Einblenden des Menüs ist solange im Zustand Checked, wie das Menü angezeigt wird. Ist das Menü ausgeblendet, ist auch das Icon im Zustand Unchecked.

Die Schrift basiert auf FontHeadline. Sie ist einzeilig und in ihrer Ausrichtung horizontal zentriert.

Die Fläche hat die Farbe ColorLightBackground und die Unterkante die Farbe ColorRule.

  • Breite (a): 100 %
  • Höhe (B): 4,4 rem
  • Geschützter Bereich oben und unten (C): 0,6 rem
  • Icon-Höhe und -Breite: 3,2 rem
  • Inter-Icon-Abstand (d): 1 rem
  • Höhe der Unterkante (E): 0,05 rem
  • Breite der Unterkante: 100 %

 

Zurück nach oben

Paging

Paging  

Paging

Beim Paging wird zwischen den Zuständen Normal und Checked unterschieden. Sie werden farblich unterschiedlich dargestellt. Im Normalzustand ist die Kante ColorBlueGreen und die Fläche ColorBright. Im Checked-Zustand ist die Kante ColorLineGrey und die Fläche ColorBlueGreen.

  • Höhe und Breite Page (A): 0,6 rem
  • Abstand oben und unten (B): 1,7 rem
  • Abstand zwischen Pages (C): 0,4 rem
  • Page-Border: 0,05 rem
  • Gesamtbreite: variabel, Default von 100 %
  • Gesamthöhe: 4 rem
Zurück nach oben

Panning-Area

Panning-Area  

Panning-Area

Die Panning-Area erlaubt dem Nutzer durch eine Wischgeste zu scrollen. Dabei ist wichtig, dass das Interkationsprinzip "Content follows finger" eingehalten wird.

Das sog. Flicking ist ein kurzes Wischen mit dem Finger in eine Richtung. Dabei scrollt der Inhalt zuerst schnell, dann graduell langsamer, bis er stoppt. Die Startgeschwindigkeit hängt von der Geschwindigkeit der Geste ab. Die Bewegung wirkt natürlich. Dabei wird der Eindruck vermittelt, dass der Nutzer den Inhalt tatsächlich physikalisch anschubst und er wird erst allmählich abgebremst. Die Scroll-Geschwindigkeit steht im Verhältnis zur Geschwindigkeit des Fingers, mit dem das Scrollen ausgelöst wird.


Farben:

  • Fläche: ColorLightBackground
  • Schatten oben: Farbe #0002223, Deckkraft 0 %
  • Schatten unten: Farbe #0002223, Deckkraft 30 %
  • Trennlinie: ColorLineGray
Zurück nach oben
ElementBeschreibung
Container
  • Breite (a): variabel, per Default 100 %
  • Höhe (B): variabel, die Höhe des Containers ist abhängig vom Inhalt
  • Höhe oberer Schatten (C): 1,5 rem
  • Abstand zum Inhalt oben (K): 1,3 rem
  • Abstand zum Inhalt unten (L): 0,6 rem
Panning-Indicator

Der Scroll-Bereich ist endlich definiert. Es wird nicht rotiert. Der Nutzer erreicht nicht wieder den Anfang, wenn er über das Ende hinaus scrollt. Am Ende wird die Scroll-Bewegung weich gestoppt.

  • Abstand oben (E): 1,9 rem
  • Abstand links und rechts (f): 2,9 rem
Seperator

Sind mehrere Panning-Areas untereinander angeordnet, werden sie durch einen Separator visuell voneinander getrennt:

  • Trennlinienbreite (a): 100 %
  • Trennlinienhöhe (D): 0,05 rem

Panning-Indicator

Ein Panning-Indicator ist horizontal oder vertikal angeordnet. Der Panning-Indicator ist nicht dauerhaft sichtbar. Er wird eingeblendet, wenn das System die Absicht einer Scroll-Aktion erkennt. Nach Beenden dieser Aktion wird der Panning-Indicator nach kurzer Latenz wieder ausgeblendet.

Der Scroll-Indicator sitzt vertikal zentriert auf der Basis.

Die Breite der Basis ergibt sich aus der Breite des Containers minus den Abständen. Die Breite des Scroll-Indicators wird berechnet aus dem Verhältnis der Größe des scrollbaren Bereichs und des sichtbaren Bereichs.

Das Verhältnis Scroll-Indicator zu Scroll-Indicator-Basis muss so sein, wie das Verhältnis sichtbarer zu scrollbarer Bereich. Die Breite des Scroll-Indicators ist mindestens 1 rem.

Die Panning-Indicator-Baseline hat die Farbe ColorTrackBase. Der Panning-Indicator-Scroll-Indicator hat die Farbe ColorBlueGreen.

  • Breite (a): variabel
  • Höhe Scroll-Indicator (B): 0,2 rem
  • Höhe Basis (c): 0,1 rem
Zurück nach oben

Menü

Menü  

Menü

Das Menü besteht aus mehreren Komponenten. Es gibt genau einen Titel. Der steht am oberen Menürand. Der Titeltext wird vom Anwendungsentwickler festgelegt. Darunter befindet sich eine Liste. Sie kann aus einem oder mehreren Haupteinträgen bestehen. Haupteinträge gliedern die Einträge in Gruppen. Ein Haupteintrag hat mindestens einen Eintrag. Beim Klick auf einen Eintrag öffnet die Anwendung den entsprechenden Screen.

Alternativ dazu kann ein Eintrag auch ein Sub-Menü öffnen. Ein Klick auf den Eintrag schiebt das bestehende Menü nach links aus dem Bildschirm und stellt das Untermenü dar. Eine Zurück-Navigation ersetzt den Titel. Der Klick auf die Zurück-Navigation stellt das nächsthöhere Menü wieder her (ebenfalls animiert).

 

Zurück nach oben
Mobile Menu Panning Indicator  

Mobile Menu Panning Indicator

Wenn das Menü auf der rechten Seite eingesetzt wird, wird dessen Darstellung horizontal gespiegelt.

  • Geschützter Bereich links (A): 1 rem
  • Geschützter Bereich rechts (B): 2 rem

Der Panning-Indicator hat eine Breite (a) von 1,1 rem und ist in der Höhe (B) variabel. Der geschützte Bereich (C) oben und unten entspricht 0,05 rem.

Der Schatten hat eine Breite (a) von 1,5 rem und eine Höhe von 100 %. Die Fläche hat die Farbe ColorBright. Der Verlauf hat links die Farbe #002223 mit einer Deckkraft von 0 % und rechts die Farbe #002223 mit einer Deckkraft von 30 %.

Menütitel  

Abstände Menütitel

Menütitel

  • Breite (a): 27,5 rem
  • Höhe (B): 4,4 rem
  • Geschützter Bereich unten (C): 1,5 rem
  • Geschützter Bereich links (d): 2 rem

Die Titeltrennlinie hat eine Breite (a) von 27,5 rem und eine Höhe (E) von 0,05 rem. Der Titel basiert auf der Schriftart FontHeadline. Die Fläche hat die Farbe ColorLightBackground und die Trennlinie die Farbe ColorRule.

Zurück-Navigation  

Abstände Zurück-Navigation

Zurück-Navigation

  • Breite (a): 27,5 rem
  • Höhe (B): 4,4 rem
  • Geschützter Bereich unten (C): 0,6 rem
  • Geschützter Bereich links (d): 1 rem
  • Höhe Trennlinie (F): 0,05 rem

Der Text ist vertikal zentriert. Im Normalzustand basiert die Schriftart auf FontClickable und in den Zuständen Checked oder Aktiv auf FontClickableHighlight. Die Fläche hat die Farbe ColorSoftBackground. Der Verlauf hat die Farbe ColorRule.

Haupteintrag  

Abstände Haupteintrag

Haupteintrag

Haupteinträge gliedern das Menü in mehrere Abschnitte. Sie haben ein eindeutiges Label. Unter einem Haupteintrag gibt es mindestens einen Eintrag.

  • Breite (a): 24,5 rem
  • Höhe (B): 5 rem
  • Geschützter Bereich unten (C): 2 rem
  • Geschützter Bereich links (d): 1,2 rem
  • Höhe (E): 0,05 rem
  • Geschützter Bereich unten (F): 0,2 rem

Der Text des Haupteintrags basiert auf der Schriftart FontHeadline mit der Farbe ColorLightText. Die Fläche hat die Farbe ColorSoftBackground und der Verlauf die Farbe ColorRule.

Menüeintrag  

Abstände Menüeintrag

Menüeintrag

Menüeinträge gliedern das Menü in mehrere Abschnitte. Sie haben ein eindeutiges Label bezogen auf alle Einträge im Menü.

  • Breite (a): 24,5 rem
  • Höhe (B): 5 rem
  • Geschützter Bereich unten (C): 2 rem
  • Geschützter Bereich links (d): 2,5 rem
  • Breite Aktivitätsindikator (e): 0,5 rem
  • Höhe Trennlinie (F): 0,05 rem

Ein Eintrag kann um ein Icon ergänzt werden. Insbesondere wenn ein Eintrag ein Untermenü öffnet, muss das durch einen Pfeil auf der rechten Seite erkennbar sein.

  • Geschützter Bereich oben und unten (G): 0,9 rem
  • Abstand rechts und links (h): 1,5 rem
  • Icon-Höhe und -Breite (i): 3,2 rem

Im Normalzustand basiert die Schriftart auf FontClickable und in den Zuständen Checked oder Aktiv auf FontClickableHighlight. Die Fläche hat die Farbe ColorSoftBackground und der Verlauf die Farbe ColorRule.

 

Popover

Popover  

Abstände Popover

Ein Popover erscheint als Reaktion auf eine Nutzeraktion und legt sich über vorhandene Inhalte auf dem Bildschirm. Es darf immer nur ein Popover zu einem Zeitpunkt geöffnet sein. Sind auf einem Screen mehrere Popovers verfügbar, kann der Nutzer ein Popover direkt öffnen ohne das vorige zu schließen. Das offene Popover muss automatisch schließen. Jede Aktion außerhalb des geöffneten Popover schließt das Fenster.

Der Pfeil des Popovers orientiert sich daran, von welchem Control es ausgelöst wurde. Der Pfeil zeigt auf das aufrufende Control. Er kann daher an allen vier Seiten des Popovers angezeigt werden.

  • Geschützter Bereich oben und unten (B): 1,2 rem
  • Geschützter Bereich rechts und links (c): 1 rem
  • Kante (alle Seiten) 0,1 rem
  • Höhe und Breite: variabel
  • Breite der Pfeilspitze (d): 2 rem
  • Höhe der Pfeilspitze (E): 1 rem

Die Fläche hat die Farbe ColorBright. Die Kante hat die Farbe Border. Die Trennlinien zwischen Containern hat die Farbe ColorLineGray. Der verwendete Schatten (Dropshadow-Effekt im Normalmodus) hat die Farbe ColorBorder mit einer Deckkraft von 100 % (Offset x/y: 0, Blur 5 Pixel).

Listeneintrag

  • Zeilenhöhe (F): 5 rem
  • Geschützter Bereich unten (G): 2 rem
  • Geschützter Bereich links (h): 0,4 rem
  • Geschützter Bereich rechts (i): 0,7 rem

Mehrere Listeneinträge werden durch eine horizontale Linie abgetrennt. Deren Höhe (C) beträgt 0,05 rem. Die Breite ist variabel.

Die Schriftart basiert im Normalzustand auf FontClickable. In den Zuständen Aktiv und Visited basiert die Schriftart auf FontClickableHighlight.

Zurück nach oben

Dialog

Dialog  

Abstände Dialog

Ein Dialog besteht aus einem Header inklusive Titel am oberen Rand, Inhalt und einen optionalen Footer. Ein Dialog blendet sich über dem Inhalt ein und verdeckt ihn. Der Hintergrund wird dabei abgedunkelt.

Header

  • Breite (a): variabel
  • Höhe (B): 5 rem
  • Abstand Titel unten (C): 2 rem
  • Icon-Höhe und -Breite (D): 3,2 rem
  • Abstand links (e): 1,3 rem
  • Abstand unten (F): 1 rem
  • Höhe (G): 0,05 rem

Die Schriftart des Titels basiert auf FontHeadline. Er ist horizontal zentriert. Die Fläche hat die Farben ColorLightBackground und die Trennlinie die Farbe ColorRule.

Inhalt

  • Breite (a): variabel
  • Höhe (B): 5 rem
  • Geschützter Bereich (H): 1,5 rem

Die Fläche hat die Farbe ColorBright.

Footer

  • Breite (a):  variabel
  • Geschützter Bereich (C): oben 2 rem
  • Geschützter Bereich (F): unten 1 rem
  • Footer-Höhe (I): 7 rem

Alle Buttons müssen die gleiche Breite haben. Die Gesamtheit der Buttons ist horizontal zentriert auf der Fläche. Die Footer-Fläche hat die Farbe ColorBright. Der abgedunkelte Hintergrund hat die Farbe ColorDark mit einer Deckkraft von 80 %.

Zurück nach oben

Teaser-Kachel

Teaser-Kachel  

Abstände Teaser-Kachel

  • Breite (a): variabel
  • Höhe (B): variabel
  • Geschützter Bereich oben, rechts und links (C): 0,5 rem
  • Geschützter Bereich unten (D): 2,9 rem
  • Abstand zwischen Label und Links (e): 0,8 rem


Im Normalzustand basiert die Schrift auf FontClickable. Im Zustand Aktiv basiert sie auf FontClickabl Highlight.

Die Fläche hat die Farbe ColorBright. Im Normalzustand hat die Kante die Farbe ColorBorder und im Zustand Aktiv die Farbe ColorLightText.

 

Zurück nach oben

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect

Weitere Informationen