Back to overview

Navigation

Navigation bar

Navigation bar  

Navigation bar

The icons in the navigation bar are centered vertically. They must not overlap with text. For this reason, only one icon is used on each page on smartphones. The text is cropped. The icons respond to tapping or clicking. They have the following states:

  • Normal: in this state the icon responds to user actions.
  • Active: the active state is displayed to indicate that the user has pressed this element. It remains set until the user removes their finger either from the touchscreen or from the clickable area.
  • Checked: for icons that switch between two states (e.g., on/off). The icon for showing the menu is set to Checked whenever the menu is displayed. If the menu is hidden, the icon is set to the state Unchecked.

The font is based on FontHeadline. It covers one line and is horizontally centered.

The background has the color ColorLightBackground and the lower border the color ColorRule.

  • Width (a): 100%
  • Height (B): 4.4 rem
  • Protected area at the top and bottom (C): 0.6 rem
  • Icon height and width: 3.2 rem
  • Spacing between icons (d): 1 rem
  • Height of the lower border (E): 0.05 rem
  • Width of the lower border: 100%

 

Back to top

Paging

Paging  

Paging

With paging, a distinction is made between the Normal and Checked states. They are indicated by different colors. In the Normal state the border is ColorBlueGreen and the background ColorBright. In the Checked state the border is ColorLineGrey and the background ColorBlueGreen.

  • Height and width of page (A): 0.6 rem
  • Upper and lower spacing (B): 1.7 rem
  • Spacing between pages (C): 0.4 rem
  • Page border: 0.05 rem
  • Total width: variable, 100% by default
  • Total height: 4 rem
Back to top

Panning area

Panning area  

Panning area

The panning area enables the user to scroll by swiping. It is important here that the “Content follows finger” interaction principle is observed.

“Flicking” is the act of swiping quickly in one direction. In this case the content scrolls quickly at first, then gradually slower until it stops. The starting speed depends on the speed of the gesture. The movement is natural. It gives the impression that the user has physically pushed the content, which gradually slows down. The scrolling speed is proportional to the speed at which the finger moves across the screen.


Colors:

  • Background: ColorLightBackground
  • Upper shading: color #0002223, opacity 0%
  • Lower shading: color #0002223, opacity 30%
  • Dividing line: ColorLineGray
Back to top
ElementDescription
Container
  • Width (a): variable, 100% by default
  • Height (B): variable, the height of the container depends on the content
  • Height of upper shading (C): 1.5 rem
  • Distance from upper content (K): 1.3 rem
  • Distance from lower content (L): 0.6 rem
Panning indicator

The scrolling area is fixed. It is not rotated. The user does not go back to the start by scrolling past the end. The scrolling movement stops once the end of the area is reached.

  • Upper spacing (E): 1.9 rem
  • Left and right spacing (f): 2.9 rem
Separator

If several panning areas are arranged one on top of the other, they are visually separated by a separator.

  • Width of dividing line (a): 100%
  • Height of dividing line (D): 0.05 rem

Panning indicator

A panning indicator is arranged horizontally or vertically. The panning indicator is not permanently visible. It is shown when the system recognizes a scrolling action. Once this action ends, the panning indicator is hidden again after a short pause.

The scroll indicator sits vertically centered on the base.

The width of the base is the width of the container minus the spacing. The width of the scroll indicator is calculated based on the ratio of the scrollable area to the visible area.

The ratio of the scroll indicator to scroll indicator base must equal the ratio of the visible to scrollable area. The width of the scroll indicator is at least 1 rem.

The panning indicator baseline has the color ColorTrackBase. The panning indicator scroll indicator has the color ColorBlueGreen.

  • Width (a): variable
  • Height of scroll indicator (B): 0.2 rem
  • Height of base (c): 0.1 rem
Back to top

Menu

Menu  

Menu

The menu consists of several components. There is just one title. This is located on the top border of the menu. The title text is defined by the application developer. Below it is a list. This can consist of one or more main entries. Main entries divide the entries into groups. A main entry contains at least one entry. After the user clicks on an entry the application opens the corresponding screen.

Alternatively, an entry may also open a submenu. A click on the entry moves the current menu left and off the screen and displays the submenu. The title is replaced by the option to navigate back. Clicking on the Back navigation restores the next highest menu (also animated).

 

Back to top
Mobile menu panning indicator  

Mobile menu panning indicator

If the menu is used on the right-hand side, it is mirrored horizontally.

  • Protected area on the left (A): 1 rem
  • Protected area on the right (B): 2 rem

The panning indicator has a width (a) of 1.1 rem and a variable height (B). The protected area (C) at the top and bottom corresponds to 0.05 rem.

The shading has a width (a) or 1.5 rem and a height of 100%. The background has the color ColorBright. The gradient has the color #002223 with an opacity of 0% on the left and the color #002223 with an opacity of 30% on the right.

Menu title  

Menu title spacing

Menu title

  • Width (a): 27.5 rem
  • Height (B): 4.4 rem
  • Protected area at the bottom (C): 1.5 rem
  • Protected area on the left (d): 2 rem

