Elemente

Information und Status

Label

Der Abstand (a) zwischen dem Label und dem Container bweträgt 3,5 rem (enspricht 7 Pixel). Für das Label werden im Zustand "Enabled" Schriften basierend auf FontDefault bzw. FontDisabled verwendet.

Zurück nach oben

Desktop Alerts

Für Desktop Alerts liegt noch kein Entwurf vor. Sie werden voraussichtlich bis Anfang 2017 in den Projekten PX Worx Next oder Projekt+ gestaltet.

Forstschrittsbalken

Fortschrittsbalken gibt es in einer kleinen und einer normalen Größe:

  • Kleiner Fortschrittsbalken: wird ausschließlich in einer Statusleiste angezeigt.
  • Normaler Fortschrittsbalken: kann in einem beliebigen Formular eingesetzt werden. Üblicherweise allerdings in einem speziell dafür vorgesehenen Wartedialog.

Der Fortschritt eines Prozesses wird durch eine Anzeige dargestellt, die von links nach rechts wandert.

Abstände:

  • Abstand oben/unten (A): 0,4 rem; 8 px
  • Abstand (b): rechts/links 0,5 rem; 10 px
  • Abstand Label-Bar (c): 0,35 rem; 7 px
  • Breite (d): variabel
  • Abstand oben (F): 0,9 rem; 18 px
  • Abstand unten (G): 1,8 rem; 36 px
  • Padding rechts/links (h): 1 rem; 20 px
  • Breite (i): variabel
  • Höhe (J): 1,1 rem; 22 px
  • Höhe Schatten (K): 0,2 rem; 4 px

Schrift

  • Kleiner Fortschrittsbalken: Label basiert auf FontDefault mit folgenden Ausnahmen: Farbe: ColorBright
  • Normaler Fortschrittsbalken: Label basiert auf FontDefault.

Farben

  • Hintergrund: ColorDefault
  • Rahmen: ColorLightBackground
  • Schatten: ColorDark; Deckkraft:30%
  • Fortschritt: ColorLightGreen
Statusleiste  

Statusleiste

Statusleiste

Abstände

  • Breite (a): 100 %
  • Höhe (B): 1,2 rem; 24 px
  • Icon Höhe/Breite; Abstand Icon-Text (c): 0,8 rem; 16 px
  • Abstand Icon oben/unten (D): 0,2 rem; 4 px
  • Abstand Text unten (E): 0,35 rem; 7 px
  • Abstand Icon-Text (f): 0,25 rem; 5 px
  • Abstand zwischen Einheiten (g): 1 rem; 20 px
  • Abstand Inhalt zum rechten Rand (h): 1,5 rem; 30 px

Inhalte werden in der Statusbar rechts ausgerichtet. Inhalte werden in Einheiten gruppiert. Jede Einheit kann bestehen aus

  • Nur Icon
  • Nur Text
  • Ein Icon vor Text

Schrift

  • Texte, die Meldungen anzeigen, basieren auf FontHeadline mit folgenden Ausnahmen: Farbe: ColorBright
  • Sonstige Texte basieren auf FontDefault mit folgenden Ausnahmen: Farbe: ColorBright

Farben

  • Hintergrund: ColorDefault
Tooltip  

Tooltip

Tooltip

Abstände

  • Padding (a): 0,4 rem; 8 px
  • Abstand Titel-Text (B): 0,8 rem; 16 px

Schrift

  • Titel: basiert auf FontHeadline.
  • Text: basiert auf FontDefault.

Farben

  • Hintergrund: ColorBright
  • Rahmen: ColorDisabled
  • Schatten: Effekt: Schein nach außen; Weichzeichner: 6px; Deckkraft: 20%;Farbe: ColorDark

Navigation

Scroll-Balken  

Scroll-Balken

Scroll-Balken

Ein Scroll-Balken kann es horizontal und vertikal geben. Der Einfachheit wegen wird hier nur der horizontale Fall dargestellt.

Zustände

  • Enabled
  • Hover
  • Active

Abstände

  • Höhe/Breite Container, Icon (a): 0,8 rem; 16 px
  • Breite Container (b): variabel
  • Padding oben/unten (C): 0,25 rem; 5 px

Farben

  • Enabled: Pfeile sind ColorDefault; Balken ist ColorBrightGrey
  • Hover: Pfeile sind ColorHoverBackground; Balken ist ColorHoverBackground
  • Active: Pfeile sind ColorActiveBackground; Balken ist ColorActiveBackground
Zurück nach oben
Zustände Expander  

