professionelles Design eines extrem schlanken vertikalen Menüs

Ok, also ich bin Programmierer und eine absolute Katastrophe im Webdesign. Bisher konnte ich mit Hilfe von Frameworks wie Bootstrap "akzeptable" Looks erzeugen, aber ich hänge mit einem kleinen Seitenmenü fest. Das Beste, was mir eingefallen ist, ist folgendes:

Das schreckliche Menü

Es ist ein kleines Seitenmenü auf einer Seite, auf der Sie einen In-Browser-RDP-Client haben, also ist die Hauptanforderung, dass es SEHR schlank ist und vorzugsweise auf der linken Seite des Bildschirms schwebt (ändern Sie es in horizontal und kleben Sie es an die oberen Bildschirmrand ist keine Option). Es sollte auch IMMER sichtbar sein, also nicht erscheinen, wenn Sie mit der Maus über den richtigen Bereich fahren. Es enthält drei anklickbare Schaltflächen (MENU, KEYS, CLOSE). Und als Randbemerkung: Die Taste Tasten ist irgendwie lösungsspezifisch und im Kontext des Benutzers eine klare Beschreibung.

Meine Frage ist: Wie kann ich dieses Menü so gestalten, dass es die oben genannten Kriterien erfüllt, so schlank -> ~ 20 Pixel breit, immer sichtbar und trotzdem professionell und nicht störend aussehen? Ich würde mich sehr über jede Form von Rat und Tipps freuen!

Was genau bewirken die drei Optionen? Ich nehme an , Menü würde ein, nun ja, Menü mit weiteren RD-Optionen anzeigen; Würde Keys eine virtuelle Tastatur aufrufen? Geben Sie Ihnen eine Liste mit Tastenkombinationen, die Sie im RDP-Client verwenden können? Etwas anderes? Und schließt Close (wie ich annehme) die aktuelle RDP-Verbindung/Sitzung und meldet Sie im Wesentlichen ab? Und wenn meine Vermutungen richtig sind, gibt es einen bestimmten Grund, warum Sie Keys und Close eine so prominente (nicht eingebettete) Position gegeben haben, anstatt nur ein Menü mit allen Optionen zu haben? Wie viele Optionen enthält das Menü -Foldout?
@Janus Bahs Jacquet, die Sache ist, dass die meisten Benutzer nicht einmal mit Dingen wie dem Hamburger-Menüsymbol vertraut sind ... Ich bin mir sicher, dass ich Beschwerden und Fragen bekommen werde, wenn diese drei Dinge nicht immer sichtbar sind ... Aber ich Ich denke darüber nach, nur zu einem Schließen-Symbol und einem Hamburger-Symbol zu wechseln, das das Menü öffnet und die Schaltfläche für zusätzliche Tasten dorthin bewegt.
@larzz11 Hängt natürlich von Ihrer Benutzerbasis ab, aber das Hamburger-Symbol ist heutzutage so allgegenwärtig, dass ich wagen würde, fast alle Benutzer sind damit sehr vertraut.

Antworten (4)

Erwägen Sie die Verwendung etablierter UI-Muster wie das Burger-Menüsymbol oder einen Pfeil, um anzuzeigen, dass es ein Unentschieden oder ein Menü gibt. Das Symbol reicht aus, damit die Leute wissen, dass auf Navigation / Einstellungen geklickt werden muss.

Dies ist nur eine kurze Skizze, aber Sie können solche Symbole aus der Bootstraps-Bibliothek erhalten.

Mhm das ist eine gute Idee. Jetzt, wo ich darüber nachdenke, ist es ein bisschen übertrieben / überflüssig, ein Menü zu erstellen, in dem eine der Schaltflächen ein anderes Menü öffnet .... Es ist die Schließen-Schaltfläche, die ich jederzeit sichtbar sehen möchte, aber ich denke es könnte in das andere Menü verschoben werden und dann nur eine kleine Schaltfläche haben, die das größere Menü öffnet ....
Sie könnten nur ein X in einem Feld bis zur oberen linken Ecke setzen und dann das Menü so weit unten haben, dass es nicht versehentlich angeklickt wird. Manchmal entfernt Design einfach alles, bis es an seinen Grundelementen ist, und fügt dann nur ein wenig Politur hinzu. Ich denke, wir sind alle schuldig, Dinge zu überdenken :) Ich bin froh, dass es hilft.
„Manchmal bedeutet Design einfach, alles zu entfernen, bis es an seinen Grundelementen ist, und dann nur ein wenig Politur hinzuzufügen.“ Ich glaube, ich sollte das einrahmen :)
@ larzz11: Es ist (möglicherweise) eine Adaption des berühmten Zitats von St. Exupery:"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away"
@OlivierDulac Ich dachte, ich paraphrasiere jemanden :) Das ist das Einzige, was wirklich von der Universität hängen geblieben ist.

Geben Sie hier die Bildbeschreibung ein

Dies ist nur meine Ergänzung zu einer Ihrer Fragen in den Kommentaren zum Schließen-Button.

Wenn Sie ein Burger-Menü verwenden, sehen Sie normalerweise nicht immer die Schließen-Schaltfläche. Was passiert, ist, Sie klicken auf das Menüsymbol (Burger-Menü), das vollständige Menü wird geöffnet und auf die eine oder andere Weise ändert sich das Burger-Symbol in das Schließen-Symbol.

