Technologieaustausch

Axure-Tutorial: Interaktive Erstellung eines App-Side-Drawer-Menüs

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Heute zeige ich Ihnen, wie Sie das Schubladenmenü in Axure verwenden. Im Schubladenmenü müssen zwei interaktive Effekte erzielt werden, nämlich:

Interaktion eins

Der Skalierungseffekt der Menüelemente der Ebenen 1 und 2 im Schubladenmenü

Implementierungslogik: Festlegen des Schaltzustands des dynamischen Panels und „Push/Pull the Original“-Implementierung

Interaktion 2

Den ausgewählten Status eines Menüelements ändern

Logik implementieren: Den ausgewählten Status in der Hilfsansicht festlegen

Werfen wir einen Blick auf die Umsetzungsschritte:

Interaktion 1: Skalierungseffekt der Menüpunkte der Ebenen 1 und 2 im Schubladenmenü

Schritt 1

1. Ziehen Sie ein dynamisches Bedienfeld hinein und passen Sie die Größe des dynamischen Bedienfelds an.

2. Doppelklicken Sie auf das dynamische Bedienfeld, legen Sie den Namen des dynamischen Bedienfelds fest: „Menü 1“ und fügen Sie zwei dynamische Bedienfeldzustände mit den jeweiligen Namen hinzu: „Reduzieren“, „Erweitern“.

Schritt 2

1. Doppelklicken Sie auf den gefalteten Status, um die Statusseite „gefaltet“ aufzurufen

2. Ziehen Sie ein Rechteck auf die Seite und legen Sie den Namen auf „Menü 1-Reduzieren“ fest. Ändern Sie die Größe von Menü 1 und geben Sie den Text „Menü 1“ ein.

3. Ziehen Sie das Dropdown-Pfeilbild und passen Sie die Größe an

Schritt 3

Fügen Sie die Mouseover- und Auswahlstile von „Menü 1 – Reduzieren“ hinzu und legen Sie die Schriftfarbe: Blau bzw. die Füllfarbe: Hellgrau fest.

Schritt 4

Anwendungsfall beim Festlegen des Mausklicks des Rechtecks ​​„Menü 1-Reduzieren“:

Wählen Sie die Aktion „Panel-Status wechseln“, legen Sie „Menü 1“ fest, um in den Status „Erweitert“ zu wechseln, und wählen Sie das Attribut „Push/Pull-Komponente“ aus.

Schritt 5

1. Kopieren Sie den Inhalt des Status „Einklappen“ des dynamischen Panels auf die Statusseite „Erweitert“.

2. Ändern Sie auf der Statusseite „Erweitern“ den Namen des Rechtecks ​​in „Menü 1-Erweitern“.

Interaktion 2: Wechseln des ausgewählten Status von Menüelementen

Schritt 6

1. Kopieren Sie „Menü 1-Erweitern“ als Untermenü, ändern Sie den Text der Namenskomponente und benennen Sie es: Untermenü 1

2. Legen Sie das Mausklickereignis von Untermenü 1 fest, wählen Sie die Aktion „Auswahl festlegen“ und konfigurieren Sie die aktuelle Komponente, die ausgewählt werden soll.

Schritt 7

1. Kopieren Sie mehrere Untermenüs stapelweise, ändern Sie den Text und benennen Sie sie entsprechend.

2. Nachdem Sie alle Untermenüs ausgewählt haben, legen Sie den Namen der Auswahlgruppe fest: 1

Vorschau, um den Effekt zu sehen.