Zustände Expander

Expander

Gibt es in 2 Varianten:

  • Expander Standard (wird auf dunklen Hintergründen verwendet)
  • Expander Pattern (wird auf hellen Hintergründen verwendet)

 

Abstände Expander  

Abstände Expander

Abstände

  • Breite (a): variabel
  • Höhe Expander Geschlossen (B): 1,1 rem; 22 px
  • Höhe Expander Geöffnet (C): 1,65 rem; 33 px
  • Padding Expander Geschlossen Icon Oben/Unten (D): 0,15 rem; 3 px
  • Abstand Expander Geöffnet Icon Unten (E): 0,7 rem; 14 px
  • Padding Icon-Label (f): 0,2 rem; 4 px
  • Breite/Höhe Icon (g): 0,8 rem; 16 px
  • Abstand Container Links/Rechts (I): 0,65 rem; 13 px
  • Abstand Container Oben (H): 0,35 rem; 7 px
  • Höhe Seperator (J): 0,05 rem; 1 px
  • Abstand Container Unten (K): 0,5 rem; 10 px

Farben

  • Enabled: Hintergrund ist ColorLightBackground; Rahmen ist ColorDefault
  • Hover: Hintergrund ist ColorHoverBackground; Rahmen ist ColorBorderHighlight
  • Focused: Hintergrund ist ColorLightBackground; Rahmen ist ColorBlueGreen
  • Disabled: Hintergrund ist ColorLightBackground: Rahmen

Dialog

Dialog  

Bereiche im Dialogfeld

Ein Dialog fasst folgende Komponenten zusammen:

  • Der Header steht am oberen Rand und enthält einen Titel
  • Benachrichtigungen / Erläuterung
  • Content
  • Footer (optional)

Ein Dialog blendet sich über dem Inhalt ein und verdeckt diesen. Der Hintergrund wird dabei abgedunkelt.

Dialog-Header

Folgende Zustände sind möglich:

  • Enabled, Normal: Farbe ColorDefault
  • Hover (Mouse-Over): ColorHoverBackground
  • Active: ColorActiveBackground

Abstände

Dialog header  

Dialog-Header

Der Titel sitzt im Header immer zentriert und ist gesperrt.

  • Breite (a): variabel
  • Höhe (B): 1,2 rem; 24 px
  • Abstand Titel Unten (C): 0,35 rem; 7 px
  • Breite Icon (d): 1,5 rem; 30 px
Notification  

Abstände Notification

Notification

Abstände

  • Padding Icon rechts/links/oben/unten (C): 0,35 rem; 7 px
  • Höhe (E): 2,3 rem; 46 px
  • Abstand Infotext unten (F): 0,55 rem; 11 px
  • Abstand Notification unten (G): 1,3 rem; 26 px
  • Breite/Höhe Icon (h): 1,6 rem; 32 px

Im aktiven Zustand hat die Notification einen Hintegrund in der Farbe ColorLightBackground.

Content

Abstände

  • Höhe/Breite (a): variabel
  • Padding oben/unten/rechts/links (i): 1 rem; 20 px

Farben

  • Enabled: Hintergrund: ColorBrightBackground
  • Schatten: Effekt: Schein nach außen; Weichzeichnen: 6px; Deckkraft: 40%; Farbe: ColorDark

Dialog-Footer

Abstände

  • Padding Links/Rechts (C): 0,35 rem; 7 px
  • Höhe (J): 1,8 rem; 36 px

Die Buttons in einem Dialog-Footer sind im selben Dialog jeweils gleich breit. Die Breite kann sich von Dialog zu Dialog aber unterscheiden.

Der Dialog-Footer hat im Zustand "enabled" die Hintergrundfarbe ColorLightBackground.

 

Tab  

Tab

Tab

Der Selected Zustand kann auf 2 Arten dargestellt werden, um die Zugehörigkeit des offenen Tabs zur Fläche darunter zu verstärken:

weiß: wenn der zugehörige Inhalt auf weißem Hintergrund platziert wurde.
grau: wenn der zugehörige Inhalt auf grauem Hintergrund platziert wurde.

Abstände

  • Breite (a): variabel
  • Höhe (B): 1,2 rem; 24 px
  • Abstand Tab (c): 0,05 rem; 1 px
  • Abstand Icon unten; Abstand Icon-Label (D): 0,2 rem; 4 px
  • Abstand Text unten (E): 0,4 rem; 8 px
  • Abstand rechts (f): 0,8 rem; 16 px
  • Abstand Label-Icon (g): min. 0,5 rem; min. 10 px
  • Abstand Icon; Höhe Tab-Hervorhebung (h): 0,1 rem; 2 px

 