The title dividing line has a width (a) of 27.5 rem and a height (E) of 0.05 rem. The title is based on font FontHeadline. The background has the color ColorLightBackground and the dividing line the color ColorRule.

Back navigation  

Back navigation spacing

Back navigation

  • Width (a): 27.5 rem
  • Height (B): 4.4 rem
  • Protected area at the bottom (C): 0.6 rem
  • Protected area on the left (d): 1 rem
  • Height of dividing line (F): 0.05 rem

The text is centered vertically. In the Normal state the font is based on FontClickable and in the Checked or Active states on FontClickableHighlight. The background has the color ColorSoftBackground. The gradient has the color ColorRule.

Main entry  

Main entry spacing

Main entry

Main entries divide the menu into several sections. They have a unique label. There is at least one entry under a main entry.

  • Width (a): 24.5 rem
  • Height (B): 5 rem
  • Protected area at the bottom (C): 2 rem
  • Protected area on the left (d): 1.2 rem
  • Height (E): 0.05 rem
  • Protected area at the bottom (F): 0.2 rem

The text of the main entry is based on font FontHeadline with the color ColorLightText. The background has the color ColorSoftBackground and the gradient the color ColorRule.

Menu entry  

Menu entry spacing

Menu entry

Menu entries divide the menu into several sections. They have a unique label in relation to all entries in the menu.

  • Width (a): 24.5 rem
  • Height (B): 5 rem
  • Protected area at the bottom (C): 2 rem
  • Protected area on the left (d): 2.5 rem
  • Width of activity indicator (e): 0.5 rem
  • Height of dividing line (F): 0.05 rem

An icon can be added to an entry. When an entry opens a submenu, this must be identifiable by an arrow on the right-hand side.

  • Protected area at the top and bottom (G): 0.9 rem
  • Right and left spacing (h): 1.5 rem
  • Icon height and width (i): 3.2 rem

In the Normal state the font is based on FontClickable and in the Checked or Active states on FontClickableHighlight. The background has the color ColorSoftBackground and the gradient the color ColorRule.

 

Popover

Popover  

Popover spacing

A popover appears over the content on the screen in response to a user action. Only one popover may be open at any one time. If several popovers are available on one screen, the user can open a popover directly without having to close the previous one. The previous popover must close automatically. Every action outside the open popover closes the window.

The orientation of the arrow on the popover depends on the control from which it was opened. The arrow points to the respective control. It can therefore be shown on all four sides of the popover.

  • Protected area at the top and bottom (B): 1.2 rem
  • Protected area on the right and left (c): 1 rem
  • Border (all sides): 0.1 rem
  • Height and width: variable
  • Width of the arrowhead (d): 2 rem
  • Height of the arrowhead (E): 1 rem

The background has the color ColorBright. The border has the color Border. The dividing line between containers has the color ColorLineGray. The shading used (dropshadow effect in normal mode) has the color ColorBorder with an opacity of 100% (offset x/y: 0, blur: 5 pixels).

List entry

  • Line height (F): 5 rem
  • Protected area at the bottom (G): 2 rem
  • Protected area on the left (h): 0.4 rem
  • Protected area on the right (i): 0.7 rem

Multiple list entries are separated by a horizontal line. Its height (C) is 0.05 rem. The width is variable.

In the Normal state the font is based on FontClickable. In the Active and Visited states the font is based on FontClickableHighlight.

Back to top

Dialog

Dialog  

Dialog spacing

A dialog consists of a header with title on the top border, content, and an optional footer. A dialog appears over and covers the content on screen. The background is shaded.

Header

  • Width (a): variable
  • Height (B): 5 rem
  • Lower title spacing (C): 2 rem
  • Icon height and width (D): 3.2 rem
  • Left spacing (e): 1.3 rem
  • Lower spacing (F): 1 rem
  • Height (G): 0.05 rem

The font of the title is based on FontHeadline. It is centered horizontally. The background has the color ColorLightBackground and the dividing line the color ColorRule.

Content

  • Width (a): variable
  • Height (B): 5 rem
  • Protected area (H): 1.5 rem

The background has the color ColorBright.

Footer

  • Width (a): variable
  • Protected area (C): top 2 rem
  • Protected area (F): bottom 1 rem
  • Footer height (I): 7 rem

All buttons must have the same width. All of the buttons are centered horizontally on the background. The footer background has the color ColorBright. The shaded background has the color ColorDark with an opacity of 80%.

Back to top

Teaser tile

Teaser tile  

Teaser tile spacing

  • Width (a): variable
  • Height (B): variable
  • Protected area at the top, right, and left (C): 0.5 rem
  • Protected area at the bottom (D): 2.9 rem
  • Spacing between label and links (e): 0.8 rem


In the Normal state the font is based on FontClickable. In the Active state the font is based on FontClickableHighlight.

The background has the color ColorBright. In the Normal state the border has the color ColorBorder and in the Active state the color ColorLightText.

 

Back to top

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect