Erstellen Sie ein interaktives Dropdown-Menü in der Skizze mit Anima

In einem früheren Beitrag haben wir Ihnen gezeigt, wie Sie interaktive Optionsfelder erstellen. In diesem Handbuch zeigen wir Ihnen, wie Sie mit Anima ein interaktives Auswahlmenü in der Skizze erstellen.

Voraussetzungen:

  • Sketch App
  • Anima Toolkit [Herunterladen]
  • Skizzenbeispieldatei [Download]

Überblick:

  1. Erstellen Sie ein Auswahlmenü und seine Optionen
  2. Erstellen Sie eine Hover-Mikrointeraktion für Optionen
  3. Schachteln Sie die Mikrointeraktion im Auswahlmenü
  4. Einstellungsmenü für Interaktionen einrichten
  5. Erstellen Sie Interaktionen für jede Menüoption

Schritt 1: Bauen Sie es auf

Zuerst erstellen wir ein vollständig erweitertes Auswahlmenü mit seinem Dropdown-Container und machen es zu einem Symbol.

Als Nächstes erstellen wir die Optionsauswahl, zu der wir in Schritt 2 eine Hover-Interaktion hinzufügen werden. Dazu benötigen wir:

  • Eine Option Textbeschriftung
    • Ein weißer Hintergrund für den nicht ausgewählten Zustand (hoverOff)
    • Ein hellgrauer Hintergrund für den Select-Status (hoverOn)
    • Wandle es in ein Symbol um
    • Schritt 2: Erstellen Sie eine Hover-Mikrointeraktion

      Wählen Sie das Auswahloptionssymbol aus, und wechseln Sie im Anima-Plugin zu Prototyp> Interaktion> Erstellen.

      Im Interaktionseditor erstellen wir die beiden genannten Zustände, indem Sie Ebenen ausblenden und anzeigen:

      • state1 (hoverOff): Ausblenden "Option auswählen", "Nicht ausgewählte Option anzeigen"
        • state2 (hoverOn): Show 'Select Option', Ausblenden 'Unselected Option'
        • Da Sie nun zwei Zustände haben, verbinden Sie sie wie folgt:

        • Wählen Sie state1 aus und verbinden Sie es mit einem MouseEing-Ereignis mit state2
          • Wählen Sie state2 aus und verbinden Sie es mit einem Mouse-Leave-Ereignis mit state1
          • Schritt 3: Mikro-Interaktion verschachteln

            Da die Auswahloption ein Symbol ist, können wir diese Mikrointeraktion an jeder beliebigen Stelle verschachteln.

            Platzieren Sie 5 Instanzen dieser Mikrointeraktionen innerhalb des erweiterten Auswahlmenüs und überschreiben Sie jede Optionsbezeichnung.

            Schritt 4: Einstellungsmenü für Interaktionen einrichten

            Unser nächstes Ziel ist es, eine Interaktion zu erstellen, die die Beschriftung „Auswählen“ durch den Text der ausgewählten Menüoption ersetzt.

            Lassen Sie uns zunächst diese Interaktion einrichten:

            • Erstellen Sie eine Textebene und machen Sie sie zu einem Symbol mit dem Namen "Ausgewählte Option".
            • Erstellen Sie Instanzen des ausgewählten Optionssymbols und überschreiben Sie den Text mit den verfügbaren Optionen (Beispiel: Option 1–5).
              • Richten Sie sie hinter dem aktuellen Select-Label aus und blenden Sie sie aus
              • Schritt 5: Erstellen Sie Interaktionen für jede Menüoption

                Jetzt, da das Auswahlmenü abgeschlossen ist, fügen wir Interaktionen hinzu!

                1. Erstellen Sie für jede der möglichen Menüoptionen einen Status, indem Sie nicht benötigte Ebenen ausblenden, wie in der Abbildung oben gezeigt
                1. Wählen Sie in state1 die Select Group aus und verbinden Sie sie mit einem Click-Ereignis mit dem erweiterten Menü in state2
                  1. Wählen Sie in state2 die Select Group aus und verbinden Sie sie mit einem Klick auf state1, um das Menü zu schließen
                  2. Wählen Sie nacheinander die einzelnen Optionen im Dropdown-Menü aus und verbinden Sie sie mit dem Status, in dem sie ausgewählt sind. [Siehe GIF unten]
                  3. Wählen Sie schließlich in jedem Status, in dem eine Option ausgewählt ist, die Gruppe auswählen aus, und verbinden Sie sie wieder mit state2, so dass das Menü nach einer Auswahl wieder erweitert werden kann [siehe unten, GIF].
                  4. Schritt 5: Vorschau!

                    Klicken Sie auf „Komponente ausführen“ und beachten Sie, wie die verschachtelte Interaktion ausgelöst wird, wenn Sie mit der Maus über eine Option fahren. Beachten Sie auch, wie sich das Label auswählen in die von Ihnen gewählte Menüoption ändert.

                    Wenn Sie mit dem Auswahlmenü zufrieden sind, kehren Sie zum Bildschirm "Skizze" zurück und klicken Sie auf "Vorschau im Browser", um das vollständige interaktive Formular zum Leben zu erwecken.

                    Möchten Sie mehr erfahren?

                    • Erstellen eines High-Fidelity-Prototyping in Sketch
                    • So veröffentlichen Sie eine Website und hosten sie mit Anima
                    • Wie man Design-Spezifikationen an Entwickler weitergibt
                      • So exportieren Sie die Skizze in HTML
                      • Gruppenarbeit