Ein Tab erlaubt zwei Platzhalter für mögliche Status-Icons, die sich auf die jeweiligen Tabs beziehen (als leere blaue Container dargestellt).

Die Container sind in der Breite variabel und können frei definiert werden. Die minimale Breite der Tabs kann für jede Anwendung individuell festgelegt werden.

 

Farben

  • Enabled: Hintergrund - ColorDarkBackground
  • Hover: Hintergrund - ColorHoverDark
  • Selected: Hintergrund (weiß) - ColorBright; Hintergrund (grau) - ColorLightBackground; Highlight - ColorBlueGreen
  • Focused: Rahmen - ColorBlueGreen

 

Tab-Liste

Abstände

  • Breite (a): variabel
  • Höhe (B): 1,1 rem; 22 px
  • Padding Tab (C): 0,35 rem; 7 px
  • Abstand Links/Rechts (d): 0,5 rem; 10 px
  • Breite Icon Container (E): 1,2 rem; 24 px
  • Höhe Icon Container (f): 1,15 rem; 23 px
  • Breite/Höhe Icon (g): 0,8 rem; 16 px
  • Padding oben Icon (h): 0,2 rem; 4 px
  • Padding unten Icon (I): 0,15 rem; 3 px
  • Padding Container Rechts/Links (J): 0,1 rem; 2 px
  • Abstand Container (K): 0,05 rem; 1 px


Schrift

  • Label in den Zuständen 'Enabled' und 'Hover' basiert auf FontDefault mit folgenden Ausnahmen:
    • Farbe: ColorBright
  • Label in den Zuständen 'Active' und 'Selected' basiert auf FontDefault mit folgenden Ausnahmen:
    • Farbe: ColorActiveBackground

Farben

  • Tab List
    • Enabled: Hintergrund ist ColorDefault
    • Hover: Hintergrund ist ColorHoverDarkBackground
    •  Active: Hintergrund ist ColorBright
    • Focused: Rahmen ist ColorBlueGreen
    • Selected: Hintergrund ist ColorActiveDark
  • TabMenu Icons
    • Enabled: Hintergrund; ColorDarkBackground
    • Hover: Hintergrund ist ColorHoverBackground; Rahmen ist ColorBorderHighlight
    • Active: Hintergrund ist ColorActiveBackground; Rahmen ist ColorBorderHighlight
    • Focused: Hintergrund ist ColorLightBackground; Rahmen ist ColorBlueGreen
ListBox  

ListBox

ListBox

Die ListBox wird aktuell eingesetzt, wie vertikale Tabs. Es kann nur ein Eintrag selektiert sein.

Abstände

  • Padding rechts/links (A): 0,1 rem; 2 px
  • Abstand listentry-listentry (B): 0,05 rem; 1 px
  • Breite (c): variabel
  • Höhe (D): 1,2 rem; 24 px
  • Abstand unten (E): 0,3 rem; 6 px
  • Abstand rechts-Label (f): 0,5 rem; 10 px

 

Schrift

  • Label im Zustand 'Disabled': basiert auf FontDisabled.
  • Label im Zustand 'Selected not Active' basiert auf FontSelectedNotActive
  • Label in allen übrigen Zuständen: basiert auf FontDefault.

Farben

  • Enabled: Hintergrund ist ColorLightBackground
  • Hover: Hintergrund ist ColorHoverBackground
  • Active: Hintergrund ist ColorActiveBackground
  • Focused: Hintergrund ist ColorLightBackground; Rahmen ist ColorDisabled
  • Disabled: Hintergrund ist ColorLightBackground
Popup  

Popup

Popup

  • Padding Rechts/Links/Oben/Unten (a): 0,4 rem; 8 px
  • Abstand Header-Text (B): 0,8 rem; 16 px

 

Farben

  • Hintergrund ist ColorBright
  • Schatten: Effekt: Schein nach außen; Weichzeichnen: 3px; Deckkraft: 30%; Farbe: ColorDark
  • Normal: Rahmen ist ColorDisabled
  • Hover: Rahmen ist ColorBorderHighlight
  • Active: Rahmen ist ColorBlueGreen

Aktionen

Button  

Button

Button

Buttons werden üblicherweise als flächige UI Elemente mit einem Label dargestellt. Im PC-Umfeld gibt es Buttons in 2 Varianten:

  • Nur-Text Labels

  • Benennung durch Icon