Wenn Sie auf die Schaltfläche „Schließen“ klicken, wird das Menü geschlossen und wechselt zurück zum Burger-Menü-Symbol.

Es sieht besser aus und Sie haben keine Schließen-Schaltfläche mehr, die nichts tut, wenn das Menü nicht geöffnet ist.

Eine Sache noch

Ich möchte erwähnen, dass eine Breite von 20 Pixel klein ist Geben Sie hier die Bildbeschreibung ein. Schlank ist das eine, aber auch unauffällig...das will man nicht.

Ich finde Dinge, die herumrutschen, wenn meine Maus in der Nähe ist, als enorm nervig
@GOROIE Nun, dann ist es gut, dass ich erwähnt habe, dass das Schließen-Symbol nur angezeigt wird, nachdem auf das Menü geklickt und nicht der Mauszeiger bewegt wurde , oder? Es wäre albern zu glauben, dass die Schließen-Schaltfläche angezeigt wird, wenn das Menüsymbol mit der Maus bewegt wird ... noch einmal, was würde es schließen, wenn dies der Fall wäre?!
Ich glaube, Sie missverstehen den Zweck der Schaltfläche "Schließen". Sofern ich die Frage nicht falsch verstehe, handelt es sich nicht um die Schaltfläche „Dieses erweiterte Menü schließen“. Vielmehr bietet das Menü verschiedene Optionen für Dinge, die Sie mit dem Remotedesktop-Client tun können, der die Hauptseite ist, und die Schaltfläche zum Schließen hier ist eine Schaltfläche zum Schließen der aktuellen Remotedesktopverbindung / -sitzung.

Sie könnten erwägen, ein Menü zu verwenden, das teilweise herausgleitet, wenn ein Benutzer seine Maus in der Nähe des Menüs hat, um visuellen Platz zu sparen.

Der Standardzustand:

Geben Sie hier die Bildbeschreibung ein

Wenn die Maus in der Nähe ist (mit Animation zum Übergang):

Geben Sie hier die Bildbeschreibung ein

Wenn Sie dies zulassen, können Sie es möglicherweise sogar weiter öffnen, wenn auf einen der Abschnitte geklickt wird.

Ich persönlich finde das problematisch. Sie müssen sicherstellen, dass nichts unter / in der Nähe des "Menüpfeils" angezeigt wird. Andernfalls könnten Sie versuchen, Text hervorzuheben und versehentlich das Menü öffnen. Klingt lästig. Wenn ein Menü geöffnet werden soll, lassen Sie mich entscheiden, wann ich es öffne, da ich mich ziemlich ärgere, wenn mein Computer glaubt, er wüsste, was ich will (wenn er es nicht tut). Dies ist jedoch nur meine Meinung.
@VinceEmigh es ist nicht wirklich mühsam sicherzustellen, dass sich nichts unter dem Menü befindet. Die Seite sollte sowieso immer einen Rand haben, also ist es kein wirkliches Problem, sicherzustellen, dass der Rand mindestens die Größe des Menüs hat.
@CAI Ich meinte nicht direkt unter dem Menü. Nicht jeder ist präzise in seinen Mausbewegungen, und ein Überschießen könnte dazu führen, dass Sie versehentlich das Menü öffnen, was dann die eigentlich gewünschten Daten verdecken kann. Websites haben zwar Ränder, aber Mäuse können durcheinander kommen und Benutzer können beim Bewegen ihrer Maus überschießen. Die Ränder der Website könnten groß genug gemacht werden, um ein offenes Menü zu berücksichtigen, aber das schränkt die Breite Ihres Menüs ein (möchten Sie nicht, dass die Ränder ZU groß sind).
Ich stimme Ihrem Standpunkt im Allgemeinen zu, aber die Frage besagt, dass das Menü ~ 20 Pixel breit sein muss, sodass ich in diesem Fall kein Problem sehe.

Da Sie Bootstrap verwenden, sollte es einfach sein, ein Glyphicon zu verwenden, um zu zeigen, dass es sich um ein Menü anstelle von Wörtern handelt.

<div><span class="glyphicon glyphicon-menu-hamburger"></span></div>

Zunächst sollten Sie bedenken, dass 20 Pixel viel zu schlank sind. es würde nur wie ein Punkt auf der Seite erscheinen, überhaupt nicht als etwas, das Benutzer zum Klicken einlädt. Ich schlage 50px vor. Es ist eine Standardgröße, die Benutzer erwarten und mit der sie sich wohlfühlen werden.

Geben Sie hier die Bildbeschreibung ein

Wenn es wirklich unmöglich ist, ein dickeres Menü zu verwenden, sollten Sie ein 50px/50px-Feld oben links auf dem Bildschirm verwenden.

Wenn Sie Wörter anstelle eines Symbols verwenden müssen, sollten Sie die Buchstaben auf keinen Fall untereinander setzen. Versuchen Sie, den Titel seitlich zu drehen (und verwenden Sie eine dünnere Schriftart).

professionelles Design eines extrem schlanken vertikalen Menüs
AntwortenHierDatenschutz-Bestimmungen1y, 0v