professionelles Design eines extrem schlanken vertikalen Menüs

7

Ok, ich bin ein Programmierer und eine völlige Katastrophe im Bereich Webdesign. Bis jetzt war ich in der Lage, mit Hilfe von Frameworks wie Bootstrap "akzeptable" Looks zu erstellen, aber ich bin mit einem kleinen Seitenmenü festgefahren. Das Beste, was ich mir einfallen lassen konnte, ist Folgendes:

Es ist ein kleines Seitenmenü auf einer Seite, auf der Sie einen RDP-Client im Browser haben. Die Hauptanforderung ist daher, dass er SEHR schlank ist und vorzugsweise auf der linken Seite des Bildschirms schwebt (ändern Sie ihn in horizontal und kleben Sie ihn an den Der obere Bildschirmrand ist keine Option. Es sollte auch jederzeit sichtbar sein, damit es nicht angezeigt wird, wenn Sie mit der Maus im rechten Bereich schweben. Es enthält drei anklickbare Schaltflächen (MENU, KEYS, CLOSE). Und als Randnotiz: Die Tasten sind lösungsspezifisch und eine klare Beschreibung im Kontext des Benutzers.

Meine Frage ist: Wie kann ich dafür sorgen, dass dieses Menü die oben genannten Kriterien erfüllt, so schlank -> ~ 20px breit, immer sichtbar und trotzdem professionell und nicht ablenkend? Ich würde mich über jede Art von Rat und Tipps sehr freuen!

website-design interface-design css

— larzz11
quelle

Was genau machen die drei Optionen? Ich gehe davon aus, dass das Menü ein Menü mit weiteren RD-Optionen anzeigen würde. Würden Keys eine virtuelle Tastatur aufrufen? Geben Sie eine Liste der Tastenkombinationen an, 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 and Close eine so herausragende (nicht eingebettete) Position gegeben haben, anstatt nur ein Menü mit allen Optionen zu haben? Wie viele Optionen gibt es im Menü- Foldout?

— Janus Bahs Jacquet

@ Janus Bahs Jacquet, die Sache ist, dass die meisten Benutzer nicht einmal mit Dingen wie dem Hamburger-Menü-Symbol so vertraut sind ... Ich bin sicher, dass ich Beschwerden und Fragen bekomme, wenn diese drei Dinge nicht immer sichtbar sind ... Aber ich Ich denke darüber nach, nur zu einem Schließsymbol und einem Hamburger-Symbol zu wechseln, die das Menü öffnen und die Taste für zusätzliche Tasten dorthin bewegen.

— Larzz11

@ larzz11 Hängt natürlich von Ihrer Benutzerbasis ab, aber das Hamburger-Symbol ist heutzutage so allgegenwärtig, dass ich wagen würde, dass fast alle Benutzer damit sehr vertraut sind.

— Janus Bahs Jacquet

8

Verwenden Sie etablierte UI-Muster wie das Burger-Menüsymbol oder einen Pfeil, um anzuzeigen, dass es ein Zeichnen oder Menü gibt. Das Symbol reicht aus, damit die Benutzer 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.

— Kaffee konsumieren
quelle

Mmm 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 Schaltfläche zum Schließen, die ich jederzeit sichtbar haben 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 ....

— larzz11

Sie könnten nur ein X in einem Feld bis zur oberen linken Ecke haben und dann das Menü so weit unten haben, dass es nicht versehentlich angeklickt wird. Manchmal entfernt das Design einfach alles, bis es an den Grundelementen ist, und fügt dann nur ein wenig Politur hinzu. Ich denke, wir sind alle schuldig, Dinge überlegt zu haben :) Ich bin froh, dass es hilft.

— Konsumieren Sie Kaffee

"Manchmal entfernt Design einfach alles, bis es an den Grundelementen ist, und fügt dann nur ein wenig Politur hinzu." Ich denke, ich sollte das einrahmen :)

— larzz11

@ larzz11: es ist (möglicherweise) aus St. Exuperys berühmtem Zitat angepasst:"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away"

— Olivier Dulac

@OlivierDulac Ich dachte, ich würde jemanden paraphrasieren :) Es ist das Einzige, was wirklich von der Universität abhängt.

— Konsumieren Sie Kaffee

1

Dies ist nur meine Antwort auf eine Ihrer Fragen in den Kommentaren zum Schließen-Button.