Abstände

Die Minimalbreite eines Buttons liegt bei 86px (4,3rem).

  • Breite Text-Button (a): variabel
  • Höhe (B): 1,1 rem; 22 px
  • Abstand unten; Abstand rechts/unten Button-Button (C): 0,35 rem; 7 px
  • Padding rechts/links (d): 0,5 rem; 10 px
  • Breite Icon-Button (f): 1,8 rem; 36 px
  • Höhe/Breite Icon (G): 0,8 rem; 16 px
  • Abstand rechts/unten Button-Button (H): 0,55 rem; 11px


Schrift

  • Label im Zustand 'Disabled': basiert auf FontDisabled mit folgenden Ausnahmen:Ausrichtung: Horizontal zentriert
  • Label in allen übrigen Zuständen: basiert auf FontDefault mit folgenden Ausnahmen: Ausrichtung: Horizontal zentriert

 

Farben

  • Enabled, Normal/Default; Focused; Disabled: Hintergrund ist ColorLightBackground
  • Enabled, Normal: Rahmen ist ColorDisabled
  • Enabled, Default: Rahmen ist ColorBorderHighlight; Rand Unterkante ist ColorActiveBackground
  • Hover: Hintergrund ist ColorHoverBackground; Rahmen ist ColorBorderHighlight
  • Focused: Hintergrund ist ColorLightBackground; Rahmen ist ColorBlueGreen
  • Active: Hintergrund ist ColorActiveBackground; Rahmen ist ColorBorderHighlight
  • Disabled: Hintergrund ist ColorDisabled
Zurück nach oben

Link

Schrift

  • Die Schrift entspricht dem Text-/Listen-Element, auf dem der Link basiert.
  • In Fließtext können ein oder mehrere Wörter als Link verwendet werden.
  • Andere Text-Elemente können nur als Ganzes verlinkt werden.
  • Listen-Elemente können nur als Ganzes verlinkt werden.


Farben

  • Normal, Enabled: ColorDark
  • Active: ColorBlueGreen
  • Visited: ColorDefault
  • Hover: ColorBorderHighlight
  • Disabled: ColorDark
Main Menu  

Main Menu

Main Menu

Das MainMenu ist Teil des Hauptfensters einer Anwendung. Ein Klick auf die Menüeinträge öffnet ein Untermenü.

Abstände

Die Breite der Menüeinträge a kommt zustande, indem die Textbreite um das horizontale Padding h um den Menüeintrag herum erweitert wird.

  • Breite (a): variabel
  • Höhe Container (B): 1,1 rem; 22 px
  • Höhe Divider (C): 0,05 rem; 1 px
  • Abstand Rechts (d): 0,25 rem; 5 px
  • Abstand Item-Item (e): 0,35 rem; 7 px
  • Höhe Item (F): 1,05 rem; 21 px
  • Abstand Container-Label (G): 0,3 rem; 6 px
  • Abstand Label Rechts/Links (h): min. 0,5 rem; 10 px

Schrift

  • Label im Zustand 'Disabled': basiert auf FontDisabled mit folgenden Ausnahmen: Ausrichtung: Horizontal zentriert
  • Label in allen übrigen Zuständen: basiert auf FontDefault mit folgenden Ausnahmen: Ausrichtung: Horizontal zentriert

Farben

 

 

  • Enabled,Normal; Disabled: Hintergrund ist ColorLightBackground
  • Hover: Hintergrund ist ColorHoverBackground
  • Active: Hintergrund ist ColorActiveBackground

Untermenü

Alle Angaben für das Untermenü können aus dem Abschnitt ContextMenu entnommen werden.

Horizontal wird das Untermenü linksbündig zum Menüeintrag positioniert; wenn nach rechts nicht ausreichend Platz zur Verfügung steht, wird es rechtsbündig angezeigt.

Vertikal schließt das Untermenü direkt an das Main Menu an.

Context Menu / Main Menu  

Context Menu / Main Menu

Context Menu / Main Menu

Abstände
Icon sitzt am rechten Rand des Containers.

  • Breite (a): variabel
  • Höhe (B): 1,1 rem; 22 px
  • Padding Links/Rechts/Oben/Unten (C): 0,1 rem; 2 px
  • Abstand Container - Separatorline/Höhe Separator (D): 0,05 rem; 1 px
  • Ausrichtung Icons (E): vertikal-zentriert
  • Abstand Icon Links/Rechts (f): 0,25 rem; 5 px
  • Höhe/Breite Icon (G): 0,8 rem; 16 px
  • Abstand Label Links (h): 0,2 rem; 4 px
  • Abstand Label Rechts (i): min. 0,5 rem; min. 10 px
  • Abstand Label Unten (J): 0,35 rem; 7 px

 

