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!
quelle
Antworten:
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.
quelle
"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away"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.
quelle
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.
quelle
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.
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).
quelle