Axure Tutorial: Wir bauen uns ein Akkordeon-Menü

Ein Akkordeon-Menü ist eine vertikal angeordnete Liste mit Überschriften, die bei Klick Inhalte anzeigen oder verbergen. Der Akkordeon-Effekte ist demzufolge eine gute Möglichkeit, viel Inhalt auf wenig Raum darzustellen und wird vorzugweise für mobile Systeme eingesetzt. Das Akkordeon-Menü ist eine von vielen Möglichkeiten, wie Inhalte in einer progressiven Art präsentiert werden können. Ganz im Sinn der Steuerbarkeit nach ISO 9241:10, denn wenn man den Nutzern ermöglicht, Kontrolle über den Inhalt zu haben, erlaubt man ihnen auch selbst zu entscheiden, was sie lesen und was sie ignorieren wollen.

Im heutigen Tutorial erkläre ich Ihnen wie Sie solch ein Akkordeon-Menü ganz einfach in Axure nachbauen können. Hierbei handelt es sich lediglich um eine von vielen Methoden ein Akkordeon-Menü zu erzeugen, welche sich in der Praxis bisher aber immer gut bewährt hat. Den dazugehörigen Download der Datei finden Sie übrigens hier.

1. Definition der Anforderungen

Ein Akkordeon-Menü kann unterschiedlich auf die Interaktion mit dem Nutzer reagieren. Legen Sie demzufolge vor dem Erstellen eines Akkordeon-Menü in Axure fest, wie Ihr Menü interagieren soll. In unserem Fall gestalten sich die Anforderungen wie folgt:

• Es soll immer nur ein Submenü offen und sichtbar sein (d. h. klickt ein Nutzer auf eine neue Hauptkategorie, müssen sich alle anderen Submenüs schließen).
• Ein Chevron-Icon soll dem Nutzer anzeigen, ob eine Kategorie geöffnet oder geschlossen ist. Dabei soll die Spitze des Icons entweder nach unten (geschlossen) oder nach oben (offen) zeigen.

2. Haupt- und Subkategorien mit Hilfe vom Box-Widget erstellen

Haben Sie Ihre Anforderungen an das Akkordeon-Menü definiert, geht es an die Erstellung in Axure. Der erste Schritt zielt darauf ab, dass Haupt- und Submenü mit Hilfe des Box-Widgets zu erstellen. Dafür ziehen Sie ein Box-Widget einfach mittels Drag-and-Drop aus der Library in die Arbeitsfläche von Axure. Weiterhin platzieren wir ein Chevron-Icon (geschlossen) an den rechten Rand des Box-Widgets der Hauptkategorie (siehe Screenshot). Das Chevron-Icon soll dem späteren Nutzer des Akkordeon-Menüs lediglich verdeutlichen ob ein Menüpunkt geöffnet ist oder nicht.
Tipp: Vergessen Sie dabei nie, alle Widgets eindeutig zu benennen! Das erleichtert das Implementieren von Interaktionen erheblich.

Abb. 1: Hauptmenü und Submenü werden mittels dem Box-Widget erstellt.

3. Umwandlung in Dynamic Pannels

Im folgenden Schritt wird das gesamte Submenü (in unserem Beispiel in der Farbe weiß) in ein Dynamic-Panel umgewandelt. Markieren Sie dafür alle Widgets des Submenüs und wählen Sie dann mittels Rechtsklick die Option „Convert to Dynamic Panel“ aus. Führen Sie anschießend den identischen Schritt für das Box-Widget der Hauptmenüs durch. Vergessen Sie auch nicht, die jeweiligen Panels eindeutig zu benennen!

Abb. 2: Haupt- und Submenü werden in Dynamic-Panel transformiert.

4. States des Dynamic Panels „Hauptkategorien”

Zu Beginn haben wir in unseren Anforderungen festgelegt, dass ein Chevron-Icon dem Nutzer anzeigen soll, ob eine Kategorie geöffnet (Chevron zeigt nach oben) oder geschlossen (Chevron zeigt nach unten) ist. Demzufolge ist es nun an der Reihe den Status zu erstellen sofern der Menüpunkt geöffnet ist.
Durch einen Doppelklick auf das Dynamic Panel öffnet sich ein Dialog, welcher zulässt einen neuen Status für das Dynamic-Panel zu definieren. Dafür klicken wir auf das „+“ im Dialog und benennen diesen Status „offen“. Den bereits vorhandenen State benennen wir hingegen mit „geschlossen“.