Schrift

  • Label im Zustand 'Disabled': basiert auf FontDisabled.
  • Label in allen übrigen Zuständen: basiert auf FontDefault.


Farben

  • Enabled,Normal; Disabled: Hintergrund ist ColorLightBackground
  • Hover: Hintergrund ist ColorHoverBackground
  • Active: Hintergrund ist ColorActiveBackground; Separator ist ColorDisabled
    • Schatten: Effekt: Schlagschatten; x-Versatz: 0px; y-Versatz: 0px; Weichzeichnen: 4px; Farbe: #000000
ToolBar  

ToolBar

ToolBar

Der Tool Bar Menu Button wird ausschließlich in Toolbars eingesetzt.
Die Icons sitzen zentriert im Container.

Abstände

  • Breite Toolbar (A): variabel
  • Höhe Toolbar (B): 2,4 rem; 48 px
  • Abstand Separator/Dockingbutton Oben/Unten (C): 0,6 rem; 12 px
  • Abstand Icon Oben/Unten (D): 0,65 rem; 13 px
  • Abstand Icon-Icon/ Abstand Dockingbutton Links/Rechts/Unten (e): 0,1 rem; 2 px
  • Abstand Icon-Separator (f): 0,55 rem; 11 px
  • Höhe/Breite Button (g): 1,1 rem; 22 px
  • Breite Dockingbutton (h): 0,5 rem; 10 px
  • Höhe Dockingbutton (I): 1,2 rem; 24 px
  • Höhe/Breite Icon (j): 0,8 rem; 16 px
  • Breite Separator (k): 0,05 rem; 1 px

 

Farben

  • Enabled: Hintergrund Toolbar ist ColorBrightBackground
  • Hover: Hintergrund ist ColorHoverBackground; Rahmen ist ColorBorderHighlight
  • Focused: Hintergrund ist ColorBrightBackground; Rahmen ist ColorBlueGreen
  • Active: Hintergrund ist ColorActiveBackground; Rahmen ist ColorBorderHighlight
MaskedTextBox  

MaskedTextBox

MaskedTextBox

Abstände

  • Breite (a): variabel
  • Höhe (B): 1,1 rem; 22 px
  • Padding Label Unten (C): 0,35 rem; 7 px
  • Abstand Ziffern-Ziffern (d): min. 0,5 rem; min. 10 px



Schrift

  • Label im Zustand 'Disabled': FontDisabled.
  • Label im Zustand 'Selected': FontSelected
  • Label in allen übrigen Zuständen: FontDefault.



Farben

  • Enabled: Hintergrund ist ColorBright; Rahmen ist ColorBirghtGrey
  • Hover: Hintergrund ist ColorBright; Rahmen ist ColorBorderHighlight
  • Focused: Hintergrund ist ColorBright; Rahmen ist ColorBlueGreen
  • Selected: Hintergrund ist ColorBright; Rahmen ist ColorDisabled; Markierung ist ColorBlueGreen
  • Disabled: Hintergrund ist ColorBright; Rahmen ist ColorDisabled
  • Read Only: Hintergrund ist ColorBright; Rahmen ist ColorLightBackground

Auswahl

Checkbox  

Checkbox

Checkbox

Abstände

  • Label Abstand unten/rechts (a): 0,35 rem; 7 px
  • Breite Box (B): 0,95 rem; 19 px
  • Höhe Box (C): 1,1 rem; 22 px
  • Padding oben/unten (d): 0,25 rem; 5 px

 

Schrift

  • Label im Zustand 'Disabled': basiert auf FontDisabled mit folgenden Ausnahmen: Das Label der Checkbox darf nicht umbrechen
  • Label in allen übrigen Zuständen: basiert auf FontDefault mit folgenden Ausnahmen: Das Label der Checkbox darf nicht umbrechen



Farben
In diesem Fall beziehen sich die Farben auf die quadratische Checkbox selbst (ohne den Text).

  • Enabled: Hintergrund ist ColorBright; Rahmen ist ColorDefault
  • Hover: Hintergrund ist ColorHoverBackground; Rahmen ist ColorDefault
  • Active: Hintergrund ist ColorActiveBackground; Rahmen ist ColorDefault
  • Focused: Hintergrund ist ColorBright; Rahmen ist ColorBlueGreen
  • Disabled: Hintergrund ist ColorBright; Rahmen ist ColorDisabled
