it-swarm.com.de

Wie heißt dieses Seitenmenü, das in vielen Multi-Touch-Apps enthalten ist, und woher stammt es?

Es kann zum Beispiel in der YouTube- und Facebook-App gefunden werden. enter image description hereenter image description here

86
Lenar Hoyt

Ich glaube, der Name dafür ist ein Hamburger-Menü , als Verweis auf das Symbol, das üblicherweise dafür verwendet wird (ux-hamburger-drawer-icon.333-tr.s20, ähnlich dem Unicode-Zeichen ≡ U+2261 Identical To) und auf die Stapelbarkeit der Gegenstände in der Schublade. Hamburger Drawer und Hamburger Sidebar wären ebenfalls erkennbare Begriffe für die UX-Community .


Ein bisschen Diskussion darüber, was meiner Meinung nach die richtige Verwendung des Begriffs ist:

Das Menü selbst ist nichts Neues; Seitenleistenmenüs mit Links zu verschiedenen Teilen einer App/Site wurden auf diese Weise seit dem frühen Web verwendet (und wahrscheinlich auch anderswo, vielleicht noch früher). Außerdem gibt es Schaltflächen, mit denen versteckte Inhalte umgeschaltet oder optional das Ziehen zum Anzeigen von Inhalten ermöglicht werden, viel länger als bei Touchscreen-Smartphones. Die Schublade in älteren Versionen von QuickTime Player und die Farbauswahl-Schublade von OS X sind gute Beispiele dafür.

Dieses Muster lässt sich am besten als Kombination aus Schubladenmenü und Anzeigen/Ausblenden von Schaltflächenmustern auf folgende Weise beschreiben:

  • Der Hauptinhalt wird aus dem Weg geräumt oder bleibt visuell darunter und zeigt die Schublade durch Tippen oder Ziehen mit der Taste.
  • Der Schubladeninhalt ist ein Metainhalt, der für den vorübergehenden Zugriff bestimmt ist (Navigationsschaltflächen, Chat-Kontaktliste usw.).
  • Durch Zurücktippen auf den teilweise sichtbaren Hauptinhaltsbereich wird die Schublade geschlossen.
  • Die Aktivierungsschaltfläche ist immer sichtbar und befindet sich in der Kopf-/Fußzeile der Navigation direkt neben der Seite, auf der die Schublade angezeigt wird.

Es gibt (natürlich) Varianten, die die oben genannten Richtlinien verbiegen - einige Implementierungen erlauben möglicherweise nur das Tippen (nicht Ziehen) der Schaltfläche, oder die Funktion zum Tippen zum Wiederherstellen des Hauptinhalts kann weggelassen werden, wenn dieselbe App auf einer größeren App angezeigt wird. Bildschirmgerät oder die Schublade kann seltsamerweise für etwas verwendet werden, das nicht anklickbar ist. Aus diesem Grund beschreiben die obigen Punkte die idealisierte und übliche Form des Musters, die schnell an Popularität und weit verbreitete Verwendung gewonnen hat.

Ich gehe davon aus, dass einer der Gründe, warum dieses Muster in dieser Form nicht früher aufgetaucht ist (und warum es eine Unterscheidung von anderen Mustern verdient), darin besteht, dass das UI-Design vor Touchscreen-Smartphones nicht annähernd so häufig auf Vollbild mit fester Größe beschränkt war. Aufgrund dieser neuen Einschränkung wurden das Konzept, dass der Hauptinhalt vorübergehend vom Bildschirm rutscht, und die Modalität des Menüs als notwendig erachtet. Daraus resultierten die Vorteile, unnötige visuelle Unordnung zu verbergen und ein Menü bereitzustellen, das beliebig lang sein kann Neugestaltung. Es hat wahrscheinlich auch geholfen, dass Apples UIToolbar-Ansatz einer "Mehr" -Taste ein Brauproblem nur zur Hälfte löste.


Der erste Ort, an dem ich mich erinnere, dass ich eine solche Seitenleistenschublade gesehen habe, war die inzwischen nicht mehr existierende Tweetie-App für das iPad. webOS hat auch schon seit einiger Zeit solche Schubladen, aber ich glaube, weder die Hamburger-Taste noch die Schubladengröße mit fester Breite verwendet. Ich habe keine eindeutige Antwort für Sie, aber the . Nummer . von . offen . Quelle . Bibliotheken . für . macht . diese . Art . von . Seitenleiste . Menüs . auf GitHub scheinen alle auf die Facebook iOS App zu verweisen, wie Sie erwähnt haben, und auf Path.

