it-swarm.com.de

Responsive Design - 3-Ebenen-Navigation

Ich arbeite derzeit an einer Site mit einer recht komplexen Informationsarchitektur. Die IA hat 3 Ebenen und jede Ebene kann bis zu 12 Elemente enthalten.

  • Level 1: 4 Gegenstände
  • Stufe 2: Bis zu 12 Gegenstände
  • Level 3: bis zu 9 Gegenstände

Auf dem Desktop verwende ich ein Mega-Dropdown (z. B. Mashable ) und muss dieses für kleinere Bildschirme und Handys anpassen. Ich beschäftige mich gerade mit Konzepten und habe folgendes Beispiel gefunden: Multi-Level-Push-Menü

Wie würden Sie dieses Problem lösen und welches Muster würden Sie verwenden?

3
Leo

Ein weiteres zu berücksichtigendes Muster ist ein mehrstufiges Umschalten, wie hier dargestellt: http://codepen.io/bradfrost/full/qwJvF aus der ausgezeichneten Ressource This is Responsive . Eine andere interessante Idee ist das Subnav komplett überspringen .

Ich habe auch versucht, dieses Problem im Auge zu behalten, daher sind diese möglicherweise für Sie relevant:

Was auch immer Sie wählen, sollte durch Usability-Tests/Flurtests/was auch immer Sie sich leisten können, informiert werden.

Ein Abschiedsgedanke: " Offensichtlich gewinnt immer. "

enter image description here

1

jazZRo nahm die Wörter von meiner Tastatur. Ich wollte vorschlagen, zu untersuchen, was Mashable in einer reaktionsschnellen Ansicht tut, um zu sehen, was ihre Lösung ist.

Ich habe kürzlich eine clevere Alternative entdeckt, die Apple ( http://www.Apple.com/ )) - beachten Sie, dass Sie diese auf einem mobilen Gerät öffnen sollten Zeigen Sie es richtig an - wo sie immer noch alle Elemente der obersten Ebene behalten, aber Sie können sie alle durchdrehen, ohne das Navi neu strukturieren zu müssen.

Als Alternative zum High-Level verwendet die Website für die Rugby-Weltmeisterschaft eine zusammenklappbare Seitenleiste (Microsoft Azure verwendet diese für die Navigation, bei der jedes Element ein anderes Element daneben öffnet).Microsoft Azure

Ich denke, ihre Argumentation würde unter die Linie fallen, wenn ein Benutzer sich auf das Navi konzentriert, wird der Rest der Seite weniger wichtig.

1
J4G