Zurück nach oben
Radio-Button  

Radio-Button

Radio-Button

Abstände

  • Label Margin unten/rechts (a): 0,35 rem; 7 px
  • Breite Box (B): 0,95 rem; 19 px
  • Höhe Box (C): 1,1 rem; 22 px
  • Padding oben/unten (D): 0,25 rem; 5 px


Schrift

  • Label im Zustand 'Disabled': basiert auf FontDisabled mit folgenden Ausnahmen: Das Label des Radiobuttons darf nicht umbrechen
  • Label in allen übrigen Zuständen: basiert auf FontDefault mit folgenden Ausnahmen: Das Label des Radiobuttons darf nicht umbrechen


Farben
In diesem Fall beziehen sich die Farben auf den runden RadioButton selbst (ohne den Text).

  • Enabled: Hintergrund ist ColorBright; Rahmen ist ColorDefault
  • Hover: Hintergrund ist ColorHoverBackground; Rahmen ist ColorDefault
  • Active: Hintergrund ist ColorActiveBackground; Rahmen ist ColorDefault
  • Focused: Hintergrund ist ColorBright; Rahmen ist ColorBlueGreen
  • Disabled: Hintergrund ist ColorBright; Rahmen ist ColorDisabled

Combobox 

Die Combobox wird üblicherweise mit einer Outline dargestellt.

Abstände

  • Breite Combobox (a): variabel
  • Höhe (B): 1 rem; 20 px
  • Abstand unten (C): 0,3 rem; 6 px
  • Abstand rechts/links (d): 0,45 rem; 9 px
  • Höhe/Breite Icon (e): 0,8 rem; 16 px
  • Padding Icon/rechts/oben/unten (f): 0,15 rem; 3 px
  • Margin list left, right; margin entry: 0,05 rem; 1px

Schrift

  • Label im Zustand 'Disabled': basiert auf FontDisabled.
  • Label im Zustand 'Selected': basiert auf FontSelected.
  • Label in allen übrigen Zuständen: basiert auf FontDefault.

 

Farben

  • Enabled: Hintergrund ist ColorBright; Rahmen ist ColorDisabled
  • Hover: Hintergrund ist ColorBright; Rahmen ist ColorBorderHighlight
  • Focused: Hintergrund ist ColorBright; Rahmen ist ColorBlueGreen
  • Active: Icon ist ColorBlueGreen
  • Selected: Hintergrund ist ColorBright: Rahmen ist ColorDisabled; Markierung ist ColorBlueGreen
  • Disabled: Hintergrund ist ColorBright; Rahmen ist ColorDisabled
    • Schatten: Effekt: Schein nach außen; Weichzeichner: 6px; Deckkraft: 20%; Farbe: ColorDark
Drop-Down  

Drop-Down

Drop-Down

Abstände

  • Breite Text-Button (a): variabel
  • Höhe (B):1,1 rem; 22 px
  • Margin unten (C): 0,35 rem; 7 px
  • Margin rechts/links (d): 0,5 rem; 10 px
  • Höhe/Breite Icon (e): 0,8 rem; 16 px
  • Margin Icon oben/unten/rechts (f): 0,15 rem; 3 px



Schrift

  • Label im Zustand 'Disabled': basiert auf FontDisabled.
  • Label in allen übrigen Zuständen: basiert auf FontDefault.

 

Farben

  • Text-Button
    • Enabled: Hintergrund ist ColorLightBackground; Rahmen ist ColorDisabled
    • Hover: Hintergrund ist ColorHoverBackground; Rahmen ist ColorBorderHighlight
    • Focused: Hintergrund ist ColorLightBackground; Rahmen ist ColorBlueGreen
    • Open: Hintergrund ist ColorLightBackground; Rahmen ist ColorDisabled
    • Disabled: Hintergrund ist ColorLightBackground; Rahmen ist ColorDisabled
  • Liste
    • Enabled: Hintergrund ist ColorBright; Rahmen ist ColorDisabled
    • Hover: Hintergrund ist ColorHoverBackground; Rahmen ist ColorBorderHighlight
    • Focused: Hintergrund ist ColorBright; Rahmen ist ColorBlueGreen
    • Selected: Hintergrund ist ColorActiveBackground
    • Active: Hintergrund ist ColorActiveBackground
    • Disabled: Hintergrund ist ColorBright; Rahmen ist ColorDisabled
Slider und Range-Slider  

Slider und Range-Slider

Slider und Range-Slider 

