Bühnen

Homepage-Bühne mit Video und Navigation

Oben: Die Homepage-Bühne mit einer geöffneten Navigationsleiste. Elemente werden angezeigt. Unten: Die Homepage-Bühne mit einer geschlossenen Navigationsleiste. Elemente sind nicht sichtbar.

Homepage-Bühne mit Video und Navigation
Zurück nach oben

Interaktionskonzept einer Homepage-Bühne

Wenn ein Besucher die Webseite aufruft, ist der Navigations-Layer geöffnet und wird nach zwei Sekunden automatisch geschlossen.

  • Start-Animation: Navigationsleiste ist ausgeklappt. Das erste Bühnen-Video wird abgespielt.
  • Zeit: 0 Sekunden
  • Nach einer Verzögerung von zwei Sekunden wird die Navigationsleiste automatisch geschlossen

Wenn ein Nutzer mit dem Mauszeiger den sensitiven Navigationsbereich berührt, wird der Navigations-Layer geöffnet. Wird der Mauszeiger von der Navigationsleiste weg bewegt, schließt sich der Navigations-Layer.

Start-Animation:

  • Navigationsleiste wird angezeigt/nicht angezeigt
  • Animation: Navigationsleiste wird angezeigt/nicht angezeigt
  • Übergang: easeOutCubic
  • Zeit: 0,5 Sekunden

Eine schnelle Bewegung von der Bühne zum Teaser-Bereich soll den Layer nicht öffnen. Solang der Nutzer den Mauszeiger innerhalb des Layers bewegt, wird dieser nicht geschlossen.

Durch Mouseover wird eine Themenbox weiß hervorgehoben. Durch Klicken wechselt die Bühne und der Layer wird geschlossen.

  • Wechsel der Inhaltsanzeige

Animation:

  • Alpha von 100 bis 0% (vorheriger Inhalt)
  • Alpha von 0 bis 100% (nächster Inhalt)
  • Übergang: easeOutCubic
  • Zeit: 0,5 Sekunden

Homepage-Bühne mit statischem Inhalt

Homepage-Bühne mit statischem Inhalt
Zurück nach oben

Bühne einer Produkt-Einstiegsseite

Die „weiter“- und „zurück“-Pfeile sind zentriert.

Bühne einer Einstiegsseite – Produktseite
Zurück nach oben

Bühne einer Einstiegsseite (ohne Produkt)

Der Pfeil ist zentriert. Der Rahmen hat eine feste Größe. Die Hintergrundfarbe ist #ffffff, mit einer Opazität von 85 %.

Bühne einer Einstiegsseite – ohne Produkt
Zurück nach oben

Interaktionskonzept einer Bühne auf einer Einstiegsseite

Gelangt der Nutzer auf die Einstiegsseite, zeigt diese das Bild und den Text des ersten Navigationspunkts in der Liste.

Falls der Nutzer keine Aktion ausführt, wechselt die Bühne automatisch nach zwei Sekunden auf den nächsten Navigationspunkt.

Der entsprechende Navigationslink in der Liste wird unterstrichen dargestellt.

Klick der Nutzer auf den linken Pfeil auf der Bühne, wechselt das Thema. Der dazugehörige Link wird hervorgehoben.

Klick der Nutzer auf den rechten Pfeil auf der Bühne, wechselt das Thema. Der dazugehörige Link wird hervorgehoben.

Wird das letzte Thema angezeigt und der Nutzer klickt auf den rechten Pfeil, wird als nächstes das erste Thema der Liste angezeigt.

Wird das erste Thema angezeigt und der Nutzer klickt auf den linken Pfeil, wird als nächstes das letzte Thema der Liste angezeigt.

Bewegung des Bühneninhalts

  • Animation: horizontale Bewegung des Bühneninhalts entlang der Bühnenbreite
  • Übergang: easeOutCubic
  • Zeit: 0,5 Sekunden

Bewegt der Nutzer den Mauszeiger über einen Link, wechselt die Bühne nach 0,3 Sekunden.

Bewegt der Nutzer den Mauszeiger über einen Link, der näher am Anfang der Liste als der aktuelle Link ist, wechselt die Bühne von rechts nach links.

Ist der Link näher am Ende der Liste als der aktuelle Link, wechselt die Bühne von links nach rechts.

Klick der Nutzer von einem Link auf einen anderen, der sich in der Linkliste nicht direkt darüber oder darunter befindet, wechselt die Bühne direkt. Die Themen „zwischen“ den Links werden nicht in der Animation gezeigt (trotz Karussell).

Bühne einer Produkt-Unterkategorieseite

Der Link unterhalb vom Bühnentext ist an der Unterkante ausgerichtet.

Bühne einer Unterkategorieseite – Produktseite
Zurück nach oben

Bühne einer Unterkategorieseite (ohne Produkt)

Der Text in der Box ist unten ausgerichtet. Die Höhe der Box hängt vom Inhalt ab, aber beträgt maximal 228 Pixel.

Bühne einer Unterkategorieseite – ohne Produkt
Zurück nach oben

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines

Weitere Informationen

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

Schließen