Wenn Sie ein Burger-Menü verwenden, sehen Sie normalerweise nicht immer die Schaltfläche zum Schließen. 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 Symbol schließen.

Wenn Sie auf die Schaltfläche zum Schließen klicken, wird das Menü geschlossen und es wird wieder das Burger-Menüsymbol angezeigt.

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

Eine Sache noch

Ich möchte erwähnen, dass 20px breit klein ist ... wie dieses kleine: und für mich ist es ein bisschen zu klein für eine gute Benutzererfahrung. Schlank ist eine Sache, aber auf der anderen Seite unbemerkt ... das willst du nicht.

— Alin
quelle

2

Ich finde Dinge, die

@GOROIE Nun, dann ist es gut, dass ich erwähnt habe, dass das Schließsymbol erst angezeigt wird, nachdem auf das Menü geklickt wurde und nicht über dem Mauszeiger , oder? Es wäre albern zu denken, dass die Schaltfläche zum Schließen angezeigt wird, wenn das Menüsymbol bewegt wird. Was würde es schließen, wenn dies der Fall wäre?!

— Alin

Ich glaube, Sie verstehen den Zweck der Schaltfläche "Schließen" falsch. 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, die Sie mit dem Remotedesktop-Client auf der Hauptseite ausführen können. Die Schaltfläche zum Schließen hier ist die Schaltfläche zum Schließen der aktuellen Remotedesktopverbindung / -sitzung.

— Janus Bahs Jacquet

1

Sie können ein Menü verwenden, das teilweise ausgeblendet wird, wenn ein Benutzer die Maus in der Nähe des Menüs hat, um visuellen Platz zu sparen.

Der Standardstatus:

Wenn sich die Maus in der Nähe befindet (Animation zum Übergang verwenden):

Wenn zulässig, können Sie es möglicherweise sogar weiter öffnen, wenn Sie auf einen der Abschnitte klicken.

— Zach Saucier
quelle

Persönlich finde ich das problematisch. Sie müssen sicherstellen, dass unter / in der Nähe des "Menüpfeils" nichts angezeigt wird. Andernfalls könnten Sie versuchen, Text hervorzuheben, und versehentlich das Menü öffnen. Klingt störend. Wenn ein Menü geöffnet werden soll, lassen Sie mich entscheiden, wann es geöffnet werden soll, da ich ziemlich verärgert bin, wenn mein Computer glaubt, dass er weiß, was ich will (wenn dies nicht der Fall ist). Dies ist jedoch nur meine Meinung.

— Vince Emigh

@VinceEmigh Es ist nicht wirklich mühsam sicherzustellen, dass sich nichts unter dem Menü befindet. Die Seite sollte sowieso immer einen Rand haben, so dass es kein Problem ist, sicherzustellen, dass der Rand mindestens der Größe des Menüs entspricht.

— Cai

@CAI Ich meinte nicht direkt unter dem Menü. Nicht jeder ist in seinen Mausbewegungen präzise, und ein Überschießen kann dazu führen, dass Sie versehentlich das Menü öffnen, wodurch die tatsächlich gewünschten Daten möglicherweise verdeckt werden. Websites haben zwar Ränder, aber Mäuse können durcheinander geraten und Menschen können beim Bewegen der Maus überschießen. Die Ränder der Site könnten groß genug sein, um ein offenes Menü zu berücksichtigen, aber das schränkt die Breite Ihres Menüs ein (ich möchte nicht, dass die Ränder zu groß sind)

— Vince Emigh

2

Ich stimme Ihrem Punkt im Allgemeinen zu, aber die Frage besagt, dass das Menü ~ 20px breit sein muss, damit ich in diesem Fall kein Problem sehe.

— Cai

0

Da Sie Bootstrap verwenden, sollte es einfach sein, ein Glyphikon 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 die Tatsache berücksichtigen, dass 20px viel zu schlank ist. Es scheint nur ein kleiner Punkt auf der Seite zu sein, der die Benutzer nicht zum Klicken einlädt. Ich schlage 50px vor. Es ist eine Standardgröße, die Benutzer erwarten und mit der sie vertraut sind.

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 anstelle eines Symbols Wörter verwenden müssen, sollten Sie die Buchstaben auf keinen Fall untereinander setzen. Versuchen Sie, den Titel zur Seite zu drehen (und verwenden Sie eine dünnere Schriftart).

— MJH
quelle