Slider gibt es in zwei Ausprägungen. Beide erlauben eine Auswahl per Klicken-und-Ziehen:

  • Der normale Slider zeigt einen einzelnen Wert.
  • Der RangeSlider stellt einen Bereich zwischen zwei Werten dar.

Die Parameter für die Labels können Sie aus dem Abschnitt "Label" entnehmen.

Abstände

  • Breite (a): variabel
  • Höhe Container/ Breite Anfasser (B): 0,3 rem; 6 px
  • Höhe Anfasser (C): 0,8 rem; 16 px
  • Breite Trennlinie (d): 0,05 rem; 1 px
  • Höhe Trennlinie (E): 1,0 rem; 20 px

 

Farben

  • Enabled: Hintergrund ist ColorBackground; Rahmen ist ColorBright
  • Hover: Hintergrund ist ColorBorderHighlight; Rahmen ist ColorBright
  • Active: Hintergrund ist ColorBlueGreen; Rahmen ist ColorBright
  • Focused: Hintergrund ist ColorLightBackground; Rahmen ist ColorBlueGreen
  • Alle Zustände: Container ist ColorLightBackground
Toggle-Button  

Toggle-Button

Toggle-Button

Abstände

Die Minimalbreite eines Toggle Buttons liegt bei 86px (4,3rem).

  • Breite (a): variabel
  • Höhe (B): 1,1 rem; 22 px
  • Abstand Label unten (C): 0,35 rem; 7 px
  • Abstand Icon unten/rechts links (d): 0,2 rem; 4 px
  • Abstand Label rechts (e): min. 0,5 rem; min. 10 px
  • Breite/Höhe Icon (f): 0,8 rem; 16 px

 

Schrift

  • Label im Zustand 'Disabled': basiert auf FontDisabled mit folgenden Ausnahmen: Ausrichtung: Horizontal zentriert
  • Label in allen übrigen Zuständen: basiert auf FontDefault mit folgenden Ausnahmen: Ausrichtung: Horizontal zentriert

 

Farben

  • Enabled, Normal: Hintergrund ist ColorLightBackground; Rahmen ist ColorDisabled
  • Hover: Hintergrund ist ColorHoverBackground; Rahmen ist ColorBorderHighlight
  • Active: Hintergrund ist ColorActiveBackground; Rahmen ist ColorBorderHighlight
  • Focused: Hintergrund ist ColorLightBackground; Rahmen ist ColorBlueGreen
  • Checked: Hintergrund ist ColorLightBackground; Rahmen ist ColorDefault
  • Disabled: Hintergrund ist ColorLightBackground; Rahmen ist ColorDisabled

Tree-View

Abstände

  • Breite (a): variabel
  • Höhe (B): 1 rem; 20 px
  • Label Abstand unten (C): 0,3 rem; 6 px
  • Icon Breite/Höhe (d): 0,8 rem; 16 px
  • Label Abstand Unten; Abstand horizontal Icons (E): 0,1 rem; 2 px
  • Abstand Icon Label (f): 0,2 rem; 4 px
  • Abstand Container-Container (g): 0,05 rem; 1 px



Schrift

  • Text im Zustand 'Disabled' basiert auf FontDisabled.
  • Text im Zustand 'Editable' basiert auf FontSelected.
  • Tree Nodes basieren in allen übrigen Zuständen auf FontHeadline.
  • Sub Tree Nodes basieren in allen übrigen Zuständen FontDefault.

 

Farben

  • Enabled: Hintergrund ist ColorBright
  • Hover: Hintergrund ist ColorHoverBackground
  • Active: Hintergrund ist ColorActiveBackground
  • Focused: Rahmen ist ColorBlueGreen
  • Disabled: Hintergrund ist ColorBright
  • Selected, Parent not False: Hintergrund ist ColorDarkGray; Deckkraft ist 50%
  • Editable: Hintergrund ist ColorBright; Markierung ist ColorBlueGreen; Rahmen ist ColorDisabled

Inhaltsstruktur

Group-Box  

Group-Box

Group-Box

Der Content kann nach Bedarf variieren.

Abstände

  • Breite/Höhe Container (a): variabel
  • Abstand oben (B): 0,45 rem; 9 px
  • Padding unten/rechts (C): 0,7 rem; 14 px
  • Padding links (d): 0,35 rem; 7 px
  • Höhe Header (E): 1,45 rem; 29 px
  • Abstand Seperator-Label (F): 0,2 rem; 4 px
  • Höhe Seperator (G): 0,05 rem; 1 px

 