Abb. 3: Erzeugen Sie einen zusätzlichen State „offen“ für das Hauptmenü.

Im Panelstate „offen“ müssen wir nun das Chevron-Icon um 180 Grad drehen. Halten Sie dafür die STRG-Taste gedrückt und markieren das Icon. Nun können Sie das Icon durch eine Bewegung mit Ihrer Maus nach Belieben drehen.

Abb. 4: Drehen Sie das Chevron-Icon.

5. Kopieren und zusammenführen der Navigationselemente

Sie können das erzeugte Element aus Haupt- und Submenü nun kopieren, je nachdem wie viele Hauptkategorien Ihre Navigation besitzt. Im Beispiel arbeite ich mit 4 Menüpunkten.

Abb. 5: Das erzeugte Element kann nun einfach kopiert werden.

Anschließend werden die Submenüs auf „Hidden“ gesetzt, damit diese nicht dauerhaft sichtbar sind und nur auf Klick angezeigt werden. Auch hier markieren Sie einfach alle Submenüs und wählen via Rechtsklick die Option „Set Hidden“ aus. Auf der Arbeitsfläche werden Ihnen die versteckten Elemente nun gelb markiert angezeigt (siehe Screenshot).

Abb. 6: Die Submenüs werden auf „Set Hidden“ gesetzt.

Anschließend müssen die einzelnen Elemente aus Haupt- und Submenü übereinandergelegt werden, wie in der folgenden Abbildung zu sehen ist. Achten Sie beim Zusammensetzen auf eine saubere Ausführung. Bereits ein einzelner Pixel kann später das Interaktionsverhalten des Menüs behindern.

Abb. 7: Das Menü wird zusammengesetzt.

6. Einbinden des Interaktionsverhaltens

Nun geht es darum, den Elementen Leben einzuhauchen und die Interaktionen zu implementieren. Dafür öffnen wir das erste Dymanic-Panel des Hauptmenüs (Menu 1) im Status „geschlossen“. Mit unseren Interaktionen müssen wir nun dafür sorgen, dass a) sich das dazugehörige Submenü auf Klick öffnet b) sich ein anderes Submenü schließt, sofern dieses offen ist und c) sich das Chevron-Icon ändert (von geschlossen nach offen).
Das Öffnen des richtigen Submenüs erreichen wir mit dem Befehl on Click „Show Name des Submenüs“. Hierbei ist wichtig, dass wir zusätzlich die Option „Push widgets below“ aktiveren, damit alle anderen Widgets unter dem Submenü ebenfalls verschieben, sofern sich dieses öffnet.

Damit sich ein anderes Submenü (z. B. Submenu 3) bei einem Klick schließt, sofern dieses offen ist, müssen wir diese ausblenden. Dafür benutzen wir den Befehl „Hide Name des Submenüs“. Diesen Schritt müssen wir für alle Submenüs ausführen. Hierbei ist wichtig, jeweils die Option „pull widgets below“ zu aktiveren.
Damit sich das Chevron-Icon der Hauptkategorie dreht, müssen wir den Panelstate von „geschlossen“ auf „offen“ setzen. Dies erreichen wir durch den Befehl „Set Panel State“. Weiterhin müssen wir mit der selben Interaktion alle anderen Hauptkategorien auf den State „geschlossen“ setzen.

Abb. 8: Implementierung der Interaktionen.

Nun wechseln wir in den State „offen“ unserer Hauptkategorie und implementieren zwei Interaktion auf den Befehl „On Click“.

• Hide Submenu and pull widgets below

und

• Set Menu to geschlossen

Abb. 9: Interaktion für den State „offen“.

Wir sind mit der Implementierung der Interaktionen fast fertig. Nun müssen Sie die selben Interaktionen lediglich auf die anderen Menüpunkte übertragen. Das Prinzip bleibt dabei vollkommen gleich.