Ich nehme an, dass Facebook/Path-Style Sidebar/Menu/Drawer als ein Begriff dafür angesehen werden könnte, obwohl ich voraussage, dass die Verweise auf Firmennamen dies veralten würden bald zu lange.

81

Seitenwand Wie bereits erwähnt bei appadvice

Die App verfügt über eine hübsche Benutzeroberfläche und verwendet das Seitenfeld für die Navigation.

23
FrankL

Das Layoutmuster selbst (nicht das Burger-Symbol) ist als " Off Canvas " bekannt. Luke Wroblewski schrieb darüber in einem Artikel über Multi-Device Layout Patterns .

... das Muster Off Canvas für das Layout mit mehreren Geräten nutzt den Platz außerhalb des Bildschirms, um Inhalte oder Navigation so lange auszublenden, bis eine größere Bildschirmgröße dies zulässt Es soll sichtbar sein oder ein Benutzer ergreift Maßnahmen, um es verfügbar zu machen. Dieses Muster wird in einigen separaten Designs für mobile Websites und nativen mobilen Anwendungen angezeigt.

Es wurde in Frameworks wie Zurb Foundation implementiert.

Wenn Sie die iPhone-App von Facebook (oder Path oder eine beliebige Anzahl von Apps verwendet haben, die jetzt dieser Konvention folgen), haben Sie ein Bedienfeld außerhalb der Leinwand gesehen in einer nativen App. Sie drücken eine Taste und ein Bedienfeld wird von links eingeblendet (oder je nachdem, wie Sie es betrachten, wird das Hauptbedienfeld aus dem Weg geräumt).

Und in Artikeln wie Off The Beaten Canvas: Erkundung des Potenzials des Off-Canvas-Musters von Smashing Magazine behandelt:

Das Off-Canvas-Flyout-Menü wurde als primäres Navigationsmuster für mobile Layouts übernommen - sogar einige Desktop-Layouts sind an Bord gesprungen. Und das aus gutem Grund: Ein Off-Canvas-Menü ist eine großartige Möglichkeit, den Kontext beizubehalten und dem Benutzer viele zusätzliche Informationen zu geben.

22
Matt Obee

Um zu erklären, was @matt_d_rat geschrieben hat,

Es gibt eine großartige Zusammenfassung hier darüber, aber es wurde ursprünglich von Norm Cox für die Xerox Star-Workstation im Jahr 1981 entworfen! Dieses Symbol ist ungefähr so ​​alt wie das Konzept der GUI selbst!

Um es in Aktion zu sehen siehe dieses Video und springe zu ungefähr 21 Minuten.

Xerox Star Workstation - Hamburger Menu!

21
CBarr

Laut Android Developer Site und Google Design-Spezifikation ist es als Navigationsschublade bekannt.

12
Shruti

Aus einer verwandten Diskussion, die am Quora begann, ging Geoff Alday etwas tiefer in die Ursprünge der Ikone selbst ein und entdeckte, dass Norm Cox der Mann ist, dem das Design der Ikone für die persönliche Xerox Star-Workstation zugeschrieben wird. die 1981 eingeführt wurde.

In einem E-Mail-Gespräch zwischen Cox und Alday enthüllt Cox, wie das Symbol entstanden ist und unter welchen Designbeschränkungen sie gearbeitet haben. Während das Symbol heute liebevoll als Hamburger-Symbol bezeichnet wird, enthüllt Cox Xerox 'eigenen Insider-Witz für das Symbol.

Wir haben potenziellen Benutzern immer gesagt, dass das Bild eine "Entlüftungsöffnung" ist, um das Fenster kühl zu halten.

8
matt_d_rat

Seitennavigation ist ein vorgeschlagener Begriff, wie hier angegeben: http://www.androiduipatterns.com/2012/06/emerging-ui -pattern-side-navigation.html

Es lohnt sich zu lesen, warum dies die Navigationsmechanismen von Apps innovativ macht.

Es werden auch andere Kandidatenbegriffe aufgelistet:

  • Fly-In-App-Menü
  • Schieben Sie die Navigation heraus
  • Navigationsleiste schieben
  • Dia-Menü
4
Dvir Adler

Ich habe sowohl Hamburger-Menü als auch Fly-Out-Menü gehört. In meiner Arbeitsumgebung in Austin ist das Flyout-Menü der am häufigsten verwendete Begriff.

3
Tom

Dies würde als "Hamburger-Menü" bezeichnet.

Avid Media Composer (eine professionelle Videobearbeitungssuite, deren Benutzeroberfläche seit Jahrzehnten nicht geändert wurde) verfügt über Menüs mit einem ähnlichen Symbol, das sie als "Hamburgermenüs" bezeichnen. Es ist möglich, dass dies das ist Ursprung des Namens.

2
BrianMojo