Schrift

  • Der Titel basiert auf FontHeadline.


Farben

  • Hintergrund ist ColorBright
  • Separator ist ColorDarkGrey
Zurück nach oben

Dockable Window  

Das Dockable Window gibt es in 2 Zuständen:

  • angedockt (DockableWindow ohne Rahmen)
  • abgedockt (DockableWindow mit Rahmen)

Ein Dockable Window fasst folgende Komponenten zusammen:

  • Der Header steht am oberen Rand und enthält einen Titel
  • Toolbar (optional)
  • Content

Container

Abstände

Der Container ist in der Höhe und Breite variabel. Im abgedockten Zustand hat das Dockable Window einen Rahmen (wie unten beschrieben). Im gedockten Zustand entfällt dieser Rahmen

  • Rahmen: 0,1 rem; 2 px

Farben

  • Content Hintergrund ist ColorBright
  • Rahmen ist ColorDefault

 

Header

Abstände

  • Breite (a): variabel
  • Höhe; Höhe/Breite Icon (B): 1,15 rem; 23 px
  • Abstand Label Unten (C): 0,35 rem; 7 px

 

Schrift

  • Das Label basiert auf FontHeadline mit folgenden Ausnahmen: Ausrichtung: Horizontal zentriert; Farbe: ColorBright

 

Farben

  • Enabled: Hintergrund Icon ist ColorDefault
  • Hover: Hintergrund Icon ist ColorHoverBackground
  • Active: Hintergrund Icon ist ColorActiveBackground; Hintergrund ist ColorDarkBackground

 

Toolbar

Abstände

  • Breite (a): variabel
  • Höhe (D): 1,75 rem; 35 px
  • Abstand Oben/Rechts/Links/Mitte (E): 0,3 rem; 6 px
  • Abstand Oben/Rechts/Links/Mitte (f): 0,25 rem; 5 px

UI-Elemente wie Drop-Down Listen oder Eingabefelder werden positioniert, wie in den Grafiken angegeben.
Alleinstehende Icons sitzen zentriert zum Control.

Tabelle  

Tabelle

Tabelle

Die Tabelle fasst folgende Komponenten zusammen:

  • Header
  • Content

Header

Abstände

  • Breite (a): variabel
  • Höhe (B): 1,15 rem; 23 px
  • Label Abstand Links (c): 0,5 rem; 10 px
  • Label Abstand Rechts (d): min. 0,5 rem; min. 10 px
  • Label Abstand unten (E): 0,3 rem; 6 px


Schrift

  • Label basiert auf FontHeadline

 

Content

Abstände

Das Icon sitzt in der Zelle immer horizontal und vertikal mittig.

  • Breite (a): variabel
  • Höhe (B): 1,1 rem; 22 px
  • Label Abstand Unten (C): 0,3 rem; 6 px
  • Label Abstand Links (d): 0,5 rem; 10 px
  • Label Abstand Rechts (e): min. 0,5 rem; min. 10 px
  • Abstand Icon Links/Rechts (f): min. 0,25 rem; min. 5 px

Eine Spalte kann von Nutzern nicht schmaler den Mindestabstand gemacht werden.

Schrift

  • Label im Zustand 'Enabled' , 'Selected': basiert auf FontDefault.
  • Label im Zustand 'Read Only' und 'Selected, Parent not Focused': basiert auf FontDefault mit folgenden Ausnahmen: Farbton: #6e6f70
  • Label im Zustand 'Zelle is Selected und Read Only': basiert auf FontDefault mit folgenden Ausnahmen: Farbton: #748687

Farben

  • Normal, Enabled: Hintergrund ist ColorBright
  • Read Only: Hintergrund ist #DADADA
  • Selected, Parents not Focused: Hintergrund ist #CFCFCF
  • Selected; Read Only: Hintergrund ist #CCEBEC; Rahmen ist ColorDefault
  • Selected: Hintergrund ist #CCEBEC; Rahmen ist ColorDefault
  • Focused, Read Only: Hintergrund ist ColorBlueGreen
  • Focused: Hintergrund ist ColorBlueGreen
  • Inactive: Hintergrund ist #F2F2F2
  • Inactive, Focused: Hintergrund ist #b2d9db
  • Inactive, Selected: Hintergrund ist #b2d9db; Rahmen ist ColorDefault

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect

Diese Webseite verwendet Cookies. Indem Sie weiter navigieren, stimmen Sie der Nutzung zu. Für weitere Informationen lesen Sie unsere Datenschutzerklärung.

Schließen